[
  {
    "path": ".editorconfig",
    "content": "# EditorConfig helps developers define and maintain consistent\n# coding styles between different editors and IDEs\n# editorconfig.org\n\nroot = true\n\n[*]\n\nindent_style = space\nindent_size = 2\n\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_whitespace = true\ninsert_final_newline = true\n"
  },
  {
    "path": ".eslintrc.json",
    "content": "{\n  \"extends\": [\"@react-native-community\", \"prettier\"],\n  \"rules\": {\n    \"prettier/prettier\": [\n      \"error\",\n      {\n        \"quoteProps\": \"preserve\",\n        \"singleQuote\": true,\n        \"tabWidth\": 2,\n        \"trailingComma\": \"es5\",\n        \"useTabs\": false\n      }\n    ],\n    \"no-bitwise\": 0,\n    \"prefer-const\": \"warn\",\n    \"no-console\": [\"error\", { \"allow\": [\"warn\", \"error\"] }]\n  },\n  \"plugins\": [\"prettier\"]\n}\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/bug_report.yml",
    "content": "name: 'Bug Report'\ndescription: 'File a bug report'\nlabels: ['v3', 'bug', 'triage']\nbody:\n  - type: 'markdown'\n    attributes:\n      value: |\n        ### Before reporting this bug, please...\n        1. Check the latest documentation: https://docs.nativebase.io/\n        2. Check for existing open/closed issues for a possible duplicate before creating a new issue: https://github.com/GeekyAnts/NativeBase/issues\n        3. Use the latest NativeBase release: https://github.com/GeekyAnts/NativeBase/releases\n        4. Check examples from NativeBase KitchenSink https://github.com/GeekyAnts/NativeBase-KitchenSink\n        5. For discussion purpose make use of NativeBase discord: https://discord.gg/TSgCw2UPmb\n\n        ### Help us help you better\n  - type: 'input'\n    id: 'description'\n    attributes:\n      label: 'Description'\n      description: 'A clear and concise description of what you expected to happen.'\n      placeholder: |\n        What's the bug? And why it's a bug?\n    validations:\n      required: true\n  - type: 'input'\n    id: 'reproduction'\n    attributes:\n      label: 'CodeSandbox/Snack link'\n      description: |\n        It would be easier for us to debug if you can reproduce the error in a codesandbox link or a snack link. You can use the [codesandbox template](https://codesandbox.io/s/native-base-v3-template-mq6ox)/[snack template](https://snack.expo.io/@mdrehman/nativebase-template).\n      placeholder: 'https://codesandbox.io/  or   https://snack.expo.dev/'\n    validations:\n      required: true\n  - type: 'textarea'\n    id: 'steps'\n    attributes:\n      label: 'Steps to reproduce'\n      description: |\n        Let us know how we reproduce it too.\n      value: |\n        1. Go to '...' \n        2. Click on '...' \n        3. Scroll down to '...' \n        4. See error\n  - type: 'input'\n    id: 'nativebase-version'\n    attributes:\n      label: 'NativeBase Version'\n      description: 'The version of NativeBase you use.'\n      placeholder: '3.3.1'\n    validations:\n      required: true\n  - type: 'checkboxes'\n    id: 'platform'\n    attributes:\n      label: 'Platform'\n      description: 'The platform(s) this issue occurred on'\n      options:\n        - label: 'Android'\n        - label: 'CRA'\n        - label: 'Expo'\n        - label: 'iOS'\n        - label: 'Next'\n  - type: 'input'\n    id: 'other-platform'\n    attributes:\n      label: 'Other Platform'\n      description: 'Any other platform besides the above one(s)'\n      placeholder: 'extra platform(s)'\n  - type: 'textarea'\n    id: 'additional-information'\n    attributes:\n      label: 'Additional Information'\n      description: |\n        Use this section to provide any additional information you might have like screenshots, notes, or links to ideas.\n      placeholder: 'Any and every additional information is always welcome'\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/config.yml",
    "content": "blank_issues_enabled: false\ncontact_links:\n  - name: Join us on Discord\n    url: https://discord.gg/kcbuQWQv\n    about: Be the part of the community\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/feature_request.yml",
    "content": "name: 'Feature Request'\ndescription: 'Request a feature or enhancement'\nlabels: ['v3', 'feature request', 'triage']\nbody:\n  - type: 'markdown'\n    attributes:\n      value: |\n        Thanks for filing an issue!\n\n        Please search open/closed issues before submitting. Someone might have asked the same thing before!\n\n        ### Help us help you better\n  - type: 'textarea'\n    id: 'description'\n    attributes:\n      label: 'Description'\n      description: 'Describe your request as clearly as possible.'\n      placeholder: \"We'll love to know in depth about this feature\"\n    validations:\n      required: true\n  - type: 'textarea'\n    id: 'justification'\n    attributes:\n      label: 'Problem Statement'\n      description: |\n        Please provide valid reason(s) why this should be a part of NativeBase\n\n        Does this feature meant to solve an existing problem, if so please mention it as well.\n      placeholder: 'Tell us What? Why? and How?'\n    validations:\n      required: true\n  - type: 'textarea'\n    id: 'proposed-solution'\n    attributes:\n      label: 'Proposed Solution or API'\n      description: |\n        Please provide code snippets, gists, or links to the ideal design or API.\n      placeholder: \"We know whatever you're it is, its awesome\"\n    validations:\n      required: true\n  - type: 'textarea'\n    id: 'alternatives'\n    attributes:\n      label: 'Alternatives'\n      description: |\n        What alternative solutions have you considered before making this request?\n      placeholder: 'Please share if you know any alternative solutions as well'\n  - type: 'textarea'\n    id: 'additional-information'\n    attributes:\n      label: 'Additional Information'\n      description: |\n        What resources (links, screenshots, etc.) do you have to assist this effort?\n      placeholder: 'Any and every additional information is always welcome'\n"
  },
  {
    "path": ".github/auto_assign.yml",
    "content": "# Set to true to add reviewers to pull requests\naddReviewers: true\n\n# Set to true to add assignees to pull requests\naddAssignees: false\n\n# A list of reviewers to be added to pull requests (GitHub user name)\nreviewers:\n  - surajahmed\n  - rayan1810\n\n# A number of reviewers added to the pull request\n# Set 0 to add all the reviewers (default: 0)\nnumberOfReviewers: 1\n# A list of assignees, overrides reviewers if set\n# assignees:\n#   - assigneeA\n\n# A number of assignees to add to the pull request\n# Set to 0 to add all of the assignees.\n# Uses numberOfReviewers if unset.\n# numberOfAssignees: 2\n\n# A list of keywords to be skipped the process that add reviewers if pull requests include it\n# skipKeywords:\n#   - wip\n"
  },
  {
    "path": ".github/pull_request_template.md",
    "content": "<!-- Thanks for submitting a pull request! We appreciate you spending the time to work on these changes. Please provide enough information so that others can review your pull request. The three fields below are mandatory. -->\n\n## Summary\n\n<!-- Explain the **motivation** for making this change. What existing problem does the pull request solve? -->\n\n## Changelog\n\n<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:\nhttps://github.com/facebook/react-native/wiki/Changelog\n-->\n\n[CATEGORY] [TYPE] - Message\n\n## Test Plan\n\n<!-- Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes the user interface. -->\n"
  },
  {
    "path": ".github/workflows/build.yml",
    "content": "name: Build\n\non:\n  push:\n    branches:\n      - master\n\n\njobs:\n  build:\n    name: Build\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v3\n        with:\n          fetch-depth: 0  # Shallow clones should be disabled for a better relevancy of analysis\n      - uses: sonarsource/sonarqube-scan-action@master\n        env:\n          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}\n          SONAR_HOST_URL: ${{ secrets.SONAR_HOST_URL }}\n      # If you wish to fail your job when the Quality Gate is red, uncomment the\n      # following lines. This would typically be used to fail a deployment.\n      # - uses: sonarsource/sonarqube-quality-gate-action@master\n      #   timeout-minutes: 5\n      #   env:\n      #     SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}\n"
  },
  {
    "path": ".gitignore",
    "content": "# OSX\n#\n.DS_Store\n\n# XDE\n.expo/\n\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/IJ\n#\n.idea\n.gradle\nlocal.properties\nandroid.iml\n\n# Cocoapods\n#\nRNBareExample/ios/Pods\n\n# node.js\n#\nnode_modules/\nnpm-debug.log\nyarn-debug.log\nyarn-error.log\n\n# BUCK\nbuck-out/\n\\.buckd/\nandroid/app/libs\nandroid/keystores/debug.keystore\n\n# Expo\n.expo/*\n\n# generated by bob\nlib/\nsrc/jest/mock.ts\nnode_modules\n\n# personal \n.env\n.npmrc"
  },
  {
    "path": ".npmignore",
    "content": "# Dotfiles\n.babelrc\n.eslintignore\n.eslintrc.json\n.gitattributes\n_config.yml\n\n# Documents\nCONTRIBUTING.md\nISSUE_TEMPLATE.txt\nimg\n\n# Test cases\n__tests__\ndist/__tests__\n\n# Example\nexample/\nexpo-example/\nnext-example/\nRNBareExample/\n"
  },
  {
    "path": ".nvmrc",
    "content": "v16.13.0\n"
  },
  {
    "path": ".prettierrc",
    "content": "{\n    \"singleQuote\": true,\n    \"jsxBracketSameLine\": false,\n    \"useTabs\": false,\n    \"eslintIntegration\": false,\n    \"tslintIntegration\": true,\n    \"parser\": \"typescript\",\n    \"requireConfig\": false,\n    \"stylelintIntegration\": false\n}"
  },
  {
    "path": ".vscode/settings.json",
    "content": "{\n  \"javascript.validate.enable\": true,\n  \"eslint.format.enable\": false,\n  \"eslint.run\": \"onType\",\n  \"tslint.enable\": false,\n  \"tslint.autoFixOnSave\": true,\n  \"flow.enabled\": false,\n  \"editor.tabSize\": 2,\n  \"editor.insertSpaces\": true,\n  \"editor.formatOnSave\": true,\n  \"flow.useNPMPackagedFlow\": true,\n  \"editor.formatOnPaste\": false,\n  \"prettier.jsxSingleQuote\": true,\n  \"prettier.singleQuote\": true,\n\n  // Path to a .prettierignore or similar file\n  \"prettier.ignorePath\": \".prettierignore\",\n  // If true, puts the `>` of a multi-line jsx element at the end of the last line instead of being alone on the next line\n  \"editor.wordWrap\": \"on\"\n}\n"
  },
  {
    "path": "CODE_OF_CONDUCT.md",
    "content": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, we as\ncontributors and maintainers pledge to making participation in our project and\nour community a harassment-free experience for everyone, regardless of age, body\nsize, disability, ethnicity, gender identity and expression, level of experience,\nnationality, personal appearance, race, religion, or sexual identity and\norientation.\n\n## Our Standards\n\nExamples of behavior that contributes to creating a positive environment\ninclude:\n\n- Using welcoming and inclusive language\n- Being respectful of differing viewpoints and experiences\n- Gracefully accepting constructive criticism\n- Focusing on what is best for the community\n- Showing empathy towards other community members\n\nExamples of unacceptable behavior by participants include:\n\n- The use of sexualized language or imagery and unwelcome sexual attention or\n  advances\n- Trolling, insulting/derogatory comments, and personal or political attacks\n- Public or private harassment\n- Publishing others' private information, such as a physical or electronic\n  address, without explicit permission\n- Other conduct which could reasonably be considered inappropriate in a\n  professional setting\n\n## Our Responsibilities\n\nProject maintainers are responsible for clarifying the standards of acceptable\nbehavior and are expected to take appropriate and fair corrective action in\nresponse to any instances of unacceptable behavior.\n\nProject maintainers have the right and responsibility to remove, edit, or\nreject comments, commits, code, wiki edits, issues, and other contributions\nthat are not aligned to this Code of Conduct, or to ban temporarily or\npermanently any contributor for other behaviors that they deem inappropriate,\nthreatening, offensive, or harmful.\n\n## Scope\n\nThis Code of Conduct applies both within project spaces and in public spaces\nwhen an individual is representing the project or its community. Examples of\nrepresenting a project or community include using an official project e-mail\naddress, posting via an official social media account, or acting as an appointed\nrepresentative at an online or offline event. Representation of a project may be\nfurther defined and clarified by project maintainers.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be\nreported by contacting the project team at support@nativebase.io. All\ncomplaints will be reviewed and investigated and will result in a response that\nis deemed necessary and appropriate to the circumstances. The project team is\nobligated to maintain confidentiality with regard to the reporter of an incident.\nFurther details of specific enforcement policies may be posted separately.\n\nProject maintainers who do not follow or enforce the Code of Conduct in good\nfaith may face temporary or permanent repercussions as determined by other\nmembers of the project's leadership.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,\navailable at [http://contributor-covenant.org/version/1/4][version]\n\n[homepage]: http://contributor-covenant.org\n[version]: http://contributor-covenant.org/version/1/4/\n"
  },
  {
    "path": "CONTRIBUTING.md",
    "content": "# Contributing to NativeBase\n\nWe'd love for you to contribute to our source code and to make NativeBase even better than it is\ntoday! Here are some guidelines we'd like you to follow:\n\n- [Code of Conduct](#coc)\n- [Ways to Contribute](#wtc)\n- [Questions and Problems](#question)\n- [Issues and Bugs](#issue)\n- [Feature Requests](#feature)\n- [Issue Submission Guidelines](#submit)\n- [Setting Up Development Environment ](#dev-env)\n- [Pull Request Submission Guidelines](#submit-pr)\n- [Improving Documentation](#docs)\n\n## <a name=\"coc\"></a> Code of Conduct\n\nHelp us keep NativeBase open and inclusive. Please read and follow our [Code of Conduct](CODE_OF_CONDUCT.md).\n\n## <a name=\"wtc\"></a> Ways to Contribute\n\nIf you are eager to start contributing code right away, you can go through [NativeBase Bugs](https://github.com/GeekyAnts/NativeBase/issues?q=is%3Aopen+is%3Aissue+label%3Abug) that contain bugs.\n\nThere are other ways you can contribute without writing a single line of code. Here are a few things you can do to help out:\n\n1. **Replying and handling open issues.** We get a lot of issues every day, and some of them may lack necessary information. You can help out by guiding people through the process of filling out the issue template, asking for clarifying information, or pointing them to existing issues that match their description of the problem.\n2. **Reviewing pull requests for the docs.** Reviewing [documentation updates](https://github.com/GeekyAnts/nativebase-docs/pulls) can be as simple as checking for spelling and grammar. If you encounter situations that can be explained better in the docs, click **Edit** at the bottom left of most docs pages to get started with your own contribution.\n3. **Help people write test plans.** Some pull requests sent to the main repository may lack a proper test plan. These help reviewers understand how the change was tested, and can speed up the time it takes for a contribution to be accepted.\n\nEach of these tasks is highly impactful, and maintainers will greatly appreciate your help.\n\n## <a name=\"requests\"></a> Questions, Bugs, Features\n\n### <a name=\"question\"></a> Got a Question or Problem?\n\nDo not open issues for general support questions as we want to keep GitHub issues for bug reports\nand feature requests. You've got much better chances of getting your question answered on dedicated\nsupport platforms, the best being [Stack Overflow](http://stackoverflow.com/questions/tagged/native-base).\n\nStack Overflow is a much better place to ask questions since:\n\n- there are thousands of people willing to help on Stack Overflow\n- questions and answers stay available for public viewing so your question / answer might help\n  someone else\n- Stack Overflow's voting system assures that the best answers are prominently visible.\n\nTo save your and our time, we will systematically close all issues that are requests for general\nsupport and redirect people to the section you are reading right now.\n\n### <a name=\"issue\"></a> Found an Issue or Bug?\n\nIf you find a bug in the source code, you can help us by submitting an issue to our\n[GitHub Repository](https://github.com/GeekyAnts/NativeBase/issues). Even better, you can submit a Pull Request with a fix.\n\n**Please see the [Submission Guidelines](#submit) below.**\n\n### <a name=\"feature\"></a> Missing a Feature?\n\nYou can request a new feature by submitting an issue to our [GitHub Repository](https://github.com/GeekyAnts/NativeBase/issues).\n\nIf you would like to implement a new feature then consider what kind of change it is:\n\n- **Major Changes** that you wish to contribute to the project should be discussed first in an\n  [GitHub issue](https://github.com/GeekyAnts/NativeBase/issues) that clearly outlines the changes and benefits of the feature.\n- **Small Changes** can directly be crafted and submitted to the [GitHub Repository](https://github.com/GeekyAnts/NativeBase)\n  as a Pull Request. See the section about [Contributing Code](#submit-pr).\n\n## <a name=\"submit\"></a> Issue Submission Guidelines\n\nBefore you submit your issue search the archive, maybe your question was already answered.\n\nIf your issue appears to be a bug, and hasn't been reported, open a new issue. Help us to maximize\nthe effort we can spend fixing issues and adding new features, by not reporting duplicate issues.\n\nThe \"[new issue](https://github.com/GeekyAnts/NativeBase/issues/new)\" form contains a number of prompts that you should fill out to\nmake it easier to understand and categorize the issue.\n\nIn general, providing the following information will increase the chances of your issue being dealt\nwith quickly:\n\n- **Issue Description** - if an error is being thrown a non-minified stack trace helps\n- **Motivation for or Use Case** - explain why this is a bug for you\n- **NativeBase Version(s)** - is it a regression?\n- **Browsers and Operating System** - is this a problem with all browsers or only specific ones?\n- **Reproduce the Error** - provide a live example (using [expo snack](https://snack.expo.io/) or an unambiguous set of steps.\n- **Related Issues** - has a similar issue been reported before?\n- **Suggest a Fix** - if you can't fix the bug yourself, perhaps you can point to what might be\n  causing the problem (line of code or commit)\n\n## <a name=\"dev-env\"></a> Setting Up your Development Environment\n\n- Fork this repository.\n\n- Clone your fork of NativeBase:\n\n  ```git\n  git clone git@github.com:${YOUR_USERNAME}/NativeBase.git\n  ```\n\n- Navigate to NativeBase\n\n  ```\n  cd NativeBase/\n  ```\n\n- Add main repo remote:\n\n  ```git\n  git remote add nativebase git@github.com:GeekyAnts/NativeBase.git\n  ```\n\n- Install dependencies:\n\n  ```bash\n  yarn\n  ```\n\n- Move over to the TestBed Example App and install the dependencies :\n\n  ```bash\n  cd example\n  yarn\n  ```\n\n- Navigate back to your app:\n\n  ```bash\n  cd ..\n  ```\n\n- Start the Example App:\n\n  ```bash\n  yarn example start\n  ```\n\n  - To start app directly on Web\n    ```bash\n    yarn example web\n    ```\n  - To start app directly on IOS\n    ```bash\n    yarn example ios\n    ```\n  - To start app directly on Android\n    ```bash\n    yarn example android\n    ```\n\nand start making the changes.\n\n## <a name=\"submit-pr\"></a> Contributing Code\n\nCode-level contributions to NativeBase come in the form of [pull requests](https://help.github.com/en/articles/about-pull-requests). These are done by forking the repo and making changes locally. Directly in the repo, there is the [`Storybook Testbed` app](/example) that you can run on your device (or simulators) and use to test the changes you're making to NativeBase source.\n\nThe process of proposing a change to NativeBase can be summarized as follows:\n\n1. Fork the NativeBase repository and create your branch from `master`.\n2. Make the desired changes to NativeBase source. Use the `Storybook Testbed` app to test them out.\n3. If you've added code that should be tested, add tests.\n4. If you've changed APIs, update the documentation, which is available [here](https://github.com/GeekyAnts/nativebase-docs).\n5. Ensure the test suite passes, either locally or on CI once you opened a pull request.\n6. Make sure your code lints. To keep project away from disputes we make use of **ESLint**, which is really a handy linting tool that enforces strict coding styles and makes sure your files are free from dead code. Each module of NativeBase has bundled ESLint as a dev dependency and checks your code everytime you commit.\n7. Push the changes to your fork.\n8. Create a pull request to the NativeBase repository.\n9. Review and address comments on your pull request.\n\nIf all goes well, your pull request will be merged. If it is not merged, maintainers will do their best to explain the reason why.\n\n## <a name=\"docs\"></a> Helping with Documentation\n\nThe NativeBase documentation is hosted as part of the NativeBase website repository at https://github.com/GeekyAnts/nativebase-docs. The website itself is located at <https://alpha.nativebase.io/> and it is built using [Docusaurus V2](https://v2.docusaurus.io/). If there's anything you'd like to change in the docs, you can get started by clicking on the \"Edit\" button located on the bottom left of most pages on the website.\n"
  },
  {
    "path": "LICENSE",
    "content": "The MIT License (MIT)\n\nCopyright (c) 2021 GeekyAnts India Pvt Ltd\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of\nthis software and associated documentation files (the \"Software\"), to deal in\nthe Software without restriction, including without limitation the rights to\nuse, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of\nthe Software, and to permit persons to whom the Software is furnished to do so,\nsubject 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, FITNESS\nFOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR\nCOPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER\nIN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN\nCONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "# ⛔️ DEPRECATED\n# NativeBase ↔ gluestack\n\n> 🚀 NativeBase is evolving into gluestack-ui! What was planned as NativeBase v4 is now available as gluestack-ui - our next-generation component library built for better performance, enhanced customization, and improved developer experience. Visit [gluestack.io](http://gluestack.io) to get started!\n\n## Important Notice: Evolution to gluestack-ui\n\nNativeBase is entering maintenance mode as we evolve into gluestack-ui. This transition represents our commitment to providing the React Native community with more powerful, flexible, and performant UI components. If you are starting a new project with NativeBase, we recommend using [gluestack-ui](https://ui.gluestack.io/) instead. [Know More](https://nativebase.io/blogs/road-ahead-with-gluestack-ui).\n\n# <img src=\"https://raw.githubusercontent.com/GeekyAnts/NativeBase/master/img/header_new.png\" alt=\"Nativebase Logo\">\n\n[![Financial Contributors on Open Collective](https://opencollective.com/NativeBase/all/badge.svg?label=financial+contributors)](https://opencollective.com/NativeBase)\n[![](https://img.shields.io/discord/785491682719301643?label=Discord&logo=discord&logoColor=%237289DA)](https://discord.com/invite/TSgCw2UPmb)\n[![npm next package](https://img.shields.io/npm/v/native-base/next.svg)](https://www.npmjs.com/package/native-base)\n[![npm latest package](https://img.shields.io/npm/v/native-base/latest.svg)](https://www.npmjs.com/package/native-base)\n[![npm downloads](https://img.shields.io/npm/dm/native-base.svg)](https://npm-stat.com/charts.html?package=native-base)\n[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/GeekyAnts/NativeBase/blob/master/LICENSE)\n[![Follow on Twitter](https://img.shields.io/twitter/follow/nativebase.svg?label=follow+NativeBase)](https://twitter.com/nativebase)\n[![Github Stars](https://img.shields.io/github/stars/GeekyAnts/NativeBase)](https://img.shields.io/github/stars/GeekyAnts/NativeBase)\n\n## NativeBase is a mobile-first, accessible component library for building a consistent design system across android, iOS & web.\n\n[**Website**](https://nativebase.io/)\n<br/>\n[**Documentation**](https://docs.nativebase.io/)\n\n\n## About GeekyAnts\n\n   NativeBase is built and maintained by [GeekyAnts](https://geekyants.com?utm_source=github&utm_medium=opensource&utm_campaign=nativebase),\n   a product development studio with expertise in:\n\n   - [React Native Development](https://geekyants.com/hire-react-native-developers?utm_source=github&utm_medium=opensource&utm_campaign=nativebase) -\n     Building production-ready mobile applications\n   - [Design Systems](https://geekyants.com/solution/design-system-development-service?utm_source=github&utm_medium=opensource&utm_campaign=nativebase) -\n     Creating scalable UI component libraries\n   - [Cross-Platform Development](https://geekyants.com/solution/universal-and-cross-platform-app-development-services?utm_source=github&utm_medium=opensource&utm_campaign=nativebase) -\n     Universal apps for iOS, Android, and Web\n\n   ### Get Professional Support\n\n   Need help implementing NativeBase in your project?\n   [Contact our mobile engineering team](https://geekyants.com/hire?utm_source=github&utm_medium=opensource&utm_campaign=nativebase) for:\n   - Custom component development\n   - Performance optimization\n   - Enterprise support plans\n\n   [Explore all services](https://geekyants.com/service?utm_source=github&utm_medium=opensource&utm_campaign=nativebase) |\n   [View our open source projects](https://geekyants.com/open-source?utm_source=github&utm_medium=opensource&utm_campaign=nativebase)\n\n## Table of Contents\n\n1. [Introduction](#1-introduction)\n2. [Motivation](#2-motivation)\n3. [Features](#3-features)\n4. [Dependencies](#4-dependencies)\n5. [Installation & Setup](#5-installation)\n6. [Components](#6-components)\n7. [Examples](#7-examples)\n8. [KitchenSink App](#8-kitchensink-app)\n9. [Tech Stack](#9-tech-stack)\n10. [Compatible Versions](#10-compatible-versions)\n11. [Contributors](#11-contributors)\n12. [Changelog](#12-changelog)\n13. [Community](#13-community)\n14. [License](#14-license)\n\n## 1. Introduction?\n\n[NativeBase](https://nativebase.io/) is a mobile-first, component library for React & React Native. Version 3.0 ships with complete ARIA integration, support for utility props and nearly 40 components that are consistent across Android, iOS and Web. Fast-track your dev process with NativeBase 3.0.\n\n**Recommended by [Awesome React Native](https://github.com/jondot/awesome-react-native)**\n\n> NativeBase was added to the list of Frameworks of Awesome React Native and it is used by numerous React lovers across the world.\n\n## 2. Motivation\n\nBuilding with React Native from scratch is a tedious process with multiple steps such as adding styling, interactions, state management, responsiveness, accessibility, etc. We wanted to build and ship accessible, high-quality apps quickly.\n<br />\n\nOur inspirations include Material UI, Chakra UI, Ant Design, Braid Design System, Bootstrap, TailwindCSS & Flutter.\n\n## 3. Features\n\n### **Out of the Box Accessibility**\n\nIntegrated with React ARIA and React Native ARIA, which provides React hooks. This enables you to build accessible design systems in no time.\n\n<img src=\"https://raw.githubusercontent.com/GeekyAnts/NativeBase/development/img/feature.png\" alt=\"Out of the box accessibility\">\n\n### **Supporting Utility Props**\n\nPowered by [Styled System](https://styled-system.com) so you can rapidly build custom UI components with constraint-based utility style props.\n\n### **Rich Component Library**\n\nNativeBase offers around 40 components so you can build seamlessly. It includes button, checkbox, flex, stack and more.\n\n### **Highly Themeable**\n\nThemeability is one of the core elements of NativeBase. You can customise your app theme and component styles to your heart's content.\n\n<img src=\"https://raw.githubusercontent.com/GeekyAnts/NativeBase/development/img/theme.png\" alt=\"Nativebase Logo\">\n\n### **Available for Both Mobile and Web**\n\nNativeBase 3.0 is powered by React Native Web so you can build consistent UIs across Web, Android and iOS.\n\n### **Responsiveness Made Easy**\n\nInstead of manually adding responsiveness, NativeBase 3.0 allows you to provide object and array values to add responsive styles.\n\n### **Now with** **Dark Mode**\n\nBuilding apps with a dark mode setting just got a whole lot easier. NativeBase is now optimised for light and dark modes.\n\n## 4. Dependencies\n\nReact Native, Expo\n\n## 5. Installation\n\nNativeBase is supported in Expo or React Native CLI initiated apps. Web support is made possible by react-native-web.\n\nRefer the [guides](https://docs.nativebase.io/installation) to setup NativeBase in your React app.\n\n## 6. Components\n\nNativeBase 3.0 is a rich component library with nearly 40 components.\n\n- [**Layout**](https://docs.nativebase.io/box)\n- [**Forms**](https://docs.nativebase.io/button)\n- [**Data Display**](https://docs.nativebase.io/badge)\n- [**Feedback**](https://docs.nativebase.io/alert)\n- [**Typography**](https://docs.nativebase.io/text)\n- [**Overlay** ](https://docs.nativebase.io/alert-dialog)\n- [**Disclosure**](https://docs.nativebase.io/action-sheet)\n- [**Media & Icons**](https://docs.nativebase.io/avatar)\n- [**Transition**](https://docs.nativebase.io/presence-transition)\n- [**Other**](https://docs.nativebase.io/fab)\n\n## 7. Examples\n\n[Check out the Todo-List example](https://docs.nativebase.io/todo-list)\n\n## 8. KitchenSink App\n\n[Kitchen Sink](https://kitchensink.nativebase.io/) is a comprehensive demo app showcasing all the NativeBase components in action. It includes buttons, forms, icons, etc.\n\n<div class=\"flexible\">\n  <img src=\"https://github.com/GeekyAnts/NativeBase/raw/development/img/kitchensink.gif\" height=\"500px\" alt=\"Kitchensink App gif\">  \n  <img src=\"https://raw.githubusercontent.com/GeekyAnts/NativeBase/development/img/qr.png\" height=\"500px\"   alt=\"Kitchensink App QR code\">\n</div>\n\n## 9. Tech Stack\n\nJavaScript, React Native, Styled System\n\n### Made with :heart: at [GeekyAnts](https://geekyants.com/?utm_source=nb-github&utm_medium=landing+page&utm_campaign=nativebase-github-cta)\n\nNativeBase is an open-source project made by the tech-savvy geeks at GeekyAnts.\nGeekyAnts is a group of React Native experts. Do [get in touch with us](https://geekyants.com/hire/?utm_source=nb-github&utm_medium=landing+page&utm_campaign=nativebase-github-hire-cta) for any help with your React Native project. Always happy to help!\n\n## 10. Compatible Versions\n\n| NativeBase                       | React Native                                               |\n| -------------------------------- | ---------------------------------------------------------- |\n| v0.1.1                           | v0.22 to v0.23                                             |\n| v0.2.0 to v0.3.1                 | v0.24 to v0.25                                             |\n| v0.4.6 to v0.4.9                 | v0.26.0 - v0.27.1                                          |\n| v0.5.0 to v0.5.15                | v0.26.0 - v0.37.0                                          |\n| v0.5.16 to v0.5.20               | v0.38.0 - v0.39.0                                          |\n| v2.0.0-alpha1 to v2.1.3          | v0.38.0 to v0.43.0                                         |\n| v2.1.4 to v2.1.5                 | v0.44.0 to v0.45.0                                         |\n| v2.2.0                           | v0.44.0 to v0.45.0                                         |\n| v2.2.1                           | v0.46.0 and above                                          |\n| v2.3.0 to 2.6.1                  | v0.46.0 and above (does not support React 16.0.0-alpha.13) |\n| v2.7.0                           | v0.56.0 and above                                          |\n| v3.0.0-next.36 to v3.0.0-next-41 | v0.63.0 and above                                          |\n| v3.0.0 to latest                 | v0.63.0 and above                                          |\n\n## 11. Contributors\n\n### Code Contributors\n\nThis project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].\n<a href=\"https://github.com/GeekyAnts/NativeBase/graphs/contributors\"><img src=\"https://opencollective.com/NativeBase/contributors.svg?width=890&button=false\" /></a>\n\n### Financial Contributors\n\nBecome a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/NativeBase/contribute)]\n\n#### Individuals\n\n<a href=\"https://opencollective.com/NativeBase\"><img src=\"https://opencollective.com/NativeBase/individuals.svg?width=890\"></a>\n\n#### Organizations\n\nSupport this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/NativeBase/contribute)]\n\n<a href=\"https://opencollective.com/NativeBase/organization/0/website\"><img src=\"https://opencollective.com/NativeBase/organization/0/avatar.svg\"></a>\n<a href=\"https://opencollective.com/NativeBase/organization/1/website\"><img src=\"https://opencollective.com/NativeBase/organization/1/avatar.svg\"></a>\n<a href=\"https://opencollective.com/NativeBase/organization/2/website\"><img src=\"https://opencollective.com/NativeBase/organization/2/avatar.svg\"></a>\n<a href=\"https://opencollective.com/NativeBase/organization/3/website\"><img src=\"https://opencollective.com/NativeBase/organization/3/avatar.svg\"></a>\n<a href=\"https://opencollective.com/NativeBase/organization/4/website\"><img src=\"https://opencollective.com/NativeBase/organization/4/avatar.svg\"></a>\n<a href=\"https://opencollective.com/NativeBase/organization/5/website\"><img src=\"https://opencollective.com/NativeBase/organization/5/avatar.svg\"></a>\n<a href=\"https://opencollective.com/NativeBase/organization/6/website\"><img src=\"https://opencollective.com/NativeBase/organization/6/avatar.svg\"></a>\n<a href=\"https://opencollective.com/NativeBase/organization/7/website\"><img src=\"https://opencollective.com/NativeBase/organization/7/avatar.svg\"></a>\n<a href=\"https://opencollective.com/NativeBase/organization/8/website\"><img src=\"https://opencollective.com/NativeBase/organization/8/avatar.svg\"></a>\n<a href=\"https://opencollective.com/NativeBase/organization/9/website\"><img src=\"https://opencollective.com/NativeBase/organization/9/avatar.svg\"></a>\n\n## 12. Changelog\n\n[Check out the changelog in the official documentation](https://docs.nativebase.io/changelog)\n\n## 13. Community\n\n- [Facebook](https://www.facebook.com/nativebaseio)\n- [Twitter](https://twitter.com/nativebase)\n- [Discord](https://discord.com/invite/TSgCw2UPmb)\n- [Stackoverflow](https://stackoverflow.com/questions/tagged/native-base)\n- [Blog](https://nativebase.io/blogs)\n- [YouTube](https://www.youtube.com/channel/UCoL_iTwpY07vDs91974z3xA/about)\n\n## 14. License\n\nLicensed under the MIT License, Copyright © 2021 GeekyAnts. See [LICENSE](https://github.com/GeekyAnts/NativeBase/blob/master/LICENSE) for more information.\n\nBuilt with ❤️ by [GeekyAnts](https://geekyants.com?utm_source=github&utm_medium=opensource&utm_campaign=nativebase) |\n   [React Native Experts](https://geekyants.com/hire-react-native-developers?utm_source=github&utm_medium=opensource&utm_campaign=nativebase)\n"
  },
  {
    "path": "RNBareExample/.buckconfig",
    "content": "\n[android]\n  target = Google Inc.:Google APIs:23\n\n[maven_repositories]\n  central = https://repo1.maven.org/maven2\n"
  },
  {
    "path": "RNBareExample/.eslintrc.js",
    "content": "module.exports = {\n  root: true,\n  extends: '@react-native-community',\n};\n"
  },
  {
    "path": "RNBareExample/.gitattributes",
    "content": "# Windows files should use crlf line endings\n# https://help.github.com/articles/dealing-with-line-endings/\n*.bat text eol=crlf\n"
  },
  {
    "path": "RNBareExample/.gitignore",
    "content": "# OSX\n#\n.DS_Store\n\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\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!debug.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\n\n# CocoaPods\n/ios/Pods/\n"
  },
  {
    "path": "RNBareExample/.prettierrc.js",
    "content": "module.exports = {\n  bracketSpacing: false,\n  jsxBracketSameLine: true,\n  singleQuote: true,\n  trailingComma: 'all',\n  arrowParens: 'avoid',\n};\n"
  },
  {
    "path": "RNBareExample/.watchmanconfig",
    "content": "{}"
  },
  {
    "path": "RNBareExample/App.tsx",
    "content": "import React from 'react';\nimport {NativeBaseProvider, Box, Center} from 'native-base';\n\nconst config = {\n  dependencies: {\n    'linear-gradient': require('react-native-linear-gradient').default,\n  },\n};\n\nconst App = () => {\n  return (\n    <NativeBaseProvider config={config}>\n      <Center flex={1}>\n        <Box\n          bg={{\n            linearGradient: {\n              colors: ['lightBlue.300', 'violet.800'],\n              start: [0, 0],\n              end: [1, 0],\n            },\n          }}\n          p={12}\n          rounded=\"lg\"\n          _text={{fontSize: 'md', fontWeight: 'bold', color: 'white'}}>\n          This is a Box with Linear Gradient\n        </Box>\n      </Center>\n    </NativeBaseProvider>\n  );\n};\n\nexport default App;\n"
  },
  {
    "path": "RNBareExample/_editorconfig",
    "content": "# Windows files\n[*.bat]\nend_of_line = crlf\n"
  },
  {
    "path": "RNBareExample/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.rnbareexample\",\n)\n\nandroid_resource(\n    name = \"res\",\n    package = \"com.rnbareexample\",\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": "RNBareExample/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. If none specified and\n *   // \"index.android.js\" exists, it will be used. Otherwise \"index.js\" is\n *   // default. Can be overridden with ENTRY_FILE environment variable.\n *   entryFile: \"index.android.js\",\n *\n *   // https://reactnative.dev/docs/performance#enable-the-ram-format\n *   bundleCommand: \"ram-bundle\",\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    enableHermes: false,  // clean and rebuild if changing\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\n/**\n * The preferred build flavor of JavaScriptCore.\n *\n * For example, to use the international variant, you can use:\n * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`\n *\n * The international variant includes ICU i18n library and necessary data\n * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that\n * give correct results when using with locales other than en-US.  Note that\n * this variant is about 6MiB larger per architecture than default.\n */\ndef jscFlavor = 'org.webkit:android-jsc:+'\n\n/**\n * Whether to enable the Hermes VM.\n *\n * This should be set on project.ext.react and mirrored here.  If it is not set\n * on project.ext.react, JavaScript will not be compiled to Hermes Bytecode\n * and the benefits of using Hermes will therefore be sharply reduced.\n */\ndef enableHermes = project.ext.react.get(\"enableHermes\", false);\n\nandroid {\n    ndkVersion rootProject.ext.ndkVersion\n\n    compileSdkVersion rootProject.ext.compileSdkVersion\n\n    compileOptions {\n        sourceCompatibility JavaVersion.VERSION_1_8\n        targetCompatibility JavaVersion.VERSION_1_8\n    }\n\n    defaultConfig {\n        applicationId \"com.rnbareexample\"\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\", \"x86_64\"\n        }\n    }\n    signingConfigs {\n        debug {\n            storeFile file('debug.keystore')\n            storePassword 'android'\n            keyAlias 'androiddebugkey'\n            keyPassword 'android'\n        }\n    }\n    buildTypes {\n        debug {\n            signingConfig signingConfigs.debug\n        }\n        release {\n            // Caution! In production, you need to generate your own keystore file.\n            // see https://reactnative.dev/docs/signed-apk-android.\n            signingConfig signingConfigs.debug\n            minifyEnabled enableProguardInReleaseBuilds\n            proguardFiles getDefaultProguardFile(\"proguard-android.txt\"), \"proguard-rules.pro\"\n        }\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            // https://developer.android.com/studio/build/configure-apk-splits.html\n            // Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc.\n            def versionCodes = [\"armeabi-v7a\": 1, \"x86\": 2, \"arm64-v8a\": 3, \"x86_64\": 4]\n            def abi = output.getFilter(OutputFile.ABI)\n            if (abi != null) {  // null for the universal-debug, universal-release variants\n                output.versionCodeOverride =\n                        defaultConfig.versionCode * 1000 + versionCodes.get(abi)\n            }\n\n        }\n    }\n}\n\ndependencies {\n    implementation fileTree(dir: \"libs\", include: [\"*.jar\"])\n    //noinspection GradleDynamicVersion\n    implementation \"com.facebook.react:react-native:+\"  // From node_modules\n\n    implementation \"androidx.swiperefreshlayout:swiperefreshlayout:1.0.0\"\n\n    debugImplementation(\"com.facebook.flipper:flipper:${FLIPPER_VERSION}\") {\n      exclude group:'com.facebook.fbjni'\n    }\n\n    debugImplementation(\"com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}\") {\n        exclude group:'com.facebook.flipper'\n        exclude group:'com.squareup.okhttp3', module:'okhttp'\n    }\n\n    debugImplementation(\"com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}\") {\n        exclude group:'com.facebook.flipper'\n    }\n\n    if (enableHermes) {\n        def hermesPath = \"../../node_modules/hermes-engine/android/\";\n        debugImplementation files(hermesPath + \"hermes-debug.aar\")\n        releaseImplementation files(hermesPath + \"hermes-release.aar\")\n    } else {\n        implementation jscFlavor\n    }\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\napply from: file(\"../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle\"); applyNativeModulesAppBuildGradle(project)\n"
  },
  {
    "path": "RNBareExample/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": "RNBareExample/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"
  },
  {
    "path": "RNBareExample/android/app/src/debug/AndroidManifest.xml",
    "content": "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<manifest xmlns:android=\"http://schemas.android.com/apk/res/android\"\n    xmlns:tools=\"http://schemas.android.com/tools\">\n\n    <uses-permission android:name=\"android.permission.SYSTEM_ALERT_WINDOW\"/>\n\n    <application\n        android:usesCleartextTraffic=\"true\"\n        tools:targetApi=\"28\"\n        tools:ignore=\"GoogleAppIndexingWarning\">\n        <activity android:name=\"com.facebook.react.devsupport.DevSettingsActivity\" />\n    </application>\n</manifest>\n"
  },
  {
    "path": "RNBareExample/android/app/src/debug/java/com/rnbareexample/ReactNativeFlipper.java",
    "content": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * <p>This source code is licensed under the MIT license found in the LICENSE file in the root\n * directory of this source tree.\n */\npackage com.rnbareexample;\n\nimport android.content.Context;\nimport com.facebook.flipper.android.AndroidFlipperClient;\nimport com.facebook.flipper.android.utils.FlipperUtils;\nimport com.facebook.flipper.core.FlipperClient;\nimport com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin;\nimport com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin;\nimport com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin;\nimport com.facebook.flipper.plugins.inspector.DescriptorMapping;\nimport com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin;\nimport com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor;\nimport com.facebook.flipper.plugins.network.NetworkFlipperPlugin;\nimport com.facebook.flipper.plugins.react.ReactFlipperPlugin;\nimport com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin;\nimport com.facebook.react.ReactInstanceManager;\nimport com.facebook.react.bridge.ReactContext;\nimport com.facebook.react.modules.network.NetworkingModule;\nimport okhttp3.OkHttpClient;\n\npublic class ReactNativeFlipper {\n  public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {\n    if (FlipperUtils.shouldEnableFlipper(context)) {\n      final FlipperClient client = AndroidFlipperClient.getInstance(context);\n\n      client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults()));\n      client.addPlugin(new ReactFlipperPlugin());\n      client.addPlugin(new DatabasesFlipperPlugin(context));\n      client.addPlugin(new SharedPreferencesFlipperPlugin(context));\n      client.addPlugin(CrashReporterPlugin.getInstance());\n\n      NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();\n      NetworkingModule.setCustomClientBuilder(\n          new NetworkingModule.CustomClientBuilder() {\n            @Override\n            public void apply(OkHttpClient.Builder builder) {\n              builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));\n            }\n          });\n      client.addPlugin(networkFlipperPlugin);\n      client.start();\n\n      // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized\n      // Hence we run if after all native modules have been initialized\n      ReactContext reactContext = reactInstanceManager.getCurrentReactContext();\n      if (reactContext == null) {\n        reactInstanceManager.addReactInstanceEventListener(\n            new ReactInstanceManager.ReactInstanceEventListener() {\n              @Override\n              public void onReactContextInitialized(ReactContext reactContext) {\n                reactInstanceManager.removeReactInstanceEventListener(this);\n                reactContext.runOnNativeModulesQueueThread(\n                    new Runnable() {\n                      @Override\n                      public void run() {\n                        client.addPlugin(new FrescoFlipperPlugin());\n                      }\n                    });\n              }\n            });\n      } else {\n        client.addPlugin(new FrescoFlipperPlugin());\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "RNBareExample/android/app/src/main/AndroidManifest.xml",
    "content": "<manifest xmlns:android=\"http://schemas.android.com/apk/res/android\"\n  package=\"com.rnbareexample\">\n\n    <uses-permission android:name=\"android.permission.INTERNET\" />\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|uiMode\"\n        android:launchMode=\"singleTask\"\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    </application>\n</manifest>\n"
  },
  {
    "path": "RNBareExample/android/app/src/main/java/com/rnbareexample/MainActivity.java",
    "content": "package com.rnbareexample;\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. This is used to schedule\n   * rendering of the component.\n   */\n  @Override\n  protected String getMainComponentName() {\n    return \"RNBareExample\";\n  }\n}\n"
  },
  {
    "path": "RNBareExample/android/app/src/main/java/com/rnbareexample/MainApplication.java",
    "content": "package com.rnbareexample;\n\nimport android.app.Application;\nimport android.content.Context;\nimport com.facebook.react.PackageList;\nimport com.facebook.react.ReactApplication;\nimport com.BV.LinearGradient.LinearGradientPackage;\nimport com.facebook.react.ReactInstanceManager;\nimport com.facebook.react.ReactNativeHost;\nimport com.facebook.react.ReactPackage;\nimport com.facebook.soloader.SoLoader;\nimport java.lang.reflect.InvocationTargetException;\nimport java.util.List;\n\npublic class MainApplication extends Application implements ReactApplication {\n\n  private final ReactNativeHost mReactNativeHost =\n      new ReactNativeHost(this) {\n        @Override\n        public boolean getUseDeveloperSupport() {\n          return BuildConfig.DEBUG;\n        }\n\n        @Override\n        protected List<ReactPackage> getPackages() {\n          @SuppressWarnings(\"UnnecessaryLocalVariable\")\n          List<ReactPackage> packages = new PackageList(this).getPackages();\n          // Packages that cannot be autolinked yet can be added manually here, for example:\n          // packages.add(new MyReactNativePackage());\n          return packages;\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    initializeFlipper(this, getReactNativeHost().getReactInstanceManager());\n  }\n\n  /**\n   * Loads Flipper in React Native templates. Call this in the onCreate method with something like\n   * initializeFlipper(this, getReactNativeHost().getReactInstanceManager());\n   *\n   * @param context\n   * @param reactInstanceManager\n   */\n  private static void initializeFlipper(\n      Context context, ReactInstanceManager reactInstanceManager) {\n    if (BuildConfig.DEBUG) {\n      try {\n        /*\n         We use reflection here to pick up the class that initializes Flipper,\n        since Flipper library is not available in release mode\n        */\n        Class<?> aClass = Class.forName(\"com.rnbareexample.ReactNativeFlipper\");\n        aClass\n            .getMethod(\"initializeFlipper\", Context.class, ReactInstanceManager.class)\n            .invoke(null, context, reactInstanceManager);\n      } catch (ClassNotFoundException e) {\n        e.printStackTrace();\n      } catch (NoSuchMethodException e) {\n        e.printStackTrace();\n      } catch (IllegalAccessException e) {\n        e.printStackTrace();\n      } catch (InvocationTargetException e) {\n        e.printStackTrace();\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "RNBareExample/android/app/src/main/res/values/strings.xml",
    "content": "<resources>\n    <string name=\"app_name\">RNBareExample</string>\n</resources>\n"
  },
  {
    "path": "RNBareExample/android/app/src/main/res/values/styles.xml",
    "content": "<resources>\n\n    <!-- Base application theme. -->\n    <style name=\"AppTheme\" parent=\"Theme.AppCompat.DayNight.NoActionBar\">\n        <!-- Customize your theme here. -->\n        <item name=\"android:textColor\">#000000</item>\n    </style>\n\n</resources>\n"
  },
  {
    "path": "RNBareExample/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 = \"29.0.3\"\n        minSdkVersion = 21\n        compileSdkVersion = 29\n        targetSdkVersion = 29\n        ndkVersion = \"20.1.5948944\"\n    }\n    repositories {\n        google()\n        jcenter()\n    }\n    dependencies {\n        classpath(\"com.android.tools.build:gradle:4.1.0\")\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        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        maven {\n            // Android JSC is installed from npm\n            url(\"$rootDir/../node_modules/jsc-android/dist\")\n        }\n\n        google()\n        jcenter()\n        maven { url 'https://www.jitpack.io' }\n    }\n}\n"
  },
  {
    "path": "RNBareExample/android/gradle/wrapper/gradle-wrapper.properties",
    "content": "distributionBase=GRADLE_USER_HOME\ndistributionPath=wrapper/dists\ndistributionUrl=https\\://services.gradle.org/distributions/gradle-6.7-all.zip\nzipStoreBase=GRADLE_USER_HOME\nzipStorePath=wrapper/dists\n"
  },
  {
    "path": "RNBareExample/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# AndroidX package structure to make it clearer which packages are bundled with the\n# Android operating system, and which are packaged with your app's APK\n# https://developer.android.com/topic/libraries/support-library/androidx-rn\nandroid.useAndroidX=true\n# Automatically convert third-party libraries to use AndroidX\nandroid.enableJetifier=true\n\n# Version of flipper SDK to use with React Native\nFLIPPER_VERSION=0.75.1\n"
  },
  {
    "path": "RNBareExample/android/gradlew",
    "content": "#!/usr/bin/env sh\n\n#\n# Copyright 2015 the original author or authors.\n#\n# Licensed under the Apache License, Version 2.0 (the \"License\");\n# you may not use this file except in compliance with the License.\n# You may obtain a copy of the License at\n#\n#      https://www.apache.org/licenses/LICENSE-2.0\n#\n# Unless required by applicable law or agreed to in writing, software\n# distributed under the License is distributed on an \"AS IS\" BASIS,\n# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n# See the License for the specific language governing permissions and\n# limitations under the License.\n#\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='\"-Xmx64m\" \"-Xms64m\"'\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\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 or MSYS, switch paths to Windows format before running java\nif [ \"$cygwin\" = \"true\" -o \"$msys\" = \"true\" ] ; then\n    APP_HOME=`cygpath --path --mixed \"$APP_HOME\"`\n    CLASSPATH=`cygpath --path --mixed \"$CLASSPATH\"`\n\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=`expr $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\nexec \"$JAVACMD\" \"$@\"\n"
  },
  {
    "path": "RNBareExample/android/gradlew.bat",
    "content": "@rem\r\n@rem Copyright 2015 the original author or authors.\r\n@rem\r\n@rem Licensed under the Apache License, Version 2.0 (the \"License\");\r\n@rem you may not use this file except in compliance with the License.\r\n@rem You may obtain a copy of the License at\r\n@rem\r\n@rem      https://www.apache.org/licenses/LICENSE-2.0\r\n@rem\r\n@rem Unless required by applicable law or agreed to in writing, software\r\n@rem distributed under the License is distributed on an \"AS IS\" BASIS,\r\n@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r\n@rem See the License for the specific language governing permissions and\r\n@rem limitations under the License.\r\n@rem\r\n\r\n@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 Resolve any \".\" and \"..\" in APP_HOME to make it shorter.\r\nfor %%i in (\"%APP_HOME%\") do set APP_HOME=%%~fi\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=\"-Xmx64m\" \"-Xms64m\"\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 execute\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 execute\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:execute\r\n@rem Setup the command line\r\n\r\nset CLASSPATH=%APP_HOME%\\gradle\\wrapper\\gradle-wrapper.jar\r\n\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 %*\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": "RNBareExample/android/settings.gradle",
    "content": "rootProject.name = 'RNBareExample'\ninclude ':react-native-linear-gradient'\nproject(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linear-gradient/android')\napply from: file(\"../node_modules/@react-native-community/cli-platform-android/native_modules.gradle\"); applyNativeModulesSettingsGradle(settings)\ninclude ':app'\n"
  },
  {
    "path": "RNBareExample/app.json",
    "content": "{\n  \"name\": \"RNBareExample\",\n  \"displayName\": \"RNBareExample\"\n}"
  },
  {
    "path": "RNBareExample/babel.config.js",
    "content": "const path = require('path');\nconst pak = require('../package.json');\n\nmodule.exports = function (api) {\n  api.cache(true);\n  return {\n    presets: ['module:metro-react-native-babel-preset'],\n    plugins: [\n      [\n        'module-resolver',\n        {\n          alias: {\n            // For development, we want to alias the library to the source\n            [pak.name]: path.join(__dirname, '..', pak.source),\n          },\n        },\n      ],\n    ],\n  };\n};\n"
  },
  {
    "path": "RNBareExample/index.js",
    "content": "/**\n * @format\n */\n\nimport {AppRegistry} from 'react-native';\nimport App from './App';\nimport {name as appName} from './app.json';\n\nAppRegistry.registerComponent(appName, () => App);\n"
  },
  {
    "path": "RNBareExample/ios/Podfile",
    "content": "require_relative '../node_modules/react-native/scripts/react_native_pods'\nrequire_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'\n\nplatform :ios, '10.0'\n\ntarget 'RNBareExample' do\n  config = use_native_modules!\n\n  use_react_native!(\n    :path => config[:reactNativePath],\n    # to enable hermes on iOS, change `false` to `true` and then install pods\n    :hermes_enabled => false\n  )\n\n  pod 'BVLinearGradient', :path => '../node_modules/react-native-linear-gradient'\n\n  target 'RNBareExampleTests' do\n    inherit! :complete\n    # Pods for testing\n  end\n\n  # Enables Flipper.\n  #\n  # Note that if you have use_frameworks! enabled, Flipper will not work and\n  # you should disable the next line.\n  use_flipper!()\n\n  post_install do |installer|\n    react_native_post_install(installer)\n  end\nend"
  },
  {
    "path": "RNBareExample/ios/RNBareExample/AppDelegate.h",
    "content": "#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": "RNBareExample/ios/RNBareExample/AppDelegate.m",
    "content": "#import \"AppDelegate.h\"\n\n#import <React/RCTBridge.h>\n#import <React/RCTBundleURLProvider.h>\n#import <React/RCTRootView.h>\n\n#ifdef FB_SONARKIT_ENABLED\n#import <FlipperKit/FlipperClient.h>\n#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>\n#import <FlipperKitUserDefaultsPlugin/FKUserDefaultsPlugin.h>\n#import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>\n#import <SKIOSNetworkPlugin/SKIOSNetworkAdapter.h>\n#import <FlipperKitReactPlugin/FlipperKitReactPlugin.h>\n\nstatic void InitializeFlipper(UIApplication *application) {\n  FlipperClient *client = [FlipperClient sharedClient];\n  SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults];\n  [client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:application withDescriptorMapper:layoutDescriptorMapper]];\n  [client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]];\n  [client addPlugin:[FlipperKitReactPlugin new]];\n  [client addPlugin:[[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]];\n  [client start];\n}\n#endif\n\n@implementation AppDelegate\n\n- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions\n{\n#ifdef FB_SONARKIT_ENABLED\n  InitializeFlipper(application);\n#endif\n\n  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];\n  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge\n                                                   moduleName:@\"RNBareExample\"\n                                            initialProperties:nil];\n\n  if (@available(iOS 13.0, *)) {\n      rootView.backgroundColor = [UIColor systemBackgroundColor];\n  } else {\n      rootView.backgroundColor = [UIColor whiteColor];\n  }\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": "RNBareExample/ios/RNBareExample/Images.xcassets/AppIcon.appiconset/Contents.json",
    "content": "{\n  \"images\" : [\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  \"info\" : {\n    \"version\" : 1,\n    \"author\" : \"xcode\"\n  }\n}"
  },
  {
    "path": "RNBareExample/ios/RNBareExample/Images.xcassets/Contents.json",
    "content": "{\n  \"info\" : {\n    \"version\" : 1,\n    \"author\" : \"xcode\"\n  }\n}\n"
  },
  {
    "path": "RNBareExample/ios/RNBareExample/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>RNBareExample</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>NSAppTransportSecurity</key>\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\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>UIAppFonts</key>\n\t<array>\n\t\t<string>Roboto-Bold.ttf</string>\n\t\t<string>Roboto-Italic.ttf</string>\n\t\t<string>Roboto-Light.ttf</string>\n\t\t<string>Roboto-Medium.ttf</string>\n\t\t<string>Roboto-Regular.ttf</string>\n\t\t<string>Merriweather-Regular.ttf</string>\n\t</array>\n</dict>\n</plist>\n"
  },
  {
    "path": "RNBareExample/ios/RNBareExample/LaunchScreen.storyboard",
    "content": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<document type=\"com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB\" version=\"3.0\" toolsVersion=\"15702\" targetRuntime=\"iOS.CocoaTouch\" propertyAccessControl=\"none\" useAutolayout=\"YES\" launchScreen=\"YES\" useTraitCollections=\"YES\" useSafeAreas=\"YES\" colorMatched=\"YES\" initialViewController=\"01J-lp-oVM\">\n    <device id=\"retina4_7\" orientation=\"portrait\" appearance=\"light\"/>\n    <dependencies>\n        <deployment identifier=\"iOS\"/>\n        <plugIn identifier=\"com.apple.InterfaceBuilder.IBCocoaTouchPlugin\" version=\"15704\"/>\n        <capability name=\"Safe area layout guides\" minToolsVersion=\"9.0\"/>\n        <capability name=\"documents saved in the Xcode 8 format\" minToolsVersion=\"8.0\"/>\n    </dependencies>\n    <scenes>\n        <!--View Controller-->\n        <scene sceneID=\"EHf-IW-A2E\">\n            <objects>\n                <viewController id=\"01J-lp-oVM\" sceneMemberID=\"viewController\">\n                    <view key=\"view\" contentMode=\"scaleToFill\" id=\"Ze5-6b-2t3\">\n                        <rect key=\"frame\" x=\"0.0\" y=\"0.0\" width=\"375\" height=\"667\"/>\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=\"RNBareExample\" textAlignment=\"center\" lineBreakMode=\"middleTruncation\" baselineAdjustment=\"alignBaselines\" minimumFontSize=\"18\" translatesAutoresizingMaskIntoConstraints=\"NO\" id=\"GJd-Yh-RWb\">\n                                <rect key=\"frame\" x=\"0.0\" y=\"202\" width=\"375\" height=\"43\"/>\n                                <fontDescription key=\"fontDescription\" type=\"boldSystem\" pointSize=\"36\"/>\n                                <nil key=\"highlightedColor\"/>\n                            </label>\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=\"MN2-I3-ftu\">\n                                <rect key=\"frame\" x=\"0.0\" y=\"626\" width=\"375\" height=\"21\"/>\n                                <fontDescription key=\"fontDescription\" type=\"system\" pointSize=\"17\"/>\n                                <nil key=\"highlightedColor\"/>\n                            </label>\n                        </subviews>\n                        <color key=\"backgroundColor\" systemColor=\"systemBackgroundColor\" cocoaTouchSystemColor=\"whiteColor\"/>\n                        <constraints>\n                            <constraint firstItem=\"Bcu-3y-fUS\" firstAttribute=\"bottom\" secondItem=\"MN2-I3-ftu\" secondAttribute=\"bottom\" constant=\"20\" id=\"OZV-Vh-mqD\"/>\n                            <constraint firstItem=\"Bcu-3y-fUS\" firstAttribute=\"centerX\" secondItem=\"GJd-Yh-RWb\" secondAttribute=\"centerX\" id=\"Q3B-4B-g5h\"/>\n                            <constraint firstItem=\"MN2-I3-ftu\" firstAttribute=\"centerX\" secondItem=\"Bcu-3y-fUS\" secondAttribute=\"centerX\" id=\"akx-eg-2ui\"/>\n                            <constraint firstItem=\"MN2-I3-ftu\" firstAttribute=\"leading\" secondItem=\"Bcu-3y-fUS\" secondAttribute=\"leading\" id=\"i1E-0Y-4RG\"/>\n                            <constraint firstItem=\"GJd-Yh-RWb\" firstAttribute=\"centerY\" secondItem=\"Ze5-6b-2t3\" secondAttribute=\"bottom\" multiplier=\"1/3\" constant=\"1\" id=\"moa-c2-u7t\"/>\n                            <constraint firstItem=\"GJd-Yh-RWb\" firstAttribute=\"leading\" secondItem=\"Bcu-3y-fUS\" secondAttribute=\"leading\" symbolic=\"YES\" id=\"x7j-FC-K8j\"/>\n                        </constraints>\n                        <viewLayoutGuide key=\"safeArea\" id=\"Bcu-3y-fUS\"/>\n                    </view>\n                </viewController>\n                <placeholder placeholderIdentifier=\"IBFirstResponder\" id=\"iYj-Kq-Ea1\" userLabel=\"First Responder\" sceneMemberID=\"firstResponder\"/>\n            </objects>\n            <point key=\"canvasLocation\" x=\"52.173913043478265\" y=\"375\"/>\n        </scene>\n    </scenes>\n</document>\n"
  },
  {
    "path": "RNBareExample/ios/RNBareExample/main.m",
    "content": "#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": "RNBareExample/ios/RNBareExample.xcodeproj/project.pbxproj",
    "content": "// !$*UTF8*$!\n{\n\tarchiveVersion = 1;\n\tclasses = {\n\t};\n\tobjectVersion = 54;\n\tobjects = {\n\n/* Begin PBXBuildFile section */\n\t\t00E356F31AD99517003FC87E /* RNBareExampleTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* RNBareExampleTests.m */; };\n\t\t13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; };\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\t38BE891D962D4F349AF2917E /* Roboto-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = D54F1726BC514FD686C64532 /* Roboto-Regular.ttf */; };\n\t\t4664335C02E54CEEA39B7112 /* Merriweather-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 4509DF3E719D42139C6957FB /* Merriweather-Regular.ttf */; };\n\t\t4A2BEF80E0F0453CB2500790 /* Roboto-Medium.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 3E1CF7D40B1D414988D3CC15 /* Roboto-Medium.ttf */; };\n\t\t81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; };\n\t\t8EC97A0012A44B37A239430B /* Roboto-Bold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = EE3CE23D43B345559A3E9B05 /* Roboto-Bold.ttf */; };\n\t\tA407EFB79BE54725A37F6732 /* Roboto-Italic.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 3DF03166C76248F88B6F59F2 /* Roboto-Italic.ttf */; };\n\t\tCC958B3576C25F72C64CD117 /* libPods-RNBareExample.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 11C0BDDBE1B1045431ABC4E5 /* libPods-RNBareExample.a */; };\n\t\tDE9675BE0B1F7B1E29B249D0 /* libPods-RNBareExample-RNBareExampleTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 41168D7081D471981F679225 /* libPods-RNBareExample-RNBareExampleTests.a */; };\n\t\tF8E98893793F4862BBC06E24 /* Roboto-Light.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 7BA646F9875F4FCEBAB2D80B /* Roboto-Light.ttf */; };\n/* End PBXBuildFile section */\n\n/* Begin PBXContainerItemProxy section */\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 = RNBareExample;\n\t\t};\n/* End PBXContainerItemProxy section */\n\n/* Begin PBXFileReference section */\n\t\t00E356EE1AD99517003FC87E /* RNBareExampleTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = RNBareExampleTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };\n\t\t00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = \"<group>\"; };\n\t\t00E356F21AD99517003FC87E /* RNBareExampleTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNBareExampleTests.m; sourceTree = \"<group>\"; };\n\t\t11C0BDDBE1B1045431ABC4E5 /* libPods-RNBareExample.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = \"libPods-RNBareExample.a\"; sourceTree = BUILT_PRODUCTS_DIR; };\n\t\t13B07F961A680F5B00A75B9A /* RNBareExample.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = RNBareExample.app; sourceTree = BUILT_PRODUCTS_DIR; };\n\t\t13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = RNBareExample/AppDelegate.h; sourceTree = \"<group>\"; };\n\t\t13B07FB01A68108700A75B9A /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = AppDelegate.m; path = RNBareExample/AppDelegate.m; sourceTree = \"<group>\"; };\n\t\t13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = RNBareExample/Images.xcassets; sourceTree = \"<group>\"; };\n\t\t13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = RNBareExample/Info.plist; sourceTree = \"<group>\"; };\n\t\t13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = RNBareExample/main.m; sourceTree = \"<group>\"; };\n\t\t3DF03166C76248F88B6F59F2 /* Roboto-Italic.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = \"Roboto-Italic.ttf\"; path = \"../assets/fonts/Roboto-Italic.ttf\"; sourceTree = \"<group>\"; };\n\t\t3E1CF7D40B1D414988D3CC15 /* Roboto-Medium.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = \"Roboto-Medium.ttf\"; path = \"../assets/fonts/Roboto-Medium.ttf\"; sourceTree = \"<group>\"; };\n\t\t41168D7081D471981F679225 /* libPods-RNBareExample-RNBareExampleTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = \"libPods-RNBareExample-RNBareExampleTests.a\"; sourceTree = BUILT_PRODUCTS_DIR; };\n\t\t4509DF3E719D42139C6957FB /* Merriweather-Regular.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = \"Merriweather-Regular.ttf\"; path = \"../assets/fonts/Merriweather-Regular.ttf\"; sourceTree = \"<group>\"; };\n\t\t48A3F3B34B71A627C36D23AE /* Pods-RNBareExample-RNBareExampleTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = \"Pods-RNBareExample-RNBareExampleTests.debug.xcconfig\"; path = \"Target Support Files/Pods-RNBareExample-RNBareExampleTests/Pods-RNBareExample-RNBareExampleTests.debug.xcconfig\"; sourceTree = \"<group>\"; };\n\t\t6C3E26B903A9FBC8FEAD0366 /* Pods-RNBareExample.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = \"Pods-RNBareExample.release.xcconfig\"; path = \"Target Support Files/Pods-RNBareExample/Pods-RNBareExample.release.xcconfig\"; sourceTree = \"<group>\"; };\n\t\t7BA646F9875F4FCEBAB2D80B /* Roboto-Light.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = \"Roboto-Light.ttf\"; path = \"../assets/fonts/Roboto-Light.ttf\"; sourceTree = \"<group>\"; };\n\t\t81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = RNBareExample/LaunchScreen.storyboard; sourceTree = \"<group>\"; };\n\t\tBE9748D91138D25975CC7644 /* Pods-RNBareExample-RNBareExampleTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = \"Pods-RNBareExample-RNBareExampleTests.release.xcconfig\"; path = \"Target Support Files/Pods-RNBareExample-RNBareExampleTests/Pods-RNBareExample-RNBareExampleTests.release.xcconfig\"; sourceTree = \"<group>\"; };\n\t\tD54F1726BC514FD686C64532 /* Roboto-Regular.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = \"Roboto-Regular.ttf\"; path = \"../assets/fonts/Roboto-Regular.ttf\"; sourceTree = \"<group>\"; };\n\t\tDC9506A1E7FC0D9474DB233B /* Pods-RNBareExample.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = \"Pods-RNBareExample.debug.xcconfig\"; path = \"Target Support Files/Pods-RNBareExample/Pods-RNBareExample.debug.xcconfig\"; 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\tEE3CE23D43B345559A3E9B05 /* Roboto-Bold.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = \"Roboto-Bold.ttf\"; path = \"../assets/fonts/Roboto-Bold.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\tDE9675BE0B1F7B1E29B249D0 /* libPods-RNBareExample-RNBareExampleTests.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\tCC958B3576C25F72C64CD117 /* libPods-RNBareExample.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\t00E356EF1AD99517003FC87E /* RNBareExampleTests */ = {\n\t\t\tisa = PBXGroup;\n\t\t\tchildren = (\n\t\t\t\t00E356F21AD99517003FC87E /* RNBareExampleTests.m */,\n\t\t\t\t00E356F01AD99517003FC87E /* Supporting Files */,\n\t\t\t);\n\t\t\tpath = RNBareExampleTests;\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\t13B07FAE1A68108700A75B9A /* RNBareExample */ = {\n\t\t\tisa = PBXGroup;\n\t\t\tchildren = (\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\t81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */,\n\t\t\t\t13B07FB71A68108700A75B9A /* main.m */,\n\t\t\t);\n\t\t\tname = RNBareExample;\n\t\t\tsourceTree = \"<group>\";\n\t\t};\n\t\t159055EDF32C537E1DD2EA56 /* Pods */ = {\n\t\t\tisa = PBXGroup;\n\t\t\tchildren = (\n\t\t\t\tDC9506A1E7FC0D9474DB233B /* Pods-RNBareExample.debug.xcconfig */,\n\t\t\t\t6C3E26B903A9FBC8FEAD0366 /* Pods-RNBareExample.release.xcconfig */,\n\t\t\t\t48A3F3B34B71A627C36D23AE /* Pods-RNBareExample-RNBareExampleTests.debug.xcconfig */,\n\t\t\t\tBE9748D91138D25975CC7644 /* Pods-RNBareExample-RNBareExampleTests.release.xcconfig */,\n\t\t\t);\n\t\t\tname = Pods;\n\t\t\tpath = Pods;\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\t11C0BDDBE1B1045431ABC4E5 /* libPods-RNBareExample.a */,\n\t\t\t\t41168D7081D471981F679225 /* libPods-RNBareExample-RNBareExampleTests.a */,\n\t\t\t);\n\t\t\tname = Frameworks;\n\t\t\tsourceTree = \"<group>\";\n\t\t};\n\t\t42CCD72C7CF4497793037815 /* Resources */ = {\n\t\t\tisa = PBXGroup;\n\t\t\tchildren = (\n\t\t\t\tEE3CE23D43B345559A3E9B05 /* Roboto-Bold.ttf */,\n\t\t\t\t3DF03166C76248F88B6F59F2 /* Roboto-Italic.ttf */,\n\t\t\t\t7BA646F9875F4FCEBAB2D80B /* Roboto-Light.ttf */,\n\t\t\t\t3E1CF7D40B1D414988D3CC15 /* Roboto-Medium.ttf */,\n\t\t\t\tD54F1726BC514FD686C64532 /* Roboto-Regular.ttf */,\n\t\t\t\t4509DF3E719D42139C6957FB /* Merriweather-Regular.ttf */,\n\t\t\t);\n\t\t\tname = Resources;\n\t\t\tpath = \"\";\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);\n\t\t\tname = Libraries;\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 /* RNBareExample */,\n\t\t\t\t832341AE1AAA6A7D00B99B32 /* Libraries */,\n\t\t\t\t00E356EF1AD99517003FC87E /* RNBareExampleTests */,\n\t\t\t\t83CBBA001A601CBA00E9B192 /* Products */,\n\t\t\t\t2D16E6871FA4F8E400B85C8A /* Frameworks */,\n\t\t\t\t159055EDF32C537E1DD2EA56 /* Pods */,\n\t\t\t\t42CCD72C7CF4497793037815 /* 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 /* RNBareExample.app */,\n\t\t\t\t00E356EE1AD99517003FC87E /* RNBareExampleTests.xctest */,\n\t\t\t);\n\t\t\tname = Products;\n\t\t\tsourceTree = \"<group>\";\n\t\t};\n/* End PBXGroup section */\n\n/* Begin PBXNativeTarget section */\n\t\t00E356ED1AD99517003FC87E /* RNBareExampleTests */ = {\n\t\t\tisa = PBXNativeTarget;\n\t\t\tbuildConfigurationList = 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget \"RNBareExampleTests\" */;\n\t\t\tbuildPhases = (\n\t\t\t\t1E250219C895BEA3A3B522F8 /* [CP] Check Pods Manifest.lock */,\n\t\t\t\t00E356EA1AD99517003FC87E /* Sources */,\n\t\t\t\t00E356EB1AD99517003FC87E /* Frameworks */,\n\t\t\t\t00E356EC1AD99517003FC87E /* Resources */,\n\t\t\t\t80A9B916640DA44574A6BFE9 /* [CP] Embed Pods Frameworks */,\n\t\t\t\t4064C66412A1431AEB98707F /* [CP] Copy Pods 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 = RNBareExampleTests;\n\t\t\tproductName = RNBareExampleTests;\n\t\t\tproductReference = 00E356EE1AD99517003FC87E /* RNBareExampleTests.xctest */;\n\t\t\tproductType = \"com.apple.product-type.bundle.unit-test\";\n\t\t};\n\t\t13B07F861A680F5B00A75B9A /* RNBareExample */ = {\n\t\t\tisa = PBXNativeTarget;\n\t\t\tbuildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget \"RNBareExample\" */;\n\t\t\tbuildPhases = (\n\t\t\t\t817A1C3BBB37E467A160595B /* [CP] Check Pods Manifest.lock */,\n\t\t\t\tFD10A7F022414F080027D42C /* Start Packager */,\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\t3461A323C30894E61CCBE9AB /* [CP] Embed Pods Frameworks */,\n\t\t\t\t5025BCA1300C603C2631117B /* [CP] Copy Pods Resources */,\n\t\t\t);\n\t\t\tbuildRules = (\n\t\t\t);\n\t\t\tdependencies = (\n\t\t\t);\n\t\t\tname = RNBareExample;\n\t\t\tproductName = RNBareExample;\n\t\t\tproductReference = 13B07F961A680F5B00A75B9A /* RNBareExample.app */;\n\t\t\tproductType = \"com.apple.product-type.application\";\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\tLastUpgradeCheck = 1210;\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\t13B07F861A680F5B00A75B9A = {\n\t\t\t\t\t\tLastSwiftMigration = 1120;\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 \"RNBareExample\" */;\n\t\t\tcompatibilityVersion = \"Xcode 12.0\";\n\t\t\tdevelopmentRegion = en;\n\t\t\thasScannedForEncodings = 0;\n\t\t\tknownRegions = (\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\tprojectRoot = \"\";\n\t\t\ttargets = (\n\t\t\t\t13B07F861A680F5B00A75B9A /* RNBareExample */,\n\t\t\t\t00E356ED1AD99517003FC87E /* RNBareExampleTests */,\n\t\t\t);\n\t\t};\n/* End PBXProject 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\t81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */,\n\t\t\t\t13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,\n\t\t\t\t8EC97A0012A44B37A239430B /* Roboto-Bold.ttf in Resources */,\n\t\t\t\tA407EFB79BE54725A37F6732 /* Roboto-Italic.ttf in Resources */,\n\t\t\t\tF8E98893793F4862BBC06E24 /* Roboto-Light.ttf in Resources */,\n\t\t\t\t4A2BEF80E0F0453CB2500790 /* Roboto-Medium.ttf in Resources */,\n\t\t\t\t38BE891D962D4F349AF2917E /* Roboto-Regular.ttf in Resources */,\n\t\t\t\t4664335C02E54CEEA39B7112 /* Merriweather-Regular.ttf in Resources */,\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 = \"set -e\\n\\nexport NODE_BINARY=node\\n../node_modules/react-native/scripts/react-native-xcode.sh\\n\";\n\t\t};\n\t\t1E250219C895BEA3A3B522F8 /* [CP] Check Pods Manifest.lock */ = {\n\t\t\tisa = PBXShellScriptBuildPhase;\n\t\t\tbuildActionMask = 2147483647;\n\t\t\tfiles = (\n\t\t\t);\n\t\t\tinputFileListPaths = (\n\t\t\t);\n\t\t\tinputPaths = (\n\t\t\t\t\"${PODS_PODFILE_DIR_PATH}/Podfile.lock\",\n\t\t\t\t\"${PODS_ROOT}/Manifest.lock\",\n\t\t\t);\n\t\t\tname = \"[CP] Check Pods Manifest.lock\";\n\t\t\toutputFileListPaths = (\n\t\t\t);\n\t\t\toutputPaths = (\n\t\t\t\t\"$(DERIVED_FILE_DIR)/Pods-RNBareExample-RNBareExampleTests-checkManifestLockResult.txt\",\n\t\t\t);\n\t\t\trunOnlyForDeploymentPostprocessing = 0;\n\t\t\tshellPath = /bin/sh;\n\t\t\tshellScript = \"diff \\\"${PODS_PODFILE_DIR_PATH}/Podfile.lock\\\" \\\"${PODS_ROOT}/Manifest.lock\\\" > /dev/null\\nif [ $? != 0 ] ; then\\n    # print error to STDERR\\n    echo \\\"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\\\" >&2\\n    exit 1\\nfi\\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\\necho \\\"SUCCESS\\\" > \\\"${SCRIPT_OUTPUT_FILE_0}\\\"\\n\";\n\t\t\tshowEnvVarsInLog = 0;\n\t\t};\n\t\t3461A323C30894E61CCBE9AB /* [CP] Embed Pods Frameworks */ = {\n\t\t\tisa = PBXShellScriptBuildPhase;\n\t\t\tbuildActionMask = 2147483647;\n\t\t\tfiles = (\n\t\t\t);\n\t\t\tinputFileListPaths = (\n\t\t\t\t\"${PODS_ROOT}/Target Support Files/Pods-RNBareExample/Pods-RNBareExample-frameworks-${CONFIGURATION}-input-files.xcfilelist\",\n\t\t\t);\n\t\t\tname = \"[CP] Embed Pods Frameworks\";\n\t\t\toutputFileListPaths = (\n\t\t\t\t\"${PODS_ROOT}/Target Support Files/Pods-RNBareExample/Pods-RNBareExample-frameworks-${CONFIGURATION}-output-files.xcfilelist\",\n\t\t\t);\n\t\t\trunOnlyForDeploymentPostprocessing = 0;\n\t\t\tshellPath = /bin/sh;\n\t\t\tshellScript = \"\\\"${PODS_ROOT}/Target Support Files/Pods-RNBareExample/Pods-RNBareExample-frameworks.sh\\\"\\n\";\n\t\t\tshowEnvVarsInLog = 0;\n\t\t};\n\t\t4064C66412A1431AEB98707F /* [CP] Copy Pods Resources */ = {\n\t\t\tisa = PBXShellScriptBuildPhase;\n\t\t\tbuildActionMask = 2147483647;\n\t\t\tfiles = (\n\t\t\t);\n\t\t\tinputFileListPaths = (\n\t\t\t\t\"${PODS_ROOT}/Target Support Files/Pods-RNBareExample-RNBareExampleTests/Pods-RNBareExample-RNBareExampleTests-resources-${CONFIGURATION}-input-files.xcfilelist\",\n\t\t\t);\n\t\t\tname = \"[CP] Copy Pods Resources\";\n\t\t\toutputFileListPaths = (\n\t\t\t\t\"${PODS_ROOT}/Target Support Files/Pods-RNBareExample-RNBareExampleTests/Pods-RNBareExample-RNBareExampleTests-resources-${CONFIGURATION}-output-files.xcfilelist\",\n\t\t\t);\n\t\t\trunOnlyForDeploymentPostprocessing = 0;\n\t\t\tshellPath = /bin/sh;\n\t\t\tshellScript = \"\\\"${PODS_ROOT}/Target Support Files/Pods-RNBareExample-RNBareExampleTests/Pods-RNBareExample-RNBareExampleTests-resources.sh\\\"\\n\";\n\t\t\tshowEnvVarsInLog = 0;\n\t\t};\n\t\t5025BCA1300C603C2631117B /* [CP] Copy Pods Resources */ = {\n\t\t\tisa = PBXShellScriptBuildPhase;\n\t\t\tbuildActionMask = 2147483647;\n\t\t\tfiles = (\n\t\t\t);\n\t\t\tinputFileListPaths = (\n\t\t\t\t\"${PODS_ROOT}/Target Support Files/Pods-RNBareExample/Pods-RNBareExample-resources-${CONFIGURATION}-input-files.xcfilelist\",\n\t\t\t);\n\t\t\tname = \"[CP] Copy Pods Resources\";\n\t\t\toutputFileListPaths = (\n\t\t\t\t\"${PODS_ROOT}/Target Support Files/Pods-RNBareExample/Pods-RNBareExample-resources-${CONFIGURATION}-output-files.xcfilelist\",\n\t\t\t);\n\t\t\trunOnlyForDeploymentPostprocessing = 0;\n\t\t\tshellPath = /bin/sh;\n\t\t\tshellScript = \"\\\"${PODS_ROOT}/Target Support Files/Pods-RNBareExample/Pods-RNBareExample-resources.sh\\\"\\n\";\n\t\t\tshowEnvVarsInLog = 0;\n\t\t};\n\t\t80A9B916640DA44574A6BFE9 /* [CP] Embed Pods Frameworks */ = {\n\t\t\tisa = PBXShellScriptBuildPhase;\n\t\t\tbuildActionMask = 2147483647;\n\t\t\tfiles = (\n\t\t\t);\n\t\t\tinputFileListPaths = (\n\t\t\t\t\"${PODS_ROOT}/Target Support Files/Pods-RNBareExample-RNBareExampleTests/Pods-RNBareExample-RNBareExampleTests-frameworks-${CONFIGURATION}-input-files.xcfilelist\",\n\t\t\t);\n\t\t\tname = \"[CP] Embed Pods Frameworks\";\n\t\t\toutputFileListPaths = (\n\t\t\t\t\"${PODS_ROOT}/Target Support Files/Pods-RNBareExample-RNBareExampleTests/Pods-RNBareExample-RNBareExampleTests-frameworks-${CONFIGURATION}-output-files.xcfilelist\",\n\t\t\t);\n\t\t\trunOnlyForDeploymentPostprocessing = 0;\n\t\t\tshellPath = /bin/sh;\n\t\t\tshellScript = \"\\\"${PODS_ROOT}/Target Support Files/Pods-RNBareExample-RNBareExampleTests/Pods-RNBareExample-RNBareExampleTests-frameworks.sh\\\"\\n\";\n\t\t\tshowEnvVarsInLog = 0;\n\t\t};\n\t\t817A1C3BBB37E467A160595B /* [CP] Check Pods Manifest.lock */ = {\n\t\t\tisa = PBXShellScriptBuildPhase;\n\t\t\tbuildActionMask = 2147483647;\n\t\t\tfiles = (\n\t\t\t);\n\t\t\tinputFileListPaths = (\n\t\t\t);\n\t\t\tinputPaths = (\n\t\t\t\t\"${PODS_PODFILE_DIR_PATH}/Podfile.lock\",\n\t\t\t\t\"${PODS_ROOT}/Manifest.lock\",\n\t\t\t);\n\t\t\tname = \"[CP] Check Pods Manifest.lock\";\n\t\t\toutputFileListPaths = (\n\t\t\t);\n\t\t\toutputPaths = (\n\t\t\t\t\"$(DERIVED_FILE_DIR)/Pods-RNBareExample-checkManifestLockResult.txt\",\n\t\t\t);\n\t\t\trunOnlyForDeploymentPostprocessing = 0;\n\t\t\tshellPath = /bin/sh;\n\t\t\tshellScript = \"diff \\\"${PODS_PODFILE_DIR_PATH}/Podfile.lock\\\" \\\"${PODS_ROOT}/Manifest.lock\\\" > /dev/null\\nif [ $? != 0 ] ; then\\n    # print error to STDERR\\n    echo \\\"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\\\" >&2\\n    exit 1\\nfi\\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\\necho \\\"SUCCESS\\\" > \\\"${SCRIPT_OUTPUT_FILE_0}\\\"\\n\";\n\t\t\tshowEnvVarsInLog = 0;\n\t\t};\n\t\tFD10A7F022414F080027D42C /* Start Packager */ = {\n\t\t\tisa = PBXShellScriptBuildPhase;\n\t\t\tbuildActionMask = 2147483647;\n\t\t\tfiles = (\n\t\t\t);\n\t\t\tinputFileListPaths = (\n\t\t\t);\n\t\t\tinputPaths = (\n\t\t\t);\n\t\t\tname = \"Start Packager\";\n\t\t\toutputFileListPaths = (\n\t\t\t);\n\t\t\toutputPaths = (\n\t\t\t);\n\t\t\trunOnlyForDeploymentPostprocessing = 0;\n\t\t\tshellPath = /bin/sh;\n\t\t\tshellScript = \"export RCT_METRO_PORT=\\\"${RCT_METRO_PORT:=8081}\\\"\\necho \\\"export RCT_METRO_PORT=${RCT_METRO_PORT}\\\" > \\\"${SRCROOT}/../node_modules/react-native/scripts/.packager.env\\\"\\nif [ -z \\\"${RCT_NO_LAUNCH_PACKAGER+xxx}\\\" ] ; then\\n  if nc -w 5 -z localhost ${RCT_METRO_PORT} ; then\\n    if ! curl -s \\\"http://localhost:${RCT_METRO_PORT}/status\\\" | grep -q \\\"packager-status:running\\\" ; then\\n      echo \\\"Port ${RCT_METRO_PORT} already in use, packager is either not running or not running correctly\\\"\\n      exit 2\\n    fi\\n  else\\n    open \\\"$SRCROOT/../node_modules/react-native/scripts/launchPackager.command\\\" || echo \\\"Can't start packager automatically\\\"\\n  fi\\nfi\\n\";\n\t\t\tshowEnvVarsInLog = 0;\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 /* RNBareExampleTests.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/* End PBXSourcesBuildPhase section */\n\n/* Begin PBXTargetDependency section */\n\t\t00E356F51AD99517003FC87E /* PBXTargetDependency */ = {\n\t\t\tisa = PBXTargetDependency;\n\t\t\ttarget = 13B07F861A680F5B00A75B9A /* RNBareExample */;\n\t\t\ttargetProxy = 00E356F41AD99517003FC87E /* PBXContainerItemProxy */;\n\t\t};\n/* End PBXTargetDependency section */\n\n/* Begin XCBuildConfiguration section */\n\t\t00E356F61AD99517003FC87E /* Debug */ = {\n\t\t\tisa = XCBuildConfiguration;\n\t\t\tbaseConfigurationReference = 48A3F3B34B71A627C36D23AE /* Pods-RNBareExample-RNBareExampleTests.debug.xcconfig */;\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\tINFOPLIST_FILE = RNBareExampleTests/Info.plist;\n\t\t\t\tIPHONEOS_DEPLOYMENT_TARGET = 10.0;\n\t\t\t\tLD_RUNPATH_SEARCH_PATHS = (\n\t\t\t\t\t\"$(inherited)\",\n\t\t\t\t\t\"@executable_path/Frameworks\",\n\t\t\t\t\t\"@loader_path/Frameworks\",\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\t\"$(inherited)\",\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)/RNBareExample.app/RNBareExample\";\n\t\t\t};\n\t\t\tname = Debug;\n\t\t};\n\t\t00E356F71AD99517003FC87E /* Release */ = {\n\t\t\tisa = XCBuildConfiguration;\n\t\t\tbaseConfigurationReference = BE9748D91138D25975CC7644 /* Pods-RNBareExample-RNBareExampleTests.release.xcconfig */;\n\t\t\tbuildSettings = {\n\t\t\t\tBUNDLE_LOADER = \"$(TEST_HOST)\";\n\t\t\t\tCOPY_PHASE_STRIP = NO;\n\t\t\t\tINFOPLIST_FILE = RNBareExampleTests/Info.plist;\n\t\t\t\tIPHONEOS_DEPLOYMENT_TARGET = 10.0;\n\t\t\t\tLD_RUNPATH_SEARCH_PATHS = (\n\t\t\t\t\t\"$(inherited)\",\n\t\t\t\t\t\"@executable_path/Frameworks\",\n\t\t\t\t\t\"@loader_path/Frameworks\",\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\t\"$(inherited)\",\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)/RNBareExample.app/RNBareExample\";\n\t\t\t};\n\t\t\tname = Release;\n\t\t};\n\t\t13B07F941A680F5B00A75B9A /* Debug */ = {\n\t\t\tisa = XCBuildConfiguration;\n\t\t\tbaseConfigurationReference = DC9506A1E7FC0D9474DB233B /* Pods-RNBareExample.debug.xcconfig */;\n\t\t\tbuildSettings = {\n\t\t\t\tASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;\n\t\t\t\tCLANG_ENABLE_MODULES = YES;\n\t\t\t\tCURRENT_PROJECT_VERSION = 1;\n\t\t\t\tENABLE_BITCODE = NO;\n\t\t\t\tINFOPLIST_FILE = RNBareExample/Info.plist;\n\t\t\t\tLD_RUNPATH_SEARCH_PATHS = (\n\t\t\t\t\t\"$(inherited)\",\n\t\t\t\t\t\"@executable_path/Frameworks\",\n\t\t\t\t);\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 = RNBareExample;\n\t\t\t\tSWIFT_OPTIMIZATION_LEVEL = \"-Onone\";\n\t\t\t\tSWIFT_VERSION = 5.0;\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\tbaseConfigurationReference = 6C3E26B903A9FBC8FEAD0366 /* Pods-RNBareExample.release.xcconfig */;\n\t\t\tbuildSettings = {\n\t\t\t\tASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;\n\t\t\t\tCLANG_ENABLE_MODULES = YES;\n\t\t\t\tCURRENT_PROJECT_VERSION = 1;\n\t\t\t\tINFOPLIST_FILE = RNBareExample/Info.plist;\n\t\t\t\tLD_RUNPATH_SEARCH_PATHS = (\n\t\t\t\t\t\"$(inherited)\",\n\t\t\t\t\t\"@executable_path/Frameworks\",\n\t\t\t\t);\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 = RNBareExample;\n\t\t\t\tSWIFT_VERSION = 5.0;\n\t\t\t\tVERSIONING_SYSTEM = \"apple-generic\";\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_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES;\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_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES;\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\t\"EXCLUDED_ARCHS[sdk=iphonesimulator*]\" = \"arm64 \";\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 = 10.0;\n\t\t\t\tLD_RUNPATH_SEARCH_PATHS = (\n\t\t\t\t\t/usr/lib/swift,\n\t\t\t\t\t\"$(inherited)\",\n\t\t\t\t);\n\t\t\t\tLIBRARY_SEARCH_PATHS = (\n\t\t\t\t\t\"\\\"$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)\\\"\",\n\t\t\t\t\t\"\\\"$(TOOLCHAIN_DIR)/usr/lib/swift-5.0/$(PLATFORM_NAME)\\\"\",\n\t\t\t\t\t\"\\\"$(inherited)\\\"\",\n\t\t\t\t);\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_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES;\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_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES;\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\t\"EXCLUDED_ARCHS[sdk=iphonesimulator*]\" = \"arm64 \";\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 = 10.0;\n\t\t\t\tLD_RUNPATH_SEARCH_PATHS = (\n\t\t\t\t\t/usr/lib/swift,\n\t\t\t\t\t\"$(inherited)\",\n\t\t\t\t);\n\t\t\t\tLIBRARY_SEARCH_PATHS = (\n\t\t\t\t\t\"\\\"$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)\\\"\",\n\t\t\t\t\t\"\\\"$(TOOLCHAIN_DIR)/usr/lib/swift-5.0/$(PLATFORM_NAME)\\\"\",\n\t\t\t\t\t\"\\\"$(inherited)\\\"\",\n\t\t\t\t);\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 \"RNBareExampleTests\" */ = {\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 \"RNBareExample\" */ = {\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\t83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject \"RNBareExample\" */ = {\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}\n"
  },
  {
    "path": "RNBareExample/ios/RNBareExample.xcodeproj/xcshareddata/xcschemes/RNBareExample.xcscheme",
    "content": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<Scheme\n   LastUpgradeVersion = \"1210\"\n   version = \"1.3\">\n   <BuildAction\n      parallelizeBuildables = \"YES\"\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 = \"13B07F861A680F5B00A75B9A\"\n               BuildableName = \"RNBareExample.app\"\n               BlueprintName = \"RNBareExample\"\n               ReferencedContainer = \"container:RNBareExample.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 = \"RNBareExampleTests.xctest\"\n               BlueprintName = \"RNBareExampleTests\"\n               ReferencedContainer = \"container:RNBareExample.xcodeproj\">\n            </BuildableReference>\n         </TestableReference>\n      </Testables>\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 = \"RNBareExample.app\"\n            BlueprintName = \"RNBareExample\"\n            ReferencedContainer = \"container:RNBareExample.xcodeproj\">\n         </BuildableReference>\n      </BuildableProductRunnable>\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 = \"RNBareExample.app\"\n            BlueprintName = \"RNBareExample\"\n            ReferencedContainer = \"container:RNBareExample.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": "RNBareExample/ios/RNBareExample.xcworkspace/contents.xcworkspacedata",
    "content": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<Workspace\n   version = \"1.0\">\n   <FileRef\n      location = \"group:RNBareExample.xcodeproj\">\n   </FileRef>\n   <FileRef\n      location = \"group:Pods/Pods.xcodeproj\">\n   </FileRef>\n</Workspace>\n"
  },
  {
    "path": "RNBareExample/ios/RNBareExample.xcworkspace/xcshareddata/IDEWorkspaceChecks.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>IDEDidComputeMac32BitWarning</key>\n\t<true/>\n</dict>\n</plist>\n"
  },
  {
    "path": "RNBareExample/ios/RNBareExampleTests/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": "RNBareExample/ios/RNBareExampleTests/RNBareExampleTests.m",
    "content": "#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\"\n\n@interface RNBareExampleTests : XCTestCase\n\n@end\n\n@implementation RNBareExampleTests\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#ifdef DEBUG\n  RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) {\n    if (level >= RCTLogLevelError) {\n      redboxError = message;\n    }\n  });\n#endif\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#ifdef DEBUG\n  RCTSetLogFunction(RCTDefaultLogFunction);\n#endif\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": "RNBareExample/metro.config.js",
    "content": "const path = require('path');\nconst blacklist = require('metro-config/src/defaults/blacklist');\nconst escape = require('escape-string-regexp');\nconst pak = require('../package.json');\n\nconst root = path.resolve(__dirname, '..');\n\nconst modules = Object.keys({\n  ...pak.peerDependencies,\n});\n\nmodule.exports = {\n  projectRoot: __dirname,\n  watchFolders: [root],\n\n  // We need to make sure that only one version is loaded for peerDependencies\n  // So we blacklist them at the root, and alias them to the versions in example's node_modules\n  resolver: {\n    blacklistRE: blacklist(\n      modules.map(\n        m => new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\\\/.*$`),\n      ),\n    ),\n    extraNodeModules: modules.reduce((acc, name) => {\n      acc[name] = path.join(__dirname, 'node_modules', name);\n      return acc;\n    }, {}),\n  },\n\n  transformer: {\n    getTransformOptions: async () => ({\n      transform: {\n        experimentalImportSupport: false,\n        inlineRequires: false,\n      },\n    }),\n  },\n};\n"
  },
  {
    "path": "RNBareExample/package.json",
    "content": "{\n  \"name\": \"RNBareExample\",\n  \"version\": \"0.0.1\",\n  \"private\": true,\n  \"scripts\": {\n    \"android\": \"react-native run-android\",\n    \"ios\": \"react-native run-ios\",\n    \"start\": \"react-native start\",\n    \"test\": \"jest\",\n    \"lint\": \"eslint . --ext .js,.jsx,.ts,.tsx\"\n  },\n  \"dependencies\": {\n    \"react\": \"17.0.1\",\n    \"react-native\": \"0.64.1\",\n    \"react-native-linear-gradient\": \"^2.5.6\",\n    \"react-native-safe-area-context\": \"^3.2.0\",\n    \"react-native-svg\": \"^12.1.1\"\n  },\n  \"devDependencies\": {\n    \"@babel/core\": \"^7.12.9\",\n    \"@babel/runtime\": \"^7.12.5\",\n    \"@react-native-community/eslint-config\": \"^2.0.0\",\n    \"@types/jest\": \"^26.0.23\",\n    \"@types/react-native\": \"^0.64.5\",\n    \"@types/react-test-renderer\": \"^16.9.2\",\n    \"babel-jest\": \"^26.6.3\",\n    \"babel-plugin-module-resolver\": \"^4.1.0\",\n    \"eslint\": \"^7.14.0\",\n    \"jest\": \"^26.6.3\",\n    \"metro-react-native-babel-preset\": \"^0.64.0\",\n    \"react-test-renderer\": \"17.0.1\",\n    \"typescript\": \"^3.8.3\"\n  },\n  \"resolutions\": {\n    \"@types/react\": \"^17\"\n  },\n  \"jest\": {\n    \"preset\": \"react-native\",\n    \"moduleFileExtensions\": [\n      \"ts\",\n      \"tsx\",\n      \"js\",\n      \"jsx\",\n      \"json\",\n      \"node\"\n    ]\n  }\n}\n"
  },
  {
    "path": "RNBareExample/react-native.config.js",
    "content": "module.exports = {\n  project: {\n    ios: {},\n    android: {},\n  },\n  assets: ['./assets/fonts'],\n};\n"
  },
  {
    "path": "RNBareExample/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"paths\": {\n      \"native-base\": [\"../src/index\"]\n    },\n    /* Basic Options */\n    \"target\": \"esnext\" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,\n    \"module\": \"commonjs\" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,\n    \"lib\": [\n      \"es2017\"\n    ] /* Specify library files to be included in the compilation. */,\n    \"allowJs\": true /* Allow javascript files to be compiled. */,\n    // \"checkJs\": true,                       /* Report errors in .js files. */\n    \"jsx\": \"react-native\" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,\n    // \"declaration\": true,                   /* Generates corresponding '.d.ts' file. */\n    // \"sourceMap\": true,                     /* Generates corresponding '.map' file. */\n    // \"outFile\": \"./\",                       /* Concatenate and emit output to single file. */\n    // \"outDir\": \"./\",                        /* Redirect output structure to the directory. */\n    // \"rootDir\": \"./\",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */\n    // \"removeComments\": true,                /* Do not emit comments to output. */\n    \"noEmit\": true /* Do not emit outputs. */,\n    // \"incremental\": true,                   /* Enable incremental compilation */\n    // \"importHelpers\": true,                 /* Import emit helpers from 'tslib'. */\n    // \"downlevelIteration\": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */\n    \"isolatedModules\": true /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */,\n\n    /* Strict Type-Checking Options */\n    \"strict\": true /* Enable all strict type-checking options. */,\n    // \"noImplicitAny\": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */\n    // \"strictNullChecks\": true,              /* Enable strict null checks. */\n    // \"strictFunctionTypes\": true,           /* Enable strict checking of function types. */\n    // \"strictPropertyInitialization\": true,  /* Enable strict checking of property initialization in classes. */\n    // \"noImplicitThis\": true,                /* Raise error on 'this' expressions with an implied 'any' type. */\n    // \"alwaysStrict\": true,                  /* Parse in strict mode and emit \"use strict\" for each source file. */\n\n    /* Additional Checks */\n    // \"noUnusedLocals\": true,                /* Report errors on unused locals. */\n    // \"noUnusedParameters\": true,            /* Report errors on unused parameters. */\n    // \"noImplicitReturns\": true,             /* Report error when not all code paths in function return a value. */\n    // \"noFallthroughCasesInSwitch\": true,    /* Report errors for fallthrough cases in switch statement. */\n\n    /* Module Resolution Options */\n    \"moduleResolution\": \"node\" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,\n    // \"baseUrl\": \"./\",                       /* Base directory to resolve non-absolute module names. */\n    // \"paths\": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */\n    // \"rootDirs\": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */\n    // \"typeRoots\": [],                       /* List of folders to include type definitions from. */\n    // \"types\": [],                           /* Type declaration files to be included in compilation. */\n    \"allowSyntheticDefaultImports\": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,\n    \"esModuleInterop\": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,\n    // \"preserveSymlinks\": true,              /* Do not resolve the real path of symlinks. */\n    \"skipLibCheck\": false /* Skip type checking of declaration files. */\n\n    /* Source Map Options */\n    // \"sourceRoot\": \"./\",                    /* Specify the location where debugger should locate TypeScript files instead of source locations. */\n    // \"mapRoot\": \"./\",                       /* Specify the location where debugger should locate map files instead of generated locations. */\n    // \"inlineSourceMap\": true,               /* Emit a single file with source maps instead of having a separate file. */\n    // \"inlineSources\": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */\n\n    /* Experimental Options */\n    // \"experimentalDecorators\": true,        /* Enables experimental support for ES7 decorators. */\n    // \"emitDecoratorMetadata\": true,         /* Enables experimental support for emitting type metadata for decorators. */\n  },\n  \"exclude\": [\n    \"node_modules\",\n    \"babel.config.js\",\n    \"metro.config.js\",\n    \"jest.config.js\"\n  ]\n}\n"
  },
  {
    "path": "babel.config.js",
    "content": "module.exports = {\n  presets: ['module:metro-react-native-babel-preset'],\n  plugins:\n    process.env.NODE_ENV === 'production' ? ['transform-remove-console'] : [],\n};\n"
  },
  {
    "path": "cli.js",
    "content": "const { exec } = require('child_process');\nconst path = require('path');\nconst fs = require('fs');\n\n// Copy directory\nfunction copyDir(src, dest) {\n  fs.mkdirSync(dest, { recursive: true });\n  let entries = fs.readdirSync(src, { withFileTypes: true });\n\n  for (let entry of entries) {\n    let srcPath = path.join(src, entry.name);\n    let destPath = path.join(dest, entry.name);\n\n    entry.isDirectory()\n      ? copyDir(srcPath, destPath)\n      : fs.copyFileSync(srcPath, destPath);\n  }\n}\n\nconst themeFolder = path.join(__dirname, 'src', 'theme');\nconst outDirectory = path.join(process.cwd(), 'theme');\nconst themeTemp = path.join(process.cwd(), 'theme-temp');\n\nconst transpileScript = `tsc ${themeTemp}/index.ts --target esnext --moduleResolution node --outDir ${outDirectory} --skipLibCheck true --allowSyntheticDefaultImports true`;\n\nconst VALID_ARGS = ['eject:theme'];\n\nconst ejectTheme = async () => {\n  await copyDir(themeFolder, themeTemp);\n  await promisifyExec(transpileScript);\n  fs.rmSync(themeTemp, { recursive: true, force: true });\n\n  console.log('Theme ejected successfully!');\n  console.log('Theme folder is placed in ' + process.cwd() + ' directory.');\n};\n\nconst main = () => {\n  const myArgs = process.argv.slice(2);\n  invokeFunctionBasedOnArgs(myArgs[0]);\n};\n\nconst invokeFunctionBasedOnArgs = (arg) => {\n  switch (arg) {\n    case VALID_ARGS[0]: {\n      ejectTheme();\n      break;\n    }\n    default: {\n      console.log('No arguments matched. Valid arguments are ', VALID_ARGS);\n      break;\n    }\n  }\n};\n\nconst promisifyExec = (command) => {\n  return new Promise((resolve, reject) => {\n    exec(command, (error, stdout, stderr) => {\n      console.log(stdout);\n      console.log(stderr);\n      if (error !== null) {\n        reject(error);\n        console.log(`exec error: ${error}`);\n      }\n      resolve();\n    });\n  });\n};\n\nmain();\n"
  },
  {
    "path": "example/.eslintrc.json",
    "content": "{\n  \"extends\": [\"@react-native-community\", \"prettier\"],\n  \"rules\": {\n    \"prettier/prettier\": [\n      \"error\",\n      {\n        \"quoteProps\": \"preserve\",\n        \"singleQuote\": true,\n        \"tabWidth\": 2,\n        \"trailingComma\": \"es5\",\n        \"useTabs\": false\n      }\n    ],\n    \"no-bitwise\": 0,\n    \"prefer-const\": \"warn\",\n    \"no-console\": \"off\"\n  },\n  \"plugins\": [\"prettier\"]\n}\n"
  },
  {
    "path": "example/.nvmrc",
    "content": "v14.19.0"
  },
  {
    "path": "example/App.tsx",
    "content": "import React from 'react';\nimport StoryBookUI from './storybook';\nimport { useFonts } from 'expo-font';\n\nexport default () => {\n  const [loaded] = useFonts({\n    'Roboto-Bold': require('./assets/fonts/Roboto-Bold.ttf'),\n    'Roboto-Italic': require('./assets/fonts/Roboto-Italic.ttf'),\n    'Roboto-Light': require('./assets/fonts/Roboto-Light.ttf'),\n    'Roboto-Regular': require('./assets/fonts/Roboto-Regular.ttf'),\n    'Roboto-Medium': require('./assets/fonts/Roboto-Medium.ttf'),\n\n    'Montserrat-Bold': require('./assets/fonts/Montserrat-Bold.ttf'),\n    'Montserrat-Italic': require('./assets/fonts/Montserrat-Italic.ttf'),\n    'Montserrat-Light': require('./assets/fonts/Montserrat-Light.ttf'),\n    'Montserrat-Regular': require('./assets/fonts/Montserrat-Regular.ttf'),\n    'Montserrat-Medium': require('./assets/fonts/Montserrat-Medium.ttf'),\n    'Montserrat-MediumItalic': require('./assets/fonts/Montserrat-MediumItalic.ttf'),\n    'Montserrat-Black': require('./assets/fonts/Montserrat-Black.ttf'),\n    'Montserrat-BlackItalic': require('./assets/fonts/Montserrat-BlackItalic.ttf'),\n    'Montserrat-ExtraBold': require('./assets/fonts/Montserrat-ExtraBold.ttf'),\n    'Montserrat-ExtraBoldItalic': require('./assets/fonts/Montserrat-ExtraBoldItalic.ttf'),\n    'Montserrat-SemiBold': require('./assets/fonts/Montserrat-SemiBold.ttf'),\n    'Montserrat-SemiBoldItalic': require('./assets/fonts/Montserrat-SemiBoldItalic.ttf'),\n  });\n\n  if (!loaded) return null;\n\n  return <StoryBookUI />;\n};\n"
  },
  {
    "path": "example/__mocks__/@react-native-async-storage/async-storage.js",
    "content": "import DefaultValue from '@react-native-async-storage/async-storage/jest/async-storage-mock';\nexport default DefaultValue;\n"
  },
  {
    "path": "example/__mocks__/globalMock.js",
    "content": "jest.mock('global', () => ({\n  ...global,\n  WebSocket: function WebSocket() {},\n}));\n\njest.mock('react-native-keyboard-aware-scroll-view', () => {\n  const KeyboardAwareScrollView = ({ children }) => children;\n  return { KeyboardAwareScrollView };\n});\n\nimport mockAsyncStorage from '@react-native-async-storage/async-storage/jest/async-storage-mock';\njest.mock('@react-native-async-storage/async-storage', () => mockAsyncStorage);\n"
  },
  {
    "path": "example/app.json",
    "content": "{\n    \"name\": \"NativeBaseExample\",\n    \"displayName\": \"NativeBase Example\",\n    \"packagerOpts\": {\n        \"config\": \"metro.config.js\"\n    },\n    \"expo\": {\n        \"name\": \"NativeBase Example\",\n        \"slug\": \"native-base-example\",\n        \"description\": \"Example app for Nativebase\",\n        \"privacy\": \"public\",\n        \"version\": \"1.0.0\",\n        \"platforms\": [\"ios\", \"android\", \"web\"],\n        \"ios\": {\n            \"supportsTablet\": true\n        },\n        \"assetBundlePatterns\": [\"**/*\"]\n    }\n}"
  },
  {
    "path": "example/babel.config.js",
    "content": "const path = require('path');\nconst pak = require('../package.json');\n\nmodule.exports = function (api) {\n  api.cache(true);\n  return {\n    presets: [['babel-preset-expo', { jsxRuntime: 'classic' }]],\n    plugins: [\n      [\n        'module-resolver',\n        {\n          alias: {\n            // For development, we want to alias the library to the source\n            [pak.name]: path.join(__dirname, '..', pak.source),\n          },\n        },\n      ],\n    ],\n  };\n};\n"
  },
  {
    "path": "example/jest-android.config.js",
    "content": "const config = {\n  preset: 'jest-expo/android',\n  transformIgnorePatterns: [\n    '<rootDir>/../node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@sentry/.*)',\n  ],\n  setupFilesAfterEnv: ['<rootDir>/__mocks__/globalMock.js'],\n};\n\nmodule.exports = config;\n"
  },
  {
    "path": "example/jest-ios.config.js",
    "content": "const config = {\n  preset: 'jest-expo/ios',\n  transformIgnorePatterns: [\n    '<rootDir>/../node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@sentry/.*)',\n  ],\n  setupFilesAfterEnv: ['<rootDir>/__mocks__/globalMock.js'],\n};\n\nmodule.exports = config;\n"
  },
  {
    "path": "example/jest.config.js",
    "content": "const config = {\n  projects: [{ preset: 'jest-expo/web' }, { preset: 'jest-expo/node' }],\n  transformIgnorePatterns: [\n    '<rootDir>/../node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@sentry/.*)',\n  ],\n  setupFilesAfterEnv: ['<rootDir>/__mocks__/globalMock.js'],\n  globals: {\n    window: {},\n  },\n  moduleNameMapper: {\n    '^.+\\\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js', // replaces .css imports with an empty object\n    '\\\\.(jpg|png|gif|ttf|eot|svg)$': '<rootDir>/__mocks__/fileMock.js', // replaces file imports with a useless string\n    '^react($|/.+)': '<rootDir>/node_modules/react$1', // makes sure all React imports are running off of the one in this package.\n  },\n};\n\nmodule.exports = config;\n"
  },
  {
    "path": "example/metro.config.js",
    "content": "const path = require('path');\nconst blacklist = require('metro-config/src/defaults/exclusionList');\nconst escape = require('escape-string-regexp');\nconst pak = require('../package.json');\n\nconst root = path.resolve(__dirname, '..');\n\nconst modules = Object.keys({\n  ...pak.peerDependencies,\n});\n\nmodule.exports = {\n  projectRoot: __dirname,\n  watchFolders: [root],\n\n  // We need to make sure that only one version is loaded for peerDependencies\n  // So we blacklist them at the root, and alias them to the versions in example's node_modules\n  resolver: {\n    blacklistRE: blacklist(\n      modules.map(\n        (m) =>\n          new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\\\/.*$`)\n      )\n    ),\n    extraNodeModules: modules.reduce((acc, name) => {\n      acc[name] = path.join(__dirname, 'node_modules', name);\n      return acc;\n    }, {}),\n  },\n\n  transformer: {\n    getTransformOptions: async () => ({\n      transform: {\n        experimentalImportSupport: false,\n        inlineRequires: false,\n      },\n    }),\n  },\n};\n"
  },
  {
    "path": "example/nativebase.config.ts",
    "content": "import { INativebaseConfig } from 'native-base';\n\nexport default {\n  dependencies: {\n    'linear-gradient': require('expo-linear-gradient').LinearGradient,\n  },\n  // strictMode: 'warn',\n} as INativebaseConfig;\n"
  },
  {
    "path": "example/package.json",
    "content": "{\n  \"name\": \"native-base-example\",\n  \"description\": \"Example app for NativeBase\",\n  \"version\": \"0.0.3\",\n  \"main\": \"node_modules/expo/AppEntry.js\",\n  \"scripts\": {\n    \"start\": \"expo start\",\n    \"android\": \"expo start --android\",\n    \"ios\": \"expo start --ios\",\n    \"web\": \"expo start --web\",\n    \"eject\": \"expo eject\",\n    \"storybook\": \"start-storybook -p 7007\",\n    \"build-storybook\": \"build-storybook\",\n    \"postinstall\": \"patch-package\",\n    \"test\": \"bash scripts/test.sh\",\n    \"update-test\": \"yarn test -u\"\n  },\n  \"dependencies\": {\n    \"@expo/vector-icons\": \"^13.0.0\",\n    \"@react-native-aria/overlays\": \"^0.2.9\",\n    \"@react-native-async-storage/async-storage\": \"~1.17.3\",\n    \"expo\": \"^46.0.0\",\n    \"expo-font\": \"~10.2.0\",\n    \"expo-linear-gradient\": \"~11.4.0\",\n    \"expo-splash-screen\": \"~0.16.2\",\n    \"expo-status-bar\": \"~1.4.0\",\n    \"formik\": \"^2.2.6\",\n    \"react\": \"18.0.0\",\n    \"react-hook-form\": \"^6.14.0\",\n    \"react-native\": \"0.69.6\",\n    \"react-native-keyboard-aware-scroll-view\": \"^0.9.4\",\n    \"react-native-safe-area-context\": \"4.3.1\",\n    \"react-native-svg\": \"12.3.0\",\n    \"react-native-web\": \"~0.18.7\",\n    \"webpack-dev-server\": \"3\"\n  },\n  \"devDependencies\": {\n    \"@babel/core\": \"^7.18.6\",\n    \"@babel/runtime\": \"^7.12.5\",\n    \"@expo/webpack-config\": \"^0.17.0\",\n    \"@storybook/addon-actions\": \"^5.3\",\n    \"@storybook/addon-knobs\": \"^5.3\",\n    \"@storybook/addon-links\": \"^5.3\",\n    \"@storybook/addon-ondevice-actions\": \"^5.3.23\",\n    \"@storybook/addon-ondevice-knobs\": \"^5.3.23\",\n    \"@storybook/addon-storyshots\": \"6.3\",\n    \"@storybook/react-native\": \"^5.3.23\",\n    \"@storybook/react-native-server\": \"^5.3.23\",\n    \"@types/react\": \"~18.0.0\",\n    \"@types/react-dom\": \"~18.0.0\",\n    \"@types/react-native\": \"~0.69.1\",\n    \"babel-loader\": \"^8.2.2\",\n    \"babel-plugin-module-resolver\": \"^4.0.0\",\n    \"core-js\": \"3.6.5\",\n    \"jest\": \"^26.6.3\",\n    \"jest-expo\": \"^46.0.0\",\n    \"metro-react-native-babel-preset\": \"^0.64.0\",\n    \"patch-package\": \"^6.2.2\",\n    \"postinstall-postinstall\": \"^2.1.0\",\n    \"react-dom\": \"18.0.0\",\n    \"react-test-renderer\": \"17.0.1\",\n    \"typescript\": \"^4.6.3\"\n  },\n  \"private\": false\n}\n"
  },
  {
    "path": "example/patches/core-js+3.6.5.patch",
    "content": "diff --git a/node_modules/core-js/modules/es.promise.js b/node_modules/core-js/modules/es.promise.js\nindex b79d2bc..e69de29 100644\n--- a/node_modules/core-js/modules/es.promise.js\n+++ b/node_modules/core-js/modules/es.promise.js\n@@ -1,379 +0,0 @@\n-'use strict';\n-var $ = require('../internals/export');\n-var IS_PURE = require('../internals/is-pure');\n-var global = require('../internals/global');\n-var getBuiltIn = require('../internals/get-built-in');\n-var NativePromise = require('../internals/native-promise-constructor');\n-var redefine = require('../internals/redefine');\n-var redefineAll = require('../internals/redefine-all');\n-var setToStringTag = require('../internals/set-to-string-tag');\n-var setSpecies = require('../internals/set-species');\n-var isObject = require('../internals/is-object');\n-var aFunction = require('../internals/a-function');\n-var anInstance = require('../internals/an-instance');\n-var classof = require('../internals/classof-raw');\n-var inspectSource = require('../internals/inspect-source');\n-var iterate = require('../internals/iterate');\n-var checkCorrectnessOfIteration = require('../internals/check-correctness-of-iteration');\n-var speciesConstructor = require('../internals/species-constructor');\n-var task = require('../internals/task').set;\n-var microtask = require('../internals/microtask');\n-var promiseResolve = require('../internals/promise-resolve');\n-var hostReportErrors = require('../internals/host-report-errors');\n-var newPromiseCapabilityModule = require('../internals/new-promise-capability');\n-var perform = require('../internals/perform');\n-var InternalStateModule = require('../internals/internal-state');\n-var isForced = require('../internals/is-forced');\n-var wellKnownSymbol = require('../internals/well-known-symbol');\n-var V8_VERSION = require('../internals/engine-v8-version');\n-\n-var SPECIES = wellKnownSymbol('species');\n-var PROMISE = 'Promise';\n-var getInternalState = InternalStateModule.get;\n-var setInternalState = InternalStateModule.set;\n-var getInternalPromiseState = InternalStateModule.getterFor(PROMISE);\n-var PromiseConstructor = NativePromise;\n-var TypeError = global.TypeError;\n-var document = global.document;\n-var process = global.process;\n-var $fetch = getBuiltIn('fetch');\n-var newPromiseCapability = newPromiseCapabilityModule.f;\n-var newGenericPromiseCapability = newPromiseCapability;\n-var IS_NODE = classof(process) == 'process';\n-var DISPATCH_EVENT = !!(document && document.createEvent && global.dispatchEvent);\n-var UNHANDLED_REJECTION = 'unhandledrejection';\n-var REJECTION_HANDLED = 'rejectionhandled';\n-var PENDING = 0;\n-var FULFILLED = 1;\n-var REJECTED = 2;\n-var HANDLED = 1;\n-var UNHANDLED = 2;\n-var Internal, OwnPromiseCapability, PromiseWrapper, nativeThen;\n-\n-var FORCED = isForced(PROMISE, function () {\n-  var GLOBAL_CORE_JS_PROMISE = inspectSource(PromiseConstructor) !== String(PromiseConstructor);\n-  if (!GLOBAL_CORE_JS_PROMISE) {\n-    // V8 6.6 (Node 10 and Chrome 66) have a bug with resolving custom thenables\n-    // https://bugs.chromium.org/p/chromium/issues/detail?id=830565\n-    // We can't detect it synchronously, so just check versions\n-    if (V8_VERSION === 66) return true;\n-    // Unhandled rejections tracking support, NodeJS Promise without it fails @@species test\n-    if (!IS_NODE && typeof PromiseRejectionEvent != 'function') return true;\n-  }\n-  // We need Promise#finally in the pure version for preventing prototype pollution\n-  if (IS_PURE && !PromiseConstructor.prototype['finally']) return true;\n-  // We can't use @@species feature detection in V8 since it causes\n-  // deoptimization and performance degradation\n-  // https://github.com/zloirock/core-js/issues/679\n-  if (V8_VERSION >= 51 && /native code/.test(PromiseConstructor)) return false;\n-  // Detect correctness of subclassing with @@species support\n-  var promise = PromiseConstructor.resolve(1);\n-  var FakePromise = function (exec) {\n-    exec(function () { /* empty */ }, function () { /* empty */ });\n-  };\n-  var constructor = promise.constructor = {};\n-  constructor[SPECIES] = FakePromise;\n-  return !(promise.then(function () { /* empty */ }) instanceof FakePromise);\n-});\n-\n-var INCORRECT_ITERATION = FORCED || !checkCorrectnessOfIteration(function (iterable) {\n-  PromiseConstructor.all(iterable)['catch'](function () { /* empty */ });\n-});\n-\n-// helpers\n-var isThenable = function (it) {\n-  var then;\n-  return isObject(it) && typeof (then = it.then) == 'function' ? then : false;\n-};\n-\n-var notify = function (promise, state, isReject) {\n-  if (state.notified) return;\n-  state.notified = true;\n-  var chain = state.reactions;\n-  microtask(function () {\n-    var value = state.value;\n-    var ok = state.state == FULFILLED;\n-    var index = 0;\n-    // variable length - can't use forEach\n-    while (chain.length > index) {\n-      var reaction = chain[index++];\n-      var handler = ok ? reaction.ok : reaction.fail;\n-      var resolve = reaction.resolve;\n-      var reject = reaction.reject;\n-      var domain = reaction.domain;\n-      var result, then, exited;\n-      try {\n-        if (handler) {\n-          if (!ok) {\n-            if (state.rejection === UNHANDLED) onHandleUnhandled(promise, state);\n-            state.rejection = HANDLED;\n-          }\n-          if (handler === true) result = value;\n-          else {\n-            if (domain) domain.enter();\n-            result = handler(value); // can throw\n-            if (domain) {\n-              domain.exit();\n-              exited = true;\n-            }\n-          }\n-          if (result === reaction.promise) {\n-            reject(TypeError('Promise-chain cycle'));\n-          } else if (then = isThenable(result)) {\n-            then.call(result, resolve, reject);\n-          } else resolve(result);\n-        } else reject(value);\n-      } catch (error) {\n-        if (domain && !exited) domain.exit();\n-        reject(error);\n-      }\n-    }\n-    state.reactions = [];\n-    state.notified = false;\n-    if (isReject && !state.rejection) onUnhandled(promise, state);\n-  });\n-};\n-\n-var dispatchEvent = function (name, promise, reason) {\n-  var event, handler;\n-  if (DISPATCH_EVENT) {\n-    event = document.createEvent('Event');\n-    event.promise = promise;\n-    event.reason = reason;\n-    event.initEvent(name, false, true);\n-    global.dispatchEvent(event);\n-  } else event = { promise: promise, reason: reason };\n-  if (handler = global['on' + name]) handler(event);\n-  else if (name === UNHANDLED_REJECTION) hostReportErrors('Unhandled promise rejection', reason);\n-};\n-\n-var onUnhandled = function (promise, state) {\n-  task.call(global, function () {\n-    var value = state.value;\n-    var IS_UNHANDLED = isUnhandled(state);\n-    var result;\n-    if (IS_UNHANDLED) {\n-      result = perform(function () {\n-        if (IS_NODE) {\n-          process.emit('unhandledRejection', value, promise);\n-        } else dispatchEvent(UNHANDLED_REJECTION, promise, value);\n-      });\n-      // Browsers should not trigger `rejectionHandled` event if it was handled here, NodeJS - should\n-      state.rejection = IS_NODE || isUnhandled(state) ? UNHANDLED : HANDLED;\n-      if (result.error) throw result.value;\n-    }\n-  });\n-};\n-\n-var isUnhandled = function (state) {\n-  return state.rejection !== HANDLED && !state.parent;\n-};\n-\n-var onHandleUnhandled = function (promise, state) {\n-  task.call(global, function () {\n-    if (IS_NODE) {\n-      process.emit('rejectionHandled', promise);\n-    } else dispatchEvent(REJECTION_HANDLED, promise, state.value);\n-  });\n-};\n-\n-var bind = function (fn, promise, state, unwrap) {\n-  return function (value) {\n-    fn(promise, state, value, unwrap);\n-  };\n-};\n-\n-var internalReject = function (promise, state, value, unwrap) {\n-  if (state.done) return;\n-  state.done = true;\n-  if (unwrap) state = unwrap;\n-  state.value = value;\n-  state.state = REJECTED;\n-  notify(promise, state, true);\n-};\n-\n-var internalResolve = function (promise, state, value, unwrap) {\n-  if (state.done) return;\n-  state.done = true;\n-  if (unwrap) state = unwrap;\n-  try {\n-    if (promise === value) throw TypeError(\"Promise can't be resolved itself\");\n-    var then = isThenable(value);\n-    if (then) {\n-      microtask(function () {\n-        var wrapper = { done: false };\n-        try {\n-          then.call(value,\n-            bind(internalResolve, promise, wrapper, state),\n-            bind(internalReject, promise, wrapper, state)\n-          );\n-        } catch (error) {\n-          internalReject(promise, wrapper, error, state);\n-        }\n-      });\n-    } else {\n-      state.value = value;\n-      state.state = FULFILLED;\n-      notify(promise, state, false);\n-    }\n-  } catch (error) {\n-    internalReject(promise, { done: false }, error, state);\n-  }\n-};\n-\n-// constructor polyfill\n-if (FORCED) {\n-  // 25.4.3.1 Promise(executor)\n-  PromiseConstructor = function Promise(executor) {\n-    anInstance(this, PromiseConstructor, PROMISE);\n-    aFunction(executor);\n-    Internal.call(this);\n-    var state = getInternalState(this);\n-    try {\n-      executor(bind(internalResolve, this, state), bind(internalReject, this, state));\n-    } catch (error) {\n-      internalReject(this, state, error);\n-    }\n-  };\n-  // eslint-disable-next-line no-unused-vars\n-  Internal = function Promise(executor) {\n-    setInternalState(this, {\n-      type: PROMISE,\n-      done: false,\n-      notified: false,\n-      parent: false,\n-      reactions: [],\n-      rejection: false,\n-      state: PENDING,\n-      value: undefined\n-    });\n-  };\n-  Internal.prototype = redefineAll(PromiseConstructor.prototype, {\n-    // `Promise.prototype.then` method\n-    // https://tc39.github.io/ecma262/#sec-promise.prototype.then\n-    then: function then(onFulfilled, onRejected) {\n-      var state = getInternalPromiseState(this);\n-      var reaction = newPromiseCapability(speciesConstructor(this, PromiseConstructor));\n-      reaction.ok = typeof onFulfilled == 'function' ? onFulfilled : true;\n-      reaction.fail = typeof onRejected == 'function' && onRejected;\n-      reaction.domain = IS_NODE ? process.domain : undefined;\n-      state.parent = true;\n-      state.reactions.push(reaction);\n-      if (state.state != PENDING) notify(this, state, false);\n-      return reaction.promise;\n-    },\n-    // `Promise.prototype.catch` method\n-    // https://tc39.github.io/ecma262/#sec-promise.prototype.catch\n-    'catch': function (onRejected) {\n-      return this.then(undefined, onRejected);\n-    }\n-  });\n-  OwnPromiseCapability = function () {\n-    var promise = new Internal();\n-    var state = getInternalState(promise);\n-    this.promise = promise;\n-    this.resolve = bind(internalResolve, promise, state);\n-    this.reject = bind(internalReject, promise, state);\n-  };\n-  newPromiseCapabilityModule.f = newPromiseCapability = function (C) {\n-    return C === PromiseConstructor || C === PromiseWrapper\n-      ? new OwnPromiseCapability(C)\n-      : newGenericPromiseCapability(C);\n-  };\n-\n-  if (!IS_PURE && typeof NativePromise == 'function') {\n-    nativeThen = NativePromise.prototype.then;\n-\n-    // wrap native Promise#then for native async functions\n-    redefine(NativePromise.prototype, 'then', function then(onFulfilled, onRejected) {\n-      var that = this;\n-      return new PromiseConstructor(function (resolve, reject) {\n-        nativeThen.call(that, resolve, reject);\n-      }).then(onFulfilled, onRejected);\n-    // https://github.com/zloirock/core-js/issues/640\n-    }, { unsafe: true });\n-\n-    // wrap fetch result\n-    if (typeof $fetch == 'function') $({ global: true, enumerable: true, forced: true }, {\n-      // eslint-disable-next-line no-unused-vars\n-      fetch: function fetch(input /* , init */) {\n-        return promiseResolve(PromiseConstructor, $fetch.apply(global, arguments));\n-      }\n-    });\n-  }\n-}\n-\n-$({ global: true, wrap: true, forced: FORCED }, {\n-  Promise: PromiseConstructor\n-});\n-\n-setToStringTag(PromiseConstructor, PROMISE, false, true);\n-setSpecies(PROMISE);\n-\n-PromiseWrapper = getBuiltIn(PROMISE);\n-\n-// statics\n-$({ target: PROMISE, stat: true, forced: FORCED }, {\n-  // `Promise.reject` method\n-  // https://tc39.github.io/ecma262/#sec-promise.reject\n-  reject: function reject(r) {\n-    var capability = newPromiseCapability(this);\n-    capability.reject.call(undefined, r);\n-    return capability.promise;\n-  }\n-});\n-\n-$({ target: PROMISE, stat: true, forced: IS_PURE || FORCED }, {\n-  // `Promise.resolve` method\n-  // https://tc39.github.io/ecma262/#sec-promise.resolve\n-  resolve: function resolve(x) {\n-    return promiseResolve(IS_PURE && this === PromiseWrapper ? PromiseConstructor : this, x);\n-  }\n-});\n-\n-$({ target: PROMISE, stat: true, forced: INCORRECT_ITERATION }, {\n-  // `Promise.all` method\n-  // https://tc39.github.io/ecma262/#sec-promise.all\n-  all: function all(iterable) {\n-    var C = this;\n-    var capability = newPromiseCapability(C);\n-    var resolve = capability.resolve;\n-    var reject = capability.reject;\n-    var result = perform(function () {\n-      var $promiseResolve = aFunction(C.resolve);\n-      var values = [];\n-      var counter = 0;\n-      var remaining = 1;\n-      iterate(iterable, function (promise) {\n-        var index = counter++;\n-        var alreadyCalled = false;\n-        values.push(undefined);\n-        remaining++;\n-        $promiseResolve.call(C, promise).then(function (value) {\n-          if (alreadyCalled) return;\n-          alreadyCalled = true;\n-          values[index] = value;\n-          --remaining || resolve(values);\n-        }, reject);\n-      });\n-      --remaining || resolve(values);\n-    });\n-    if (result.error) reject(result.value);\n-    return capability.promise;\n-  },\n-  // `Promise.race` method\n-  // https://tc39.github.io/ecma262/#sec-promise.race\n-  race: function race(iterable) {\n-    var C = this;\n-    var capability = newPromiseCapability(C);\n-    var reject = capability.reject;\n-    var result = perform(function () {\n-      var $promiseResolve = aFunction(C.resolve);\n-      iterate(iterable, function (promise) {\n-        $promiseResolve.call(C, promise).then(capability.resolve, reject);\n-      });\n-    });\n-    if (result.error) reject(result.value);\n-    return capability.promise;\n-  }\n-});\n"
  },
  {
    "path": "example/scripts/test.sh",
    "content": "#!/bin/bash\n\nlowercase(){\n    echo \"$1\" | sed \"y/ABCDEFGHIJKLMNOPQRSTUVWXYZ/abcdefghijklmnopqrstuvwxyz/\"\n}\n\nOS=`lowercase \\`uname\\``\n\ncase \"$OS\" in\n  msys*)    rmdir /s /q node_modules/react node_modules/react-native ;;\n  cygwin*)  rmdir /s /q node_modules/react node_modules/react-native ;;\n  *)        rm -fR node_modules/react node_modules/react-native ;;\nesac\n\nred=`tput setaf 1`\ngreen=`tput setaf 2`\nreset=`tput sgr0`\n\n#TODO:- run script with nvm use/ facing issues with yarn test working with npm run test\n# script to be added\n#unset PREFIX\n# . ~/.nvm/nvm.sh\n# nvm install v14.19.0\n# nvm use\n\nif [ $# -eq 0 ]\n  then\n    jest --config jest-ios.config.js --silent\n    jest --config jest-android.config.js --silent\n    NODEVERSION=$(node -v)\n    echo \"you are using node version $NODEVERSION\"\n    if [ $NODEVERSION != \"v14.19.0\" ]\n      then\n        echo \"${red}Error! Node module v14.19.0 is not present or nvm is not installed\n        ${green}If you have node v14.19.0 run 'nvm use'\n        Else run 'nvm install v14.19.0'${reset} \"\n      else\n        jest --silent\n    fi \n    \n  else\n    echo \"Tests will be updated!\"\n    jest --config jest-ios.config.js -u --silent\n    jest --config jest-android.config.js -u --silent\n      NODEVERSION=$(node -v)\n    echo \"you are using node version $NODEVERSION\"\n    if [ $NODEVERSION != \"v14.19.0\" ]\n      then\n        jest -u --silent\n        echo \"${red}Error! Node module v14.19.0 is not present or nvm is not installed\n        ${green}If you have node v14.19.0 run 'nvm use'\n        Else run 'nvm install v14.19.0'${reset} \"\n      else\n        jest -u --silent\n    fi \n    \nfi\n\nyarn install  --check-files"
  },
  {
    "path": "example/storybook/addons.ts",
    "content": "import '@storybook/addon-actions/register';\nimport '@storybook/addon-links/register';\nimport '@storybook/addon-knobs/register';\nimport '@storybook/addon-ondevice-actions/register';\n"
  },
  {
    "path": "example/storybook/index.ts",
    "content": "// if you use expo remove this line\nimport { AppRegistry } from 'react-native';\n\nimport {\n  getStorybookUI,\n  configure,\n  addDecorator,\n} from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\n\nimport './rn-addons';\nimport AsyncStorage from '@react-native-async-storage/async-storage';\n\n// enables knobs for all stories\naddDecorator(withKnobs);\n\n// import stories\nconfigure(() => {\n  require('./stories');\n}, module);\n\n// Refer to https://github.com/storybookjs/storybook/tree/master/app/react-native#start-command-parameters\n// To find allowed options for getStorybookUI\nconst StorybookUIRoot = getStorybookUI({\n  // DOC: Uncomment this to get normal app view\n  // onDeviceUI: false,\n  asyncStorage: AsyncStorage,\n});\n\n// If you are using React Native vanilla and after installation you don't see your app name here, write it manually.\n// If you use Expo you should remove this line.\nAppRegistry.registerComponent('%APP_NAME%', () => StorybookUIRoot);\n\nexport default StorybookUIRoot;\n"
  },
  {
    "path": "example/storybook/rn-addons.ts",
    "content": "import '@storybook/addon-ondevice-actions/register';\nimport '@storybook/addon-ondevice-knobs/register';\n"
  },
  {
    "path": "example/storybook/stories/community-integrations/Formik/Basic.tsx",
    "content": "import { Input, Button, FormControl } from 'native-base';\nimport React from 'react';\nimport { useFormik, FormikErrors } from 'formik';\n\ntype IFormFields = {\n  firstName?: string;\n  lastName?: string;\n  email?: string;\n};\n\nfunction validateEmail(email: string) {\n  var re = /\\S+@\\S+\\.\\S+/;\n  return re.test(email);\n}\n\nexport const Example = () => {\n  const formik = useFormik<IFormFields>({\n    initialValues: {\n      firstName: '',\n      lastName: '',\n      email: '',\n    },\n    onSubmit: async (values) => {\n      console.log('Handle submit', values);\n    },\n    validate: (values) => {\n      let errors: FormikErrors<IFormFields> = {};\n      if (!values.firstName) {\n        errors.firstName = 'Required';\n      } else if (values.firstName.length > 15) {\n        errors.firstName = 'Max allowed characters 15';\n      }\n\n      if (!values.email) {\n        errors.email = 'Required';\n      } else if (!validateEmail(values.email)) {\n        errors.email = 'Please enter a valid email address';\n      }\n\n      return errors;\n    },\n  });\n  const { handleChange, handleSubmit, errors, values } = formik;\n\n  console.log(values);\n\n  return (\n    <>\n      <FormControl isRequired isInvalid={'firstName' in errors}>\n        <FormControl.Label>First Name</FormControl.Label>\n        <Input\n          p={2}\n          placeholder=\"John\"\n          onChangeText={handleChange('firstName')}\n        />\n        <FormControl.ErrorMessage>{errors.firstName}</FormControl.ErrorMessage>\n      </FormControl>\n\n      <FormControl>\n        <FormControl.Label>Last Name</FormControl.Label>\n        <Input\n          p={2}\n          placeholder=\"Doe\"\n          onChangeText={handleChange('lastName')}\n        />\n      </FormControl>\n\n      <FormControl isRequired isInvalid={'email' in errors}>\n        <FormControl.Label>Email</FormControl.Label>\n        <Input\n          p={2}\n          placeholder=\"jon.doe@abc.com\"\n          onChangeText={handleChange('email')}\n        />\n        <FormControl.ErrorMessage>{errors.email}</FormControl.ErrorMessage>\n      </FormControl>\n\n      <Button onPress={() => handleSubmit}>Submit</Button>\n    </>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/community-integrations/Formik/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../components/Wrapper';\nimport { Example as Basic } from './Basic';\n\nstoriesOf('Formik', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />);\n"
  },
  {
    "path": "example/storybook/stories/community-integrations/ReactHookForm/DemoForm.tsx",
    "content": "import {\n  VStack,\n  Input,\n  Button,\n  FormControl,\n  Heading,\n  Box,\n  Text,\n  Divider,\n  HStack,\n  TextArea,\n  Avatar,\n  Select,\n  Checkbox,\n  Icon,\n} from 'native-base';\nimport React from 'react';\nimport { Ionicons, EvilIcons, AntDesign } from '@expo/vector-icons';\n\nexport const Example = () => {\n  const [language, setLanguage] = React.useState('eng');\n  const [currency, setCurrency] = React.useState('usd');\n  return (\n    <VStack width=\"60%\" space={4} my={6}>\n      <Heading bold fontSize=\"2xl\" pb={4}>\n        Account Settings\n      </Heading>\n      <Divider />\n      <Box py={4}>\n        <HStack space={6}>\n          <Box flex={1}>\n            <Text fontSize=\"lg\" fontWeight=\"semibold\">\n              Personal Info\n            </Text>\n          </Box>\n          <Box flex={2}>\n            <VStack space={6}>\n              <FormControl>\n                <FormControl.Label\n                  _text={{ fontWeight: 'medium', fontSize: 'md' }}\n                >\n                  Name\n                </FormControl.Label>\n                <Input />\n              </FormControl>\n              <FormControl>\n                <FormControl.Label\n                  _text={{ fontWeight: 'medium', fontSize: 'md' }}\n                >\n                  Email\n                </FormControl.Label>\n                <Input editable={false} value=\"joe@nativebase.io\" />\n              </FormControl>\n              <FormControl>\n                <FormControl.Label\n                  _text={{ fontWeight: 'medium', fontSize: 'md' }}\n                >\n                  Bio\n                </FormControl.Label>\n                <TextArea resize=\"vertical\" />\n                <FormControl.HelperText>\n                  Brief description for your profile. URLs are hyperlinked.\n                </FormControl.HelperText>\n              </FormControl>\n            </VStack>\n          </Box>\n        </HStack>\n      </Box>\n      <Divider />\n      <Box py={4}>\n        <HStack space={6}>\n          <Box flex={1}>\n            <Text fontSize=\"lg\" fontWeight=\"semibold\">\n              Profile Photo\n            </Text>\n          </Box>\n          <Box flex={2}>\n            <HStack alignItems=\"center\" space={6}>\n              <Avatar\n                source={{\n                  uri:\n                    'https://images.unsplash.com/photo-1488282396544-0212eea56a21?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80',\n                }}\n                size={'24'}\n              >\n                JD\n              </Avatar>\n              <FormControl>\n                <Button.Group space={5}>\n                  <Button\n                    startIcon={\n                      <Icon\n                        as={Ionicons}\n                        name=\"md-cloud-upload-sharp\"\n                        size={5}\n                      />\n                    }\n                    colorScheme=\"light\"\n                  >\n                    Change photo\n                  </Button>\n                  <Button colorScheme=\"red\" variant=\"ghost\">\n                    Delete\n                  </Button>\n                </Button.Group>\n                <FormControl.HelperText>\n                  .jpg, .gif, or .png. Max file size 700K.\n                </FormControl.HelperText>\n              </FormControl>\n            </HStack>\n          </Box>\n        </HStack>\n      </Box>\n      <Divider />\n      <Box py={4}>\n        <HStack space={6}>\n          <Box flex={1}>\n            <Text fontSize=\"lg\" fontWeight=\"semibold\">\n              Language\n            </Text>\n          </Box>\n          <Box flex={2}>\n            <VStack space={6}>\n              <FormControl>\n                <FormControl.Label\n                  _text={{ fontWeight: 'medium', fontSize: 'md' }}\n                >\n                  Display Language\n                </FormControl.Label>\n                <Select\n                  w={64}\n                  selectedValue={language}\n                  accessibilityLabel=\"Select your Language\"\n                  placeholder=\"Select your Language\"\n                  onValueChange={(itemValue: string) => {\n                    setLanguage(itemValue);\n                  }}\n                >\n                  <Select.Item label=\"English\" value=\"eng\" />\n                  <Select.Item label=\"Hebrew\" value=\"heb\" />\n                  <Select.Item label=\"Arabic\" value=\"arb\" />\n                </Select>\n              </FormControl>\n              <FormControl>\n                <FormControl.Label\n                  _text={{ fontWeight: 'medium', fontSize: 'md' }}\n                >\n                  Display currency\n                </FormControl.Label>\n                <Select\n                  w={64}\n                  selectedValue={currency}\n                  accessibilityLabel=\"Select your Currency\"\n                  placeholder=\"Select your Currency\"\n                  onValueChange={(itemValue: string) => {\n                    setCurrency(itemValue);\n                  }}\n                >\n                  <Select.Item label=\"USD ($)\" value=\"usd\" />\n                  <Select.Item label=\"AED (dh)\" value=\"aed\" />\n                  <Select.Item label=\"EUR (€)\" value=\"eur\" />\n                </Select>\n              </FormControl>\n            </VStack>\n          </Box>\n        </HStack>\n      </Box>\n      <Divider />\n      <Box py={4}>\n        <HStack space={6}>\n          <Box flex={1}>\n            <Text fontSize=\"lg\" fontWeight=\"semibold\">\n              Notifications\n            </Text>\n          </Box>\n          <Box flex={2}>\n            <VStack space={6}>\n              <Checkbox value=\"updates\">\n                Get updates about the latest meetups.\n              </Checkbox>\n              <Checkbox value=\"notifications\">\n                Get notifications about your account activites.\n              </Checkbox>\n            </VStack>\n          </Box>\n        </HStack>\n      </Box>\n      <Divider />\n      <Box py={4}>\n        <HStack space={6}>\n          <Box flex={1}>\n            <Text fontSize=\"lg\" fontWeight=\"semibold\">\n              Connect accounts\n            </Text>\n          </Box>\n          <Box flex={2}>\n            <Button.Group variant=\"outline\" colorScheme=\"light\" space={2}>\n              <Button startIcon={<Icon as={EvilIcons} name=\"sc-github\" />}>\n                Connect Github\n              </Button>\n              <Button\n                startIcon={\n                  <Icon as={AntDesign} name=\"google\" color=\"red.400\" size={5} />\n                }\n              >\n                Connect Google\n              </Button>\n            </Button.Group>\n          </Box>\n        </HStack>\n      </Box>\n      <Box py={4}>\n        <HStack space={6}>\n          <Box flex={1}></Box>\n          <Box flex={2}>\n            <Button.Group space={2}>\n              <Button _text={{ color: 'white' }}>Save Changes</Button>\n              <Button variant=\"outline\" colorScheme=\"light\">\n                Cancel\n              </Button>\n            </Button.Group>\n          </Box>\n        </HStack>\n      </Box>\n    </VStack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/community-integrations/ReactHookForm/NumberInput.tsx",
    "content": "import {\n  VStack,\n  Button,\n  FormControl,\n  NumberInput,\n  NumberInputField,\n  NumberInputStepper,\n  NumberIncrementStepper,\n  NumberDecrementStepper,\n} from 'native-base';\nimport React from 'react';\nimport { useForm, Controller } from 'react-hook-form';\n\ninterface IFormInput {\n  version: boolean;\n}\n\nexport const Example = () => {\n  const { control, handleSubmit, errors } = useForm<IFormInput>();\n  const onSubmit = (data: IFormInput) => {\n    console.log('submiting with ', data);\n  };\n  return (\n    <VStack width=\"80%\" space={4}>\n      <FormControl isRequired isInvalid={'version' in errors}>\n        <FormControl.Label>Current Native Base Version:</FormControl.Label>\n        <Controller\n          control={control}\n          render={({ onChange, value }) => (\n            <NumberInput\n              onChange={(val: any) => onChange(val)}\n              defaultValue={value}\n            >\n              <NumberInputField />\n              <NumberInputStepper>\n                <NumberIncrementStepper />\n                <NumberDecrementStepper />\n              </NumberInputStepper>\n            </NumberInput>\n          )}\n          name=\"version\"\n          rules={{ required: 'Field is required' }}\n          defaultValue={3}\n        />\n        <FormControl.ErrorMessage>\n          {errors.version?.message}\n        </FormControl.ErrorMessage>\n      </FormControl>\n      <Button onPress={handleSubmit(onSubmit)} colorScheme=\"pink\">\n        Submit\n      </Button>\n    </VStack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/community-integrations/ReactHookForm/PinInput.tsx",
    "content": "import { VStack, Button, FormControl, PinInput } from 'native-base';\nimport React from 'react';\nimport { useForm, Controller } from 'react-hook-form';\n\ninterface IFormInput {\n  otp: string;\n}\n\nexport const Example = () => {\n  const { control, handleSubmit, errors } = useForm<IFormInput>();\n  const onSubmit = (data: IFormInput) => {\n    console.log('submiting with ', data);\n  };\n  return (\n    <VStack width=\"80%\" space={4}>\n      <FormControl isRequired isInvalid={'otp' in errors}>\n        <FormControl.Label>OTP:</FormControl.Label>\n        <Controller\n          control={control}\n          render={({ onChange, value }) => (\n            <PinInput onChange={(val: any) => onChange(val)} value={value}>\n              <PinInput.Field />\n              <PinInput.Field />\n              <PinInput.Field />\n              <PinInput.Field />\n            </PinInput>\n          )}\n          name=\"otp\"\n          rules={{ required: 'Field is required', minLength: 4, maxLength: 4 }}\n        />\n        <FormControl.ErrorMessage>\n          {errors.otp?.message}\n        </FormControl.ErrorMessage>\n      </FormControl>\n      <Button onPress={handleSubmit(onSubmit)} colorScheme=\"pink\">\n        Submit\n      </Button>\n    </VStack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/community-integrations/ReactHookForm/RadioAndCheckbox.tsx",
    "content": "import {\n  VStack,\n  Button,\n  FormControl,\n  Radio,\n  Checkbox,\n  Text,\n  Icon,\n} from 'native-base';\nimport React from 'react';\nimport { useForm, Controller } from 'react-hook-form';\nimport { MaterialCommunityIcons } from '@expo/vector-icons';\n\ninterface IFormInput {\n  hobbies: string;\n  gender: number;\n}\n\nexport const Example = () => {\n  const { control, handleSubmit, errors } = useForm<IFormInput>();\n  const onSubmit = (data: IFormInput) => {\n    console.log('submiting with ', data);\n  };\n  return (\n    <VStack width=\"80%\" space={4}>\n      <FormControl isRequired isInvalid={'hobbies' in errors}>\n        <FormControl.Label>Hobbies</FormControl.Label>\n        <Controller\n          control={control}\n          render={({ onChange }) => (\n            <Checkbox.Group\n              onChange={(values) => {\n                onChange(values);\n              }}\n              flexDirection=\"row\"\n            >\n              <Checkbox\n                value=\"dart\"\n                colorScheme=\"orange\"\n                icon={<Icon as={MaterialCommunityIcons} name=\"bullseye\" />}\n              >\n                <Text mx={2}>Darts</Text>\n              </Checkbox>\n              <Checkbox\n                value=\"movie\"\n                colorScheme=\"dark\"\n                icon={<Icon as={MaterialCommunityIcons} name=\"bat\" />}\n              >\n                <Text mx={2}>Movie</Text>\n              </Checkbox>\n              <Checkbox\n                colorScheme=\"red\"\n                value=\"camping\"\n                icon={<Icon as={MaterialCommunityIcons} name=\"campfire\" />}\n              >\n                <Text mx={2}>Camping</Text>\n              </Checkbox>\n              <Checkbox\n                value=\"chess\"\n                colorScheme=\"blue\"\n                icon={<Icon as={MaterialCommunityIcons} name=\"chess-knight\" />}\n              >\n                <Text mx={2}>Chess</Text>\n              </Checkbox>\n            </Checkbox.Group>\n          )}\n          rules={{ required: 'Atleast 1 hobbie needed' }}\n          name=\"hobbies\"\n          defaultValue=\"\"\n        />\n        <FormControl.ErrorMessage>\n          {errors.hobbies?.message}\n        </FormControl.ErrorMessage>\n      </FormControl>\n      <FormControl isRequired isInvalid={'gender' in errors}>\n        <FormControl.Label>Gender</FormControl.Label>\n        <Controller\n          control={control}\n          render={({ onChange }) => (\n            <Radio.Group\n              name=\"gender\"\n              flexDirection=\"row\"\n              onChange={(val) => onChange(val)}\n            >\n              <Radio value=\"male\" colorScheme=\"blue\">\n                <Text mx={2}>Male</Text>\n              </Radio>\n              <Radio value=\"female\" colorScheme=\"pink\">\n                <Text mx={2}>Female</Text>\n              </Radio>\n            </Radio.Group>\n          )}\n          name=\"gender\"\n          rules={{ required: 'Gender is required' }}\n        />\n        <FormControl.ErrorMessage>\n          {errors.gender?.message}\n        </FormControl.ErrorMessage>\n      </FormControl>\n      <Button onPress={handleSubmit(onSubmit)} colorScheme=\"pink\">\n        Submit\n      </Button>\n    </VStack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/community-integrations/ReactHookForm/Select.tsx",
    "content": "import { VStack, Button, FormControl, Select, Icon } from 'native-base';\nimport React from 'react';\nimport { useForm, Controller } from 'react-hook-form';\nimport { MaterialIcons } from '@expo/vector-icons';\n\ninterface IFormInput {\n  language: number;\n}\n\nexport const Example = () => {\n  const { control, handleSubmit, errors } = useForm<IFormInput>();\n  const onSubmit = (data: IFormInput) => {\n    console.log('submiting with ', data);\n  };\n  return (\n    <VStack width=\"80%\" space={4}>\n      <FormControl isRequired isInvalid={'language' in errors}>\n        <FormControl.Label>Fav language:</FormControl.Label>\n        <Controller\n          control={control}\n          render={({ onChange, value }) => (\n            <Select\n              placeholder=\"Pick language\"\n              selectedValue={value}\n              width={150}\n              onValueChange={(itemValue: string) => {\n                onChange(itemValue);\n              }}\n              dropdownOpenIcon={\n                <Icon as={MaterialIcons} name=\"arrow-drop-up\" size={6} />\n              }\n              dropdownCloseIcon={\n                <Icon as={MaterialIcons} name=\"arrow-drop-down\" size={6} />\n              }\n            >\n              <Select.Item label=\"JavaScript\" value=\"js\" />\n              <Select.Item label=\"TypeScript\" value=\"ts\" />\n              <Select.Item label=\"Java\" value=\"java\" />\n            </Select>\n          )}\n          name=\"language\"\n          rules={{ required: 'Field is required' }}\n          defaultValue=\"js\"\n        />\n        <FormControl.ErrorMessage>\n          {errors.language?.message}\n        </FormControl.ErrorMessage>\n      </FormControl>\n      <Button onPress={handleSubmit(onSubmit)} colorScheme=\"pink\">\n        Submit\n      </Button>\n    </VStack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/community-integrations/ReactHookForm/Slider.tsx",
    "content": "import { VStack, Button, FormControl, Slider } from 'native-base';\nimport React from 'react';\nimport { useForm, Controller } from 'react-hook-form';\n\ninterface IFormInput {\n  like: number;\n}\n\nexport const Example = () => {\n  const { control, handleSubmit, errors } = useForm<IFormInput>();\n  const onSubmit = (data: IFormInput) => {\n    console.log('submiting with ', data);\n  };\n  return (\n    <VStack width=\"80%\" space={4}>\n      <FormControl isRequired isInvalid={'like' in errors}>\n        <FormControl.Label>Amount you like NativeBase</FormControl.Label>\n        <Controller\n          control={control}\n          render={({ onChange, value }) => (\n            <Slider onChange={(val) => onChange(val)} defaultValue={value}>\n              <Slider.Track>\n                <Slider.FilledTrack />\n              </Slider.Track>\n              <Slider.Thumb />\n            </Slider>\n          )}\n          name=\"like\"\n          rules={{ required: 'Field is required', minLength: 3 }}\n          defaultValue={100}\n        />\n        <FormControl.ErrorMessage>\n          {errors.like?.message}\n        </FormControl.ErrorMessage>\n      </FormControl>\n      <Button onPress={handleSubmit(onSubmit)} colorScheme=\"pink\">\n        Submit\n      </Button>\n    </VStack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/community-integrations/ReactHookForm/Switch.tsx",
    "content": "import { VStack, Button, FormControl, Switch } from 'native-base';\nimport React from 'react';\nimport { useForm, Controller } from 'react-hook-form';\n\ninterface IFormInput {\n  rememberMe: boolean;\n}\n\nexport const Example = () => {\n  const { control, handleSubmit, errors } = useForm<IFormInput>();\n  const onSubmit = (data: IFormInput) => {\n    console.log('submiting with ', data);\n  };\n  return (\n    <VStack width=\"80%\" space={4}>\n      <FormControl isInvalid={'rememberMe' in errors}>\n        <FormControl.Label>Remenber me:</FormControl.Label>\n        <Controller\n          control={control}\n          render={({ onChange, value }) => (\n            <Switch\n              onToggle={(val: boolean) => onChange(val)}\n              isChecked={value}\n            />\n          )}\n          name=\"rememberMe\"\n          defaultValue={true}\n        />\n        <FormControl.ErrorMessage>\n          {errors.rememberMe?.message}\n        </FormControl.ErrorMessage>\n      </FormControl>\n      <Button onPress={handleSubmit(onSubmit)} colorScheme=\"pink\">\n        Submit\n      </Button>\n    </VStack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/community-integrations/ReactHookForm/Textarea.tsx",
    "content": "import { VStack, Button, FormControl, TextArea } from 'native-base';\nimport React from 'react';\nimport { useForm, Controller } from 'react-hook-form';\n\ninterface IFormInput {\n  thought: string;\n}\n\nexport const Example = () => {\n  const { control, handleSubmit, errors } = useForm<IFormInput>();\n  const onSubmit = (data: IFormInput) => {\n    console.log('submiting with ', data);\n  };\n  return (\n    <VStack width=\"80%\" space={4}>\n      <FormControl isRequired isInvalid={'thought' in errors}>\n        <FormControl.Label>What do you think?</FormControl.Label>\n        <Controller\n          control={control}\n          render={({ onChange, value }) => (\n            <TextArea\n              placeholder=\"TextArea\"\n              onChangeText={(val) => onChange(val)}\n              defaultValue={value}\n            />\n          )}\n          name=\"thought\"\n          rules={{ required: 'Field is required', minLength: 3 }}\n          defaultValue=\"I love Nativebase.\"\n        />\n        <FormControl.ErrorMessage>\n          {errors.thought?.message}\n        </FormControl.ErrorMessage>\n      </FormControl>\n      <Button onPress={handleSubmit(onSubmit)} colorScheme=\"pink\">\n        Submit\n      </Button>\n    </VStack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/community-integrations/ReactHookForm/Usage.tsx",
    "content": "import { VStack, Input, Button, FormControl } from 'native-base';\nimport React from 'react';\nimport { useForm, Controller } from 'react-hook-form';\n\ninterface IFormInput {\n  firstName: string;\n  lastName: string;\n  age: number;\n}\n\nexport const Example = () => {\n  const { control, handleSubmit, errors } = useForm<IFormInput>();\n  const onSubmit = (data: IFormInput) => {\n    console.log('submiting with ', data);\n  };\n  return (\n    <VStack width=\"80%\" space={4}>\n      <FormControl isRequired isInvalid={'firstName' in errors}>\n        <FormControl.Label>First Name</FormControl.Label>\n        <Controller\n          control={control}\n          render={({ onChange, onBlur, value }) => (\n            <Input\n              onBlur={onBlur}\n              placeholder=\"John\"\n              onChangeText={(val) => onChange(val)}\n              value={value}\n            />\n          )}\n          name=\"firstName\"\n          rules={{ required: 'Field is required', minLength: 3 }}\n          defaultValue=\"\"\n        />\n        <FormControl.ErrorMessage>\n          {errors.firstName?.message}\n        </FormControl.ErrorMessage>\n      </FormControl>\n      <FormControl isInvalid={'lastName' in errors}>\n        <FormControl.Label>Last Name</FormControl.Label>\n        <Controller\n          control={control}\n          render={({ onChange, onBlur, value }) => (\n            <Input\n              onBlur={onBlur}\n              placeholder=\"Doe\"\n              onChangeText={(val) => onChange(val)}\n              value={value}\n            />\n          )}\n          name=\"lastName\"\n          defaultValue=\"\"\n        />\n        <FormControl.ErrorMessage>\n          {errors.lastName?.message}\n        </FormControl.ErrorMessage>\n      </FormControl>\n      <FormControl isRequired isInvalid={'age' in errors}>\n        <FormControl.Label>Age</FormControl.Label>\n        <Controller\n          control={control}\n          render={({ onChange, onBlur, value }) => (\n            <Input\n              onBlur={onBlur}\n              placeholder=\"24\"\n              onChangeText={(val) => onChange(val)}\n              value={value}\n            />\n          )}\n          name=\"age\"\n          rules={{ min: 18, required: 'Age is required' }}\n          defaultValue=\"\"\n        />\n        <FormControl.ErrorMessage>\n          {errors.age?.type === 'required'\n            ? errors.age?.message\n            : errors.age?.type === 'min' ?? 'Under age'}\n        </FormControl.ErrorMessage>\n      </FormControl>\n      <Button onPress={handleSubmit(onSubmit)} colorScheme=\"pink\">\n        Submit\n      </Button>\n    </VStack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/community-integrations/ReactHookForm/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../components/Wrapper';\nimport { Example as RadioAndCheckbox } from './RadioAndCheckbox';\nimport { Example as PinInput } from './PinInput';\nimport { Example as Textarea } from './Textarea';\nimport { Example as Select } from './Select';\nimport { Example as NumberInput } from './NumberInput';\nimport { Example as Switch } from './Switch';\nimport { Example as Slider } from './Slider';\nimport { Example as DemoForm } from './DemoForm';\nimport { Example as Usage } from './Usage';\n\nstoriesOf('React Hook Form', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Usage', () => <Usage />)\n  .add('DemoForm', () => <DemoForm />) // Todo: Remove to somewhere else\n  .add('Radio And Checkbox', () => <RadioAndCheckbox />)\n  .add('Select', () => <Select />)\n  .add('Slider', () => <Slider />)\n  .add('Textarea', () => <Textarea />)\n  .add('Switch', () => <Switch />)\n  .add('NumberInput', () => <NumberInput />)\n  .add('PinInput', () => <PinInput />);\n"
  },
  {
    "path": "example/storybook/stories/components/Allcomponents.tsx",
    "content": "//@ts-nocheck\n//uncomment above line to test typing of components\nimport {\n  Badge,\n  IconButton,\n  Alert,\n  AspectRatio,\n  Avatar,\n  Breadcrumb,\n  Card,\n  Container,\n  Divider,\n  Kbd,\n  Progress,\n  Accordion,\n  FormControl,\n  Center,\n  Square,\n  Circle,\n  Fade,\n  ScaleFade,\n  PresenceTransition,\n  Slide,\n  SlideFade,\n  Popover,\n  AlertDialog,\n  Menu,\n  SimpleGrid,\n  Actionsheet,\n  Fab,\n  Modal,\n  Backdrop,\n  Tooltip,\n} from 'native-base';\n\nimport {\n  Text,\n  Checkbox,\n  Radio,\n  Hidden,\n  Button,\n  Column,\n  Row,\n  Box,\n  Stack,\n  VStack,\n  HStack,\n  ZStack,\n  Slider,\n  Icon,\n  Input,\n  InputGroup,\n  InputLeftAddon,\n  InputRightAddon,\n  Image,\n  Spinner,\n  Heading,\n  Flex,\n  Switch,\n  TextArea,\n  Link,\n  Select,\n  Pressable,\n  Overlay,\n  Skeleton,\n} from 'native-base';\n\nexport const Example = () => {\n  return (\n    <>\n      <Input aaa></Input>\n      <Badge sss=\"1\"></Badge>\n      <IconButton sss=\"1\"></IconButton>\n      <Alert sss=\"1\"></Alert>\n      <AspectRatio sss=\"1\"></AspectRatio>\n      <Avatar sss=\"1\"></Avatar>\n      <Breadcrumb sss=\"1\"></Breadcrumb>\n      <Card sss=\"1\"></Card>\n      <Container sss=\"1\"></Container>\n      <Divider sss=\"1\"></Divider>\n      <Kbd sss=\"1\"></Kbd>\n      <Progress sss=\"1\"></Progress>\n      <Accordion sss=\"1\"></Accordion>\n      <Skeleton sss=\"1\"></Skeleton>\n      <FormControl sss=\"1\"></FormControl>\n      <Center sss=\"1\"></Center>\n      <Square sss=\"1\"></Square>\n      <Circle sss=\"1\"></Circle>\n      <Fade sss=\"1\"></Fade>\n      <ScaleFade sss=\"1\"></ScaleFade>\n      <PresenceTransition sss=\"1\"></PresenceTransition>\n      <Slide sss=\"1\"></Slide>\n      <SlideFade sss=\"1\"></SlideFade>\n      <Popover sss=\"1\" trigger={() => <Box sss=\"1\"></Box>}>\n        <Box sss=\"1\"></Box>\n      </Popover>\n      <AlertDialog sss=\"1\"></AlertDialog>\n      <Menu sss=\"1\" trigger={() => <Box></Box>}></Menu>\n      <SimpleGrid sss=\"1\"></SimpleGrid>\n      <Actionsheet sss=\"1\"></Actionsheet>\n      <Fab sss=\"1\"></Fab>\n      <Modal sss=\"1\"></Modal>\n      <Backdrop sss=\"1\"></Backdrop>\n      <Tooltip label=\"hell\" sss=\"1\">\n        Hello\n      </Tooltip>\n      <Text sss=\"1\"></Text>\n      <Checkbox sss=\"1\" value=\"1\"></Checkbox>\n      <Radio sss=\"1\" value=\"1\"></Radio>\n      <Hidden sss=\"1\">\n        <Box sss=\"1\"></Box>\n      </Hidden>\n      <Button sss=\"1\"></Button>\n      <Column sss=\"1\"></Column>\n      <Row sss=\"1\"></Row>\n      <Box sss=\"1\"></Box>\n      <Stack sss=\"1\"></Stack>\n      <VStack sss=\"1\"></VStack>\n      <HStack sss=\"1\"></HStack>\n      <ZStack sss=\"1\"></ZStack>\n      <Slider sss=\"1\"></Slider>\n      <Icon sss=\"1\"></Icon>\n      <Input sss=\"1\"></Input>\n      <InputGroup sss=\"1\"></InputGroup>\n      <InputLeftAddon sss=\"1\"></InputLeftAddon>\n      <InputRightAddon sss=\"1\"></InputRightAddon>\n      <Image sss=\"1\"></Image>\n      <Spinner sss=\"1\"></Spinner>\n      <Heading sss=\"1\"></Heading>\n      <Flex sss=\"1\"></Flex>\n      <Switch sss=\"1\"></Switch>\n      <TextArea sss=\"1\"></TextArea>\n      <Link sss=\"1\"></Link>\n      <Select sss=\"1\"></Select>\n      <Pressable sss=\"1\"></Pressable>\n      <Overlay sss=\"1\"></Overlay>\n    </>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/Wrapper.tsx",
    "content": "import React from 'react';\nimport {\n  Box,\n  NativeBaseProvider,\n  useColorMode,\n  IconButton,\n  MoonIcon,\n  ColorMode,\n  useColorModeValue,\n  Tooltip,\n  SunIcon,\n  extendTheme,\n  Button,\n  Input,\n} from 'native-base';\nimport type { StorageManager } from 'native-base';\nimport AsyncStorage from '@react-native-async-storage/async-storage';\n\nimport Config from '../../../nativebase.config';\n\nconst myTheme = extendTheme({\n  space: {\n    mySpace: '29px',\n  },\n  colors: {\n    blue1: {\n      '100': 'blue',\n    },\n  },\n\n  components: {\n    Link: {\n      sizes: {\n        mysize: 10,\n      },\n    },\n    Button: {\n      variants: {\n        myBtn: {\n          padding: 10,\n        },\n        myNewButton: ({ myPaddingX }: { myPaddingX: number }) => {\n          return {\n            padding: myPaddingX,\n          };\n        },\n\n        // myNewButton1: (props: any) => {\n        //   return {\n        //     padding: props.padding,\n        //   };\n        // },\n      },\n      sizes: {\n        newsize: ({ mySize }: { mySize: number }) => {\n          return {\n            padding: mySize,\n          };\n        },\n      },\n    },\n\n    Input: {\n      variants: {\n        newsize: ({ mySize }: { mySize: number }) => {\n          return {\n            padding: mySize,\n          };\n        },\n\n        newsize1: (props: any) => {\n          return {\n            padding: props.padding,\n          };\n        },\n      },\n      sizes: {\n        'my-size': {\n          padding: 2,\n        },\n      },\n    },\n\n    Checkbox: {\n      sizes: {\n        myBtn: {\n          padding: 10,\n        },\n        myNewButton: ({ myPadding }: { myPadding: any }) => {\n          return {\n            padding: myPadding,\n          };\n        },\n      },\n    },\n\n    Box: {\n      variants: {\n        myBtn: {\n          padding: 10,\n        },\n      },\n    },\n  },\n});\n\ntype MyThemeType = typeof myTheme;\ndeclare module 'native-base' {\n  interface ICustomTheme extends MyThemeType {}\n}\n\nfunction MyWrapper({ children }: any) {\n  const { colorMode, toggleColorMode } = useColorMode();\n\n  const bgColor = useColorModeValue(`gray.50`, `gray.800`);\n\n  return (\n    <Box\n      flex={1}\n      px=\"3\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      bg={bgColor}\n      safeAreaY\n    >\n      <Tooltip\n        label={colorMode === 'dark' ? 'Enable light mode' : 'Enable dark mode'}\n        placement=\"bottom right\"\n        openDelay={300}\n        closeOnClick={false}\n      >\n        <IconButton\n          position=\"absolute\"\n          top={12}\n          right={8}\n          zIndex={4}\n          onPress={toggleColorMode}\n          icon={colorMode === 'dark' ? <SunIcon /> : <MoonIcon />}\n          size=\"lg\"\n        />\n      </Tooltip>\n      {children}\n    </Box>\n  );\n}\n\nexport function RenderTestButton() {\n  const [state, setState] = React.useState(1);\n  return (\n    <Box style={{ position: 'absolute', top: 10, left: 20 }} m={2} bg=\"red.100\">\n      <Input m={2} size=\"my-size\" />\n      <Button\n        size=\"\"\n        variant={'myNewButton'}\n        // title={state.toString()}\n        onPress={() => setState(state + 1)}\n      />\n    </Box>\n  );\n}\nexport default ({ children, theme }: any) => {\n  const colorModeManager: StorageManager = {\n    get: async () => {\n      try {\n        const val = await AsyncStorage.getItem('@example-wrapper-mode');\n        return val === 'dark' ? 'dark' : 'light';\n      } catch (e) {\n        console.log(e);\n        return 'light';\n      }\n    },\n    set: async (value: ColorMode) => {\n      try {\n        await AsyncStorage.setItem('@example-wrapper-mode', value);\n      } catch (e) {\n        console.log(e);\n      }\n    },\n  };\n  return (\n    <NativeBaseProvider\n      theme={theme}\n      config={Config}\n      colorModeManager={colorModeManager}\n      initialWindowMetrics={{\n        frame: { x: 0, y: 0, width: 0, height: 0 },\n        insets: { top: 0, left: 0, right: 0, bottom: 0 },\n      }}\n      isSSR\n    >\n      <MyWrapper>{children}</MyWrapper>\n    </NativeBaseProvider>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/basic/FlatList/Basic.tsx",
    "content": "import React from 'react';\nimport {\n  Box,\n  FlatList,\n  Heading,\n  Avatar,\n  HStack,\n  VStack,\n  Text,\n  Spacer,\n} from 'native-base';\nexport const Example = () => {\n  const data = [\n    {\n      id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',\n      fullName: 'Aafreen Khan',\n      timeStamp: '12:47 PM',\n      recentText: 'Good Day!',\n      avatarUrl:\n        'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',\n    },\n    {\n      id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',\n      fullName: 'Sujitha Mathur',\n      timeStamp: '11:11 PM',\n      recentText: 'Cheer up, there!',\n      avatarUrl:\n        'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyEaZqT3fHeNrPGcnjLLX1v_W4mvBlgpwxnA&usqp=CAU',\n    },\n    {\n      id: '58694a0f-3da1-471f-bd96-145571e29d72',\n      fullName: 'Anci Barroco',\n      timeStamp: '6:22 PM',\n      recentText: 'Good Day!',\n      avatarUrl: 'https://miro.medium.com/max/1400/0*0fClPmIScV5pTLoE.jpg',\n    },\n    {\n      id: '68694a0f-3da1-431f-bd56-142371e29d72',\n      fullName: 'Aniket Kumar',\n      timeStamp: '8:56 PM',\n      recentText: 'All the best',\n      avatarUrl:\n        'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSr01zI37DYuR8bMV5exWQBSw28C1v_71CAh8d7GP1mplcmTgQA6Q66Oo--QedAN1B4E1k&usqp=CAU',\n    },\n    {\n      id: '28694a0f-3da1-471f-bd96-142456e29d72',\n      fullName: 'Kiara',\n      timeStamp: '12:47 PM',\n      recentText: 'I will call today.',\n      avatarUrl:\n        'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBwgu1A5zgPSvfE83nurkuzNEoXs9DMNr8Ww&usqp=CAU',\n    },\n  ];\n  return (\n    <Box>\n      <Heading fontSize=\"xl\" p=\"4\" pb=\"3\">\n        Inbox\n      </Heading>\n      <FlatList\n        data={data}\n        renderItem={({ item }) => (\n          <Box\n            borderBottomWidth=\"1\"\n            _dark={{\n              borderColor: 'muted.50',\n            }}\n            borderColor=\"muted.800\"\n            pl={['0', '4']}\n            pr={['0', '5']}\n            py=\"2\"\n          >\n            <HStack space={[2, 3]} justifyContent=\"space-between\">\n              <Avatar\n                size=\"48px\"\n                source={{\n                  uri: item.avatarUrl,\n                }}\n              />\n              <VStack>\n                <Text\n                  _dark={{\n                    color: 'warmGray.50',\n                  }}\n                  color=\"coolGray.800\"\n                  bold\n                >\n                  {item.fullName}\n                </Text>\n                <Text\n                  color=\"coolGray.600\"\n                  _dark={{\n                    color: 'warmGray.200',\n                  }}\n                >\n                  {item.recentText}\n                </Text>\n              </VStack>\n              <Spacer />\n              <Text\n                fontSize=\"xs\"\n                _dark={{\n                  color: 'warmGray.50',\n                }}\n                color=\"coolGray.800\"\n                alignSelf=\"flex-start\"\n              >\n                {item.timeStamp}\n              </Text>\n            </HStack>\n          </Box>\n        )}\n        keyExtractor={(item) => item.id}\n      />\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/basic/FlatList/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from '../../Wrapper';\nimport { Example as Basic } from './Basic';\n\nstoriesOf('FlatList', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />);\n"
  },
  {
    "path": "example/storybook/stories/components/basic/KeyboardAvoidingView/Basic.tsx",
    "content": "import React from 'react';\nimport {\n  Input,\n  KeyboardAvoidingView,\n  Text,\n  Button,\n  VStack,\n  Heading,\n  Center,\n} from 'native-base';\nimport { Platform } from 'react-native';\n\nexport const Example = () => {\n  return (\n    <KeyboardAvoidingView\n      h={{\n        base: '400px',\n        lg: 'auto',\n      }}\n      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}\n    >\n      <Center>\n        <VStack flex=\"1\" justifyContent=\"flex-end\" w=\"100%\" maxW=\"300\">\n          <Heading mb=\"3\">Forgot Password</Heading>\n          <Text color=\"muted.400\">\n            Not to worry! Enter email address associated with your account and\n            we’ll send a link to reset your password.\n          </Text>\n          <Input placeholder=\"Email Address\" mt=\"10\" mb=\"4\" />\n          <Button mb=\"4\">Proceed</Button>\n        </VStack>\n      </Center>\n    </KeyboardAvoidingView>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/basic/KeyboardAvoidingView/Kitchensink-Basic.tsx",
    "content": "import React from 'react';\nimport {\n  Input,\n  KeyboardAvoidingView,\n  Text,\n  Button,\n  VStack,\n  useBreakpointValue,\n} from 'native-base';\nimport { Platform } from 'react-native';\n\nexport const Example = () => {\n  const isLargeScreen = useBreakpointValue({\n    base: false,\n    sm: false,\n    md: false,\n    lg: true,\n  });\n  return (\n    <KeyboardAvoidingView\n      h={{ base: '600px', lg: 'auto' }}\n      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}\n      keyboardVerticalOffset={192}\n    >\n      {isLargeScreen ? (\n        <Text>Please see the example in your mobile to observe the effect</Text>\n      ) : (\n        <VStack p={6} flex={1} justifyContent=\"space-around\">\n          <Text fontSize={36} mb={12}>\n            Header\n          </Text>\n          <Input\n            placeholder=\"Username\"\n            borderBottomWidth=\"1px\"\n            mb={9}\n            mt=\"auto\"\n          />\n          <Button variant=\"solid\">Submit</Button>\n        </VStack>\n      )}\n    </KeyboardAvoidingView>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/basic/KeyboardAvoidingView/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from '../../Wrapper';\nimport { Example as Basic } from './Basic';\n\nstoriesOf('KeyboardAvoidingView', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />);\n"
  },
  {
    "path": "example/storybook/stories/components/basic/ScrollView/Basic.tsx",
    "content": "import React from 'react';\nimport { ScrollView, VStack, Center, useTheme, Heading } from 'native-base';\nexport const Example = () => {\n  const { colors } = useTheme();\n  return (\n    <ScrollView w={['200', '300']} h=\"80\">\n      <Center mt=\"3\" mb=\"4\">\n        <Heading fontSize=\"xl\">Cyan</Heading>\n      </Center>\n      <VStack flex=\"1\">\n        {Object.keys(colors.cyan).map((key, index) => {\n          if (index >= 1 && index <= 5)\n            return (\n              <Center py=\"4\" bg={`cyan.${key}`}>\n                {key}\n              </Center>\n            );\n        })}\n      </VStack>\n      <Center mt=\"8\" mb=\"4\">\n        <Heading fontSize=\"xl\">Yellow</Heading>\n      </Center>\n      <VStack flex=\"1\">\n        {Object.keys(colors.cyan).map((key, index) => {\n          if (index >= 1 && index <= 5)\n            return (\n              <Center py=\"4\" bg={`yellow.${key}`}>\n                {key}\n              </Center>\n            );\n        })}\n      </VStack>\n      <Center mt=\"8\" mb=\"4\">\n        <Heading fontSize=\"xl\"> Violet</Heading>\n      </Center>\n      <VStack flex=\"1\">\n        {Object.keys(colors.violet).map((key, index) => {\n          if (index >= 1 && index <= 5)\n            return (\n              <Center py=\"4\" bg={`violet.${key}`}>\n                {key}\n              </Center>\n            );\n        })}\n      </VStack>\n    </ScrollView>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/basic/ScrollView/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport { Example as Basic } from './Basic';\n\nstoriesOf('ScrollView', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />);\n"
  },
  {
    "path": "example/storybook/stories/components/basic/SectionList/Basic.tsx",
    "content": "import React from 'react';\nimport { SectionList, Heading, Center } from 'native-base';\nexport const Example = () => {\n  const data = [\n    {\n      title: 'Cyan',\n      data: ['cyan.100', 'cyan.200', 'cyan.300', 'cyan.400', 'cyan.500'],\n    },\n    {\n      title: 'Yellow',\n      data: [\n        'yellow.100',\n        'yellow.200',\n        'yellow.300',\n        'yellow.400',\n        'yellow.500',\n      ],\n    },\n    {\n      title: 'Violet',\n      data: [\n        'violet.100',\n        'violet.200',\n        'violet.300',\n        'violet.400',\n        'violet.500',\n      ],\n    },\n  ];\n  return (\n    <Center h=\"80\" w=\"100%\">\n      <SectionList\n        maxW=\"300\"\n        w=\"100%\"\n        mb=\"4\"\n        sections={data}\n        keyExtractor={(item, index) => item + index}\n        renderItem={({ item }) => (\n          <Center py=\"4\" bg={item}>\n            {item.split('.')[1]}\n          </Center>\n        )}\n        renderSectionHeader={({ section: { title } }) => (\n          <Center>\n            <Heading fontSize=\"xl\" mt=\"8\" pb=\"4\">\n              {title}\n            </Heading>\n          </Center>\n        )}\n      />\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/basic/SectionList/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport { Example as Basic } from './Basic';\n\nstoriesOf('SectionList', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />);\n"
  },
  {
    "path": "example/storybook/stories/components/basic/StatusBar/Basic.tsx",
    "content": "import React, { useState } from 'react';\nimport { StatusBar, Box, Text, Button } from 'native-base';\n\nexport const Example = () => {\n  const [hidden, setHidden] = useState(false);\n  const changeStatusBarVisibility = () => setHidden(!hidden);\n  return (\n    <Box flex={1} justifyContent=\"center\" safeArea>\n      <StatusBar\n        animated={true}\n        backgroundColor=\"#61dafb\"\n        barStyle=\"default\"\n        showHideTransition=\"fade\"\n        hidden={hidden}\n      />\n      <Text textAlign=\"center\" mb={3}>\n        StatusBar Visibility:{'\\n'}\n        {hidden ? 'Hidden' : 'Visible'}\n      </Text>\n      <Box p={10}>\n        <Button onPress={changeStatusBarVisibility}>Toggle StatusBar</Button>\n      </Box>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/basic/StatusBar/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from '../../Wrapper';\nimport { Example as Basic } from './Basic';\n\nstoriesOf('StatusBar', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />);\n"
  },
  {
    "path": "example/storybook/stories/components/basic/View/Basic.tsx",
    "content": "import React from 'react';\nimport { View, Text, Heading } from 'native-base';\nexport const Example = () => {\n  return (\n    <View>\n      <Heading>\n        A component library for the{' '}\n        <Heading color=\"emerald.400\">React Ecosystem</Heading>\n      </Heading>\n      <Text pt=\"3\">\n        NativeBase is a simple, modular and accessible component library that\n        gives you building blocks to build you React applications.\n      </Text>\n    </View>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/basic/View/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from '../../Wrapper';\nimport { Example as Basic } from './Basic';\n\nstoriesOf('View', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />);\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Accordion/AccessingInternalState.tsx",
    "content": "import React from 'react';\nimport { Accordion, Box, Icon } from 'native-base';\nimport { MaterialCommunityIcons } from '@expo/vector-icons';\n\nexport const Example = () => {\n  return (\n    <Box m={3}>\n      <Accordion allowMultiple defaultIndex={[1]}>\n        <Accordion.Item>\n          <Accordion.Summary>\n            Section 1 title\n            <Accordion.Icon />\n          </Accordion.Summary>\n          <Accordion.Details>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n            aliquip ex ea commodo consequat.\n          </Accordion.Details>\n        </Accordion.Item>\n\n        <Accordion.Item>\n          {({ isExpanded }: any) => (\n            <>\n              <Accordion.Summary>\n                {isExpanded ? 'Fire' : 'Snow'}\n                {isExpanded ? (\n                  <Icon color=\"white\" as={MaterialCommunityIcons} name=\"fire\" />\n                ) : (\n                  <Icon as={MaterialCommunityIcons} name=\"snowflake\" />\n                )}\n              </Accordion.Summary>\n              <Accordion.Details>\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat.\n              </Accordion.Details>\n            </>\n          )}\n        </Accordion.Item>\n      </Accordion>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Accordion/Basic.tsx",
    "content": "import React from 'react';\nimport { Accordion, Box } from 'native-base';\nexport const Example = () => {\n  return (\n    <Box m={3}>\n      <Accordion index={[0, 1]}>\n        <Accordion.Item>\n          <Accordion.Summary>\n            Section 1 title\n            <Accordion.Icon />\n          </Accordion.Summary>\n          <Accordion.Details>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n            aliquip ex ea commodo consequat.\n          </Accordion.Details>\n        </Accordion.Item>\n        <Accordion.Item>\n          <Accordion.Summary>\n            Section 2 title\n            <Accordion.Icon />\n          </Accordion.Summary>\n          <Accordion.Details>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n            aliquip ex ea commodo consequat.\n          </Accordion.Details>\n        </Accordion.Item>\n        <Accordion.Item>\n          <Accordion.Summary>\n            Section 3 title\n            <Accordion.Icon />\n          </Accordion.Summary>\n          <Accordion.Details>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n            aliquip ex ea commodo consequat.\n          </Accordion.Details>\n        </Accordion.Item>\n      </Accordion>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Accordion/DefaultIndex.tsx",
    "content": "import React from 'react';\nimport { Accordion, Box } from 'native-base';\nexport const Example = () => {\n  return (\n    <Box m={3}>\n      <Accordion allowMultiple defaultIndex={[0, 2]}>\n        <Accordion.Item>\n          <Accordion.Summary>\n            Section 1 title\n            <Accordion.Icon />\n          </Accordion.Summary>\n          <Accordion.Details>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n            aliquip ex ea commodo consequat.\n          </Accordion.Details>\n        </Accordion.Item>\n        <Accordion.Item>\n          <Accordion.Summary>\n            Section 2 title\n            <Accordion.Icon />\n          </Accordion.Summary>\n          <Accordion.Details>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n            aliquip ex ea commodo consequat.\n          </Accordion.Details>\n        </Accordion.Item>\n        <Accordion.Item>\n          <Accordion.Summary>\n            Section 3 title\n            <Accordion.Icon />\n          </Accordion.Summary>\n          <Accordion.Details>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n            aliquip ex ea commodo consequat.\n          </Accordion.Details>\n        </Accordion.Item>\n      </Accordion>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Accordion/ExpandedStyle.tsx",
    "content": "import React from 'react';\nimport { Accordion, Box } from 'native-base';\nexport const Example = () => {\n  return (\n    <Box m={3}>\n      <Accordion allowMultiple>\n        <Accordion.Item>\n          <Accordion.Summary _expanded={{ backgroundColor: 'orange.300' }}>\n            Click me to see a different style\n            <Accordion.Icon />\n          </Accordion.Summary>\n          <Accordion.Details>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n            aliquip ex ea commodo consequat.\n          </Accordion.Details>\n        </Accordion.Item>\n        <Accordion.Item id={9} isDisabled>\n          <Accordion.Summary>\n            I'm Disabled 😢\n            <Accordion.Icon />\n          </Accordion.Summary>\n          <Accordion.Details>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n            aliquip ex ea commodo consequat.\n          </Accordion.Details>\n        </Accordion.Item>\n      </Accordion>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Accordion/Multiple.tsx",
    "content": "import React from 'react';\nimport { Accordion, Box } from 'native-base';\nexport const Example = () => {\n  return (\n    <Box m={3}>\n      <Accordion allowMultiple>\n        <Accordion.Item>\n          <Accordion.Summary>\n            Section 1 title\n            <Accordion.Icon />\n          </Accordion.Summary>\n          <Accordion.Details>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n            aliquip ex ea commodo consequat.\n          </Accordion.Details>\n        </Accordion.Item>\n        <Accordion.Item>\n          <Accordion.Summary>\n            Section 2 title\n            <Accordion.Icon />\n          </Accordion.Summary>\n          <Accordion.Details>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n            aliquip ex ea commodo consequat.\n          </Accordion.Details>\n        </Accordion.Item>\n        <Accordion.Item>\n          <Accordion.Summary>\n            Section 3 title\n            <Accordion.Icon />\n          </Accordion.Summary>\n          <Accordion.Details>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n            aliquip ex ea commodo consequat.\n          </Accordion.Details>\n        </Accordion.Item>\n      </Accordion>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Accordion/Playground.tsx",
    "content": "import React from 'react';\nimport { Accordion, Box } from 'native-base';\nimport { boolean } from '@storybook/addon-knobs';\nexport const Example = () => {\n  return (\n    <Box m={3}>\n      <Accordion\n        allowMultiple={boolean('allowMultiple', false)}\n        allowToggle={boolean('allowToggle', false)}\n      >\n        <Accordion.Item>\n          <Accordion.Summary>\n            Section 1 title\n            <Accordion.Icon />\n          </Accordion.Summary>\n          <Accordion.Details>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n            aliquip ex ea commodo consequat.\n          </Accordion.Details>\n        </Accordion.Item>\n        <Accordion.Item>\n          <Accordion.Summary>\n            Section 2 title\n            <Accordion.Icon />\n          </Accordion.Summary>\n          <Accordion.Details>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n            aliquip ex ea commodo consequat.\n          </Accordion.Details>\n        </Accordion.Item>\n        <Accordion.Item>\n          <Accordion.Summary>\n            Section 3 title\n            <Accordion.Icon />\n          </Accordion.Summary>\n          <Accordion.Details>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n            aliquip ex ea commodo consequat.\n          </Accordion.Details>\n        </Accordion.Item>\n      </Accordion>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Accordion/Toggle.tsx",
    "content": "import React from 'react';\nimport { Accordion, Box } from 'native-base';\nexport const Example = () => {\n  return (\n    <Box m={3}>\n      <Accordion allowToggle defaultIndex={[2]}>\n        <Accordion.Item>\n          <Accordion.Summary>\n            Section 1 title\n            <Accordion.Icon />\n          </Accordion.Summary>\n          <Accordion.Details>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n            aliquip ex ea commodo consequat.\n          </Accordion.Details>\n        </Accordion.Item>\n        <Accordion.Item>\n          <Accordion.Summary>\n            Section 2 title\n            <Accordion.Icon />\n          </Accordion.Summary>\n          <Accordion.Details>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n            aliquip ex ea commodo consequat.\n          </Accordion.Details>\n        </Accordion.Item>\n        <Accordion.Item>\n          <Accordion.Summary>\n            Section 3 title\n            <Accordion.Icon />\n          </Accordion.Summary>\n          <Accordion.Details>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n            aliquip ex ea commodo consequat.\n          </Accordion.Details>\n        </Accordion.Item>\n      </Accordion>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Accordion/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport Usage from './Basic';\nimport Playground from './Playground';\nimport Multiple from './Multiple';\nimport AccessingInternalState from './AccessingInternalState';\nimport ExpandedStyle from './ExpandedStyle';\nimport Toggle from './Toggle';\nimport DefaultIndex from './DefaultIndex';\n\nstoriesOf('Accordion', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Playground', () => <Playground />)\n  .add('Usage', () => <Usage />)\n  .add('Multiple', () => <Multiple />)\n  .add('Default Index', () => <DefaultIndex />)\n  .add('Toggle', () => <Toggle />)\n  .add('Expanded Style', () => <ExpandedStyle />)\n\n  .add('Accessing Internal State', () => <AccessingInternalState />);\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Actionsheet/Composition.tsx",
    "content": "import React from 'react';\nimport {\n  Button,\n  Actionsheet,\n  useDisclose,\n  Box,\n  Text,\n  Center,\n} from 'native-base';\n\nexport function Example() {\n  const { isOpen, onOpen, onClose } = useDisclose();\n  return (\n    <Center>\n      <Button onPress={onOpen}>Actionsheet</Button>\n      <Actionsheet isOpen={isOpen} onClose={onClose} hideDragIndicator>\n        <Actionsheet.Content borderTopRadius=\"0\">\n          <Box w=\"100%\" h={60} px={4} justifyContent=\"center\">\n            <Text fontSize=\"16\" color=\"gray.500\" _dark={{ color: 'gray.300' }}>\n              Albums\n            </Text>\n          </Box>\n          <Actionsheet.Item>Delete</Actionsheet.Item>\n          <Actionsheet.Item>Share</Actionsheet.Item>\n          <Actionsheet.Item>Play</Actionsheet.Item>\n          <Actionsheet.Item>Favourite</Actionsheet.Item>\n          <Actionsheet.Item>Cancel</Actionsheet.Item>\n        </Actionsheet.Content>\n      </Actionsheet>\n    </Center>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Actionsheet/CustomBackdrop.tsx",
    "content": "import React from 'react';\nimport { Button, Actionsheet, useDisclose, Box, Text } from 'native-base';\n\nexport function Example() {\n  const { isOpen, onOpen, onClose } = useDisclose();\n  return (\n    <>\n      <Button onPress={onOpen}>Actionsheet</Button>\n      <Actionsheet\n        isOpen={isOpen}\n        onClose={onClose}\n        _backdrop={{ bg: 'primary.100', _dark: { bg: 'primary.900' } }}\n      >\n        <Actionsheet.Content>\n          <Box w=\"100%\" h={60} px={4} justifyContent=\"center\">\n            <Text fontSize=\"16\" color=\"gray.500\" _dark={{ color: 'gray.300' }}>\n              Albums\n            </Text>\n          </Box>\n          <Actionsheet.Item>Delete</Actionsheet.Item>\n          <Actionsheet.Item>Share</Actionsheet.Item>\n          <Actionsheet.Item>Play</Actionsheet.Item>\n          <Actionsheet.Item>Favourite</Actionsheet.Item>\n          <Actionsheet.Item>Cancel</Actionsheet.Item>\n        </Actionsheet.Content>\n      </Actionsheet>\n    </>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Actionsheet/DisableOverlay.tsx",
    "content": "import React from 'react';\nimport {\n  Button,\n  Actionsheet,\n  useDisclose,\n  Box,\n  Text,\n  Center,\n} from 'native-base';\n\nexport function Example() {\n  const { isOpen, onOpen, onClose } = useDisclose();\n  return (\n    <Center>\n      <Button onPress={onOpen}>Actionsheet</Button>\n\n      <Actionsheet isOpen={isOpen} onClose={onClose} disableOverlay>\n        <Actionsheet.Content>\n          <Box w=\"100%\" h={60} px={4} justifyContent=\"center\">\n            <Text fontSize=\"16\" color=\"gray.500\" _dark={{ color: 'gray.300' }}>\n              Albums\n            </Text>\n          </Box>\n          <Actionsheet.Item>Delete</Actionsheet.Item>\n          <Actionsheet.Item>Share</Actionsheet.Item>\n          <Actionsheet.Item>Play</Actionsheet.Item>\n          <Actionsheet.Item>Favourite</Actionsheet.Item>\n          <Actionsheet.Item>Cancel</Actionsheet.Item>\n        </Actionsheet.Content>\n      </Actionsheet>\n    </Center>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Actionsheet/Icon.tsx",
    "content": "import React from 'react';\nimport {\n  Button,\n  Actionsheet,\n  useDisclose,\n  Icon,\n  Box,\n  Text,\n  Center,\n} from 'native-base';\nimport { Path } from 'react-native-svg';\nimport { MaterialIcons, Ionicons } from '@expo/vector-icons';\n\nexport function Example() {\n  const { isOpen, onOpen, onClose } = useDisclose();\n  return (\n    <Center>\n      <Button onPress={onOpen}>Actionsheet</Button>\n      <Actionsheet isOpen={isOpen} onClose={onClose} size=\"full\">\n        <Actionsheet.Content>\n          <Box w=\"100%\" h={60} px={4} justifyContent=\"center\">\n            <Text fontSize=\"16\" color=\"gray.500\" _dark={{ color: 'gray.300' }}>\n              Albums\n            </Text>\n          </Box>\n          <Actionsheet.Item\n            startIcon={<Icon as={MaterialIcons} size=\"6\" name=\"delete\" />}\n          >\n            Delete\n          </Actionsheet.Item>\n          <Actionsheet.Item\n            startIcon={<Icon as={MaterialIcons} name=\"share\" size=\"6\" />}\n          >\n            Share\n          </Actionsheet.Item>\n          <Actionsheet.Item\n            startIcon={<Icon as={Ionicons} name=\"play-circle\" size=\"6\" />}\n          >\n            Play\n          </Actionsheet.Item>\n          <Actionsheet.Item\n            startIcon={<Icon as={MaterialIcons} size=\"6\" name=\"favorite\" />}\n          >\n            Favourite\n          </Actionsheet.Item>\n          <Actionsheet.Item\n            startIcon={\n              <Icon viewBox=\"0 0 24 24\" size=\"6\" fill=\"none\">\n                <Path d=\"M12.0007 10.5862L16.9507 5.63623L18.3647 7.05023L13.4147 12.0002L18.3647 16.9502L16.9507 18.3642L12.0007 13.4142L7.05072 18.3642L5.63672 16.9502L10.5867 12.0002L5.63672 7.05023L7.05072 5.63623L12.0007 10.5862Z\" />\n              </Icon>\n            }\n          >\n            Cancel\n          </Actionsheet.Item>\n        </Actionsheet.Content>\n      </Actionsheet>\n    </Center>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Actionsheet/Usage.tsx",
    "content": "import React from 'react';\nimport {\n  Button,\n  Actionsheet,\n  useDisclose,\n  Text,\n  Box,\n  Center,\n} from 'native-base';\n\nexport function Example() {\n  const { isOpen, onOpen, onClose } = useDisclose();\n  return (\n    <Center>\n      <Button onPress={onOpen}>Actionsheet</Button>\n      <Actionsheet isOpen={isOpen} onClose={onClose}>\n        <Actionsheet.Content>\n          <Box w=\"100%\" h={60} px={4} justifyContent=\"center\">\n            <Text fontSize=\"16\" color=\"gray.500\" _dark={{ color: 'gray.300' }}>\n              Albums\n            </Text>\n          </Box>\n          <Actionsheet.Item>Delete</Actionsheet.Item>\n          <Actionsheet.Item isDisabled>Share</Actionsheet.Item>\n          <Actionsheet.Item>Play</Actionsheet.Item>\n          <Actionsheet.Item>Favourite</Actionsheet.Item>\n          <Actionsheet.Item>Cancel</Actionsheet.Item>\n        </Actionsheet.Content>\n      </Actionsheet>\n    </Center>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Actionsheet/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from '../../Wrapper';\nimport { Example as Icon } from './Icon';\nimport { Example as Usage } from './Usage';\nimport { Example as Composition } from './Composition';\nimport { Example as DisableOverlay } from './DisableOverlay';\nimport { Example as CustomBackdrop } from './CustomBackdrop';\n\nstoriesOf('Actionsheet', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Usage', () => <Usage />)\n  .add('Icon', () => <Icon />)\n  .add('DisableOverlay', () => <DisableOverlay />)\n  .add('Composition', () => <Composition />)\n  .add('Custom Backdrop', () => <CustomBackdrop />);\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Alert/action.tsx",
    "content": "import React from 'react';\nimport {\n  Alert,\n  Collapse,\n  Button,\n  VStack,\n  HStack,\n  IconButton,\n  CloseIcon,\n  Box,\n  Text,\n} from 'native-base';\n\nexport function Example() {\n  const [show, setShow] = React.useState(true);\n  return (\n    <Box w=\"100%\" alignItems=\"center\">\n      <Collapse isOpen={show}>\n        <Alert maxW=\"400\" status=\"error\">\n          <VStack space={1} flexShrink={1} w=\"100%\">\n            <HStack\n              flexShrink={1}\n              space={2}\n              alignItems=\"center\"\n              justifyContent=\"space-between\"\n            >\n              <HStack flexShrink={1} space={2} alignItems=\"center\">\n                <Alert.Icon />\n                <Text\n                  fontSize=\"md\"\n                  fontWeight=\"medium\"\n                  _dark={{ color: 'coolGray.800' }}\n                >\n                  Please try again later!\n                </Text>\n              </HStack>\n              <IconButton\n                variant=\"unstyled\"\n                _focus={{ borderWidth: 0 }}\n                icon={<CloseIcon size=\"3\" />}\n                _icon={{ color: 'coolGray.600' }}\n                onPress={() => setShow(false)}\n              />\n            </HStack>\n            <Box pl=\"6\" _dark={{ _text: { color: 'coolGray.600' } }}>\n              Your coupon could not be processed at this time.\n            </Box>\n          </VStack>\n        </Alert>\n      </Collapse>\n      <Button size={'sm'} onPress={() => setShow(true)} mt={8} mx=\"auto\">\n        Re-Open\n      </Button>\n    </Box>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Alert/basic.tsx",
    "content": "import React from 'react';\nimport {\n  Alert,\n  VStack,\n  HStack,\n  IconButton,\n  CloseIcon,\n  Box,\n  Heading,\n  Center,\n} from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Center>\n      <Alert maxW=\"400\" colorScheme=\"info\">\n        <VStack space={1} flexShrink={1} w=\"100%\">\n          <HStack\n            flexShrink={1}\n            space={2}\n            alignItems=\"center\"\n            justifyContent=\"space-between\"\n          >\n            <HStack space={2} flexShrink={1} alignItems=\"center\">\n              <Alert.Icon />\n              <Heading fontSize=\"md\" fontWeight=\"medium\" color=\"coolGray.800\">\n                We are going live in July!\n              </Heading>\n            </HStack>\n            <IconButton\n              variant=\"unstyled\"\n              _focus={{ borderWidth: 0 }}\n              icon={<CloseIcon size=\"3\" />}\n              _icon={{ color: 'coolGray.600' }}\n            />\n          </HStack>\n          <Box pl=\"6\" _text={{ color: 'coolGray.600' }}>\n            We are happy to announce that we are going live on July 28th. Get\n            ready!\n          </Box>\n        </VStack>\n      </Alert>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Alert/colorScheme.tsx",
    "content": "import React from 'react';\nimport {\n  Stack,\n  Alert,\n  Text,\n  HStack,\n  VStack,\n  IconButton,\n  Box,\n  CloseIcon,\n} from 'native-base';\n\nexport function Example() {\n  return (\n    <Stack space={4} mx={3} w=\"100%\">\n      {['red', 'orange', 'pink'].map((key: any) => (\n        <Alert w=\"100%\" colorScheme={key} key={key}>\n          <VStack space={2} flexShrink={1} w=\"100%\">\n            <HStack\n              flexShrink={1}\n              space={2}\n              alignItems=\"center\"\n              justifyContent=\"space-between\"\n            >\n              <HStack space={2} flexShrink={1} alignItems=\"center\">\n                <Alert.Icon />\n                <Text fontSize=\"md\" fontWeight=\"medium\" color=\"coolGray.800\">\n                  Please try again later!\n                </Text>\n              </HStack>\n              <IconButton\n                variant=\"unstyled\"\n                _focus={{ borderWidth: 0 }}\n                icon={<CloseIcon size=\"3\" />}\n                _icon={{ color: 'coolGray.600' }}\n              />\n            </HStack>\n            <Box pl=\"6\" _text={{ color: 'coolGray.600' }}>\n              Your coupon could not be processed at this time.\n            </Box>\n          </VStack>\n        </Alert>\n      ))}\n    </Stack>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Alert/composition.tsx",
    "content": "import React from 'react';\nimport {\n  Alert,\n  Box,\n  IconButton,\n  CloseIcon,\n  HStack,\n  VStack,\n  Text,\n  Center,\n} from 'native-base';\n\nexport function Example() {\n  return (\n    <Center>\n      <VStack space={5} maxW=\"400\">\n        <Alert w=\"100%\" status=\"success\">\n          <VStack space={2} flexShrink={1} w=\"100%\">\n            <HStack\n              flexShrink={1}\n              space={1}\n              alignItems=\"center\"\n              justifyContent=\"space-between\"\n            >\n              <HStack space={2} flexShrink={1} alignItems=\"center\">\n                <Alert.Icon />\n                <Text\n                  fontSize=\"md\"\n                  fontWeight=\"medium\"\n                  _dark={{ color: 'coolGray.800' }}\n                >\n                  Application received!\n                </Text>\n              </HStack>\n              <IconButton\n                variant=\"unstyled\"\n                _focus={{ borderWidth: 0 }}\n                icon={<CloseIcon size=\"3\" />}\n                _icon={{ color: 'coolGray.600' }}\n              />\n            </HStack>\n            <Box pl=\"6\" _dark={{ _text: { color: 'coolGray.600' } }}>\n              Your application has been received. We will review your\n              application and respond within the next 48 hours.\n            </Box>\n          </VStack>\n        </Alert>\n        <Alert w=\"100%\" status=\"success\">\n          <VStack space={1} flexShrink={1} w=\"100%\" alignItems=\"center\">\n            <Alert.Icon size=\"md\" />\n            <Text\n              fontSize=\"md\"\n              fontWeight=\"medium\"\n              _dark={{ color: 'coolGray.800' }}\n            >\n              Application received!\n            </Text>\n\n            <Box\n              _text={{ textAlign: 'center' }}\n              _dark={{ _text: { color: 'coolGray.600' } }}\n            >\n              Your application has been received. We will review your\n              application and respond within the next 48 hours.\n            </Box>\n          </VStack>\n        </Alert>\n      </VStack>\n    </Center>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Alert/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\n// import { Example as Playground } from './knobEnabled';\nimport { Example as Composition } from './composition';\nimport { Example as Basic } from './basic';\nimport { Example as Usage } from './usage';\nimport { Example as Variant } from './variant';\nimport { Example as Status } from './status';\nimport { Example as ColorScheme } from './colorScheme';\nimport { Example as Action } from './action';\n\nstoriesOf('Alert', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  // .add('Playground', () => <Playground />)\n  .add('Basic', () => <Basic />)\n  .add('Usage', () => <Usage />)\n  .add('Status', () => <Status />)\n  .add('ColorScheme', () => <ColorScheme />)\n  .add('Variant', () => <Variant />)\n  .add('Composition', () => <Composition />)\n  .add('action', () => <Action />);\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Alert/knobEnabled.tsx",
    "content": "import React from 'react';\nimport { Alert, Box, CloseIcon, IconButton, Text } from 'native-base';\nimport { select } from '@storybook/addon-knobs';\n\nexport const Example = () => {\n  return (\n    <Box mx={3} w=\"90%\">\n      <Alert\n        status={select(\n          'status',\n          ['success', 'green', 'error', 'red', 'warning'],\n          'error'\n        )}\n        colorScheme={'error'}\n        variant={select(\n          'variant',\n          ['left-accent', 'solid', 'subtle', 'top-accent'],\n          'subtle'\n        )}\n        action={<IconButton icon={<CloseIcon size={3} />} />}\n        actionProps={{ alignSelf: 'center' }}\n      >\n        <Alert.Icon />\n        <Text>Error Alert</Text>\n        <Text>Description </Text>\n      </Alert>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Alert/status.tsx",
    "content": "import React from 'react';\nimport {\n  Stack,\n  Alert,\n  IconButton,\n  HStack,\n  VStack,\n  CloseIcon,\n  Text,\n} from 'native-base';\n\nexport function Example() {\n  const statusArray = [\n    {\n      status: 'success',\n      title: 'Selection successfully moved!',\n    },\n    {\n      status: 'error',\n      title: 'Please try again later!',\n    },\n    {\n      status: 'info',\n      title: 'We are going live in July!',\n    },\n    {\n      status: 'warning',\n      title: 'Poor internet connection.',\n    },\n  ];\n  return (\n    <Stack space={3} w=\"100%\" maxW=\"400\">\n      {statusArray.map((status) => {\n        return (\n          <Alert w=\"100%\" status={status.status}>\n            <VStack space={2} flexShrink={1} w=\"100%\">\n              <HStack flexShrink={1} space={2} justifyContent=\"space-between\">\n                <HStack space={2} flexShrink={1}>\n                  <Alert.Icon mt=\"1\" />\n                  <Text fontSize=\"md\" color=\"coolGray.800\">\n                    {status.title}\n                  </Text>\n                </HStack>\n                <IconButton\n                  variant=\"unstyled\"\n                  _focus={{ borderWidth: 0 }}\n                  icon={<CloseIcon size=\"3\" />}\n                  _icon={{ color: 'coolGray.600' }}\n                />\n              </HStack>\n            </VStack>\n          </Alert>\n        );\n      })}\n    </Stack>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Alert/usage.tsx",
    "content": "import React from 'react';\nimport {\n  Alert,\n  VStack,\n  HStack,\n  IconButton,\n  CloseIcon,\n  Box,\n  Text,\n  Center,\n} from 'native-base';\nexport function Example() {\n  return (\n    <Center>\n      <Alert maxW=\"400\" status=\"info\" colorScheme=\"info\">\n        <VStack space={2} flexShrink={1} w=\"100%\">\n          <HStack\n            flexShrink={1}\n            space={2}\n            alignItems=\"center\"\n            justifyContent=\"space-between\"\n          >\n            <HStack flexShrink={1} space={2} alignItems=\"center\">\n              <Alert.Icon />\n              <Text fontSize=\"md\" fontWeight=\"medium\" color=\"coolGray.800\">\n                We are going live in July!\n              </Text>\n            </HStack>\n            <IconButton\n              variant=\"unstyled\"\n              _focus={{ borderWidth: 0 }}\n              icon={<CloseIcon size=\"3\" />}\n              _icon={{ color: 'coolGray.600' }}\n            />\n          </HStack>\n          <Box pl=\"6\" _text={{ color: 'coolGray.600' }}>\n            We are happy to announce that we are going live on July 28th. Get\n            ready!\n          </Box>\n        </VStack>\n      </Alert>\n    </Center>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Alert/variant.tsx",
    "content": "import React from 'react';\nimport {\n  Stack,\n  Alert,\n  HStack,\n  VStack,\n  Text,\n  Divider,\n  ScrollView,\n} from 'native-base';\n\nexport function Example() {\n  const getTextColor = (\n    variant:\n      | 'solid'\n      | 'left-accent'\n      | 'top-accent'\n      | 'outline'\n      | 'subtle'\n      | 'outline-light'\n  ) => {\n    switch (variant) {\n      case 'left-accent':\n      case 'top-accent':\n      case 'subtle':\n        return 'coolGray.800';\n      case 'solid':\n        return 'warmGray.50';\n    }\n  };\n\n  return (\n    <ScrollView mt={5}>\n      <Stack\n        space={3}\n        maxW=\"400\"\n        mr={5}\n        flexDirection=\"column\"\n        justifyContent=\"center\"\n        alignItems=\"center\"\n      >\n        {[\n          'solid',\n          'left-accent',\n          'top-accent',\n          'outline',\n          'subtle',\n          'outline-light',\n        ].map((key: any) => {\n          return (\n            <>\n              <Text bold fontSize=\"xl\" mb=\"4\" textAlign=\"center\">\n                {key}\n              </Text>\n              <Alert\n                w=\"100%\"\n                variant={key}\n                colorScheme=\"success\"\n                status=\"success\"\n              >\n                <VStack space={2} flexShrink={1} w=\"100%\">\n                  <HStack\n                    flexShrink={1}\n                    space={2}\n                    alignItems=\"center\"\n                    justifyContent=\"space-between\"\n                  >\n                    <HStack space={2} flexShrink={1} alignItems=\"center\">\n                      <Alert.Icon />\n                      <Text color={getTextColor(key)}>\n                        Selection successfully moved!\n                      </Text>\n                    </HStack>\n                  </HStack>\n                </VStack>\n              </Alert>\n              <Divider mt=\"5\" mb=\"2.5\" />\n            </>\n          );\n        })}\n      </Stack>\n    </ScrollView>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/AlertDialog/Basic.tsx",
    "content": "import React from 'react';\nimport { AlertDialog, Button, Center } from 'native-base';\n\nexport const Example = () => {\n  const [isOpen, setIsOpen] = React.useState(false);\n  const onClose = () => setIsOpen(false);\n  const cancelRef = React.useRef(null);\n  return (\n    <Center>\n      <Button colorScheme=\"danger\" onPress={() => setIsOpen(!isOpen)}>\n        Delete Customer\n      </Button>\n      <AlertDialog\n        leastDestructiveRef={cancelRef}\n        isOpen={isOpen}\n        onClose={onClose}\n      >\n        <AlertDialog.Content>\n          <AlertDialog.CloseButton />\n          <AlertDialog.Header>Delete Customer</AlertDialog.Header>\n          <AlertDialog.Body>\n            This will remove all data relating to Alex. This action cannot be\n            reversed. Deleted data can not be recovered.\n          </AlertDialog.Body>\n          <AlertDialog.Footer>\n            <Button.Group space={2}>\n              <Button\n                variant=\"unstyled\"\n                colorScheme=\"coolGray\"\n                onPress={onClose}\n                ref={cancelRef}\n              >\n                Cancel\n              </Button>\n              <Button colorScheme=\"danger\" onPress={onClose}>\n                Delete\n              </Button>\n            </Button.Group>\n          </AlertDialog.Footer>\n        </AlertDialog.Content>\n      </AlertDialog>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/AlertDialog/Transition.tsx",
    "content": "import React from 'react';\nimport { AlertDialog, Button, Center } from 'native-base';\nimport type { TouchableOpacity } from 'react-native';\n\nexport const Example = () => {\n  const [isOpen, setIsOpen] = React.useState(false);\n  const onClose = () => setIsOpen(false);\n  const cancelRef = React.useRef<TouchableOpacity>(null);\n  return (\n    <Center>\n      <AlertDialog\n        height=\"100%\"\n        // @ts-ignore\n        animationPreset=\"slide\"\n        leastDestructiveRef={cancelRef}\n        onClose={onClose}\n        isOpen={isOpen}\n        isCentered\n      >\n        <AlertDialog.Content>\n          <AlertDialog.CloseButton />\n          <AlertDialog.Header>Discard Changes?</AlertDialog.Header>\n          <AlertDialog.Body>\n            Are you sure you want to discard all of your notes? 44 words will be\n            deleted.\n          </AlertDialog.Body>\n          <AlertDialog.Footer>\n            <Button.Group space={2}>\n              <Button\n                colorScheme=\"blueGray\"\n                variant=\"unstyled\"\n                onPress={onClose}\n              >\n                Cancel\n              </Button>\n              <Button colorScheme=\"danger\" onPress={onClose}>\n                Discard\n              </Button>\n            </Button.Group>\n          </AlertDialog.Footer>\n        </AlertDialog.Content>\n      </AlertDialog>\n      <Button onPress={() => setIsOpen(!isOpen)}>Discard</Button>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/AlertDialog/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport { Example as Basic } from './Basic';\nimport { Example as Transition } from './Transition';\n\nstoriesOf('AlertDialog', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />)\n  .add('Transition', () => <Transition />);\n"
  },
  {
    "path": "example/storybook/stories/components/composites/AppBar/AppBarExamples.tsx",
    "content": "import React from 'react';\nimport {\n  AppBar,\n  IconButton,\n  Icon,\n  Text,\n  HStack,\n  VStack,\n  Button,\n} from 'native-base';\nimport { TouchableOpacity } from 'react-native';\n\nexport default function Examples() {\n  return (\n    <VStack space={10} width=\"100%\">\n      <Material />\n      <IOSLike />\n      <Customized />\n      <CustomizedWithBorder />\n    </VStack>\n  );\n}\n\nfunction Material() {\n  return (\n    <AppBar shadow={1}>\n      <AppBar.Left>\n        <LeftArrowIconButton />\n      </AppBar.Left>\n\n      <AppBar.Content>\n        <VStack space={1}>\n          <Text fontWeight=\"bold\" fontSize=\"lg\" isTruncated color=\"white\">\n            Title\n          </Text>\n          <Text isTruncated color=\"white\">\n            Subtitle\n          </Text>\n        </VStack>\n      </AppBar.Content>\n\n      <AppBar.Right space={2}>\n        <HeartIcon />\n        <SearchIcon />\n        <MoreIcon />\n      </AppBar.Right>\n    </AppBar>\n  );\n}\n\nfunction IOSLike() {\n  return (\n    <AppBar bg=\"white\" shadow={2}>\n      <AppBar.Left>\n        <TouchableOpacity>\n          <HStack alignItems=\"center\" space={1}>\n            <Icon\n              name=\"angle-left\"\n              type=\"FontAwesome\"\n              size={10}\n              color=\"blue.500\"\n            />\n            <Text fontWeight={'bold'} color=\"blue.500\" fontSize=\"md\">\n              Back\n            </Text>\n          </HStack>\n        </TouchableOpacity>\n      </AppBar.Left>\n\n      <AppBar.Content justifyContent=\"center\">\n        <Text isTruncated fontWeight=\"bold\" fontSize={'lg'} color=\"gray.700\">\n          Header\n        </Text>\n      </AppBar.Content>\n\n      <AppBar.Right>\n        <Button onPress={() => {}} colorScheme=\"blue\" variant=\"ghost\">\n          <Text fontWeight={'bold'} color=\"blue.500\" fontSize=\"md\">\n            Cancel\n          </Text>\n        </Button>\n      </AppBar.Right>\n    </AppBar>\n  );\n}\n\nfunction Customized() {\n  return (\n    <AppBar colorScheme=\"dark\" shadow={1}>\n      <AppBar.Left>\n        <IconButton\n          icon={<Icon name=\"angle-left\" type=\"FontAwesome\" size={10} />}\n        />\n      </AppBar.Left>\n      <AppBar.Content>\n        <Text isTruncated fontWeight=\"bold\" fontSize={22}>\n          Library\n        </Text>\n      </AppBar.Content>\n      <AppBar.Right>\n        <IconButton\n          icon={<Icon name=\"folder-music\" type=\"Entypo\" size={8} />}\n        />\n      </AppBar.Right>\n    </AppBar>\n  );\n}\n\nfunction CustomizedWithBorder() {\n  return (\n    <AppBar colorScheme=\"teal\" shadow={3} px={4} space={3}>\n      <AppBar.Left>\n        <IconButton icon={<Icon name=\"menu\" size={6} />} />\n      </AppBar.Left>\n      <AppBar.Content>\n        <Text isTruncated fontWeight=\"bold\" fontSize={20}>\n          Home\n        </Text>\n      </AppBar.Content>\n      <AppBar.Right space={4}>\n        <IconButton icon={<Icon name=\"search1\" type=\"AntDesign\" size={6} />} />\n        <IconButton\n          icon={<Icon name=\"shopping-bag\" type=\"Entypo\" size={6} />}\n        />\n        <IconButton\n          icon={<Icon name=\"bookmark-o\" type=\"FontAwesome\" size={6} />}\n        />\n      </AppBar.Right>\n    </AppBar>\n  );\n}\n\nconst LeftArrowIconButton = () => {\n  return (\n    <IconButton\n      icon={\n        <Icon\n          name=\"arrow-left\"\n          type=\"MaterialCommunityIcons\"\n          size={8}\n          color=\"white\"\n        />\n      }\n    />\n  );\n};\n\nconst HeartIcon = () => {\n  return (\n    <IconButton\n      icon={\n        <Icon\n          name=\"heart\"\n          type=\"MaterialCommunityIcons\"\n          size={6}\n          color=\"white\"\n        />\n      }\n    />\n  );\n};\nconst SearchIcon = () => {\n  return (\n    <IconButton\n      icon={<Icon name=\"search1\" type=\"AntDesign\" size={6} color=\"white\" />}\n    />\n  );\n};\nconst MoreIcon = () => {\n  return <IconButton icon={<Icon name=\"more-vert\" size={6} color=\"white\" />} />;\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/AppBar/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\n\nimport Examples from './AppBarExamples';\n\nstoriesOf('AppBar', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Examples', () => <Examples />);\n"
  },
  {
    "path": "example/storybook/stories/components/composites/AspectRatio/Basic.tsx",
    "content": "import React from 'react';\nimport { AspectRatio, Box } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <AspectRatio height={200} ratio={{ base: 4 / 3, md: 16 / 9 }}>\n      <Box bg=\"red.400\" />\n    </AspectRatio>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/AspectRatio/EmbedImage.tsx",
    "content": "import React from 'react';\nimport { AspectRatio, Image } from 'native-base';\nexport const Example = () => {\n  return (\n    <AspectRatio\n      ratio={{ base: 3 / 4, md: 9 / 10 }}\n      height={{ base: 200, md: 400 }}\n    >\n      <Image\n        resizeMode=\"cover\"\n        source={{\n          uri:\n            'https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260',\n        }}\n        alt=\"Picture of a Flower\"\n      />\n    </AspectRatio>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/AspectRatio/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport { Example as Basic } from './Basic';\nimport { Example as EmbedImage } from './EmbedImage';\n\nstoriesOf('AspectRatio', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />)\n  .add('EmbedImage', () => <EmbedImage />);\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Avatar/AvatarBadge.tsx",
    "content": "import React from 'react';\nimport { Avatar, VStack } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <VStack space={2} alignItems=\"center\">\n      <Avatar\n        bg=\"lightBlue.400\"\n        source={{\n          uri:\n            'https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',\n        }}\n        size=\"xs\"\n      >\n        NB\n        <Avatar.Badge bg=\"green.500\" />\n      </Avatar>\n      <Avatar\n        bg=\"amber.500\"\n        source={{\n          uri:\n            'https://images.unsplash.com/photo-1614289371518-722f2615943d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',\n        }}\n        size=\"sm\"\n      >\n        NB\n        <Avatar.Badge bg=\"green.500\" />\n      </Avatar>\n      <Avatar\n        bg=\"amber.500\"\n        source={{\n          uri:\n            'https://images.unsplash.com/photo-1614289371518-722f2615943d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',\n        }}\n        size=\"md\"\n      >\n        NB\n        <Avatar.Badge bg=\"green.500\" />\n      </Avatar>\n      <Avatar\n        bg=\"amber.500\"\n        source={{\n          uri:\n            'https://images.unsplash.com/photo-1614289371518-722f2615943d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',\n        }}\n        size=\"lg\"\n      >\n        NB\n        <Avatar.Badge bg=\"green.500\" />\n      </Avatar>\n      <Avatar\n        bg=\"amber.500\"\n        source={{\n          uri:\n            'https://images.unsplash.com/photo-1614289371518-722f2615943d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',\n        }}\n        size=\"xl\"\n      >\n        NB\n        <Avatar.Badge bg=\"green.500\" />\n      </Avatar>\n      <Avatar\n        bg=\"amber.500\"\n        source={{\n          uri:\n            'https://images.unsplash.com/photo-1614289371518-722f2615943d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',\n        }}\n        size=\"2xl\"\n      >\n        NB\n        <Avatar.Badge bg=\"green.500\" />\n      </Avatar>\n    </VStack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Avatar/AvatarGroup.tsx",
    "content": "import React from 'react';\nimport { Avatar, Center } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Center>\n      <Avatar.Group _avatar={{ size: 'lg' }} max={3}>\n        <Avatar\n          bg=\"green.500\"\n          source={{\n            uri:\n              'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',\n          }}\n        >\n          AJ\n        </Avatar>\n        <Avatar\n          bg=\"cyan.500\"\n          source={{\n            uri:\n              'https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',\n          }}\n        >\n          TE\n        </Avatar>\n        <Avatar\n          bg=\"indigo.500\"\n          source={{\n            uri:\n              'https://images.unsplash.com/photo-1614289371518-722f2615943d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',\n          }}\n        >\n          JB\n        </Avatar>\n        <Avatar\n          bg=\"amber.500\"\n          source={{\n            uri:\n              'https://images.unsplash.com/photo-1607746882042-944635dfe10e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',\n          }}\n        >\n          TS\n        </Avatar>\n        <Avatar\n          bg=\"green.500\"\n          source={{\n            uri:\n              'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',\n          }}\n        >\n          AJ\n        </Avatar>\n        <Avatar\n          bg=\"cyan.500\"\n          source={{\n            uri:\n              'https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',\n          }}\n        >\n          TE\n        </Avatar>\n        <Avatar\n          bg=\"indigo.500\"\n          source={{\n            uri:\n              'https://images.unsplash.com/photo-1614289371518-722f2615943d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',\n          }}\n        >\n          JB\n        </Avatar>\n        <Avatar\n          bg=\"amber.500\"\n          source={{\n            uri:\n              'https://images.unsplash.com/photo-1607746882042-944635dfe10e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',\n          }}\n        >\n          TS\n        </Avatar>\n      </Avatar.Group>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Avatar/Fallback.tsx",
    "content": "import React from 'react';\nimport { Avatar, HStack } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <HStack justifyContent=\"center\" mx={{ base: 'auto', md: '0' }} space={2}>\n      <Avatar\n        bg=\"green.500\"\n        mr=\"1\"\n        source={{ uri: 'https://bit.ly/broken-link' }}\n      >\n        RS\n      </Avatar>\n      <Avatar bg=\"amber.500\" source={{ uri: 'https://bit.ly/broken-link' }}>\n        MR\n      </Avatar>\n      <Avatar bg=\"lightBlue.400\" source={{ uri: 'https://bit.ly/broken-link' }}>\n        --\n      </Avatar>\n    </HStack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Avatar/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport { Example as Playground } from './knobEnabled';\nimport { Example as Usage } from './usage';\nimport { Example as Size } from './size';\nimport { Example as Fallback } from './Fallback';\nimport { Example as AvatarBadge } from './AvatarBadge';\nimport { Example as AvatarGroup } from './AvatarGroup';\n\nstoriesOf('Avatar', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Playground', () => <Playground />)\n  .add('Usage', () => <Usage />)\n  .add('Size', () => <Size />)\n  .add('Fallback', () => <Fallback />)\n  .add('AvatarBadge', () => <AvatarBadge />)\n  .add('AvatarGroup', () => <AvatarGroup />);\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Avatar/knobEnabled.tsx",
    "content": "import React from 'react';\nimport { Avatar } from 'native-base';\nimport { select, number, text } from '@storybook/addon-knobs';\n\nexport const Example = () => {\n  return (\n    <Avatar\n      source={{\n        uri: text(\n          'source',\n          'https://alpha.nativebase.io/img/native-base-icon.png'\n        ),\n      }}\n      borderRadius={999}\n      borderWidth={2}\n      borderColor={'black'}\n      bg=\"teal.600\"\n      size={select('size', ['sm', 'md', 'lg'], 'md')}\n    >\n      {text('name', 'NB')}\n      <Avatar.Badge\n        bg={text('bg', 'red.200')}\n        boxSize={number('badgeSize', 5)}\n      />\n    </Avatar>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Avatar/size.tsx",
    "content": "import React from 'react';\nimport { Avatar, VStack, Center } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Center>\n      <VStack space={2} alignItems={{ base: 'center', md: 'flex-start' }}>\n        <Avatar\n          bg=\"green.500\"\n          alignSelf=\"center\"\n          size=\"xs\"\n          source={{\n            uri:\n              'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',\n          }}\n        >\n          AJ\n        </Avatar>\n        <Avatar\n          bg=\"cyan.500\"\n          alignSelf=\"center\"\n          size=\"sm\"\n          source={{\n            uri:\n              'https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',\n          }}\n        >\n          HS\n        </Avatar>\n        <Avatar\n          bg=\"indigo.500\"\n          alignSelf=\"center\"\n          size=\"md\"\n          source={{\n            uri:\n              'https://images.unsplash.com/photo-1614289371518-722f2615943d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',\n          }}\n        >\n          RS\n        </Avatar>\n        <Avatar\n          alignSelf=\"center\"\n          bg=\"amber.500\"\n          size=\"lg\"\n          source={{\n            uri:\n              'https://images.unsplash.com/photo-1607746882042-944635dfe10e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',\n          }}\n        >\n          AK\n        </Avatar>\n        <Avatar\n          bg=\"pink.600\"\n          alignSelf=\"center\"\n          size=\"xl\"\n          source={{\n            uri:\n              'https://images.unsplash.com/photo-1601233749202-95d04d5b3c00?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2876&q=80',\n          }}\n        >\n          GG\n        </Avatar>\n        <Avatar\n          bg=\"purple.600\"\n          alignSelf=\"center\"\n          size=\"2xl\"\n          source={{\n            uri:\n              'https://images.unsplash.com/photo-1510771463146-e89e6e86560e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=627&q=80',\n          }}\n        >\n          RB\n        </Avatar>\n      </VStack>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Avatar/usage.tsx",
    "content": "import React from 'react';\nimport { Avatar, HStack } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <HStack justifyContent=\"center\" space={2}>\n      <Avatar\n        bg=\"green.500\"\n        source={{\n          uri:\n            'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',\n        }}\n      >\n        AJ\n      </Avatar>\n      <Avatar\n        bg=\"cyan.500\"\n        source={{\n          uri:\n            'https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',\n        }}\n      >\n        TE\n      </Avatar>\n      <Avatar\n        bg=\"indigo.500\"\n        source={{\n          uri:\n            'https://images.unsplash.com/photo-1614289371518-722f2615943d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',\n        }}\n      >\n        JB\n      </Avatar>\n      <Avatar\n        bg=\"amber.500\"\n        source={{\n          uri:\n            'https://images.unsplash.com/photo-1607746882042-944635dfe10e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',\n        }}\n      >\n        TS\n      </Avatar>\n    </HStack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Badge/color.tsx",
    "content": "import React from 'react';\nimport { Badge, HStack } from 'native-base';\n\nexport function Example() {\n  return (\n    <HStack space={{ base: 2, sm: 4 }} mx={{ base: 'auto', md: 0 }}>\n      <Badge colorScheme=\"success\">SUCCESS</Badge>\n      <Badge colorScheme=\"danger\">DANGER</Badge>\n      <Badge colorScheme=\"info\">INFO</Badge>\n      <Badge colorScheme=\"coolGray\">DARK</Badge>\n    </HStack>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Badge/composition.tsx",
    "content": "import React from 'react';\nimport { Badge, Button, VStack, Box } from 'native-base';\n\nexport function Example() {\n  return (\n    <Box alignItems=\"center\">\n      <VStack>\n        <Badge\n          // bg=\"red.400\"\n          colorScheme=\"danger\"\n          rounded=\"full\"\n          mb={-4}\n          mr={-4}\n          zIndex={1}\n          variant=\"solid\"\n          alignSelf=\"flex-end\"\n          _text={{ fontSize: 12 }}\n        >\n          2\n        </Badge>\n        <Button\n          mx={{ base: 'auto', md: 0 }}\n          p=\"2\"\n          bg=\"cyan.500\"\n          _text={{ fontSize: 14 }}\n        >\n          Notifications\n        </Button>\n      </VStack>\n    </Box>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Badge/icons.tsx",
    "content": "import React from 'react';\nimport { Badge, Stack, AddIcon } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Stack direction={{ base: 'column', md: 'row' }} space={4}>\n      <Badge colorScheme=\"success\" endIcon={<AddIcon size=\"2xs\" />}>\n        SUCCESS\n      </Badge>\n      <Badge\n        colorScheme=\"warning\"\n        variant=\"outline\"\n        startIcon={<AddIcon size=\"2xs\" />}\n      >\n        SUCCESS\n      </Badge>\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Badge/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport { Example as Usage } from './usage';\nimport { Example as Color } from './color';\nimport { Example as Playground } from './knobEnabled';\nimport { Example as Variants } from './variants';\nimport { Example as Composition } from './composition';\nimport { Example as Icon } from './icons';\n\nstoriesOf('Badge', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Playground', () => <Playground />)\n  .add('Usage', () => <Usage />)\n  .add('Icon', () => <Icon />)\n  .add('Color', () => <Color />)\n  .add('Variants', () => <Variants />)\n  .add('Composition', () => <Composition />);\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Badge/knobEnabled.tsx",
    "content": "import React from 'react';\nimport { Badge } from 'native-base';\nimport { select, text } from '@storybook/addon-knobs';\n\nexport function Example() {\n  return (\n    <Badge\n      colorScheme={text('colorScheme', 'success')}\n      variant={select('variantType', ['outline', 'solid', 'subtle'], 'solid')}\n    >\n      NATIVEBASE\n    </Badge>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Badge/usage.tsx",
    "content": "import React from 'react';\nimport { Badge, Box } from 'native-base';\n\nexport function Example() {\n  return (\n    <Box alignItems=\"center\">\n      <Badge>NEW FEATURE</Badge>\n    </Box>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Badge/variants.tsx",
    "content": "//@ts-nocheck\nimport React from 'react';\nimport { Badge, HStack, VStack, Box } from 'native-base';\n\nexport function Example() {\n  return (\n    <Box alignItems=\"center\">\n      <HStack space={4} mx={{ base: 'auto', md: '0' }}>\n        {['solid', 'outline', 'subtle'].map((key) => (\n          <VStack key={key} space={4}>\n            <Badge variant={key} alignSelf=\"center\">\n              DEFAULT\n            </Badge>\n            <Badge colorScheme=\"success\" alignSelf=\"center\" variant={key}>\n              SUCCESS\n            </Badge>\n            <Badge colorScheme=\"error\" alignSelf=\"center\" variant={key}>\n              ERROR\n            </Badge>\n            <Badge colorScheme=\"info\" alignSelf=\"center\" variant={key}>\n              INFO\n            </Badge>\n            <Badge colorScheme=\"warning\" alignSelf=\"center\" variant={key}>\n              WARNING\n            </Badge>\n          </VStack>\n        ))}\n      </HStack>\n    </Box>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Breadcrumb/Basic.tsx",
    "content": "import React from 'react';\nimport { Breadcrumb, Box, Heading } from 'native-base';\nexport const Example = () => {\n  return (\n    <Box>\n      <Heading mb={4}>Default Breadcrumb</Heading>\n      <Breadcrumb>\n        <Breadcrumb.Item isCurrent>\n          <Breadcrumb.Link href=\"https://github.com/GeekyAnts/nativebase\">\n            <Breadcrumb.Text _current={{ color: 'red.500' }}>\n              Home (This is currently active)\n            </Breadcrumb.Text>\n          </Breadcrumb.Link>\n        </Breadcrumb.Item>\n        <Breadcrumb.Item>\n          <Breadcrumb.Link href=\"https://alpha.nativebase.io/\" isExternal>\n            <Breadcrumb.Text>Docs</Breadcrumb.Text>\n          </Breadcrumb.Link>\n        </Breadcrumb.Item>\n        <Breadcrumb.Item>\n          <Breadcrumb.Link\n            href=\"https://github.com/GeekyAnts/nativebase\"\n            isExternal\n          >\n            <Breadcrumb.Text>Github</Breadcrumb.Text>\n          </Breadcrumb.Link>\n        </Breadcrumb.Item>\n      </Breadcrumb>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Breadcrumb/Collapsible.tsx",
    "content": "import React, { useState } from 'react';\nimport { Breadcrumb, Box, Heading, HStack, Button } from 'native-base';\nimport {\n  MaterialCommunityIcons,\n  MaterialIcons,\n  AntDesign,\n} from '@expo/vector-icons';\n\nexport const Example = () => {\n  const [collapsed, setCollapsed] = useState(true);\n  return (\n    <>\n      <Box>\n        <Heading mb={4}>Breadcrumb Collapsible</Heading>\n        <Breadcrumb\n          mt={3}\n          spacing={2}\n          _button={{ bg: 'transparent' }}\n          maxItems={1}\n          isCollapsed={collapsed}\n          onCollapseChange={() => {\n            setCollapsed(!collapsed);\n          }}\n        >\n          <Breadcrumb.Item>\n            <Breadcrumb.Link>\n              <HStack>\n                <Breadcrumb.Icon\n                  as={<MaterialIcons name=\"home\" />}\n                  mr={1}\n                  size=\"xs\"\n                  _current={{ color: 'blue.500' }}\n                />\n                <Breadcrumb.Text _current={{ color: 'blue.500' }}>\n                  Home\n                </Breadcrumb.Text>\n              </HStack>\n            </Breadcrumb.Link>\n          </Breadcrumb.Item>\n          <Breadcrumb.Item>\n            <Breadcrumb.Link>\n              <HStack>\n                <Breadcrumb.Icon\n                  as={<MaterialIcons name=\"home\" />}\n                  mr={1}\n                  size=\"xs\"\n                  _current={{ color: 'blue.500' }}\n                />\n                <Breadcrumb.Text _current={{ color: 'blue.500' }}>\n                  Discord\n                </Breadcrumb.Text>\n              </HStack>\n            </Breadcrumb.Link>\n          </Breadcrumb.Item>\n          <Breadcrumb.Item>\n            <Breadcrumb.Link href=\"https://alpha.nativebase.io/\" isExternal>\n              <Breadcrumb.Icon\n                fontWeight={'bold'}\n                as={MaterialCommunityIcons}\n                name=\"file-document\"\n                mr={1}\n                size=\"xs\"\n              />\n              <Breadcrumb.Text>Docs</Breadcrumb.Text>\n            </Breadcrumb.Link>\n          </Breadcrumb.Item>\n          <Breadcrumb.Item isCurrent>\n            <Breadcrumb.Link\n              href=\"https://github.com/GeekyAnts/nativebase\"\n              isExternal\n            >\n              <HStack>\n                <Breadcrumb.Icon\n                  as={<AntDesign name=\"github\" />}\n                  mr={1}\n                  size=\"xs\"\n                  _current={{ color: 'red.500' }}\n                />\n                <Breadcrumb.Text _current={{ color: 'red.500' }}>\n                  Github (This is currently active)\n                </Breadcrumb.Text>\n              </HStack>\n            </Breadcrumb.Link>\n          </Breadcrumb.Item>\n        </Breadcrumb>\n      </Box>\n      <Box mt={3}>\n        <Button\n          variant=\"outline\"\n          colorScheme=\"gray\"\n          p={3}\n          borderWidth={0}\n          onPress={() => {\n            setCollapsed(!collapsed);\n          }}\n        >\n          {collapsed ? 'Expand' : 'Collapse'}\n        </Button>\n      </Box>\n    </>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Breadcrumb/ComponentSeparator.tsx",
    "content": "import React from 'react';\nimport { Breadcrumb, Box, Heading, Icon } from 'native-base';\nimport { Ionicons } from '@expo/vector-icons';\nexport const Example = () => {\n  return (\n    <Box>\n      <Heading mb={4}>Breadcrumb with Custom Separator</Heading>\n      <Breadcrumb\n        spacing={1}\n        separator={\n          <Icon as={<Ionicons name=\"chevron-forward-outline\" />} size={5} />\n        }\n      >\n        <Breadcrumb.Item isCurrent>\n          <Breadcrumb.Link>Home (This is currently active)</Breadcrumb.Link>\n        </Breadcrumb.Item>\n        <Breadcrumb.Item>\n          <Breadcrumb.Link href=\"https://alpha.nativebase.io/\" isExternal>\n            Docs\n          </Breadcrumb.Link>\n        </Breadcrumb.Item>\n        <Breadcrumb.Item>\n          <Breadcrumb.Link\n            href=\"https://github.com/GeekyAnts/nativebase\"\n            isExternal\n          >\n            Github\n          </Breadcrumb.Link>\n        </Breadcrumb.Item>\n      </Breadcrumb>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Breadcrumb/Composition.tsx",
    "content": "import React from 'react';\nimport { Breadcrumb, Box, Heading, HStack } from 'native-base';\nimport {\n  MaterialCommunityIcons,\n  MaterialIcons,\n  AntDesign,\n} from '@expo/vector-icons';\n\nexport const Example = () => {\n  return (\n    <Box>\n      <Heading mb={4}>Breadcrumb Composition</Heading>\n      <Breadcrumb spacing={2} _button={{ bg: 'transparent' }}>\n        <Breadcrumb.Item>\n          <Breadcrumb.Link>\n            <HStack justifyContent=\"center\" alignItems=\"center\">\n              <Breadcrumb.Icon\n                as={<MaterialIcons name=\"home\" />}\n                mr={1}\n                size=\"xs\"\n              />\n              <Breadcrumb.Text _current={{ color: 'blue.500' }}>\n                Home\n              </Breadcrumb.Text>\n            </HStack>\n          </Breadcrumb.Link>\n        </Breadcrumb.Item>\n        <Breadcrumb.Item>\n          <Breadcrumb.Link href=\"https://alpha.nativebase.io/\" isExternal>\n            <HStack justifyContent=\"center\" alignItems=\"center\">\n              <Breadcrumb.Icon\n                fontWeight={'bold'}\n                as={MaterialCommunityIcons}\n                name=\"file-document\"\n                mr={1}\n                size=\"xs\"\n              />\n              <Breadcrumb.Text>Docs</Breadcrumb.Text>\n            </HStack>\n          </Breadcrumb.Link>\n        </Breadcrumb.Item>\n        <Breadcrumb.Item isCurrent>\n          <Breadcrumb.Link\n            href=\"https://github.com/GeekyAnts/nativebase\"\n            isExternal\n          >\n            <HStack justifyContent=\"center\" alignItems=\"center\">\n              <Breadcrumb.Icon\n                as={<AntDesign name=\"github\" />}\n                mr={1}\n                size=\"xs\"\n              />\n              <Breadcrumb.Text>\n                Github (This is currently active)\n              </Breadcrumb.Text>\n            </HStack>\n          </Breadcrumb.Link>\n        </Breadcrumb.Item>\n      </Breadcrumb>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Breadcrumb/Separators.tsx",
    "content": "import React from 'react';\nimport { Breadcrumb, Box, Heading } from 'native-base';\nexport const Example = () => {\n  return (\n    <Box>\n      <Heading mb={4}>Breadcrumb with String Separator</Heading>\n      <Breadcrumb separator={'-'}>\n        <Breadcrumb.Item isCurrent>\n          <Breadcrumb.Link>\n            <Breadcrumb.Text _current={{ color: 'red.500' }}>\n              Home (This is currently active)\n            </Breadcrumb.Text>\n          </Breadcrumb.Link>\n        </Breadcrumb.Item>\n        <Breadcrumb.Item>\n          <Breadcrumb.Link href=\"https://alpha.nativebase.io/\" isExternal>\n            Docs\n          </Breadcrumb.Link>\n        </Breadcrumb.Item>\n        <Breadcrumb.Item>\n          <Breadcrumb.Link\n            href=\"https://github.com/GeekyAnts/nativebase\"\n            isExternal\n          >\n            Github\n          </Breadcrumb.Link>\n        </Breadcrumb.Item>\n      </Breadcrumb>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Breadcrumb/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport { Example as Basic } from './Basic';\nimport { Example as Separators } from './Separators';\nimport { Example as ComponentSeparator } from './ComponentSeparator';\nimport { Example as Composition } from './Composition';\nimport { Example as Collapsible } from './Collapsible';\n\nstoriesOf('Breadcrumb', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />)\n  .add('Separators', () => <Separators />)\n  .add('ComponentSeparator', () => <ComponentSeparator />)\n  .add('Composition', () => <Composition />)\n  .add('Collapsible', () => <Collapsible />);\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Card/Basic.tsx",
    "content": "import React from 'react';\nimport { Card, HStack, Heading, Text, Spacer, Flex } from 'native-base';\n\nexport function Example() {\n  return (\n    <Card bg=\"cyan.700\" w=\"296\">\n      <HStack alignItems=\"flex-start\">\n        <Text fontSize=\"xs\" color=\"cyan.50\" fontWeight=\"medium\">\n          Open Source\n        </Text>\n        <Spacer />\n        <Text fontSize=\"2xs\" color=\"cyan.100\">\n          1 month ago\n        </Text>\n      </HStack>\n      <Heading color=\"cyan.50\" mt=\"2\" fontWeight=\"medium\" fontSize=\"lg\">\n        NativeBase\n      </Heading>\n      <Text mt=\"1\" fontSize=\"sm\" color=\"white\">\n        NativeBase is a component library that enables devs to build universal\n        design systems.\n      </Text>\n      <Flex>\n        <Text mt=\"2\" fontSize=\"xs\" fontWeight=\"medium\" color=\"cyan.400\">\n          Read More\n        </Text>\n      </Flex>\n    </Card>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Card/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport { Example as Basic } from './Basic';\n\nstoriesOf('Card', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />);\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Center/Basic.tsx",
    "content": "import React from 'react';\nimport { Center } from 'native-base';\nexport function Example() {\n  return (\n    <Center>\n      <Center\n        bg=\"primary.400\"\n        _text={{ color: 'white', fontWeight: 'bold' }}\n        height={200}\n        width={{ base: 200, lg: 250 }}\n      >\n        This is the Center\n      </Center>\n    </Center>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Center/SquareCircle.tsx",
    "content": "import React from 'react';\nimport { Circle, Square, Box, HStack, Icon } from 'native-base';\nimport { MaterialIcons } from '@expo/vector-icons';\nexport function Example() {\n  return (\n    <HStack space={3}>\n      <Circle size=\"40px\" bg=\"secondary.400\">\n        <Icon as={<MaterialIcons name=\"audiotrack\" />} color=\"white\" size={5} />\n      </Circle>\n      <Square size=\"40px\" bg=\"primary.400\">\n        <Box _text={{ fontWeight: 'bold', fontSize: 'lg', color: 'white' }}>\n          20\n        </Box>\n      </Square>\n    </HStack>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Center/WithIcons.tsx",
    "content": "import React from 'react';\nimport { Center, Box, HStack, Icon } from 'native-base';\nimport { MaterialIcons } from '@expo/vector-icons';\n\nexport function Example() {\n  return (\n    <HStack space={1}>\n      <Center w=\"40px\" h=\"40px\" bg=\"primary.400\">\n        <Icon as={<MaterialIcons name=\"audiotrack\" />} color=\"white\" size={6} />\n      </Center>\n      <Center w=\"40px\" h=\"40px\" bg=\"secondary.400\">\n        <Box _text={{ fontWeight: 'bold', fontSize: 'lg', color: 'white' }}>\n          20\n        </Box>\n      </Center>\n    </HStack>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Center/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport { Example as Basic } from './Basic';\nimport { Example as WithIcons } from './WithIcons';\nimport { Example as SquareCircle } from './SquareCircle';\n\nstoriesOf('Center', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />)\n  .add('WithIcons', () => <WithIcons />)\n  .add('SquareCircle', () => <SquareCircle />);\n"
  },
  {
    "path": "example/storybook/stories/components/composites/CircularProgress/Basic.tsx",
    "content": "import React from 'react';\nimport { CircularProgress, Heading, Center } from 'native-base';\nexport const Example = () => {\n  return (\n    <Center>\n      <Heading mb={6}>Default CircularProgress</Heading>\n      <CircularProgress value={60} />\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/CircularProgress/ColorScheme.tsx",
    "content": "import React from 'react';\nimport { CircularProgress, Heading, Center, VStack } from 'native-base';\nexport const Example = () => {\n  return (\n    <Center>\n      <Heading>Changing the ColorSchemes</Heading>\n      <VStack mt={4} alignItems=\"center\" space=\"lg\">\n        <CircularProgress value={60} colorScheme=\"primary\" />\n        <CircularProgress value={60} colorScheme=\"secondary\" />\n        <CircularProgress value={60} colorScheme=\"emerald\" />\n      </VStack>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/CircularProgress/Colors.tsx",
    "content": "import React from 'react';\nimport { CircularProgress, Heading, Center } from 'native-base';\nimport { text } from '@storybook/addon-knobs';\nexport const Example = () => {\n  return (\n    <Center>\n      <Heading mb={6}>Changing the color</Heading>\n      <CircularProgress value={60} color={text('Color', 'secondary.400')} />\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/CircularProgress/Indeterminate.tsx",
    "content": "import React from 'react';\nimport { CircularProgress, Center, Heading } from 'native-base';\nexport const Example = () => {\n  return (\n    <Center>\n      <Heading>Indeterminate Progress</Heading>\n      <CircularProgress mt={6} value={60} thickness={6} isIndeterminate>\n        60%\n      </CircularProgress>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/CircularProgress/Label.tsx",
    "content": "import React from 'react';\nimport { CircularProgress, Heading, Center } from 'native-base';\nexport const Example = () => {\n  return (\n    <Center>\n      <Heading mb={6}>Adding label</Heading>\n      <CircularProgress value={60}>60%</CircularProgress>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/CircularProgress/MinMax.tsx",
    "content": "import React from 'react';\nimport { CircularProgress, Heading, Center, Box, Text } from 'native-base';\nimport { number } from '@storybook/addon-knobs';\nexport const Example = () => {\n  return (\n    <Center>\n      <Heading mb={6}>Adding Min and Max</Heading>\n      <CircularProgress\n        value={550}\n        max={number('Max', 1000)}\n        min={number('Min', 100)}\n        size={100}\n      >\n        550 / 1000\n      </CircularProgress>\n      <Box mt={5}>\n        <Text>Min: 100</Text>\n        <Text>Max: 1000</Text>\n      </Box>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/CircularProgress/Sizes.tsx",
    "content": "import React from 'react';\nimport { CircularProgress, Heading, Center, VStack } from 'native-base';\nexport const Example = () => {\n  return (\n    <Center>\n      <Heading>Changing the sizes</Heading>\n      <VStack alignItems=\"center\">\n        <CircularProgress mt={6} value={60} size=\"xl\" />\n        <CircularProgress mt={6} value={60} size=\"lg\" />\n        <CircularProgress mt={6} value={60} size=\"md\" />\n      </VStack>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/CircularProgress/Thickness.tsx",
    "content": "import React from 'react';\nimport { CircularProgress, Heading, Center } from 'native-base';\nexport const Example = () => {\n  return (\n    <Center>\n      <Heading mb={6}>Changing the thickness</Heading>\n      <CircularProgress value={60} thickness={2} />\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/CircularProgress/TrackColor.tsx",
    "content": "import React from 'react';\nimport { CircularProgress, Heading, Center } from 'native-base';\nimport { text } from '@storybook/addon-knobs';\nexport const Example = () => {\n  return (\n    <Center>\n      <Heading mb={6}>Changing the TrackColor</Heading>\n      <CircularProgress\n        value={60}\n        trackColor={text('Track Color', 'secondary.100')}\n      />\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/CircularProgress/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport Basic from './Basic';\nimport Colors from './Colors';\nimport Sizes from './Sizes';\nimport Label from './Label';\nimport Thickness from './Thickness';\nimport Indeterminate from './Indeterminate';\nimport TrackColor from './TrackColor';\nimport MinMax from './MinMax';\nimport ColorScheme from './ColorScheme';\n\nstoriesOf('CircularProgress', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />)\n  .add('ColorScheme', () => <ColorScheme />)\n  .add('Colors', () => <Colors />)\n  .add('TrackColor', () => <TrackColor />)\n  .add('Label', () => <Label />)\n  .add('Sizes', () => <Sizes />)\n  .add('Thickness', () => <Thickness />)\n  .add('Min and Max', () => <MinMax />)\n  .add('Indeterminate', () => <Indeterminate />);\n"
  },
  {
    "path": "example/storybook/stories/components/composites/CloseButton/Basic.tsx",
    "content": "import React from 'react';\nimport { CloseButton } from 'native-base';\nexport const Example = () => {\n  return <CloseButton />;\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/CloseButton/Sizes.tsx",
    "content": "import React from 'react';\nimport { CloseButton, HStack } from 'native-base';\nexport const Example = () => {\n  return (\n    <HStack space=\"md\">\n      <CloseButton size=\"sm\" color=\"teal.200\" />\n      <CloseButton size=\"md\" color=\"red.200\" />\n      <CloseButton size=\"lg\" color=\"blue.200\" />\n    </HStack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/CloseButton/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport Basic from './Basic';\nimport Sizes from './Sizes';\n\nstoriesOf('CloseButton', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />)\n  .add('Sizes', () => <Sizes />);\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Code/Basic.tsx",
    "content": "import React from 'react';\nimport { Code } from 'native-base';\nexport const Example = () => {\n  return <Code>Hello World!</Code>;\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Code/colors.tsx",
    "content": "import React from 'react';\nimport { Code, Stack } from 'native-base';\nexport const Example = () => {\n  return (\n    <Stack space={4}>\n      <Code>let direction = \"row\";</Code>\n      <Code colorScheme=\"danger\">console.log('Hey there!');</Code>\n      <Code colorScheme=\"success\">yarn add native-base</Code>\n      <Code colorScheme=\"dark\">React Native</Code>\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Code/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\n\nimport Basic from './Basic';\nimport Colors from './colors';\n\nstoriesOf('Code', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />)\n  .add('Colors', () => <Colors />);\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Collapse/Basic.tsx",
    "content": "import React from 'react';\nimport { Collapse, Stack, Heading, Button, Text } from 'native-base';\nexport const Example = () => {\n  const [show, setShow] = React.useState(false);\n  const handleToggle = () => setShow(!show);\n  return (\n    <Stack space={4} mx={8}>\n      <Heading>Default Collapse</Heading>\n      <Collapse isOpen={show}>\n        Candy canes macaroon croissant carrot cake soufflé toffee topping\n        pastry. Brownie lollipop brownie sesame snaps. Pastry gingerbread\n        biscuit sweet I love macaroon bear claw fruitcake oat cake. Jelly sweet\n        roll I love. Pastry pastry powder pie lemon drops chocolate topping\n        dessert.\n      </Collapse>\n      <Button size=\"sm\" colorScheme=\"emerald\" onPress={handleToggle}>\n        <Text color=\"white\">Show {show ? 'Less' : 'More'}</Text>\n      </Button>\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Collapse/Callback.tsx",
    "content": "import React from 'react';\nimport { Collapse, Stack, Heading, Button, Text } from 'native-base';\nexport const Example = () => {\n  const [show, setShow] = React.useState(false);\n  const handleToggle = () => setShow(!show);\n  const [text, setText] = React.useState(\n    'This text would change when the collapse animation start'\n  );\n  const handleText = () =>\n    setText(\n      show\n        ? 'Collapse is open'\n        : 'This text would change when the collapse animation start'\n    );\n  const [color, setColor] = React.useState('emerald');\n  const handleColorToggle = () =>\n    setColor(color === 'emerald' ? 'indigo' : 'emerald');\n  return (\n    <Stack space={4} mx={8}>\n      <Heading>Collapse with callbacks</Heading>\n      <Text>{text}</Text>\n      <Collapse\n        onAnimationEnd={handleColorToggle}\n        onAnimationStart={handleText}\n        isOpen={show}\n      >\n        Candy canes macaroon croissant carrot cake soufflé toffee topping\n        pastry. Brownie lollipop brownie sesame snaps. Pastry gingerbread\n        biscuit sweet I love macaroon bear claw fruitcake oat cake. Jelly sweet\n        roll I love. Pastry pastry powder pie lemon drops chocolate topping\n        dessert.\n      </Collapse>\n      <Button colorScheme={color} size=\"sm\" onPress={handleToggle}>\n        <Text color=\"white\">Show {show ? 'Less' : 'More'}</Text>\n      </Button>\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Collapse/Duration.tsx",
    "content": "import React from 'react';\nimport { Collapse, Stack, Heading, Text, Button } from 'native-base';\n\nexport const Example = () => {\n  const [show, setShow] = React.useState(false);\n  const handleToggle = () => setShow(!show);\n  return (\n    <Stack space={4} mx={8}>\n      <Heading>Collapse with duration</Heading>\n      <Collapse duration={700} isOpen={show}>\n        Candy canes macaroon croissant carrot cake soufflé toffee topping\n        pastry. Brownie lollipop brownie sesame snaps. Pastry gingerbread\n        biscuit sweet I love macaroon bear claw fruitcake oat cake. Jelly sweet\n        roll I love. Pastry pastry powder pie lemon drops chocolate topping\n        dessert.\n      </Collapse>\n      <Button size=\"sm\" colorScheme=\"emerald\" onPress={handleToggle}>\n        <Text color=\"white\">Show {show ? 'Less' : 'More'}</Text>\n      </Button>\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Collapse/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\n\nimport Basic from './Basic';\nimport Callback from './Callback';\nimport Duration from './Duration';\n\nstoriesOf('Collapse', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />)\n  .add('Animation Duration', () => <Duration />)\n  .add('onAnimationStart and onAnimationEnd', () => <Callback />);\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Container/Playground.tsx",
    "content": "import React from 'react';\nimport { Heading, Container, Text } from 'native-base';\nimport { boolean, text } from '@storybook/addon-knobs';\n\nexport const Example = () => {\n  return (\n    <Container\n      centerContent={boolean('centerContent', true)}\n      maxWidth={text('override default max-width', '80%')}\n    >\n      <Heading>Benefits to a joint design and development system</Heading>\n      <Text>\n        There are many benefits to a joint design and development system. Not\n        only does it bring benefits to the design team, but it also brings\n        benefits to engineering teams. It makes sure that our experiences have a\n        consistent look and feel, not just in our design specs, but in\n        production\n      </Text>\n    </Container>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Container/centeringChildren.tsx",
    "content": "import React from 'react';\nimport { Container, Text, Heading } from 'native-base';\nexport const Example = () => {\n  return (\n    <Container centerContent>\n      <Heading>Benefits</Heading>\n      <Text>\n        There are many benefits to a joint design and development system. Not\n        only does it bring benefits to the design team, but it also brings\n        benefits to engineering teams. It makes sure that our experiences have a\n        consistent look and feel, not just in our design specs, but in\n        production\n      </Text>\n    </Container>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Container/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport { Example as Usage } from './usage';\nimport { Example as Playground } from './Playground';\n\nstoriesOf('Container', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Playground', () => <Playground />)\n  .add('Usage', () => <Usage />);\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Container/usage.tsx",
    "content": "import React from 'react';\nimport { Container, Text, Heading, Center } from 'native-base';\nexport function Example() {\n  return (\n    <Center>\n      <Container>\n        <Heading>\n          A component library for the\n          <Text color=\"emerald.500\"> React Ecosystem</Text>\n        </Heading>\n        <Text mt=\"3\" fontWeight=\"medium\">\n          NativeBase is a simple, modular and accessible component library that\n          gives you building blocks to build you React applications.\n        </Text>\n      </Container>\n    </Center>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Divider/Basic.tsx",
    "content": "import React from 'react';\nimport { Divider, Heading, Box } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Box alignItems=\"center\">\n      <Box w=\"140\">\n        <Heading mx=\"3\" alignItems=\"center\" flexDirection=\"row\">\n          Chrome\n        </Heading>\n        <Divider\n          my=\"2\"\n          _light={{ bg: 'muted.800' }}\n          _dark={{ bg: 'muted.50' }}\n        />\n        <Heading mx=\"3\" alignItems=\"center\" flexDirection=\"row\">\n          Firefox\n        </Heading>\n      </Box>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Divider/Composition.tsx",
    "content": "import React from 'react';\nimport { Divider, Flex, Text, Box } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Box alignItems=\"center\">\n      <Flex direction=\"row\" h=\"58\" p=\"4\">\n        <Text>Simple</Text>\n        <Divider bg=\"emerald.500\" thickness=\"2\" mx=\"2\" orientation=\"vertical\" />\n        <Text>Easy</Text>\n        <Divider bg=\"indigo.500\" thickness=\"2\" mx=\"2\" orientation=\"vertical\" />\n        <Text>Beautiful</Text>\n      </Flex>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Divider/Orientation.tsx",
    "content": "import React from 'react';\nimport { Divider, Flex, Box, Heading } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Box alignItems=\"center\">\n      <Box w=\"160\">\n        <Heading mx=\"auto\">Shoes</Heading>\n        <Divider\n          my=\"2\"\n          _light={{ bg: 'muted.800' }}\n          _dark={{ bg: 'muted.50' }}\n        />\n        <Flex mx=\"3\" direction=\"row\" justify=\"space-evenly\" h=\"60\">\n          <Heading py=\"2\">Girls</Heading>\n          <Divider\n            orientation=\"vertical\"\n            mx=\"3\"\n            _light={{ bg: 'muted.800' }}\n            _dark={{ bg: 'muted.50' }}\n          />\n          <Heading py=\"2\">Boys</Heading>\n        </Flex>\n      </Box>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Divider/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport { Example as Basic } from './Basic';\nimport { Example as Orientation } from './Orientation';\nimport { Example as Composition } from './Composition';\n\nstoriesOf('Divider', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />)\n  .add('Orientation', () => <Orientation />)\n  .add('Composition', () => <Composition />);\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Drawer/Basic.tsx",
    "content": "import React from 'react';\nimport { Box, Button, Drawer } from 'native-base';\nimport { useState } from 'react';\nimport { Dimensions } from 'react-native';\n\nconst Basic = () => {\n  const [showModal, setShowModal] = useState(false);\n\n  return (\n    <>\n      <Button onPress={() => setShowModal(true)}>Button</Button>\n      <Drawer\n        isOpen={showModal}\n        onClose={() => setShowModal(false)}\n        placement=\"right\"\n      >\n        <Box\n          display=\"flex\"\n          h=\"100%\"\n          bg=\"yellow.200\"\n          minW={Dimensions.get('window').width / 2}\n        ></Box>\n      </Drawer>\n    </>\n  );\n};\n\nexport default Basic;\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Drawer/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from '../../Wrapper';\nimport Basic from './Basic';\n\nstoriesOf('Drawer', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />);\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Fab/Basic.tsx",
    "content": "import { Fab, Icon, Box } from 'native-base';\nimport React from 'react';\nimport { AntDesign } from '@expo/vector-icons';\n\nexport const Example = () => {\n  return (\n    <Box position=\"relative\" h={100} w=\"100%\">\n      <Fab\n        position=\"absolute\"\n        size=\"sm\"\n        icon={<Icon color=\"white\" as={<AntDesign name=\"plus\" />} size=\"sm\" />}\n      />\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Fab/CustomPosition.tsx",
    "content": "import { Fab, Icon, Box } from 'native-base';\nimport React from 'react';\nimport { AntDesign } from '@expo/vector-icons';\n\nexport const Example = () => {\n  return (\n    <Box position=\"relative\" w=\"100%\" h={200}>\n      <Fab\n        right={70}\n        bottom={50}\n        icon={<Icon color=\"white\" as={<AntDesign name=\"plus\" />} />}\n      />\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Fab/DocsBasic.tsx",
    "content": "import { Fab, Icon, Box, Center } from 'native-base';\nimport React from 'react';\nimport { AntDesign } from '@expo/vector-icons';\n\nexport const Example = () => {\n  return (\n    <Center>\n      <Box\n        height=\"200\"\n        w={[200, 300, 400]}\n        shadow=\"2\"\n        rounded=\"lg\"\n        _dark={{ bg: 'coolGray.200:alpha.20' }}\n        _light={{ bg: 'coolGray.200:alpha.20' }}\n      >\n        <Fab\n          renderInPortal={false}\n          shadow={2}\n          size=\"sm\"\n          icon={<Icon color=\"white\" as={AntDesign} name=\"plus\" size=\"sm\" />}\n        />\n      </Box>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Fab/DocsCustomPosition.tsx",
    "content": "import { Fab, Icon, Box, Center } from 'native-base';\nimport React from 'react';\nimport { AntDesign } from '@expo/vector-icons';\n\nexport const Example = () => {\n  return (\n    <Center>\n      <Box\n        height=\"200\"\n        w={[200, 300, 400]}\n        shadow=\"2\"\n        rounded=\"lg\"\n        _dark={{ bg: 'coolGray.200:alpha.20' }}\n        _light={{ bg: 'coolGray.200:alpha.20' }}\n      >\n        <Fab\n          renderInPortal={false}\n          shadow={2}\n          right={70}\n          bottom={50}\n          size=\"sm\"\n          icon={<Icon color=\"white\" as={AntDesign} name=\"plus\" size=\"4\" />}\n        />\n      </Box>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Fab/DocsPlacement.tsx",
    "content": "import { Fab, Icon, Box, Center } from 'native-base';\nimport React from 'react';\nimport { MaterialIcons } from '@expo/vector-icons';\n\nexport const Example = () => {\n  return (\n    <Center>\n      <Box\n        height=\"200\"\n        w={[200, 300, 400]}\n        shadow=\"2\"\n        rounded=\"lg\"\n        _dark={{ bg: 'coolGray.200:alpha.20' }}\n        _light={{ bg: 'coolGray.200:alpha.20' }}\n      >\n        <Fab\n          renderInPortal={false}\n          shadow={2}\n          placement=\"top-right\"\n          size=\"sm\"\n          icon={\n            <Icon color=\"white\" as={MaterialIcons} name=\"lightbulb\" size=\"4\" />\n          }\n          label=\"Quick Start\"\n        />\n      </Box>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Fab/Kitchensink-Basic.tsx",
    "content": "import { Fab, Icon, Box, NativeBaseProvider } from 'native-base';\nimport React from 'react';\nimport { AntDesign } from '@expo/vector-icons';\n\nexport const Example = () => {\n  return (\n    <NativeBaseProvider>\n      <Box position=\"relative\" h={100} w={100}>\n        <Fab\n          position=\"absolute\"\n          size=\"sm\"\n          icon={<Icon color=\"white\" as={<AntDesign name=\"plus\" />} size=\"sm\" />}\n        />\n      </Box>\n    </NativeBaseProvider>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Fab/Kitchensink-CustomPosition.tsx",
    "content": "import { Fab, Icon, NativeBaseProvider, Box } from 'native-base';\nimport React from 'react';\nimport { AntDesign } from '@expo/vector-icons';\n\nexport const Example = () => {\n  return (\n    <NativeBaseProvider>\n      <Box position=\"relative\" w={100} h={200}>\n        <Fab\n          right={70}\n          bottom={50}\n          icon={<Icon color=\"white\" as={<AntDesign name=\"plus\" />} />}\n        />\n      </Box>\n    </NativeBaseProvider>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Fab/Kitchensink-Placement.tsx",
    "content": "import { Fab, Icon, Text, NativeBaseProvider, Box } from 'native-base';\nimport React from 'react';\nimport { AntDesign } from '@expo/vector-icons';\n\nexport const Example = () => {\n  return (\n    <NativeBaseProvider>\n      <Box h={200} w={250}>\n        <Fab\n          placement=\"top-right\"\n          icon={<Icon color=\"white\" as={<AntDesign name=\"plus\" />} size={4} />}\n          label={\n            <Text color=\"white\" fontSize=\"sm\">\n              BUTTON\n            </Text>\n          }\n        />\n      </Box>\n    </NativeBaseProvider>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Fab/Placement.tsx",
    "content": "import { Fab, Icon, Box } from 'native-base';\nimport React from 'react';\nimport { MaterialIcons } from '@expo/vector-icons';\n\nexport const Example = () => {\n  return (\n    <Box h={400} w=\"100%\">\n      <Fab\n        borderRadius=\"full\"\n        colorScheme=\"indigo\"\n        placement=\"bottom-right\"\n        icon={\n          <Icon\n            color=\"white\"\n            as={<MaterialIcons name=\"lightbulb\" />}\n            size=\"4\"\n          />\n        }\n        label=\"Quick Start\"\n      />\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Fab/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from '../../Wrapper';\nimport { Example as Placement } from './Placement';\nimport { Example as Basic } from './Basic';\nimport { Example as CustomPosition } from './CustomPosition';\n\nstoriesOf('Fab', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />)\n  .add('Placement', () => <Placement />)\n  .add('CustomPosition', () => <CustomPosition />);\n"
  },
  {
    "path": "example/storybook/stories/components/composites/FormControl/CustomStyle.tsx",
    "content": "import React from 'react';\nimport {\n  FormControl,\n  Input,\n  Stack,\n  Text,\n  Divider,\n  Box,\n  WarningOutlineIcon,\n  ScrollView,\n} from 'native-base';\n\nexport const Example = () => {\n  return (\n    <ScrollView w=\"100%\">\n      <Stack\n        space={2.5}\n        alignSelf=\"center\"\n        px=\"4\"\n        safeArea\n        mt=\"4\"\n        w={{ base: '100%', md: '25%' }}\n      >\n        <Box>\n          <Text bold fontSize=\"xl\" mb=\"4\">\n            Default\n          </Text>\n          <FormControl mb=\"5\">\n            <FormControl.Label>Project Title</FormControl.Label>\n            <Input />\n            <FormControl.HelperText>\n              Give your project a title.\n            </FormControl.HelperText>\n          </FormControl>\n          <Divider />\n        </Box>\n        <Box>\n          <Text bold fontSize=\"xl\" mb=\"4\">\n            Disabled\n          </Text>\n          <FormControl isDisabled mb=\"5\">\n            <FormControl.Label\n              _disabled={{\n                _text: {\n                  color: 'gray.400',\n                  fontWeight: 'bold',\n                },\n              }}\n            >\n              Project Title\n            </FormControl.Label>\n            <Input placeholder=\"Title\" />\n            <FormControl.HelperText>\n              Give your project a title.\n            </FormControl.HelperText>\n          </FormControl>\n          <Divider />\n        </Box>\n        <Box>\n          <Text bold fontSize=\"xl\" mb=\"4\">\n            Invalid\n          </Text>\n          <FormControl isInvalid>\n            <FormControl.Label>Project Title</FormControl.Label>\n            <Input placeholder=\"Title\" />\n            <FormControl.ErrorMessage\n              leftIcon={<WarningOutlineIcon size=\"xs\" />}\n            >\n              Something is wrong.\n            </FormControl.ErrorMessage>\n          </FormControl>\n        </Box>\n      </Stack>\n    </ScrollView>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/FormControl/Playground.tsx",
    "content": "import React from 'react';\nimport { FormControl, Input, Stack } from 'native-base';\nimport { boolean } from '@storybook/addon-knobs';\n\nexport const Example = () => {\n  return (\n    <FormControl\n      isRequired={boolean('isRequired', true)}\n      isDisabled={boolean('isDisabled', false)}\n      isInvalid={boolean('isInvalid', false)}\n      isReadOnly={boolean('isReadOnly', false)}\n      w={{ base: '70%', md: '25%' }}\n    >\n      <Stack mx=\"4\">\n        <FormControl.Label _invalid={{ backgroundColor: '#FED7D7' }}>\n          Favorite framework\n        </FormControl.Label>\n        <Input p={2} placeholder=\"Is it react?\" />\n        <FormControl.HelperText _disabled={{ backgroundColor: '#eee' }}>\n          We'll keep this between us.\n        </FormControl.HelperText>\n        <FormControl.ErrorMessage>Something is wrong.</FormControl.ErrorMessage>\n      </Stack>\n    </FormControl>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/FormControl/Usage.tsx",
    "content": "import React from 'react';\nimport {\n  FormControl,\n  Input,\n  Stack,\n  WarningOutlineIcon,\n  Box,\n} from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Box alignItems=\"center\">\n      <Box w=\"100%\" maxWidth=\"300px\">\n        <FormControl isRequired>\n          <Stack mx=\"4\">\n            <FormControl.Label>Password</FormControl.Label>\n            <Input\n              type=\"password\"\n              defaultValue=\"12345\"\n              placeholder=\"password\"\n            />\n            <FormControl.HelperText>\n              Must be atleast 6 characters.\n            </FormControl.HelperText>\n            <FormControl.ErrorMessage\n              leftIcon={<WarningOutlineIcon size=\"xs\" />}\n            >\n              Atleast 6 characters are required.\n            </FormControl.ErrorMessage>\n          </Stack>\n        </FormControl>\n      </Box>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/FormControl/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport { Example as Usage } from './Usage';\nimport { Example as CustomStyle } from './CustomStyle';\nimport { Example as Playground } from './Playground';\n\nstoriesOf('FormControl', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Playground', () => <Playground />)\n  .add('Usage', () => <Usage />)\n  .add('CustomStyle', () => <CustomStyle />);\n"
  },
  {
    "path": "example/storybook/stories/components/composites/IconButton/Basic.tsx",
    "content": "import React from 'react';\nimport { IconButton, Icon, Box } from 'native-base';\nimport { Entypo } from '@expo/vector-icons';\n\nexport const Example = () => {\n  return (\n    <Box alignItems=\"center\">\n      <IconButton\n        icon={<Icon as={Entypo} name=\"emoji-happy\" />}\n        borderRadius=\"full\"\n        _icon={{\n          color: 'orange.500',\n          size: 'md',\n        }}\n        _hover={{\n          bg: 'orange.600:alpha.20',\n        }}\n        _pressed={{\n          bg: 'orange.600:alpha.20',\n          _icon: {\n            name: 'emoji-flirt',\n          },\n          _ios: {\n            _icon: {\n              size: '2xl',\n            },\n          },\n        }}\n        _ios={{\n          _icon: {\n            size: '2xl',\n          },\n        }}\n      />\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/IconButton/SVGIcon.tsx",
    "content": "import React from 'react';\nimport { IconButton, Icon, VStack } from 'native-base';\nimport { Path } from 'react-native-svg';\n\nexport const Example = () => {\n  return (\n    <VStack space={4}>\n      {/* Suggested */}\n      <IconButton\n        variant=\"solid\"\n        onPress={() => console.log('IconButton pressed')}\n        _icon={{\n          viewBox: '0 0 100 100',\n          size: 10,\n          strokeWidth: '10',\n          width: '100',\n          height: '100',\n        }}\n      >\n        <Path d=\"M46.667 90v-.008c-4.922 0-11.021-2.695-13.333-6.66V40c5.521 0 10-4.479 10-10V13.333A3.33 3.33 0 0 1 46.667 10C54.029 10 60 15.97 60 23.333v13.333A3.331 3.331 0 0 0 63.334 40H80c5.52 0 10 4.479 10 10v30h-.004c0 5.52-4.477 9.992-9.996 10H46.667zM10 40h16.666v43.333H10z\" />\n      </IconButton>\n\n      {/* Alternatively */}\n      <IconButton\n        variant=\"solid\"\n        onPress={() => console.log('IconButton pressed')}\n        icon={\n          <Icon\n            width=\"100\"\n            viewBox=\"0 0 100 100\"\n            size=\"10\"\n            strokeWidth=\"10\"\n            height=\"100\"\n            color=\"lightBlue.600\"\n          >\n            <Path d=\"M46.667 90v-.008c-4.922 0-11.021-2.695-13.333-6.66V40c5.521 0 10-4.479 10-10V13.333A3.33 3.33 0 0 1 46.667 10C54.029 10 60 15.97 60 23.333v13.333A3.331 3.331 0 0 0 63.334 40H80c5.52 0 10 4.479 10 10v30h-.004c0 5.52-4.477 9.992-9.996 10H46.667zM10 40h16.666v43.333H10z\" />\n          </Icon>\n        }\n      />\n    </VStack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/IconButton/Sizes.tsx",
    "content": "import React from 'react';\nimport { IconButton, Center, VStack } from 'native-base';\nimport { MaterialIcons } from '@expo/vector-icons';\nexport const Example = () => {\n  return (\n    <Center>\n      <VStack space={4} alignItems=\"center\">\n        {['xs', 'sm', 'md', 'lg'].map((size: any) => (\n          <IconButton\n            size={size}\n            variant=\"solid\"\n            _icon={{\n              as: MaterialIcons,\n              name: 'menu',\n            }}\n          />\n        ))}\n      </VStack>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/IconButton/Variant.tsx",
    "content": "import React from 'react';\nimport { Center, IconButton, VStack } from 'native-base';\nimport { AntDesign } from '@expo/vector-icons';\nexport const Example = () => {\n  return (\n    <Center>\n      <VStack space={4} alignItems=\"center\">\n        {['outline', 'solid', 'ghost'].map((variant: any) => (\n          <IconButton\n            colorScheme=\"indigo\"\n            key={variant}\n            variant={variant}\n            _icon={{\n              as: AntDesign,\n              name: 'search1',\n            }}\n          />\n        ))}\n      </VStack>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/IconButton/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport { Example as Basic } from './Basic';\nimport { Example as Sizes } from './Sizes';\nimport { Example as Variant } from './Variant';\nimport { Example as SVGIcon } from './SVGIcon';\n\nstoriesOf('IconButton', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />)\n  .add('Sizes', () => <Sizes />)\n  .add('Variant', () => <Variant />)\n  .add('SVGIcon', () => <SVGIcon />);\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Kbd/Basic.tsx",
    "content": "import React from 'react';\nimport { VStack, HStack, Kbd, Text } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <VStack space={8}>\n      <HStack>\n        <Kbd>shift</Kbd>\n        <Text> + </Text>\n        <Kbd>C</Kbd>\n      </HStack>\n      <HStack>\n        <Kbd>shift</Kbd>\n        <Text> then </Text>\n        <Kbd>H</Kbd>\n      </HStack>\n      <HStack>\n        <Kbd>alt</Kbd>\n        <Text> or </Text>\n        <Kbd>option</Kbd>\n      </HStack>\n    </VStack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Kbd/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport Basic from './Basic';\n\nstoriesOf('Kbd', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />);\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Menu/Basic.tsx",
    "content": "import React from 'react';\nimport { Menu, HamburgerIcon, Box, Pressable } from 'native-base';\n\nexport function Example() {\n  return (\n    <Box w=\"90%\" alignItems=\"center\">\n      <Menu\n        w=\"190\"\n        trigger={(triggerProps) => {\n          return (\n            <Pressable accessibilityLabel=\"More options menu\" {...triggerProps}>\n              <HamburgerIcon />\n            </Pressable>\n          );\n        }}\n      >\n        <Menu.Item>Arial</Menu.Item>\n        <Menu.Item>Nunito Sans</Menu.Item>\n        <Menu.Item>Roboto</Menu.Item>\n        <Menu.Item>Poppins</Menu.Item>\n        <Menu.Item>SF Pro</Menu.Item>\n        <Menu.Item>Helvetica</Menu.Item>\n        <Menu.Item isDisabled>Sofia</Menu.Item>\n        <Menu.Item>Cookie</Menu.Item>\n      </Menu>\n    </Box>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Menu/Group.tsx",
    "content": "import React from 'react';\nimport { Menu, Divider, HamburgerIcon, Box, Pressable } from 'native-base';\n\nexport function Example() {\n  return (\n    <Box w=\"90%\" alignItems=\"center\">\n      <Menu\n        w=\"190\"\n        trigger={(triggerProps) => {\n          return (\n            <Pressable {...triggerProps}>\n              <HamburgerIcon />\n            </Pressable>\n          );\n        }}\n      >\n        <Menu.Group title=\"Free\">\n          <Menu.Item>Arial</Menu.Item>\n          <Menu.Item>Nunito Sans</Menu.Item>\n          <Menu.Item>Roboto</Menu.Item>\n        </Menu.Group>\n        <Divider mt=\"3\" w=\"100%\" />\n        <Menu.Group title=\"Paid\">\n          <Menu.Item>SF Pro</Menu.Item>\n          <Menu.Item>Helvetica</Menu.Item>\n        </Menu.Group>\n      </Menu>\n    </Box>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Menu/MenuOptionsGroup.tsx",
    "content": "import React from 'react';\nimport { Menu, Divider, HamburgerIcon, Box, Pressable } from 'native-base';\n\nexport function Example() {\n  return (\n    <Box w=\"90%\" alignItems=\"center\">\n      <Menu\n        closeOnSelect={false}\n        w=\"190\"\n        onOpen={() => console.log('opened')}\n        onClose={() => console.log('closed')}\n        trigger={(triggerProps) => {\n          return (\n            <Pressable {...triggerProps}>\n              <HamburgerIcon />\n            </Pressable>\n          );\n        }}\n      >\n        <Menu.OptionGroup defaultValue=\"Arial\" title=\"free\" type=\"radio\">\n          <Menu.ItemOption value=\"Arial\">Arial</Menu.ItemOption>\n          <Menu.ItemOption value=\"Nunito Sans\">Nunito Sans</Menu.ItemOption>\n          <Menu.ItemOption value=\"Roboto\">Roboto</Menu.ItemOption>\n        </Menu.OptionGroup>\n        <Divider mt=\"3\" w=\"100%\" />\n        <Menu.OptionGroup title=\"paid\" type=\"checkbox\">\n          <Menu.ItemOption value=\"SF Pro\">SF Pro</Menu.ItemOption>\n          <Menu.ItemOption value=\"Helvetica\">Helvetica</Menu.ItemOption>\n        </Menu.OptionGroup>\n      </Menu>\n    </Box>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Menu/MenuPositions.tsx",
    "content": "import React from 'react';\nimport { Menu, Button, VStack, Select, CheckIcon } from 'native-base';\n\nexport function Example() {\n  const [shouldOverlapWithTrigger] = React.useState(false);\n\n  const [position, setPosition] = React.useState('auto');\n  return (\n    <VStack space={6} alignSelf=\"flex-start\" w=\"100%\">\n      <Menu\n        w=\"160\"\n        shouldOverlapWithTrigger={shouldOverlapWithTrigger}\n        // @ts-ignore\n        placement={position == 'auto' ? undefined : position}\n        trigger={(triggerProps) => {\n          return (\n            <Button alignSelf=\"center\" variant=\"solid\" {...triggerProps}>\n              Menu\n            </Button>\n          );\n        }}\n      >\n        <Menu.Item>Arial</Menu.Item>\n        <Menu.Item>Nunito Sans</Menu.Item>\n        <Menu.Item>Roboto</Menu.Item>\n      </Menu>\n\n      <Select\n        selectedValue={position}\n        mx={{ base: 0, md: 'auto' }}\n        onValueChange={(nextValue) => setPosition(nextValue)}\n        _selectedItem={{\n          bg: 'cyan.600',\n          endIcon: <CheckIcon size={4} />,\n        }}\n        accessibilityLabel=\"Select a position for Menu\"\n      >\n        <Select.Item label=\"auto\" value=\"auto\" />\n        <Select.Item label=\"Top Left\" value=\"top left\" />\n        <Select.Item label=\"Top\" value=\"top\" />\n        <Select.Item label=\"Top Right\" value=\"top right\" />\n        <Select.Item label=\"Right Top\" value=\"right top\" />\n        <Select.Item label=\"Right\" value=\"right\" />\n        <Select.Item label=\"Right Bottom\" value=\"right bottom\" />\n        <Select.Item label=\"Bottom Left\" value=\"bottom left\" />\n        <Select.Item label=\"Bottom\" value=\"bottom\" />\n        <Select.Item label=\"Bottom Right\" value=\"bottom right\" />\n        <Select.Item label=\"Left Top\" value=\"left top\" />\n        <Select.Item label=\"Left\" value=\"left\" />\n        <Select.Item label=\"Left Bottom\" value=\"left bottom\" />\n      </Select>\n    </VStack>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Menu/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport { Example as Basic } from './Basic';\nimport { Example as Group } from './Group';\nimport { Example as MenuOptionsGroup } from './MenuOptionsGroup';\nimport { Example as MenuPositions } from './MenuPositions';\n\nstoriesOf('Menu', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />)\n  .add('Group', () => <Group />)\n  .add('MenuOptionsGroup', () => <MenuOptionsGroup />)\n  .add('Menu positions', () => <MenuPositions />);\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Modal/Basic.tsx",
    "content": "import React from 'react';\nimport { Button, Modal, FormControl, Input, Center } from 'native-base';\nimport { useState } from 'react';\n\nexport const Example = () => {\n  const [showModal, setShowModal] = useState(false);\n\n  return (\n    <Center>\n      <Button onPress={() => setShowModal(true)}>Button</Button>\n      <Modal isOpen={showModal} onClose={() => setShowModal(false)}>\n        <Modal.Content maxWidth=\"400px\">\n          <Modal.CloseButton />\n          <Modal.Header>Contact Us</Modal.Header>\n          <Modal.Body>\n            <FormControl>\n              <FormControl.Label>Name</FormControl.Label>\n              <Input />\n            </FormControl>\n            <FormControl mt=\"3\">\n              <FormControl.Label>Email</FormControl.Label>\n              <Input />\n            </FormControl>\n          </Modal.Body>\n          <Modal.Footer>\n            <Button.Group space={2}>\n              <Button\n                variant=\"ghost\"\n                colorScheme=\"blueGray\"\n                onPress={() => {\n                  setShowModal(false);\n                }}\n              >\n                Cancel\n              </Button>\n              <Button\n                onPress={() => {\n                  setShowModal(false);\n                }}\n              >\n                Save\n              </Button>\n            </Button.Group>\n          </Modal.Footer>\n        </Modal.Content>\n      </Modal>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Modal/CustomBackdrop.tsx",
    "content": "import React from 'react';\nimport { Button, Modal, Center } from 'native-base';\nimport { useState } from 'react';\n\nexport const Example = () => {\n  const [showModal, setShowModal] = useState(false);\n\n  return (\n    <Center>\n      <Button onPress={() => setShowModal(true)}>Button</Button>\n      <Modal\n        isOpen={showModal}\n        onClose={() => setShowModal(false)}\n        _backdrop={{ _dark: { bg: 'coolGray.800' }, bg: 'warmGray.50' }}\n      >\n        <Modal.Content maxWidth=\"350\" maxH=\"212\">\n          <Modal.CloseButton />\n          <Modal.Header>Return Policy</Modal.Header>\n          <Modal.Body>\n            Create a 'Return Request' under “My Orders” section of App/Website.\n            Follow the screens that come up after tapping on the 'Return’\n            button. Please make a note of the Return ID that we generate at the\n            end of the process. Keep the item ready for pick up or ship it to us\n            basis on the return mode.\n          </Modal.Body>\n          <Modal.Footer>\n            <Button.Group space={2}>\n              <Button\n                variant=\"ghost\"\n                colorScheme=\"blueGray\"\n                onPress={() => {\n                  setShowModal(false);\n                }}\n              >\n                Cancel\n              </Button>\n              <Button\n                onPress={() => {\n                  setShowModal(false);\n                }}\n              >\n                Save\n              </Button>\n            </Button.Group>\n          </Modal.Footer>\n        </Modal.Content>\n      </Modal>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Modal/ModalPlacement.tsx",
    "content": "//@ts-nocheck\nimport React from 'react';\nimport { Button, Modal, Stack, FormControl, Input } from 'native-base';\nimport { useState } from 'react';\n\nexport const Example = () => {\n  const [placement, setPlacement] = useState(undefined);\n  const [open, setOpen] = useState(false);\n  const openModal = (placement) => {\n    setOpen(true);\n    setPlacement(placement);\n  };\n\n  return (\n    <>\n      <Stack direction={{ base: 'column', md: 'row' }} space={2}>\n        <Button onPress={() => openModal('top')}>Top</Button>\n        <Button onPress={() => openModal('bottom')}>Bottom</Button>\n        <Button onPress={() => openModal('center')}>Center</Button>\n        <Button onPress={() => openModal('left')}>Left</Button>\n        <Button onPress={() => openModal('right')}>Right</Button>\n      </Stack>\n      <Modal isOpen={open} onClose={() => setOpen(false)} safeAreaTop={true}>\n        <Modal.Content maxWidth=\"350\" {...styles[placement]}>\n          <Modal.CloseButton />\n          <Modal.Header>Contact Us</Modal.Header>\n          <Modal.Body>\n            <FormControl>\n              <FormControl.Label>Name</FormControl.Label>\n              <Input />\n            </FormControl>\n            <FormControl mt=\"3\">\n              <FormControl.Label>Email</FormControl.Label>\n              <Input />\n            </FormControl>\n          </Modal.Body>\n          <Modal.Footer>\n            <Button.Group space={2}>\n              <Button\n                variant=\"ghost\"\n                colorScheme=\"blueGray\"\n                onPress={() => {\n                  setOpen(false);\n                }}\n              >\n                Cancel\n              </Button>\n              <Button\n                onPress={() => {\n                  setOpen(false);\n                }}\n              >\n                Save\n              </Button>\n            </Button.Group>\n          </Modal.Footer>\n        </Modal.Content>\n      </Modal>\n    </>\n  );\n};\n\nconst styles = {\n  top: {\n    marginBottom: 'auto',\n    marginTop: 0,\n  },\n  bottom: {\n    marginBottom: 0,\n    marginTop: 'auto',\n  },\n  left: {\n    marginLeft: 0,\n    marginRight: 'auto',\n  },\n  right: {\n    marginLeft: 'auto',\n    marginRight: 0,\n  },\n  center: {},\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Modal/ModalRefEg.tsx",
    "content": "import React from 'react';\nimport { Modal, Button, Input, FormControl, HStack } from 'native-base';\n\nexport function Example() {\n  const [modalVisible, setModalVisible] = React.useState(false);\n  const initialRef = React.useRef(null);\n  const finalRef = React.useRef(null);\n  return (\n    <>\n      <Modal\n        isOpen={modalVisible}\n        onClose={() => setModalVisible(false)}\n        initialFocusRef={initialRef}\n        finalFocusRef={finalRef}\n      >\n        <Modal.Content>\n          <Modal.CloseButton />\n          <Modal.Header>Contact Us</Modal.Header>\n          <Modal.Body>\n            <FormControl>\n              <FormControl.Label>Name</FormControl.Label>\n              <Input ref={initialRef} />\n            </FormControl>\n            <FormControl mt=\"3\">\n              <FormControl.Label>Email</FormControl.Label>\n              <Input />\n            </FormControl>\n          </Modal.Body>\n          <Modal.Footer>\n            <Button.Group space={2}>\n              <Button\n                variant=\"ghost\"\n                colorScheme=\"blueGray\"\n                onPress={() => {\n                  setModalVisible(false);\n                }}\n              >\n                Cancel\n              </Button>\n              <Button\n                onPress={() => {\n                  setModalVisible(false);\n                }}\n              >\n                Save\n              </Button>\n            </Button.Group>\n          </Modal.Footer>\n        </Modal.Content>\n      </Modal>\n      <HStack space=\"4\" justifyContent=\"center\" alignItems=\"center\">\n        <Button\n          onPress={() => {\n            setModalVisible(!modalVisible);\n          }}\n        >\n          Open Modal\n        </Button>\n        <Input\n          w=\"32\"\n          ref={finalRef}\n          placeholder=\"Enter the OTP\"\n          _light={{ placeholderTextColor: 'blueGray.700' }}\n          _dark={{ placeholderTextColor: 'blueGray.100' }}\n        />\n      </HStack>\n    </>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Modal/ModalWithAvoidKeyboard.tsx",
    "content": "import React from 'react';\nimport { Modal, Button, Input, VStack, Text, FormControl } from 'native-base';\n\nexport function Example() {\n  const [modalVisible, setModalVisible] = React.useState(false);\n  return (\n    <>\n      <Modal\n        isOpen={modalVisible}\n        onClose={() => setModalVisible(false)}\n        avoidKeyboard\n        justifyContent=\"flex-end\"\n        bottom=\"4\"\n        size=\"lg\"\n      >\n        <Modal.Content>\n          <Modal.CloseButton />\n          <Modal.Header>Forgot Password?</Modal.Header>\n          <Modal.Body>\n            Enter email address and we'll send a link to reset your password.\n            <FormControl mt=\"3\">\n              <FormControl.Label>Email</FormControl.Label>\n              <Input />\n            </FormControl>\n          </Modal.Body>\n          <Modal.Footer>\n            <Button\n              flex=\"1\"\n              onPress={() => {\n                setModalVisible(false);\n              }}\n            >\n              Proceed\n            </Button>\n          </Modal.Footer>\n        </Modal.Content>\n      </Modal>\n      <VStack space={8} alignItems=\"center\">\n        <Button\n          w=\"104\"\n          onPress={() => {\n            setModalVisible(!modalVisible);\n          }}\n        >\n          Open Modal\n        </Button>\n        <Text textAlign=\"center\">\n          Open modal and focus on the input element to see the effect.\n        </Text>\n      </VStack>\n    </>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Modal/MultipleModal.tsx",
    "content": "import React from 'react';\nimport {\n  Button,\n  Modal,\n  VStack,\n  HStack,\n  Text,\n  Radio,\n  Center,\n} from 'native-base';\nimport { useState } from 'react';\n\nexport const Example = () => {\n  const [showModal, setShowModal] = useState(false);\n  const [showModal2, setShowModal2] = useState(false);\n  const [showModal3, setShowModal3] = useState(false);\n\n  return (\n    <Center>\n      <Button onPress={() => setShowModal(true)}>Button</Button>\n      <Modal isOpen={showModal} onClose={() => setShowModal(false)} size=\"lg\">\n        <Modal.Content maxWidth=\"350\">\n          <Modal.CloseButton />\n          <Modal.Header>Order</Modal.Header>\n          <Modal.Body>\n            <VStack space={3}>\n              <HStack alignItems=\"center\" justifyContent=\"space-between\">\n                <Text fontWeight=\"medium\">Sub Total</Text>\n                <Text color=\"blueGray.400\">$298.77</Text>\n              </HStack>\n              <HStack alignItems=\"center\" justifyContent=\"space-between\">\n                <Text fontWeight=\"medium\">Tax</Text>\n                <Text color=\"blueGray.400\">$38.84</Text>\n              </HStack>\n              <HStack alignItems=\"center\" justifyContent=\"space-between\">\n                <Text fontWeight=\"medium\">Total Amount</Text>\n                <Text color=\"green.500\">$337.61</Text>\n              </HStack>\n            </VStack>\n          </Modal.Body>\n          <Modal.Footer>\n            <Button\n              flex=\"1\"\n              onPress={() => {\n                setShowModal2(true);\n              }}\n            >\n              Continue\n            </Button>\n          </Modal.Footer>\n        </Modal.Content>\n      </Modal>\n\n      <Modal isOpen={showModal2} onClose={() => setShowModal2(false)} size=\"lg\">\n        <Modal.Content maxWidth=\"350\">\n          <Modal.CloseButton />\n          <Modal.Header>Select Address</Modal.Header>\n          <Modal.Body>\n            <Radio.Group defaultValue=\"address1\" name=\"address\" size=\"sm\">\n              <VStack space={3}>\n                <Radio\n                  alignItems=\"flex-start\"\n                  _text={{ mt: '-1', ml: '2', fontSize: 'sm' }}\n                  value=\"address1\"\n                >\n                  4140 Parker Rd. Allentown, New Mexico 31134\n                </Radio>\n                <Radio\n                  alignItems=\"flex-start\"\n                  _text={{ mt: '-1', ml: '2', fontSize: 'sm' }}\n                  value=\"address2\"\n                >\n                  6391 Elign St. Celina, Delaware 10299\n                </Radio>\n              </VStack>\n            </Radio.Group>\n          </Modal.Body>\n          <Modal.Footer>\n            <Button\n              flex=\"1\"\n              onPress={() => {\n                setShowModal3(true);\n              }}\n            >\n              Continue\n            </Button>\n          </Modal.Footer>\n        </Modal.Content>\n      </Modal>\n\n      <Modal isOpen={showModal3} size=\"lg\" onClose={() => setShowModal3(false)}>\n        <Modal.Content maxWidth=\"350\">\n          <Modal.CloseButton />\n          <Modal.Header>Payment Options</Modal.Header>\n          <Modal.Body>\n            <Radio.Group name=\"payment\" size=\"sm\">\n              <VStack space={3}>\n                <Radio\n                  alignItems=\"flex-start\"\n                  _text={{ mt: '-1', ml: '2', fontSize: 'sm' }}\n                  value=\"payment1\"\n                >\n                  Cash on delivery\n                </Radio>\n                <Radio\n                  alignItems=\"flex-start\"\n                  _text={{ mt: '-1', ml: '2', fontSize: 'sm' }}\n                  value=\"payment2\"\n                >\n                  Credit/ Debit/ ATM Card\n                </Radio>\n                <Radio\n                  alignItems=\"flex-start\"\n                  _text={{ mt: '-1', ml: '2', fontSize: 'sm' }}\n                  value=\"payment3\"\n                >\n                  UPI\n                </Radio>\n              </VStack>\n            </Radio.Group>\n          </Modal.Body>\n          <Modal.Footer>\n            <Button\n              flex=\"1\"\n              onPress={() => {\n                setShowModal(false);\n                setShowModal2(false);\n                setShowModal3(false);\n              }}\n            >\n              Checkout\n            </Button>\n          </Modal.Footer>\n        </Modal.Content>\n      </Modal>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Modal/Size.tsx",
    "content": "// @ts-nocheck\nimport React from 'react';\nimport { Modal, Button, ScrollView, Text, Center, VStack } from 'native-base';\n\nexport function Example() {\n  const [modalVisible, setModalVisible] = React.useState(false);\n  const [size, setSize] = React.useState('md');\n\n  const handleSizeClick = (newSize) => {\n    setSize(newSize);\n    setModalVisible(!modalVisible);\n  };\n  return (\n    <>\n      <Modal isOpen={modalVisible} onClose={setModalVisible} size={size}>\n        <Modal.Content maxH=\"212\">\n          <Modal.CloseButton />\n          <Modal.Header>Return Policy</Modal.Header>\n          <Modal.Body>\n            <ScrollView>\n              <Text>\n                Create a 'Return Request' under “My Orders” section of\n                App/Website. Follow the screens that come up after tapping on\n                the 'Return’ button. Please make a note of the Return ID that we\n                generate at the end of the process. Keep the item ready for pick\n                up or ship it to us basis on the return mode.\n              </Text>\n            </ScrollView>\n          </Modal.Body>\n          <Modal.Footer>\n            <Button.Group space={2}>\n              <Button\n                variant=\"ghost\"\n                colorScheme=\"blueGray\"\n                onPress={() => {\n                  setModalVisible(false);\n                }}\n              >\n                Cancel\n              </Button>\n              <Button\n                onPress={() => {\n                  setModalVisible(false);\n                }}\n              >\n                Save\n              </Button>\n            </Button.Group>\n          </Modal.Footer>\n        </Modal.Content>\n      </Modal>\n      <Center>\n        <VStack space={4}>\n          {['xs', 'sm', 'md', 'lg', 'xl', 'full'].map((size) => {\n            return (\n              <Button\n                onPress={() => handleSizeClick(size)}\n                key={size}\n              >{`Open ${size} Modal`}</Button>\n            );\n          })}\n        </VStack>\n      </Center>\n    </>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Modal/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from '../../Wrapper';\nimport { Example as Basic } from './Basic';\nimport { Example as ModalWithAvoidKeyboard } from './ModalWithAvoidKeyboard';\nimport { Example as ModalRefEg } from './ModalRefEg';\nimport { Example as MultipleModal } from './MultipleModal';\nimport { Example as Size } from './Size';\nimport { Example as ModalPlacement } from './ModalPlacement';\nimport { Example as CustomBackdrop } from './CustomBackdrop';\n\nstoriesOf('Modal', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />)\n  .add('Multiple modal', () => <MultipleModal />)\n  .add('Modal Ref Examples', () => <ModalRefEg />)\n  .add('Modal Placement', () => <ModalPlacement />)\n  .add('Modal with Keyboard Avoid view', () => <ModalWithAvoidKeyboard />)\n  .add('Modal Size Examples', () => <Size />)\n  .add('Modal Custom Backdrop', () => <CustomBackdrop />);\n"
  },
  {
    "path": "example/storybook/stories/components/composites/NumberInput/Combination.tsx",
    "content": "import React from 'react';\nimport {\n  Stack,\n  NumberInput,\n  NumberInputField,\n  NumberInputStepper,\n  NumberIncrementStepper,\n  NumberDecrementStepper,\n  Slider,\n} from 'native-base';\nexport const Example = () => {\n  const [value, setValue] = React.useState(20);\n  return (\n    <Stack w=\"90%\">\n      <NumberInput\n        value={`${value}`}\n        step={5}\n        onChange={(v: any) => setValue(v)}\n      >\n        <NumberInputField />\n        <NumberInputStepper>\n          <NumberIncrementStepper />\n          <NumberDecrementStepper />\n        </NumberInputStepper>\n      </NumberInput>\n\n      <Slider\n        my={10}\n        defaultValue={value}\n        colorScheme=\"cyan\"\n        onChange={(v) => {\n          setValue(Math.floor(v));\n        }}\n      >\n        <Slider.Track>\n          <Slider.FilledTrack />\n        </Slider.Track>\n        <Slider.Thumb />\n      </Slider>\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/NumberInput/DefaultValue.tsx",
    "content": "import React from 'react';\nimport {\n  Stack,\n  NumberInput,\n  NumberInputField,\n  NumberInputStepper,\n  NumberIncrementStepper,\n  NumberDecrementStepper,\n} from 'native-base';\nexport const Example = () => {\n  return (\n    <Stack w=\"90%\">\n      <NumberInput defaultValue=\"5\">\n        <NumberInputField />\n        <NumberInputStepper>\n          <NumberIncrementStepper />\n          <NumberDecrementStepper />\n        </NumberInputStepper>\n      </NumberInput>\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/NumberInput/FormControlled.tsx",
    "content": "import React from 'react';\nimport {\n  Stack,\n  FormControl,\n  NumberInput,\n  NumberInputField,\n  NumberInputStepper,\n  NumberIncrementStepper,\n  NumberDecrementStepper,\n} from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Stack w=\"90%\">\n      <FormControl isRequired isInvalid>\n        <FormControl.Label>How many components we have</FormControl.Label>\n        <NumberInput>\n          <NumberInputField />\n          <NumberInputStepper>\n            <NumberIncrementStepper />\n            <NumberDecrementStepper />\n          </NumberInputStepper>\n        </NumberInput>\n        <FormControl.HelperText>You can make a guess.</FormControl.HelperText>\n        <FormControl.ErrorMessage>\n          Don't worry, it's just an example.\n        </FormControl.ErrorMessage>\n      </FormControl>\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/NumberInput/MinMax.tsx",
    "content": "import React from 'react';\nimport {\n  Stack,\n  NumberInput,\n  NumberInputField,\n  NumberInputStepper,\n  NumberIncrementStepper,\n  NumberDecrementStepper,\n} from 'native-base';\nexport const Example = () => {\n  return (\n    <Stack w=\"90%\">\n      <NumberInput defaultValue=\"10\" min={5} max={20}>\n        <NumberInputField />\n        <NumberInputStepper>\n          <NumberIncrementStepper />\n          <NumberDecrementStepper />\n        </NumberInputStepper>\n      </NumberInput>\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/NumberInput/Playground.tsx",
    "content": "import React from 'react';\nimport {\n  Stack,\n  NumberInput,\n  NumberInputField,\n  NumberInputStepper,\n  NumberIncrementStepper,\n  NumberDecrementStepper,\n} from 'native-base';\nimport { boolean, number, text } from '@storybook/addon-knobs';\n\nexport const Example = () => {\n  return (\n    <Stack w=\"90%\">\n      <NumberInput\n        defaultValue={text('defaultValue', '20')}\n        min={number('min', 5)}\n        max={number('max', 40)}\n        step={number('step', 3)}\n        isDisabled={boolean('isDisabled', true)}\n        keepWithinRange={boolean('keepWithinRange', true)}\n      >\n        <NumberInputField />\n        <NumberInputStepper>\n          <NumberIncrementStepper />\n          <NumberDecrementStepper />\n        </NumberInputStepper>\n      </NumberInput>\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/NumberInput/Steps.tsx",
    "content": "import React from 'react';\nimport {\n  Stack,\n  NumberInput,\n  NumberInputField,\n  NumberInputStepper,\n  NumberIncrementStepper,\n  NumberDecrementStepper,\n} from 'native-base';\nexport const Example = () => {\n  return (\n    <Stack w=\"90%\">\n      <NumberInput defaultValue=\"10\" min={5} max={20} step={2}>\n        <NumberInputField />\n        <NumberInputStepper>\n          <NumberIncrementStepper />\n          <NumberDecrementStepper />\n        </NumberInputStepper>\n      </NumberInput>\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/NumberInput/Usage.tsx",
    "content": "import React from 'react';\nimport {\n  Stack,\n  NumberInput,\n  NumberInputField,\n  NumberInputStepper,\n  NumberIncrementStepper,\n  NumberDecrementStepper,\n} from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Stack w=\"90%\">\n      <NumberInput>\n        <NumberInputField />\n        <NumberInputStepper>\n          <NumberIncrementStepper />\n          <NumberDecrementStepper />\n        </NumberInputStepper>\n      </NumberInput>\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/NumberInput/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport Usage from './Usage';\nimport FormControlled from './FormControlled';\nimport Steps from './Steps';\nimport DefaultValue from './DefaultValue';\nimport Playground from './Playground';\n// import Combination from './Combination';\nimport MinMax from './MinMax';\n\nstoriesOf('NumberInput', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Playground', () => <Playground />)\n  .add('Usage', () => <Usage />)\n  .add('DefaultValue', () => <DefaultValue />)\n  .add('MinMax', () => <MinMax />)\n  .add('Steps', () => <Steps />)\n  .add('FormControlled', () => <FormControlled />);\n// .add('Combination', () => <Combination />);\n"
  },
  {
    "path": "example/storybook/stories/components/composites/PinInput/DefaultValue.tsx",
    "content": "import React from 'react';\nimport { PinInput, Stack } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Stack space={5}>\n      <PinInput defaultValue=\"123\">\n        <PinInput.Field />\n        <PinInput.Field />\n        <PinInput.Field />\n      </PinInput>\n      <PinInput defaultValue=\"45\">\n        <PinInput.Field />\n        <PinInput.Field />\n        <PinInput.Field />\n      </PinInput>\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/PinInput/FormControlled.tsx",
    "content": "import React from 'react';\nimport { PinInput, Center, FormControl } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Center>\n      <FormControl isRequired isInvalid>\n        <FormControl.Label>OTP</FormControl.Label>\n        <PinInput>\n          <PinInput.Field />\n          <PinInput.Field />\n          <PinInput.Field />\n          <PinInput.Field />\n        </PinInput>\n        <FormControl.HelperText>\n          An otp is send to number ending with +91-XXXXX-XX007.\n        </FormControl.HelperText>\n        <FormControl.ErrorMessage>Please Retry.</FormControl.ErrorMessage>\n      </FormControl>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/PinInput/ManageFocus.tsx",
    "content": "import React from 'react';\nimport { PinInput } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <PinInput manageFocus={false}>\n      <PinInput.Field />\n      <PinInput.Field />\n      <PinInput.Field />\n      <PinInput.Field />\n    </PinInput>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/PinInput/Placeholder.tsx",
    "content": "import React from 'react';\nimport { PinInput } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <PinInput placeholder=\"🥳\">\n      <PinInput.Field />\n      <PinInput.Field />\n      <PinInput.Field />\n    </PinInput>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/PinInput/Playground.tsx",
    "content": "import React from 'react';\nimport { PinInput } from 'native-base';\nimport { select, text } from '@storybook/addon-knobs';\n\nexport const Example = () => {\n  return (\n    <PinInput\n      placeholder={text('placeholder', '○')}\n      size={text('Size', 'sm')}\n      variant={select(\n        'variantType',\n        ['outline', 'underlined', 'rounded', 'filled', 'unstyled'],\n        'outline'\n      )}\n      defaultValue={text('defaultValue', '96')}\n    >\n      <PinInput.Field />\n      <PinInput.Field />\n      <PinInput.Field />\n    </PinInput>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/PinInput/Size.tsx",
    "content": "import React from 'react';\nimport { PinInput, Stack } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Stack space={5}>\n      <PinInput size=\"2xl\">\n        <PinInput.Field />\n        <PinInput.Field />\n        <PinInput.Field />\n      </PinInput>\n      <PinInput size=\"xl\">\n        <PinInput.Field />\n        <PinInput.Field />\n        <PinInput.Field />\n      </PinInput>\n      <PinInput size=\"lg\">\n        <PinInput.Field />\n        <PinInput.Field />\n        <PinInput.Field />\n      </PinInput>\n      <PinInput size=\"md\">\n        <PinInput.Field />\n        <PinInput.Field />\n        <PinInput.Field />\n      </PinInput>\n      <PinInput size=\"sm\">\n        <PinInput.Field />\n        <PinInput.Field />\n        <PinInput.Field />\n      </PinInput>\n      <PinInput size=\"xs\">\n        <PinInput.Field />\n        <PinInput.Field />\n        <PinInput.Field />\n      </PinInput>\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/PinInput/Usage.tsx",
    "content": "import React from 'react';\nimport { PinInput } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <PinInput>\n      <PinInput.Field />\n      <PinInput.Field />\n      <PinInput.Field />\n      <PinInput.Field />\n    </PinInput>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/PinInput/Variants.tsx",
    "content": "import React from 'react';\nimport { PinInput, Stack } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Stack space={5}>\n      <PinInput variant=\"outline\">\n        <PinInput.Field />\n        <PinInput.Field />\n        <PinInput.Field />\n      </PinInput>\n      <PinInput variant=\"underlined\">\n        <PinInput.Field />\n        <PinInput.Field />\n        <PinInput.Field />\n      </PinInput>\n      <PinInput variant=\"rounded\">\n        <PinInput.Field />\n        <PinInput.Field />\n        <PinInput.Field />\n      </PinInput>\n      <PinInput variant=\"filled\">\n        <PinInput.Field />\n        <PinInput.Field />\n        <PinInput.Field />\n      </PinInput>\n      <PinInput variant=\"unstyled\">\n        <PinInput.Field />\n        <PinInput.Field />\n        <PinInput.Field />\n      </PinInput>\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/PinInput/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport Usage from './Usage';\nimport ManageFocus from './ManageFocus';\nimport DefaultValue from './DefaultValue';\nimport Size from './Size';\nimport Playground from './Playground';\nimport Variants from './Variants';\nimport FormControlled from './FormControlled';\nimport Placeholder from './Placeholder';\n\nstoriesOf('PinInput', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Playground', () => <Playground />)\n  .add('Usage', () => <Usage />)\n  .add('Size', () => <Size />)\n  .add('DefaultValue', () => <DefaultValue />)\n  .add('Placeholder', () => <Placeholder />)\n  .add('ManageFocus', () => <ManageFocus />)\n  .add('Variants', () => <Variants />)\n  .add('FormControlled', () => <FormControlled />);\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Popover/Basic.tsx",
    "content": "import React from 'react';\nimport { Popover, Button, Box } from 'native-base';\n\nexport function Example() {\n  return (\n    <Box w=\"100%\" alignItems=\"center\">\n      <Popover\n        trigger={(triggerProps) => {\n          return (\n            <Button {...triggerProps} colorScheme=\"danger\">\n              Delete Customer\n            </Button>\n          );\n        }}\n      >\n        <Popover.Content accessibilityLabel=\"Delete Customerd\" w=\"56\">\n          <Popover.Arrow />\n          <Popover.CloseButton />\n          <Popover.Header>Delete Customer</Popover.Header>\n          <Popover.Body>\n            This will remove all data relating to Alex. This action cannot be\n            reversed. Deleted data can not be recovered.\n          </Popover.Body>\n          <Popover.Footer justifyContent=\"flex-end\">\n            <Button.Group space={2}>\n              <Button colorScheme=\"coolGray\" variant=\"ghost\">\n                Cancel\n              </Button>\n              <Button colorScheme=\"danger\">Delete</Button>\n            </Button.Group>\n          </Popover.Footer>\n        </Popover.Content>\n      </Popover>\n    </Box>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Popover/PopoverPositions.tsx",
    "content": "import React, { useState } from 'react';\nimport { Popover, Button, VStack, Select, CheckIcon, Box } from 'native-base';\n\nexport function Example() {\n  const [position, setPosition] = useState('auto');\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <Box w=\"100%\" alignItems=\"center\">\n      <VStack space={6} alignSelf=\"flex-start\" w=\"100%\">\n        <Popover\n          // @ts-ignore\n          placement={position === 'auto' ? undefined : position}\n          trigger={(triggerProps) => {\n            return (\n              <Button\n                colorScheme=\"danger\"\n                alignSelf=\"center\"\n                {...triggerProps}\n                onPress={() => setIsOpen(true)}\n              >\n                Delete Customer\n              </Button>\n            );\n          }}\n          isOpen={isOpen}\n          onClose={() => setIsOpen(!isOpen)}\n        >\n          <Popover.Content w=\"56\">\n            <Popover.Arrow />\n            <Popover.CloseButton onPress={() => setIsOpen(false)} />\n            <Popover.Header>Delete Customer</Popover.Header>\n            <Popover.Body>\n              This will remove all data relating to Alex. This action cannot be\n              reversed. Deleted data can not be recovered.\n            </Popover.Body>\n            <Popover.Footer justifyContent=\"flex-end\">\n              <Button.Group space={2}>\n                <Button\n                  colorScheme=\"coolGray\"\n                  variant=\"ghost\"\n                  onPress={() => setIsOpen(false)}\n                >\n                  Cancel\n                </Button>\n                <Button colorScheme=\"danger\" onPress={() => setIsOpen(false)}>\n                  Delete\n                </Button>\n              </Button.Group>\n            </Popover.Footer>\n          </Popover.Content>\n        </Popover>\n\n        <Select\n          selectedValue={position}\n          mx={{ base: 0, md: 'auto' }}\n          accessibilityLabel=\"Select a position for Popover\"\n          onValueChange={(nextValue) => setPosition(nextValue)}\n          _selectedItem={{\n            bg: 'cyan.600',\n            endIcon: <CheckIcon size={4} />,\n          }}\n        >\n          <Select.Item label=\"auto\" value=\"auto\" />\n          <Select.Item label=\"Top Left\" value=\"top left\" />\n          <Select.Item label=\"Top\" value=\"top\" />\n          <Select.Item label=\"Top Right\" value=\"top right\" />\n          <Select.Item label=\"Right Top\" value=\"right top\" />\n          <Select.Item label=\"Right\" value=\"right\" />\n          <Select.Item label=\"Right Bottom\" value=\"right bottom\" />\n          <Select.Item label=\"Bottom Left\" value=\"bottom left\" />\n          <Select.Item label=\"Bottom\" value=\"bottom\" />\n          <Select.Item label=\"Bottom Right\" value=\"bottom right\" />\n          <Select.Item label=\"Left Top\" value=\"left top\" />\n          <Select.Item label=\"Left\" value=\"left\" />\n          <Select.Item label=\"Left Bottom\" value=\"left bottom\" />\n        </Select>\n      </VStack>\n    </Box>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Popover/RefEg.tsx",
    "content": "import React from 'react';\nimport { Popover, Button, Input, FormControl, Box } from 'native-base';\n\nexport function Example() {\n  const initialFocusRef = React.useRef(null);\n  return (\n    <Box w=\"100%\" alignItems=\"center\">\n      <Popover\n        initialFocusRef={initialFocusRef}\n        trigger={(triggerProps) => {\n          return <Button {...triggerProps}>Edit Info</Button>;\n        }}\n      >\n        <Popover.Content width=\"56\">\n          <Popover.Arrow />\n          <Popover.CloseButton />\n          {/* @ts-ignore */}\n          <Popover.Header>Personal Details</Popover.Header>\n          <Popover.Body>\n            <FormControl>\n              <FormControl.Label\n                _text={{\n                  fontSize: 'xs',\n                  fontWeight: 'medium',\n                }}\n              >\n                First Name\n              </FormControl.Label>\n              <Input rounded=\"sm\" fontSize=\"xs\" ref={initialFocusRef} />\n            </FormControl>\n            <FormControl mt=\"3\">\n              <FormControl.Label\n                _text={{\n                  fontSize: 'xs',\n                  fontWeight: 'medium',\n                }}\n              >\n                Last Name\n              </FormControl.Label>\n              <Input rounded=\"sm\" fontSize=\"xs\" />\n            </FormControl>\n          </Popover.Body>\n          <Popover.Footer>\n            <Button.Group>\n              <Button colorScheme=\"coolGray\" variant=\"ghost\">\n                Cancel\n              </Button>\n              <Button>Save</Button>\n            </Button.Group>\n          </Popover.Footer>\n        </Popover.Content>\n      </Popover>\n    </Box>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Popover/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport { Example as Basic } from './Basic';\nimport { Example as RefEg } from './RefEg';\nimport { Example as PopoverPositions } from './PopoverPositions';\n\nstoriesOf('Popover', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Popover positions', () => <PopoverPositions />)\n  .add('Basic', () => <Basic />)\n  .add('Focus on Open', () => <RefEg />);\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Progress/Basic.tsx",
    "content": "import React from 'react';\nimport { Box, Progress, Center } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Center w=\"100%\">\n      <Box w=\"90%\" maxW=\"400\">\n        <Progress value={45} mx=\"4\" />\n      </Box>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Progress/ColorScheme.tsx",
    "content": "import React from 'react';\nimport { Box, Progress, VStack, Center } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Center w=\"100%\">\n      <Box w=\"90%\" maxW=\"400\">\n        <VStack space=\"md\">\n          <VStack mx=\"4\" space=\"md\">\n            <Progress colorScheme=\"primary\" value={35} />\n            <Progress colorScheme=\"secondary\" value={45} />\n            <Progress colorScheme=\"emerald\" value={55} />\n            <Progress colorScheme=\"warning\" value={65} />\n            <Progress colorScheme=\"light\" value={75} />\n          </VStack>\n        </VStack>\n      </Box>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Progress/Composition.tsx",
    "content": "import React from 'react';\nimport { Box, Progress, Center, Heading, Text, Flex } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Box w=\"90%\">\n      <Center mb=\"10\">\n        <Heading size=\"md\">Progress Composition</Heading>\n      </Center>\n      <Progress size=\"xl\" mb=\"4\" value={45}>\n        <Text color=\"white\" bold>\n          45%\n        </Text>\n      </Progress>\n      <Flex direction=\"row\">\n        <Progress size=\"xl\" flex=\"1\" mb=\"4\" value={75} />\n        <Text bold ml=\"2\">\n          75%\n        </Text>\n      </Flex>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Progress/CustomBgColor.tsx",
    "content": "import React from 'react';\nimport { Box, Progress, Center } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Center w=\"100%\">\n      <Box w=\"90%\" maxW=\"400\">\n        <Progress\n          bg=\"coolGray.100\"\n          _filledTrack={{\n            bg: 'lime.500',\n          }}\n          value={75}\n          mx=\"4\"\n        />\n      </Box>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Progress/Flat.tsx",
    "content": "import React from 'react';\nimport { Box, Progress, Center } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Center w=\"100%\">\n      <Box w=\"90%\" maxW=\"400\">\n        <Progress rounded=\"0\" value={65} mx=\"4\" />\n      </Box>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Progress/Sizes.tsx",
    "content": "import React from 'react';\nimport { Box, Progress, VStack, Center } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Center w=\"100%\">\n      <Box w=\"90%\" maxW=\"400\">\n        <VStack space=\"md\">\n          <VStack mx=\"4\" space=\"md\">\n            <Progress size=\"xs\" mb={4} value={25} />\n            <Progress size=\"sm\" mb={4} value={35} />\n            <Progress size=\"md\" mb={4} value={45} />\n            <Progress size=\"lg\" mb={4} value={55} />\n            <Progress size=\"xl\" mb={4} value={65} />\n            <Progress size=\"2xl\" mb={4} value={75} />\n          </VStack>\n        </VStack>\n      </Box>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Progress/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport { Example as Composition } from './Composition';\nimport { Example as Basic } from './Basic';\nimport { Example as Flat } from './Flat';\nimport { Example as Size } from './Sizes';\nimport { Example as CustomBgColor } from './CustomBgColor';\nimport { Example as ColorScheme } from './ColorScheme';\n\nstoriesOf('Progress', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Default Progress Bar', () => <Basic />)\n  .add('ColorSchemes', () => <ColorScheme />)\n  .add('Flat', () => <Flat />)\n  .add('Sizes', () => <Size />)\n  .add('CustomBgColor', () => <CustomBgColor />)\n  .add('Composition', () => <Composition />);\n"
  },
  {
    "path": "example/storybook/stories/components/composites/SimpleGrid/MinWidthColumns.tsx",
    "content": "import { SimpleGrid, Box } from 'native-base';\nimport React from 'react';\n\nconst items = 12;\nconst data = Array(items).fill(0);\n\nexport default function MinChildWidthSimpleGrid() {\n  return (\n    <SimpleGrid minChildWidth={60} space={4}>\n      {data.map((_item, index) => {\n        return <Box key={index} bg=\"primary.400\" height={60} width={60} />;\n      })}\n    </SimpleGrid>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/SimpleGrid/NumberOfColumns.tsx",
    "content": "import { SimpleGrid, Center } from 'native-base';\nimport React from 'react';\n\nconst items = 12;\nconst data = Array(items).fill(0);\n\nexport default function NumberOfColumnsSimpleGrid() {\n  return (\n    <SimpleGrid columns={3} space={4}>\n      {data.map((_item, index) => {\n        return (\n          <Center\n            key={index}\n            bg=\"primary.200\"\n            height={100}\n            width={100}\n            children={`${index}`}\n          />\n        );\n      })}\n    </SimpleGrid>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/SimpleGrid/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport NumberOfColumnsSimpleGrid from './NumberOfColumns';\nimport MinChildWidthSimpleGrid from './MinWidthColumns';\n\nstoriesOf('SimpleGrid', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Using columns', () => <NumberOfColumnsSimpleGrid />)\n  .add('Using minChildWidth', () => <MinChildWidthSimpleGrid />);\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Skeleton/Basic.tsx",
    "content": "import React from 'react';\nimport { Skeleton, VStack, Center } from 'native-base';\nexport const Example = () => {\n  return (\n    <Center w=\"100%\">\n      <VStack\n        w=\"90%\"\n        maxW=\"400\"\n        borderWidth=\"1\"\n        space={8}\n        overflow=\"hidden\"\n        rounded=\"md\"\n        _dark={{ borderColor: 'coolGray.500' }}\n        _light={{ borderColor: 'coolGray.200' }}\n      >\n        <Skeleton h=\"40\" />\n        <Skeleton.Text px=\"4\" />\n        <Skeleton px=\"4\" my=\"4\" rounded=\"md\" startColor=\"primary.100\" />\n      </VStack>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Skeleton/Color.tsx",
    "content": "import React from 'react';\nimport { Skeleton, VStack, HStack, Center } from 'native-base';\nexport const Example = () => {\n  return (\n    <Center w=\"100%\">\n      <HStack\n        w=\"90%\"\n        maxW=\"400\"\n        borderWidth=\"1\"\n        space={8}\n        rounded=\"md\"\n        _dark={{ borderColor: 'coolGray.500' }}\n        _light={{ borderColor: 'coolGray.200' }}\n        p=\"4\"\n      >\n        <Skeleton flex=\"1\" h=\"150\" rounded=\"md\" startColor=\"coolGray.100\" />\n        <VStack flex=\"3\" space=\"4\">\n          <Skeleton startColor=\"amber.300\" />\n          <Skeleton.Text />\n          <HStack space=\"2\" alignItems=\"center\">\n            <Skeleton size=\"5\" rounded=\"full\" />\n            <Skeleton h=\"3\" flex=\"2\" rounded=\"full\" />\n            <Skeleton h=\"3\" flex=\"1\" rounded=\"full\" startColor=\"indigo.300\" />\n          </HStack>\n        </VStack>\n      </HStack>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Skeleton/Composition.tsx",
    "content": "import React from 'react';\nimport { Skeleton, VStack, HStack, Center } from 'native-base';\nexport const Example = () => {\n  return (\n    <Center w=\"100%\">\n      <VStack\n        w=\"90%\"\n        maxW=\"400\"\n        borderWidth=\"1\"\n        space={6}\n        rounded=\"md\"\n        alignItems=\"center\"\n        _dark={{ borderColor: 'coolGray.500' }}\n        _light={{ borderColor: 'coolGray.200' }}\n      >\n        <Skeleton h=\"40\" />\n        <Skeleton\n          borderWidth={1}\n          borderColor=\"coolGray.200\"\n          endColor=\"warmGray.50\"\n          size=\"20\"\n          rounded=\"full\"\n          mt=\"-70\"\n        />\n        <HStack space=\"2\">\n          <Skeleton size=\"5\" rounded=\"full\" />\n          <Skeleton size=\"5\" rounded=\"full\" />\n          <Skeleton size=\"5\" rounded=\"full\" />\n          <Skeleton size=\"5\" rounded=\"full\" />\n          <Skeleton size=\"5\" rounded=\"full\" />\n        </HStack>\n        <Skeleton.Text lines={3} alignItems=\"center\" px=\"12\" />\n        <Skeleton mb=\"3\" w=\"40\" rounded=\"20\" />\n      </VStack>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Skeleton/FadeDuration.tsx",
    "content": "import React from 'react';\nimport { Skeleton, Stack } from 'native-base';\nexport const Example = () => {\n  return (\n    <Stack w=\"50%\">\n      <Skeleton\n        startColor=\"pink.600\"\n        fadeDuration={0.9}\n        h={20}\n        speed={10}\n        endColor=\"green.500\"\n      ></Skeleton>\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Skeleton/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport { Example as Basic } from './Basic';\nimport { Example as Color } from './Color';\nimport { Example as Composition } from './Composition';\nimport { Example as IsLoaded } from './isLoaded';\nimport { Example as FadeDuration } from './FadeDuration';\n\nstoriesOf('Skeleton', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />)\n  .add('Color', () => <Color />)\n  .add('Composition', () => <Composition />)\n  .add('FadeDuration', () => <FadeDuration />)\n  .add('isLoaded', () => <IsLoaded />);\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Skeleton/isLoaded.tsx",
    "content": "import React, { useState } from 'react';\nimport {\n  Skeleton,\n  Text,\n  Button,\n  Box,\n  Image,\n  VStack,\n  Center,\n} from 'native-base';\nexport const Example = () => {\n  const [isLoaded, setIsLoaded] = useState(false);\n  const [text, setText] = useState('');\n  setTimeout(() => {\n    setIsLoaded(true);\n    setText(\n      'Lose yourself in the greens of nature, the ones that make you strong. Come visit us at the Greenway Park, and we will be happy to show you around.'\n    );\n  }, 5000);\n\n  return (\n    <Center w=\"100%\">\n      <Box w=\"90%\" maxWidth=\"400\">\n        <VStack\n          maxWidth=\"400\"\n          borderWidth=\"1\"\n          space={8}\n          overflow=\"hidden\"\n          rounded=\"md\"\n          _dark={{ borderColor: 'coolGray.500' }}\n          _light={{ borderColor: 'coolGray.200' }}\n        >\n          <Skeleton h=\"40\" isLoaded={isLoaded}>\n            <Image\n              h=\"40\"\n              source={{\n                uri:\n                  'https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80',\n              }}\n            />\n          </Skeleton>\n          <Skeleton.Text lines={4} px=\"4\" isLoaded={isLoaded}>\n            <Text px=\"4\" fontSize={'md'} lineHeight={'20px'}>\n              {text}\n            </Text>\n          </Skeleton.Text>\n          <Skeleton\n            px=\"4\"\n            mb=\"4\"\n            rounded=\"md\"\n            startColor=\"primary.100\"\n            isLoaded={isLoaded}\n          >\n            <Button m=\"4\">Explore</Button>\n          </Skeleton>\n        </VStack>\n      </Box>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Stat/Example.tsx",
    "content": "import React from 'react';\nimport { Stat, Heading, Box } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Box>\n      <Heading>Basic Stat Usage</Heading>\n      <Stat mt={6}>\n        <Stat.Label>Amount</Stat.Label>\n        <Stat.Number>£126.00</Stat.Number>\n        <Stat.HelpText>Feb 12 - Feb 28</Stat.HelpText>\n      </Stat>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Stat/Indicator.tsx",
    "content": "import React from 'react';\nimport { Stat, Heading, Box } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Box>\n      <Heading>Stat with Indicator</Heading>\n      <Stat.Group mt={6}>\n        <Stat>\n          <Stat.Label>Sent</Stat.Label>\n          <Stat.Number>$3600</Stat.Number>\n          <Stat.HelpText>\n            <Stat.Arrow type=\"increase\" />\n            56.67%\n          </Stat.HelpText>\n        </Stat>\n        <Stat>\n          <Stat.Label>Received</Stat.Label>\n          <Stat.Number>$454</Stat.Number>\n          <Stat.HelpText>\n            <Stat.Arrow type=\"decrease\" />\n            99.56%\n          </Stat.HelpText>\n        </Stat>\n      </Stat.Group>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Stat/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport Example from './Example';\nimport Indicator from './Indicator';\n\nstoriesOf('Stat', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Default Stat', () => <Example />)\n  .add('Stat with Indicator', () => <Indicator />);\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Tabs/Colors.tsx",
    "content": "import React from 'react';\nimport { VStack, Tabs } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <VStack width=\"100%\" p={3} space={7}>\n      <Tabs colorScheme=\"primary\">\n        <Tabs.Bar>\n          <Tabs.Tab>One</Tabs.Tab>\n          <Tabs.Tab>Two</Tabs.Tab>\n          <Tabs.Tab>Three</Tabs.Tab>\n        </Tabs.Bar>\n        <Tabs.Views>\n          <Tabs.View>One</Tabs.View>\n          <Tabs.View>Two</Tabs.View>\n          <Tabs.View>Three</Tabs.View>\n        </Tabs.Views>\n      </Tabs>\n      <Tabs colorScheme=\"secondary\">\n        <Tabs.Bar>\n          <Tabs.Tab>One</Tabs.Tab>\n          <Tabs.Tab>Two</Tabs.Tab>\n          <Tabs.Tab>Three</Tabs.Tab>\n        </Tabs.Bar>\n        <Tabs.Views>\n          <Tabs.View>One</Tabs.View>\n          <Tabs.View>Two</Tabs.View>\n          <Tabs.View>Three</Tabs.View>\n        </Tabs.Views>\n      </Tabs>\n      <Tabs colorScheme=\"emerald\">\n        <Tabs.Bar>\n          <Tabs.Tab>One</Tabs.Tab>\n          <Tabs.Tab>Two</Tabs.Tab>\n          <Tabs.Tab>Three</Tabs.Tab>\n        </Tabs.Bar>\n        <Tabs.Views>\n          <Tabs.View>One</Tabs.View>\n          <Tabs.View>Two</Tabs.View>\n          <Tabs.View>Three</Tabs.View>\n        </Tabs.Views>\n      </Tabs>\n      <Tabs colorScheme=\"orange\">\n        <Tabs.Bar>\n          <Tabs.Tab>One</Tabs.Tab>\n          <Tabs.Tab>Two</Tabs.Tab>\n          <Tabs.Tab>Three</Tabs.Tab>\n        </Tabs.Bar>\n        <Tabs.Views>\n          <Tabs.View>One</Tabs.View>\n          <Tabs.View>Two</Tabs.View>\n          <Tabs.View>Three</Tabs.View>\n        </Tabs.Views>\n      </Tabs>\n      <Tabs colorScheme=\"info\">\n        <Tabs.Bar>\n          <Tabs.Tab>One</Tabs.Tab>\n          <Tabs.Tab>Two</Tabs.Tab>\n          <Tabs.Tab>Three</Tabs.Tab>\n        </Tabs.Bar>\n        <Tabs.Views>\n          <Tabs.View>One</Tabs.View>\n          <Tabs.View>Two</Tabs.View>\n          <Tabs.View>Three</Tabs.View>\n        </Tabs.Views>\n      </Tabs>\n    </VStack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Tabs/Composition.tsx",
    "content": "import React from 'react';\nimport { Box, Tabs, Text } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Box width=\"100%\" p={3}>\n      <Tabs>\n        <Tabs.Bar>\n          <Tabs.Tab>One</Tabs.Tab>\n          <Tabs.Tab>Two</Tabs.Tab>\n          <Tabs.Tab>Three</Tabs.Tab>\n        </Tabs.Bar>\n        <Tabs.Views>\n          <Tabs.View>One</Tabs.View>\n          <Tabs.View>Two</Tabs.View>\n          <Tabs.View>Three</Tabs.View>\n        </Tabs.Views>\n      </Tabs>\n      <Text>To show how tabs behaves around other components.</Text>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Tabs/Controlled.tsx",
    "content": "import React from 'react';\nimport { Tabs, Text } from 'native-base';\n\nexport const Example = () => {\n  const [index, setIndex] = React.useState(0);\n\n  return (\n    <Tabs index={index} onChange={setIndex}>\n      <Tabs.Bar>\n        <Tabs.Tab>One</Tabs.Tab>\n        <Tabs.Tab accessibilityLabel=\"two\">\n          <Text color=\"red.500\">Two</Text>\n        </Tabs.Tab>\n        <Tabs.Tab accessibilityLabel=\"three\">Three</Tabs.Tab>\n      </Tabs.Bar>\n      <Tabs.Views>\n        <Tabs.View>One</Tabs.View>\n        <Tabs.View>Two</Tabs.View>\n        <Tabs.View>Three</Tabs.View>\n      </Tabs.Views>\n    </Tabs>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Tabs/FittedTab.tsx",
    "content": "import React from 'react';\nimport { Tabs, Box } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Box w=\"90%\">\n      <Tabs isFitted>\n        <Tabs.Bar>\n          <Tabs.Tab>One</Tabs.Tab>\n          <Tabs.Tab>Two</Tabs.Tab>\n          <Tabs.Tab>Three</Tabs.Tab>\n          <Tabs.Tab>Four</Tabs.Tab>\n        </Tabs.Bar>\n      </Tabs>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Tabs/IconTabs.tsx",
    "content": "import React from 'react';\nimport { Box, Tabs } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Box width=\"100%\" p={3}>\n      <Tabs>\n        <Tabs.Bar>\n          <Tabs.Tab>\n            <Tabs.Icon />\n            Home\n          </Tabs.Tab>\n          <Tabs.Tab>\n            <Tabs.Icon name=\"book\" />\n            Bookmarks\n          </Tabs.Tab>\n          <Tabs.Tab>\n            <Tabs.Icon name=\"camera\" />\n            Camera\n          </Tabs.Tab>\n        </Tabs.Bar>\n        <Tabs.Views>\n          <Tabs.View>Home</Tabs.View>\n          <Tabs.View>Bookmarks</Tabs.View>\n          <Tabs.View>Camera</Tabs.View>\n        </Tabs.Views>\n      </Tabs>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Tabs/Size.tsx",
    "content": "import React from 'react';\nimport { VStack, Tabs } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <VStack width=\"100%\" p={3} space={7}>\n      {/* Small Tabs */}\n      <Tabs size=\"sm\">\n        <Tabs.Bar>\n          <Tabs.Tab>One</Tabs.Tab>\n          <Tabs.Tab>Two</Tabs.Tab>\n          <Tabs.Tab>Three</Tabs.Tab>\n        </Tabs.Bar>\n        <Tabs.Views>\n          <Tabs.View>One</Tabs.View>\n          <Tabs.View>Two</Tabs.View>\n          <Tabs.View>Three</Tabs.View>\n        </Tabs.Views>\n      </Tabs>\n      {/* Medium Tabs (default) */}\n      <Tabs size=\"md\">\n        <Tabs.Bar>\n          <Tabs.Tab>One</Tabs.Tab>\n          <Tabs.Tab>Two</Tabs.Tab>\n          <Tabs.Tab>Three</Tabs.Tab>\n        </Tabs.Bar>\n        <Tabs.Views>\n          <Tabs.View>One</Tabs.View>\n          <Tabs.View>Two</Tabs.View>\n          <Tabs.View>Three</Tabs.View>\n        </Tabs.Views>\n      </Tabs>\n      {/* Large Tabs (default) */}\n      <Tabs size=\"lg\">\n        <Tabs.Bar>\n          <Tabs.Tab>One</Tabs.Tab>\n          <Tabs.Tab>Two</Tabs.Tab>\n          <Tabs.Tab>Three</Tabs.Tab>\n        </Tabs.Bar>\n        <Tabs.Views>\n          <Tabs.View>One</Tabs.View>\n          <Tabs.View>Two</Tabs.View>\n          <Tabs.View>Three</Tabs.View>\n        </Tabs.Views>\n      </Tabs>\n    </VStack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Tabs/TabAlignment.tsx",
    "content": "import React from 'react';\nimport { VStack, Tabs } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <VStack width=\"100%\" p={3} space={7}>\n      <Tabs align=\"start\">\n        <Tabs.Bar>\n          <Tabs.Tab>One</Tabs.Tab>\n          <Tabs.Tab>Two</Tabs.Tab>\n          <Tabs.Tab>Three</Tabs.Tab>\n        </Tabs.Bar>\n        <Tabs.Views>\n          <Tabs.View>One</Tabs.View>\n          <Tabs.View>Two</Tabs.View>\n          <Tabs.View>Three</Tabs.View>\n        </Tabs.Views>\n      </Tabs>\n      <Tabs align=\"center\">\n        <Tabs.Bar>\n          <Tabs.Tab>One</Tabs.Tab>\n          <Tabs.Tab>Two</Tabs.Tab>\n          <Tabs.Tab>Three</Tabs.Tab>\n        </Tabs.Bar>\n        <Tabs.Views>\n          <Tabs.View>One</Tabs.View>\n          <Tabs.View>Two</Tabs.View>\n          <Tabs.View>Three</Tabs.View>\n        </Tabs.Views>\n      </Tabs>\n      <Tabs align=\"end\">\n        <Tabs.Bar>\n          <Tabs.Tab>One</Tabs.Tab>\n          <Tabs.Tab>Two</Tabs.Tab>\n          <Tabs.Tab>Three</Tabs.Tab>\n        </Tabs.Bar>\n        <Tabs.Views>\n          <Tabs.View>One</Tabs.View>\n          <Tabs.View>Two</Tabs.View>\n          <Tabs.View>Three</Tabs.View>\n        </Tabs.Views>\n      </Tabs>\n    </VStack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Tabs/TabBarOnly.tsx",
    "content": "import React from 'react';\nimport { Tabs } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Tabs>\n      <Tabs.Bar>\n        <Tabs.Tab>One</Tabs.Tab>\n        <Tabs.Tab>Two</Tabs.Tab>\n        <Tabs.Tab>Three</Tabs.Tab>\n        {/* <Tabs.Tab>Four</Tabs.Tab> */}\n      </Tabs.Bar>\n    </Tabs>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Tabs/Usage.tsx",
    "content": "import React from 'react';\nimport { Tabs } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Tabs>\n      <Tabs.Bar>\n        <Tabs.Tab>TAB ONE</Tabs.Tab>\n        <Tabs.Tab>TAB TWO</Tabs.Tab>\n      </Tabs.Bar>\n      <Tabs.Views>\n        <Tabs.View>One</Tabs.View>\n        <Tabs.View>Two</Tabs.View>\n      </Tabs.Views>\n    </Tabs>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Tabs/Variants.tsx",
    "content": "import React from 'react';\nimport { VStack, Tabs } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <VStack width=\"100%\" p={3} space={7}>\n      <Tabs variant=\"outline\">\n        <Tabs.Bar>\n          <Tabs.Tab>One</Tabs.Tab>\n          <Tabs.Tab>Two</Tabs.Tab>\n          <Tabs.Tab>Three</Tabs.Tab>\n        </Tabs.Bar>\n        <Tabs.Views>\n          <Tabs.View>One</Tabs.View>\n          <Tabs.View>Two</Tabs.View>\n          <Tabs.View>Three</Tabs.View>\n        </Tabs.Views>\n      </Tabs>\n      <Tabs variant=\"filled\">\n        <Tabs.Bar>\n          <Tabs.Tab>One</Tabs.Tab>\n          <Tabs.Tab>Two</Tabs.Tab>\n          <Tabs.Tab>Three</Tabs.Tab>\n        </Tabs.Bar>\n        <Tabs.Views>\n          <Tabs.View>One</Tabs.View>\n          <Tabs.View>Two</Tabs.View>\n          <Tabs.View>Three</Tabs.View>\n        </Tabs.Views>\n      </Tabs>\n      <Tabs variant=\"filled-outline\">\n        <Tabs.Bar>\n          <Tabs.Tab>One</Tabs.Tab>\n          <Tabs.Tab>Two</Tabs.Tab>\n          <Tabs.Tab>Three</Tabs.Tab>\n        </Tabs.Bar>\n        <Tabs.Views>\n          <Tabs.View>One</Tabs.View>\n          <Tabs.View>Two</Tabs.View>\n          <Tabs.View>Three</Tabs.View>\n        </Tabs.Views>\n      </Tabs>\n    </VStack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Tabs/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from '../../Wrapper';\nimport { Example as Usage } from './Usage';\nimport { Example as Controlled } from './Controlled';\nimport { Example as TabBarOnly } from './TabBarOnly';\nimport { Example as FittedTab } from './FittedTab';\nimport { Example as TabAlignment } from './TabAlignment';\nimport { Example as IconTabs } from './IconTabs';\nimport { Example as Size } from './Size';\nimport { Example as Colors } from './Colors';\nimport { Example as Composition } from './Composition';\nimport { Example as Variants } from './Variants';\n\nstoriesOf('Tabs', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Usage />)\n  .add('Colors', () => <Colors />)\n  .add('Size', () => <Size />)\n  .add('Variants', () => <Variants />)\n  .add('IconTabs', () => <IconTabs />)\n  .add('Tab Alignment', () => <TabAlignment />)\n  .add('Fitted Tab', () => <FittedTab />)\n  .add('Controlled', () => <Controlled />)\n  .add('TabBarOnly', () => <TabBarOnly />)\n  .add('Composition', () => <Composition />);\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Tag/Basic.tsx",
    "content": "import React from 'react';\nimport { Tag } from 'native-base';\n\nexport const Example = () => {\n  return <Tag>NativeBase</Tag>;\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Tag/Custom.tsx",
    "content": "import React from 'react';\nimport { Tag, Avatar } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Tag colorScheme=\"emerald\" size=\"sm\" rounded={'full'}>\n      <Avatar\n        mr={2}\n        source={{\n          uri: 'https://alpha.nativebase.io/img/nativebase-new-icon.png',\n        }}\n        width={6}\n        height={6}\n      />\n      Nativebase\n    </Tag>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Tag/Size.tsx",
    "content": "import React from 'react';\nimport { Tag, HStack } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <HStack space={4} alignItems=\"flex-start\">\n      {['sm', 'md', 'lg'].map((size) => (\n        <Tag size={size} key={size} variant=\"solid\" _text={{ color: 'white' }}>\n          NativeBase\n        </Tag>\n      ))}\n    </HStack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Tag/Variants.tsx",
    "content": "import React from 'react';\nimport { Tag, HStack } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <HStack space={4} alignItems=\"flex-start\">\n      {['solid', 'subtle', 'outline'].map((variant: any) => (\n        <Tag key={variant} variant={variant}>\n          NativeBase\n        </Tag>\n      ))}\n    </HStack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Tag/WithIcon.tsx",
    "content": "import React from 'react';\nimport { Tag, Icon } from 'native-base';\nimport { MaterialIcons } from '@expo/vector-icons';\n\nexport const Example = () => {\n  return (\n    <Tag variant=\"solid\" rounded={100} _text={{ color: 'white' }}>\n      <Icon as={MaterialIcons} name=\"menu\" color=\"white\" mr={1} size=\"sm\" />\n      Menu\n    </Tag>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Tag/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport Basic from './Basic';\nimport Size from './Size';\nimport Variants from './Variants';\nimport WithIcon from './WithIcon';\nimport Custom from './Custom';\n\nstoriesOf('Tag', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />)\n  .add('Variants', () => <Variants />)\n  .add('Sizes', () => <Size />)\n  .add('WithIcon', () => <WithIcon />)\n  .add('Custom Tag', () => <Custom />);\n"
  },
  {
    "path": "example/storybook/stories/components/composites/TextField/Basic.tsx",
    "content": "import React from 'react';\nimport { TextField } from 'native-base';\n\nexport const Example = () => {\n  return <TextField w=\"90%\" placeholder=\"Default TextField\" />;\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/TextField/Invalid.tsx",
    "content": "import React from 'react';\nimport { Stack, TextField, Button } from 'native-base';\n\nexport const Example = () => {\n  const [isInvalid, setIsInvalid] = React.useState(false);\n  return (\n    <Stack space={4} w=\"90%\">\n      <TextField\n        isInvalid={isInvalid}\n        placeholder=\"Default TextField\"\n        helperText=\"Sample helper text\"\n        errorMessage=\"Sample error message\"\n      />\n      <Button onPress={() => setIsInvalid(!isInvalid)}>\n        Toggle Invalid State\n      </Button>\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/TextField/Select.tsx",
    "content": "import React from 'react';\nimport { TextField, Select } from 'native-base';\n\nexport const Example = () => {\n  let [language, setLanguage] = React.useState<string>('');\n  return (\n    <TextField\n      component=\"select\"\n      variant=\"filled\"\n      selectedValue={language}\n      w=\"90%\"\n      accessibilityLabel=\"Select your favorite programming language\"\n      placeholder=\"Select your favorite programming language\"\n      onValueChange={(itemValue: string) => setLanguage(itemValue)}\n      helperText=\"Sample helper text\"\n      errorMessage=\"Sample error message\"\n    >\n      <Select.Item label=\"JavaScript\" value=\"js\" />\n      <Select.Item label=\"TypeScript\" value=\"ts\" />\n      <Select.Item label=\"C\" value=\"c\" />\n      <Select.Item label=\"Python\" value=\"py\" />\n      <Select.Item label=\"Java\" value=\"java\" />\n    </TextField>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/TextField/Textarea.tsx",
    "content": "import React from 'react';\nimport { Stack, TextField, Button } from 'native-base';\n\nexport const Example = () => {\n  const [isInvalid, setIsInvalid] = React.useState(false);\n  return (\n    <Stack space={4} w=\"90%\">\n      <TextField\n        component=\"textarea\"\n        isInvalid={isInvalid}\n        placeholder=\"Default TextField\"\n        helperText=\"Sample helper text\"\n        errorMessage=\"Sample error message\"\n      />\n      <Button onPress={() => setIsInvalid(!isInvalid)}>\n        Toggle Invalid State\n      </Button>\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/TextField/WithIcon.tsx",
    "content": "import React from 'react';\nimport { Stack, TextField, Button, Icon } from 'native-base';\n\nexport const Example = () => {\n  const [isInvalid, setIsInvalid] = React.useState(false);\n  return (\n    <Stack space={4} w=\"90%\">\n      <TextField\n        variant=\"underlined\"\n        isInvalid={isInvalid}\n        helperText=\"Sample helper text\"\n        errorMessage=\"Sample error message\"\n        placeholder=\"Default TextField\"\n        InputLeftElement={\n          <Icon\n            name=\"calendar-today\"\n            size=\"md\"\n            my={3}\n            ml={3}\n            color=\"muted.500\"\n          />\n        }\n        InputRightElement={\n          <Icon name=\"cancel\" size=\"md\" my={3} mr={3} color=\"muted.500\" />\n        }\n      />\n      <Button onPress={() => setIsInvalid(!isInvalid)}>\n        Toggle Invalid State\n      </Button>\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/TextField/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from '../../Wrapper';\nimport Invalid from './Invalid';\nimport WithIcon from './WithIcon';\nimport Select from './Select';\nimport Textarea from './Textarea';\nimport Basic from './Basic';\n\nstoriesOf('TextField', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />)\n  .add('Textarea', () => <Textarea />)\n  .add('Select', () => <Select />)\n  .add('WithIcon', () => <WithIcon />)\n  .add('Invalid', () => <Invalid />);\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Toast/Basic.tsx",
    "content": "import React from 'react';\nimport { Button, useToast, Center } from 'native-base';\n\nexport const Example = () => {\n  const toast = useToast();\n\n  return (\n    <Center>\n      <Button\n        onPress={() =>\n          toast.show({\n            description: 'Hello world',\n          })\n        }\n      >\n        Show Toast\n      </Button>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Toast/CloseToast.tsx",
    "content": "import React from 'react';\nimport { Button, useToast, Stack } from 'native-base';\n\nexport const Example = () => {\n  const toast = useToast();\n  const toastIdRef = React.useRef();\n\n  function close() {\n    if (toastIdRef.current) {\n      toast.close(toastIdRef.current);\n    }\n  }\n\n  function closeAll() {\n    toast.closeAll();\n  }\n\n  function addToast() {\n    toastIdRef.current = toast.show({\n      title: 'Hi, Nice to see you',\n    });\n  }\n\n  return (\n    <Stack direction={{ base: 'column', md: 'row' }} space={2}>\n      <Button onPress={addToast}>Toast</Button>\n      <Button onPress={close} variant=\"outline\">\n        Close last toast\n      </Button>\n      <Button onPress={closeAll} variant=\"outline\">\n        Close all toasts\n      </Button>\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Toast/CustomComponent.tsx",
    "content": "import React from 'react';\nimport { Button, useToast, Box, Center } from 'native-base';\n\nexport const Example = () => {\n  const toast = useToast();\n\n  return (\n    <Center>\n      <Button\n        onPress={() => {\n          toast.show({\n            render: () => {\n              return (\n                <Box bg=\"emerald.500\" px=\"2\" py=\"1\" rounded=\"sm\" mb={5}>\n                  Hello! Have a nice day\n                </Box>\n              );\n            },\n          });\n        }}\n      >\n        Custom Toast\n      </Button>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Toast/CustomComponentWithCustomId.tsx",
    "content": "import React from 'react';\nimport { Button, useToast, Box } from 'native-base';\n\nexport const Example = () => {\n  const toast = useToast();\n  const id = 'test-toast';\n\n  return (\n    <Button\n      onPress={() => {\n        if (!toast.isActive(id)) {\n          toast.show({\n            id,\n            render: () => {\n              return (\n                <Box bg=\"teal.500\" p={2} rounded=\"md\" mb={5}>\n                  Hi, Nice to see you\n                </Box>\n              );\n            },\n          });\n        }\n      }}\n    >\n      Custom Toast\n    </Button>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Toast/PreventDuplicate.tsx",
    "content": "import React from 'react';\nimport { Button, useToast, Center } from 'native-base';\n\nexport function Example() {\n  const toast = useToast();\n  const id = 'test-toast';\n  return (\n    <Center>\n      <Button\n        onPress={() => {\n          if (!toast.isActive(id)) {\n            toast.show({\n              id,\n              title: \"Hey! You can't create a duplicate toast\",\n            });\n          }\n        }}\n      >\n        Click me!\n      </Button>\n    </Center>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Toast/StandaloneToast.tsx",
    "content": "import React from 'react';\nimport { Button, Toast, Center } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Center>\n      <Button\n        onPress={() =>\n          Toast.show({\n            title: 'Hello world',\n          })\n        }\n      >\n        Show Toast\n      </Button>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Toast/StatusRecipies.tsx",
    "content": "import React from 'react';\nimport {\n  Button,\n  useToast,\n  VStack,\n  HStack,\n  Text,\n  Center,\n  IconButton,\n  CloseIcon,\n  Alert,\n} from 'native-base';\n\nexport const Example = () => {\n  const toast = useToast();\n  const ToastDetails = [\n    {\n      title: 'Account verified',\n      status: 'success',\n      description: 'Thanks for signing up with us.',\n      isClosable: true,\n    },\n    {\n      title: 'Something went wrong',\n      status: 'error',\n      description: 'Please create a support ticket from the support page',\n    },\n    {\n      title: 'Network connection restored',\n      status: 'info',\n      description:\n        'This is to inform you that your network connectivity is restored',\n      isClosable: true,\n    },\n    {\n      title: 'Invalid email address',\n      status: 'warning',\n      description: 'Please enter a valid email address',\n    },\n  ];\n\n  const ToastAlert = ({\n    id,\n    status,\n    variant,\n    title,\n    description,\n    isClosable,\n    ...rest\n  }: any) => (\n    <Alert\n      maxWidth=\"100%\"\n      alignSelf=\"center\"\n      flexDirection=\"row\"\n      status={status ? status : 'info'}\n      variant={variant as any}\n      {...rest}\n    >\n      <VStack space={1} flexShrink={1} w=\"100%\">\n        <HStack\n          flexShrink={1}\n          alignItems=\"center\"\n          justifyContent=\"space-between\"\n        >\n          <HStack space={2} flexShrink={1} alignItems=\"center\">\n            <Alert.Icon />\n            <Text\n              fontSize=\"md\"\n              fontWeight=\"medium\"\n              flexShrink={1}\n              color=\"darkText\"\n            >\n              {title}\n            </Text>\n          </HStack>\n          {isClosable ? (\n            <IconButton\n              variant=\"unstyled\"\n              icon={<CloseIcon size=\"3\" />}\n              onPress={() => toast.close(id)}\n            />\n          ) : null}\n        </HStack>\n        <Text px=\"6\" color=\"darkText\">\n          {description}\n        </Text>\n      </VStack>\n    </Alert>\n  );\n\n  return (\n    <Center>\n      <VStack space={2}>\n        {ToastDetails.map((item, index) => (\n          <Button\n            key={index}\n            colorScheme={item.status}\n            onPress={() =>\n              toast.show({\n                render: ({ id }) => {\n                  return <ToastAlert id={id} {...item} />;\n                },\n              })\n            }\n          >\n            {item.status}\n          </Button>\n        ))}\n      </VStack>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Toast/ToastPositions.tsx",
    "content": "import React from 'react';\nimport { Button, useToast, VStack, Center } from 'native-base';\n\nexport const Example = () => {\n  const toast = useToast();\n\n  return (\n    <Center>\n      <VStack space={2}>\n        <Button\n          onPress={() =>\n            toast.show({\n              title: 'Hello world',\n              placement: 'bottom',\n            })\n          }\n        >\n          Bottom\n        </Button>\n\n        <Button\n          onPress={() =>\n            toast.show({\n              title: 'Hello world',\n              placement: 'top',\n            })\n          }\n        >\n          Top\n        </Button>\n\n        <Button\n          onPress={() =>\n            toast.show({\n              title: 'Hello world',\n              placement: 'top-left',\n            })\n          }\n        >\n          Top left\n        </Button>\n\n        <Button\n          onPress={() =>\n            toast.show({\n              title: 'Hello world',\n              placement: 'top-right',\n            })\n          }\n        >\n          Top right\n        </Button>\n\n        <Button\n          onPress={() =>\n            toast.show({\n              title: 'Hello world',\n              placement: 'bottom-left',\n            })\n          }\n        >\n          Bottom left\n        </Button>\n\n        <Button\n          onPress={() =>\n            toast.show({\n              title: 'Hello world',\n              placement: 'bottom-right',\n            })\n          }\n        >\n          Bottom right\n        </Button>\n      </VStack>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Toast/VariantRecipies.tsx",
    "content": "import React from 'react';\nimport {\n  Button,\n  useToast,\n  VStack,\n  HStack,\n  Text,\n  Center,\n  IconButton,\n  CloseIcon,\n  Alert,\n} from 'native-base';\n\nexport const Example = () => {\n  const toast = useToast();\n  const ToastDetails = [\n    {\n      title: 'Account verified',\n      variant: 'solid',\n      description: 'Thanks for signing up with us.',\n      isClosable: true,\n    },\n    {\n      title: 'Something went wrong',\n      variant: 'subtle',\n      description: 'Please create a support ticket from the support page',\n    },\n    {\n      title: 'Network connection restored',\n      variant: 'left-accent',\n      description:\n        'This is to inform you that your network connectivity is restored',\n      isClosable: true,\n    },\n    {\n      title: 'Invalid email address',\n      variant: 'top-accent',\n      description: 'Please enter a valid email address',\n    },\n    {\n      title: 'Invalid email address',\n      variant: 'outline',\n      description: 'Please enter a valid email address',\n    },\n  ];\n\n  const ToastAlert = ({\n    id,\n    status,\n    variant,\n    title,\n    description,\n    isClosable,\n    ...rest\n  }: any) => (\n    <Alert\n      maxWidth=\"100%\"\n      alignSelf=\"center\"\n      flexDirection=\"row\"\n      status={status ? status : 'info'}\n      variant={variant as any}\n      {...rest}\n    >\n      <VStack space={1} flexShrink={1} w=\"100%\">\n        <HStack\n          flexShrink={1}\n          alignItems=\"center\"\n          justifyContent=\"space-between\"\n        >\n          <HStack space={2} flexShrink={1} alignItems=\"center\">\n            <Alert.Icon />\n            <Text\n              fontSize=\"md\"\n              fontWeight=\"medium\"\n              flexShrink={1}\n              color={\n                variant === 'solid'\n                  ? 'lightText'\n                  : variant !== 'outline'\n                  ? 'darkText'\n                  : null\n              }\n            >\n              {title}\n            </Text>\n          </HStack>\n          {isClosable ? (\n            <IconButton\n              variant=\"unstyled\"\n              icon={<CloseIcon size=\"3\" />}\n              _icon={{\n                color: variant === 'solid' ? 'lightText' : 'darkText',\n              }}\n              onPress={() => toast.close(id)}\n            />\n          ) : null}\n        </HStack>\n        <Text\n          px=\"6\"\n          color={\n            variant === 'solid'\n              ? 'lightText'\n              : variant !== 'outline'\n              ? 'darkText'\n              : null\n          }\n        >\n          {description}\n        </Text>\n      </VStack>\n    </Alert>\n  );\n\n  return (\n    <Center>\n      <VStack space={2}>\n        {ToastDetails.map((item, index) => (\n          <Button\n            key={index}\n            onPress={() =>\n              toast.show({\n                render: ({ id }) => {\n                  return <ToastAlert id={id} {...item} />;\n                },\n              })\n            }\n          >\n            {item.variant}\n          </Button>\n        ))}\n      </VStack>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Toast/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from '../../Wrapper';\nimport { Example as ToastPositions } from './ToastPositions';\nimport { Example as ToastVariants } from './VariantRecipies';\nimport { Example as Basic } from './Basic';\nimport { Example as CloseToast } from './CloseToast';\nimport { Example as CustomComponent } from './CustomComponent';\nimport { Example as CustomComponentWithCustomId } from './CustomComponentWithCustomId';\nimport { Example as PreventDuplicate } from './PreventDuplicate';\nimport { Example as ToastStatus } from './StatusRecipies';\nimport { Example as StandaloneToast } from './StandaloneToast';\n\nstoriesOf('Toast', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />)\n  .add('Toast Positions', () => <ToastPositions />)\n  .add('Custom Component', () => <CustomComponent />)\n  .add('Custom Component with custom Id', () => <CustomComponentWithCustomId />)\n  .add('CloseToast', () => <CloseToast />)\n  .add('Prevent Duplicate', () => <PreventDuplicate />)\n  .add('Status Recipies', () => <ToastStatus />)\n  .add('Variants Recipies', () => <ToastVariants />)\n  .add('Toast Ref', () => <StandaloneToast />);\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Tooltip/Basic.tsx",
    "content": "import React from 'react';\nimport { Tooltip, Button, Center } from 'native-base';\n\nexport function Example() {\n  return (\n    <Center>\n      <Tooltip label=\"Click here to read more\" openDelay={500}>\n        <Button>More</Button>\n      </Tooltip>\n    </Center>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Tooltip/CustomTooltip.tsx",
    "content": "import React from 'react';\nimport { Tooltip, Button, Center } from 'native-base';\n\nexport function Example() {\n  return (\n    <Center>\n      <Tooltip\n        label=\"Click here to read more\"\n        openDelay={500}\n        bg=\"indigo.500\"\n        _text={{ color: '#fff' }}\n      >\n        <Button>More</Button>\n      </Tooltip>\n    </Center>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Tooltip/TooltipPositions.tsx",
    "content": "import React from 'react';\nimport { Tooltip, Button, VStack, Select, CheckIcon } from 'native-base';\n\nexport function Example() {\n  const [position, setPosition] = React.useState('top left');\n\n  return (\n    <VStack space={6} alignSelf=\"flex-start\" w=\"100%\">\n      {/* @ts-ignore */}\n      <Tooltip label={position} placement={position}>\n        <Button alignSelf=\"center\">ToolTip</Button>\n      </Tooltip>\n\n      <Select\n        selectedValue={position}\n        mx={{ base: 0, md: 'auto' }}\n        accessibilityLabel=\"Select a position for Tooltip\"\n        onValueChange={(nextValue) => setPosition(nextValue)}\n        _selectedItem={{\n          bg: 'cyan.600',\n          endIcon: <CheckIcon size={4} />,\n        }}\n      >\n        <Select.Item label=\"Top Left\" value=\"top left\" />\n        <Select.Item label=\"Top\" value=\"top\" />\n        <Select.Item label=\"Top Right\" value=\"top right\" />\n        <Select.Item label=\"Right Top\" value=\"right top\" />\n        <Select.Item label=\"Right\" value=\"right\" />\n        <Select.Item label=\"Right Bottom\" value=\"right bottom\" />\n        <Select.Item label=\"Bottom Left\" value=\"bottom left\" />\n        <Select.Item label=\"Bottom\" value=\"bottom\" />\n        <Select.Item label=\"Bottom Right\" value=\"bottom right\" />\n        <Select.Item label=\"Left Top\" value=\"left top\" />\n        <Select.Item label=\"Left\" value=\"left\" />\n        <Select.Item label=\"Left Bottom\" value=\"left bottom\" />\n      </Select>\n    </VStack>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Tooltip/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport { Example as Basic } from './Basic';\nimport { Example as TooltipPositions } from './TooltipPositions';\nimport { Example as CustomTooltip } from './CustomTooltip';\n\nstoriesOf('Tooltip', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />)\n  .add('Tooltip Positions', () => <TooltipPositions />)\n  .add('Customizing', () => <CustomTooltip />);\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Transitions/Fade.tsx",
    "content": "import React from 'react';\nimport { Button, Center, PresenceTransition } from 'native-base';\n\nexport const Example = () => {\n  const [isOpen, setIsOpen] = React.useState(false);\n\n  return (\n    <Center>\n      <Button onPress={() => setIsOpen(!isOpen)}>\n        {isOpen ? 'Hide' : 'Show'}\n      </Button>\n      <PresenceTransition\n        visible={isOpen}\n        initial={{ opacity: 0 }}\n        animate={{ opacity: 1, transition: { duration: 250 } }}\n      >\n        <Center\n          mt=\"7\"\n          bg=\"teal.500\"\n          rounded=\"md\"\n          w=\"200\"\n          h=\"100\"\n          _text={{ color: 'white' }}\n        >\n          Fade\n        </Center>\n      </PresenceTransition>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Transitions/ScaleFade.tsx",
    "content": "import React from 'react';\nimport { PresenceTransition, Button, Center } from 'native-base';\nexport const Example = () => {\n  const [isOpen, setIsOpen] = React.useState(false);\n\n  return (\n    <Center>\n      <Button onPress={() => setIsOpen(!isOpen)}>\n        {isOpen ? 'Hide' : 'Show'}\n      </Button>\n      <PresenceTransition\n        visible={isOpen}\n        initial={{ opacity: 0, scale: 0 }}\n        animate={{ opacity: 1, scale: 1, transition: { duration: 250 } }}\n      >\n        <Center w=\"200\" h=\"100\" mt=\"7\" bg=\"teal.500\" rounded=\"md\">\n          ScaleFade\n        </Center>\n      </PresenceTransition>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Transitions/Slide.tsx",
    "content": "import React from 'react';\nimport {\n  Slide,\n  Button,\n  Alert,\n  Text,\n  useColorModeValue,\n  Center,\n} from 'native-base';\nexport const Example = () => {\n  const [isOpenTop, setIsOpenTop] = React.useState(false);\n  const str = `${isOpenTop ? 'Hide' : 'Check Internet Connection'}`;\n  return (\n    <Center h=\"32\">\n      <Slide in={isOpenTop} placement=\"top\">\n        <Alert justifyContent=\"center\" status=\"error\" safeAreaTop={8}>\n          <Alert.Icon />\n          <Text color=\"error.600\" fontWeight=\"medium\">\n            No Internet Connection\n          </Text>\n        </Alert>\n      </Slide>\n      <Button\n        onPress={() => setIsOpenTop(!isOpenTop)}\n        variant=\"unstyled\"\n        bg=\"coolGray.700:alpha.30\"\n        _text={{ color: useColorModeValue('darkText', 'lightText') }}\n      >\n        {str}\n      </Button>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Transitions/SlideComposition.tsx",
    "content": "import React from 'react';\nimport {\n  Slide,\n  Button,\n  Box,\n  Heading,\n  VStack,\n  HStack,\n  Text,\n  Spacer,\n  WarningIcon,\n  Input,\n  Center,\n  useSafeArea,\n} from 'native-base';\nexport const Example = () => {\n  const [isOpen, setIsOpen] = React.useState(false);\n  const safeAreaProps = useSafeArea({\n    safeAreaTop: true,\n  });\n  return (\n    <Center>\n      <Box w={['250', '300']}>\n        <Box w=\"100%\" alignItems=\"flex-start\" justifyContent=\"center\">\n          <VStack space={3} w=\"100%\">\n            <HStack alignItems=\"flex-end\">\n              <Heading>Order</Heading>\n              <Spacer />\n              <WarningIcon color=\"orange.600\" size=\"xs\" mb=\"1.5\" />\n            </HStack>\n            <HStack alignItems=\"center\" justifyContent=\"space-between\">\n              <Text fontWeight=\"medium\">Sub Total</Text>\n              <Text color=\"blueGray.400\">$298.77</Text>\n            </HStack>\n            <HStack alignItems=\"center\" justifyContent=\"space-between\">\n              <Text fontWeight=\"medium\">Tax</Text>\n              <Text color=\"blueGray.400\">$38.84</Text>\n            </HStack>\n            <HStack alignItems=\"center\" justifyContent=\"space-between\">\n              <Text fontWeight=\"medium\">Total Amount</Text>\n              <Text color=\"green.500\">$337.61</Text>\n            </HStack>\n            <VStack space={2} mt=\"2\">\n              <Text bold>Promo Code</Text>\n              <HStack space={3}>\n                <Input flex=\"1\" />\n                <Button variant=\"outline\">Apply</Button>\n              </HStack>\n            </VStack>\n            <Button my=\"2\" onPress={() => setIsOpen(!isOpen)}>\n              Place Order\n            </Button>\n          </VStack>\n        </Box>\n        <Slide in={isOpen} placement=\"top\">\n          <Box\n            p=\"2\"\n            _text={{\n              color: 'orange.600',\n            }}\n            bg=\"orange.200\"\n            {...safeAreaProps}\n          >\n            Due to government restrictions around COVID- 19, you may experience\n            a delay in your delivery.\n          </Box>\n        </Slide>\n      </Box>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Transitions/SlideFade.tsx",
    "content": "import React from 'react';\nimport { PresenceTransition, Box, Button, Center } from 'native-base';\nexport const Example = () => {\n  const [isOpen, setIsOpen] = React.useState(false);\n\n  return (\n    <Box>\n      <Button onPress={() => setIsOpen(!isOpen)}>\n        {isOpen ? 'Hide' : 'Show'}\n      </Button>\n      <PresenceTransition\n        visible={isOpen}\n        initial={{ translateX: -200, opacity: 0 }}\n        animate={{ translateX: -75, opacity: 1 }}\n      >\n        <Center\n          position=\"absolute\"\n          top=\"4\"\n          w=\"200\"\n          h=\"100\"\n          _text={{ color: 'white' }}\n          mt=\"4\"\n          bg=\"teal.500\"\n          rounded=\"md\"\n        >\n          SlideFade\n        </Center>\n      </PresenceTransition>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Transitions/SlideWrapped.tsx",
    "content": "import React from 'react';\nimport {\n  Slide,\n  Button,\n  Box,\n  Input,\n  Heading,\n  VStack,\n  HStack,\n  Text,\n  CheckIcon,\n  Center,\n} from 'native-base';\n\nexport const Example = () => {\n  const [isOpen, setIsOpen] = React.useState(false);\n  return (\n    <Center>\n      <Box w={['250', '300']} justifyContent=\"center\">\n        <VStack space={3}>\n          <HStack alignItems=\"flex-end\">\n            <Heading>Order</Heading>\n          </HStack>\n          <HStack alignItems=\"center\" justifyContent=\"space-between\">\n            <Text fontWeight=\"medium\">Sub Total</Text>\n            <Text color=\"blueGray.400\">$298.77</Text>\n          </HStack>\n          <HStack alignItems=\"center\" justifyContent=\"space-between\">\n            <Text fontWeight=\"medium\">Tax</Text>\n            <Text color=\"blueGray.400\">$38.84</Text>\n          </HStack>\n          <HStack alignItems=\"center\" justifyContent=\"space-between\">\n            <Text fontWeight=\"medium\">Total Amount</Text>\n            <Text color=\"emerald.600\">$337.61</Text>\n          </HStack>\n          <VStack space={2} mt=\"2\">\n            <Text bold>Promo Code</Text>\n            <HStack space={3}>\n              <Input flex=\"1\" />\n              <Button variant=\"outline\">Apply</Button>\n            </HStack>\n          </VStack>\n          <Button my=\"2\" onPress={() => setIsOpen(!isOpen)}>\n            Place Order\n          </Button>\n        </VStack>\n        <Slide in={isOpen} placement=\"top\">\n          <Box\n            w=\"100%\"\n            position=\"absolute\"\n            p=\"2\"\n            borderRadius=\"xs\"\n            bg=\"emerald.100\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            _dark={{\n              bg: 'emerald.200',\n            }}\n            safeArea\n          >\n            <HStack space={2}>\n              <CheckIcon\n                size=\"4\"\n                color=\"emerald.600\"\n                mt=\"1\"\n                _dark={{\n                  color: 'emerald.700',\n                }}\n              />\n              <Text\n                color=\"emerald.600\"\n                textAlign=\"center\"\n                _dark={{\n                  color: 'emerald.700',\n                }}\n                fontWeight=\"medium\"\n              >\n                Order Placed Successfully.\n              </Text>\n            </HStack>\n          </Box>\n        </Slide>\n      </Box>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Transitions/Stagger.tsx",
    "content": "import React from 'react';\nimport {\n  Box,\n  useDisclose,\n  IconButton,\n  Stagger,\n  HStack,\n  Icon,\n  Center,\n} from 'native-base';\nimport { MaterialCommunityIcons, MaterialIcons } from '@expo/vector-icons';\n\nexport const Example = () => {\n  const { isOpen, onToggle } = useDisclose();\n  return (\n    <Center>\n      <Box alignItems=\"center\" minH=\"220\">\n        <Stagger\n          visible={isOpen}\n          initial={{\n            opacity: 0,\n            scale: 0,\n            translateY: 34,\n          }}\n          animate={{\n            translateY: 0,\n            scale: 1,\n            opacity: 1,\n            transition: {\n              type: 'spring',\n              mass: 0.8,\n              stagger: {\n                offset: 30,\n                reverse: true,\n              },\n            },\n          }}\n          exit={{\n            translateY: 34,\n            scale: 0.5,\n            opacity: 0,\n            transition: {\n              duration: 100,\n              stagger: {\n                offset: 30,\n                reverse: true,\n              },\n            },\n          }}\n        >\n          <IconButton\n            mb=\"4\"\n            variant=\"solid\"\n            bg=\"indigo.500\"\n            colorScheme=\"indigo\"\n            borderRadius=\"full\"\n            icon={\n              <Icon\n                as={MaterialIcons}\n                size=\"6\"\n                name=\"location-pin\"\n                _dark={{ color: 'warmGray.50' }}\n                color=\"warmGray.50\"\n              />\n            }\n          />\n          <IconButton\n            mb=\"4\"\n            variant=\"solid\"\n            bg=\"yellow.400\"\n            colorScheme=\"yellow\"\n            borderRadius=\"full\"\n            icon={\n              <Icon\n                as={MaterialCommunityIcons}\n                _dark={{ color: 'warmGray.50' }}\n                size=\"6\"\n                name=\"microphone\"\n                color=\"warmGray.50\"\n              />\n            }\n          />\n          <IconButton\n            mb=\"4\"\n            variant=\"solid\"\n            bg=\"teal.400\"\n            colorScheme=\"teal\"\n            borderRadius=\"full\"\n            icon={\n              <Icon\n                as={MaterialCommunityIcons}\n                _dark={{ color: 'warmGray.50' }}\n                size=\"6\"\n                name=\"video\"\n                color=\"warmGray.50\"\n              />\n            }\n          />\n          <IconButton\n            mb=\"4\"\n            variant=\"solid\"\n            bg=\"red.500\"\n            colorScheme=\"red\"\n            borderRadius=\"full\"\n            icon={\n              <Icon\n                as={MaterialIcons}\n                size=\"6\"\n                name=\"photo-library\"\n                _dark={{ color: 'warmGray.50' }}\n                color=\"warmGray.50\"\n              />\n            }\n          />\n        </Stagger>\n      </Box>\n      <HStack alignItems=\"center\">\n        <IconButton\n          variant=\"solid\"\n          borderRadius=\"full\"\n          size=\"lg\"\n          onPress={onToggle}\n          bg=\"cyan.400\"\n          icon={\n            <Icon\n              as={MaterialCommunityIcons}\n              size=\"6\"\n              name=\"dots-horizontal\"\n              color=\"warmGray.50\"\n              _dark={{ color: 'warmGray.50' }}\n            />\n          }\n        />\n      </HStack>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Transitions/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport { Example as Fade } from './Fade';\nimport { Example as ScaleFade } from './ScaleFade';\nimport { Example as Slide } from './Slide';\nimport { Example as SlideWrapped } from './SlideWrapped';\nimport { Example as SlideFade } from './SlideFade';\nimport { Example as Stagger } from './Stagger';\nimport { Example as SlideComposition } from './SlideComposition';\n\nstoriesOf('Transitions', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Fade', () => <Fade />)\n  .add('ScaleFade', () => <ScaleFade />)\n  .add('Slide', () => <Slide />)\n  .add('Slide wrapped inside parent', () => <SlideWrapped />)\n  .add('SlideFade', () => <SlideFade />)\n  .add('SlideComposition', () => <SlideComposition />)\n  .add('Stagger', () => <Stagger />);\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Typeahead/UsingComponent.tsx",
    "content": "import React from 'react';\nimport { Typeahead, Icon } from 'native-base';\nimport { MaterialIcons } from '@expo/vector-icons';\n\nconst animals = [\n  { id: 1, value: 'Aardvark' },\n  { id: 2, value: 'Kangaroo' },\n  { id: 3, value: 'Snake' },\n  { id: 4, value: 'Pikachu' },\n  { id: 5, value: 'Tiger' },\n  { id: 6, value: 'Godzilla' },\n];\n\nexport function UsingComponent() {\n  const [filterText, setFilterText] = React.useState('');\n\n  const filteredItems = React.useMemo(() => {\n    return animals.filter(\n      (item) => item.value.toLowerCase().indexOf(filterText.toLowerCase()) > -1\n    );\n  }, [filterText]);\n\n  return (\n    <Typeahead\n      options={filteredItems}\n      onChange={setFilterText}\n      onSelectedItemChange={console.log}\n      getOptionKey={(item) => item.key}\n      getOptionLabel={(item) => item.value}\n      label=\"Select your favorite animal\"\n      toggleIcon={({ isOpen }: any) => {\n        return isOpen ? (\n          <Icon as={MaterialIcons} name=\"arrow-drop-up\" size={12} />\n        ) : (\n          <Icon as={MaterialIcons} name=\"arrow-drop-down\" size={12} />\n        );\n      }}\n    />\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Typeahead/UsingComponentWithRenderItem.tsx",
    "content": "import React from 'react';\nimport { Typeahead, Icon, Box, Text } from 'native-base';\nimport { MaterialIcons } from '@expo/vector-icons';\n\nconst animals = [\n  { id: 1, value: 'Aardvark' },\n  { id: 2, value: 'Kangaroo' },\n  { id: 3, value: 'Snake' },\n  { id: 4, value: 'Pikachu' },\n  { id: 5, value: 'Tiger' },\n  { id: 6, value: 'Godzilla' },\n];\n\nexport function UsingComponentWithRenderItem() {\n  const [filterText, setFilterText] = React.useState('');\n\n  const filteredItems = React.useMemo(() => {\n    return animals.filter(\n      (item) => item.value.toLowerCase().indexOf(filterText.toLowerCase()) > -1\n    );\n  }, [filterText]);\n\n  return (\n    <Typeahead\n      options={filteredItems}\n      disabledKeys={[1]}\n      width={400}\n      onChange={setFilterText}\n      getOptionLabel={(item) => item.value}\n      getOptionKey={(item) => item.key}\n      onSelectedItemChange={console.log}\n      label=\"Select your favorite animal\"\n      renderItem={(item: any) => {\n        return (\n          <Box flexDirection=\"row\" justifyContent=\"space-between\" p={4}>\n            <Box\n              backgroundColor=\"black\"\n              height={10}\n              width={10}\n              borderRadius={9999}\n              justifyContent=\"center\"\n              alignItems=\"center\"\n            >\n              <Text color=\"white\">{item.value[0]}</Text>\n            </Box>\n            <Box>{item.value}</Box>\n          </Box>\n        );\n      }}\n      toggleIcon={({ isOpen }: any) => {\n        return isOpen ? (\n          <Icon as={MaterialIcons} name=\"arrow-drop-up\" size={12} />\n        ) : (\n          <Icon as={MaterialIcons} name=\"arrow-drop-down\" size={12} />\n        );\n      }}\n    />\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Typeahead/UsingControlledInput.tsx",
    "content": "import React from 'react';\nimport { Typeahead, Icon } from 'native-base';\nimport { MaterialIcons } from '@expo/vector-icons';\n\nconst animals = [\n  { id: 1, value: 'Aardvark' },\n  { id: 2, value: 'Kangaroo' },\n  { id: 3, value: 'Snake' },\n  { id: 4, value: 'Pikachu' },\n  { id: 5, value: 'Tiger' },\n  { id: 6, value: 'Godzilla' },\n];\n\nexport function UsingControlledInput() {\n  const [items] = React.useState(animals);\n  const [inputValue, setInputValue] = React.useState('');\n\n  const filteredItems = React.useMemo(() => {\n    return items.filter(\n      (item) => item.value.toLowerCase().indexOf(inputValue.toLowerCase()) > -1\n    );\n  }, [items, inputValue]);\n\n  return (\n    <Typeahead\n      options={filteredItems}\n      getOptionLabel={(item) => item.value}\n      getOptionKey={(item) => item.key}\n      onChange={setInputValue}\n      inputValue={inputValue}\n      onSelectedItemChange={console.log}\n      label=\"Select your favorite animal\"\n      toggleIcon={({ isOpen }: any) => {\n        return isOpen ? (\n          <Icon as={MaterialIcons} name=\"arrow-drop-up\" size={12} />\n        ) : (\n          <Icon as={MaterialIcons} name=\"arrow-drop-down\" size={12} />\n        );\n      }}\n    />\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Typeahead/UsingHook.tsx",
    "content": "import React from 'react';\nimport {\n  useTypeahead,\n  Box,\n  Input,\n  Button,\n  Text,\n  Icon,\n  IconButton,\n} from 'native-base';\nimport { ScrollView } from 'react-native';\nimport { MaterialIcons } from '@expo/vector-icons';\n\nlet countries = [\n  'Afghanistan',\n  'Australia',\n  'India',\n  'USA',\n  'Germany',\n  'France',\n  'Iceland',\n  'Russia',\n  'Japan',\n  'China',\n  'Denmark',\n  'Norway',\n];\n\nexport function UsingHook() {\n  const [inputItems, setInputItems] = React.useState(countries);\n\n  const {\n    isOpen,\n    getInputProps,\n    getMenuItemProps,\n    getMenuProps,\n    getToggleButtonProps,\n  } = useTypeahead({\n    items: inputItems,\n    itemToString: (item: any) => item.toString(),\n    onInputValueChange: ({ inputValue }: { inputValue: string }) => {\n      setInputItems(\n        countries.filter((item) =>\n          item.toLowerCase().startsWith(inputValue.toLowerCase())\n        )\n      );\n    },\n  });\n\n  return (\n    <Box width=\"60%\" flexDirection=\"row\">\n      <Box flex={1}>\n        <Input size=\"2xl\" {...getInputProps()} />\n      </Box>\n      <Box>\n        <IconButton\n          bg=\"gray.300\"\n          {...getToggleButtonProps()}\n          icon={\n            isOpen ? (\n              <Icon as={MaterialIcons} name=\"arrow-drop-up\" size={12} />\n            ) : (\n              <Icon as={MaterialIcons} name=\"arrow-drop-down\" size={12} />\n            )\n          }\n        />\n      </Box>\n      <Box\n        position=\"absolute\"\n        top={55}\n        width=\"100%\"\n        height=\"200\"\n        {...getMenuProps()}\n      >\n        <ScrollView>\n          {isOpen &&\n            inputItems.map((item, index) => (\n              <Button\n                key={`${item}${index}`}\n                {...getMenuItemProps(item, index)}\n              >\n                <Text>{item}</Text>\n              </Button>\n            ))}\n        </ScrollView>\n      </Box>\n    </Box>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Typeahead/UsingWithAPI.tsx",
    "content": "import React from 'react';\nimport { Typeahead, Icon, Spinner, Center } from 'native-base';\nimport { MaterialIcons } from '@expo/vector-icons';\n\nconst animals = [\n  { id: 1, value: 'Aardvark' },\n  { id: 2, value: 'Kangaroo' },\n  { id: 3, value: 'Snake' },\n  { id: 4, value: 'Pikachu' },\n  { id: 5, value: 'Tiger' },\n  { id: 6, value: 'Godzilla' },\n];\n\nconst getAnimalsByTerm = (term: string) => {\n  return animals.filter(\n    (item) => item.value.toLowerCase().indexOf(term.toLowerCase()) > -1\n  );\n};\n\nexport function UsingWithAPI() {\n  const [items, setItems] = React.useState<any>([]);\n  const [loading, setLoading] = React.useState(false);\n  const [inputValue, setInputValue] = React.useState('');\n\n  React.useEffect(() => {\n    setLoading(true);\n    setTimeout(() => {\n      setItems(getAnimalsByTerm(inputValue));\n      setLoading(false);\n    }, 1000);\n  }, [inputValue]);\n\n  return (\n    <Typeahead\n      options={items}\n      getOptionLabel={(item) => item.value}\n      onChange={setInputValue}\n      onSelectedItemChange={console.log}\n      label=\"Select your favorite animal\"\n      toggleIcon={({ isOpen }: any) => {\n        if (loading) {\n          return (\n            <Center height={10} width={10}>\n              <Spinner size=\"sm\" />\n            </Center>\n          );\n        } else if (isOpen) {\n          return (\n            <Center height={10} width={10}>\n              <Icon as={MaterialIcons} name=\"arrow-drop-up\" size={12} />\n            </Center>\n          );\n        }\n        return (\n          <Center height={10} width={10}>\n            <Icon as={MaterialIcons} name=\"arrow-drop-down\" size={12} />\n          </Center>\n        );\n      }}\n    />\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Typeahead/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport { UsingComponent } from './UsingComponent';\nimport { UsingComponentWithRenderItem } from './UsingComponentWithRenderItem';\nimport { UsingControlledInput } from './UsingControlledInput';\nimport { UsingWithAPI } from './UsingWithAPI';\nimport { UsingHook } from './UsingHook';\n\nstoriesOf('Typeahead', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <UsingComponent />)\n  .add('Using render item', () => <UsingComponentWithRenderItem />)\n  .add('Using Controlled input', () => <UsingControlledInput />)\n  .add('Using with async API', () => <UsingWithAPI />)\n  .add('Custom Typeahead using useTypeahead hook', () => <UsingHook />);\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Wrap/AlignmentAlign.tsx",
    "content": "import React from 'react';\nimport { Wrap, Center } from 'native-base';\nexport const Example = () => {\n  return (\n    <Wrap space={10} align=\"center\" direction=\"row\">\n      <Center size={20} bg=\"primary.400\">\n        Box 1\n      </Center>\n      <Center size={16} bg=\"secondary.400\">\n        Box 2\n      </Center>\n      <Center size={12} bg=\"emerald.400\">\n        Box 3\n      </Center>\n      <Center size={10} bg=\"rose.400\">\n        Box 4\n      </Center>\n    </Wrap>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Wrap/AlignmentJustify.tsx",
    "content": "import React from 'react';\nimport { Wrap, Center } from 'native-base';\nexport const Example = () => {\n  return (\n    <Wrap space={10} justify=\"center\" direction=\"row\">\n      <Center size={20} bg=\"primary.400\">\n        Box 1\n      </Center>\n      <Center size={16} bg=\"secondary.400\">\n        Box 2\n      </Center>\n      <Center size={12} bg=\"emerald.400\">\n        Box 3\n      </Center>\n      <Center size={10} bg=\"rose.400\">\n        Box 4\n      </Center>\n    </Wrap>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Wrap/Basic.tsx",
    "content": "import React from 'react';\nimport { Wrap, Center } from 'native-base';\nexport const Example = () => {\n  return (\n    <Wrap direction=\"row\" space={10} mx={4}>\n      <Center\n        size={16}\n        bg=\"primary.400\"\n        rounded=\"xl\"\n        _text={{ color: 'white' }}\n      >\n        Box 1\n      </Center>\n      <Center\n        bg=\"secondary.400\"\n        size={16}\n        rounded=\"xl\"\n        _text={{ color: 'white' }}\n      >\n        Box 2\n      </Center>\n      <Center\n        size={16}\n        bg=\"emerald.400\"\n        rounded=\"xl\"\n        _text={{ color: 'white' }}\n      >\n        Box 3\n      </Center>\n      <Center size={16} bg=\"rose.400\" rounded=\"xl\" _text={{ color: 'white' }}>\n        Box 4\n      </Center>\n    </Wrap>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Wrap/Spacing.tsx",
    "content": "import React from 'react';\nimport { Wrap, Center } from 'native-base';\nexport const Example = () => {\n  return (\n    <Wrap space={10} direction=\"row\">\n      <Center w=\"180px\" h=\"80px\" bg=\"primary.400\">\n        Box 1\n      </Center>\n      <Center w=\"180px\" h=\"80px\" bg=\"secondary.400\">\n        Box 2\n      </Center>\n      <Center w=\"180px\" h=\"80px\" bg=\"emerald.400\">\n        Box 3\n      </Center>\n      <Center w=\"180px\" h=\"80px\" bg=\"rose.400\">\n        Box 4\n      </Center>\n    </Wrap>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/Wrap/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport Basic from './Basic';\nimport Spacing from './Spacing';\nimport AlignmentAlign from './AlignmentAlign';\nimport AlignmentJustify from './AlignmentJustify';\n\nstoriesOf('Wrap', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />)\n  .add('Space', () => <Spacing />)\n  .add('AlignmentAlign', () => <AlignmentAlign />)\n  .add('AlignmentJustify', () => <AlignmentJustify />);\n"
  },
  {
    "path": "example/storybook/stories/components/composites/factory/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport Usage from './usage';\nimport Theme from './theme';\nimport Modes from './modes';\nimport Ref from './ref';\n\nstoriesOf('Factory', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Usage', () => <Usage />)\n  .add('Theme', () => <Theme />)\n  .add('Modes', () => <Modes />)\n  .add('Ref', () => <Ref />);\n"
  },
  {
    "path": "example/storybook/stories/components/composites/factory/modes.tsx",
    "content": "import React from 'react';\nimport { Factory, themeTools } from 'native-base';\nimport { View } from 'react-native';\n\nexport const Example = () => {\n  const FactoryView = Factory(View, {\n    baseStyle: (props: any) => {\n      return {\n        bg: themeTools.mode('rose.500', 'cyan.300')(props),\n        borderRadius: 'md',\n      };\n    },\n  });\n  return <FactoryView height={50} width={50} />;\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/factory/ref.tsx",
    "content": "import React from 'react';\nimport { Stack, Factory, Button } from 'native-base';\nimport { TextInput } from 'react-native';\n\nexport const Example = () => {\n  const NBInput = Factory(TextInput);\n  const inputRef: any = React.useRef(null);\n  return (\n    <Stack space={4}>\n      <NBInput\n        placeholder=\"Click on the button\"\n        ref={inputRef}\n        p=\"2\"\n        borderWidth=\"1\"\n        borderColor=\"cyan.400\"\n        borderRadius=\"md\"\n        _dark={{ color: 'trueGray.200' }}\n      />\n      <Button\n        colorScheme=\"emerald\"\n        onPress={() => {\n          inputRef?.current?.focus();\n        }}\n      >\n        Set Focus\n      </Button>\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/factory/theme.tsx",
    "content": "import React from 'react';\nimport { Factory } from 'native-base';\nimport { View } from 'react-native';\n\nexport const Example = () => {\n  const FactoryView = Factory(View, {\n    baseStyle: {\n      bg: 'cyan.300',\n      borderRadius: 'md',\n    },\n  });\n  return <FactoryView height={50} width={50} />;\n};\n"
  },
  {
    "path": "example/storybook/stories/components/composites/factory/usage.tsx",
    "content": "import React from 'react';\nimport { Factory } from 'native-base';\nimport { View } from 'react-native';\n\nexport const Example = () => {\n  const FactoryView = Factory(View);\n  return <FactoryView bg=\"emerald.400\" borderRadius={4} size={16} />;\n};\n"
  },
  {
    "path": "example/storybook/stories/components/perf/NBButton.tsx",
    "content": "import React from 'react';\nimport { Button } from 'native-base';\nexport function NBButtons() {\n  const foo = new Array(10).fill('hello');\n  return (\n    <>\n      {foo.map((val, index) => (\n        <Button key={index} onPress={() => {}}>\n          {`NativeBase Button ${index}`}\n        </Button>\n      ))}\n    </>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/perf/RNButton.tsx",
    "content": "import React from 'react';\nimport { Button } from 'react-native';\nexport function RNButtons() {\n  const foo = new Array(10).fill('hello');\n  return (\n    <>\n      {foo.map((val, index) => (\n        <Button key={index} title={`RN Button ${index}`} onPress={() => {}} />\n      ))}\n    </>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/perf/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport { RNButtons } from './RNButton';\nimport { NBButtons } from './NBButton';\nimport { NativeBaseProvider, View as NBView } from 'native-base';\nimport { View } from 'react-native';\n\nstoriesOf('Button Perf', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => (\n    <NativeBaseProvider>{getStory()}</NativeBaseProvider>\n  ))\n  .add('Empty', () => <></>)\n  .add('PlainView', () => <View />)\n  .add('RNView', () => <NBView />)\n  .add('RNButtons', () => <RNButtons />)\n  .add('NBButtons', () => <NBButtons />);\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Box/LinearGrad.tsx",
    "content": "import React from 'react';\nimport { Box } from 'native-base';\nexport const Example = () => {\n  return (\n    <Box\n      bg={{\n        linearGradient: {\n          colors: ['lightBlue.300', 'violet.800'],\n          start: [0, 0],\n          end: [1, 0],\n        },\n      }}\n      p=\"12\"\n      w=\"72\"\n      rounded=\"xl\"\n      _text={{\n        fontSize: 'md',\n        fontWeight: 'medium',\n        color: 'warmGray.50',\n        textAlign: 'center',\n      }}\n    >\n      This is a Box with Linear Gradient\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Box/WithRef.tsx",
    "content": "//@ts-nocheck\nimport React from 'react';\nimport { Box } from 'native-base';\n\nexport const Example = () => {\n  const myRef = React.useRef({});\n  React.useEffect(() => {\n    const styleObj = {\n      borderWidth: 4,\n      borderRadius: 4,\n      borderColor: '#22D3EE',\n    };\n    myRef?.current?.setNativeProps({\n      style: styleObj,\n    });\n  }, [myRef]);\n  return (\n    <Box\n      width=\"100%\"\n      bg=\"primary.500\"\n      p=\"4\"\n      shadow={2}\n      _text={{ fontSize: 'md', fontWeight: 'bold', color: 'white' }}\n      ref={myRef}\n    >\n      This is a Box\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Box/basic.tsx",
    "content": "import React from 'react';\nimport { Box } from 'native-base';\nexport const Example = () => {\n  return (\n    <Box>\n      <Box\n        alignSelf=\"center\"\n        // bg=\"primary.500\"\n        _text={{\n          fontSize: 'md',\n          fontWeight: 'medium',\n          color: 'warmGray.50',\n          letterSpacing: 'lg',\n        }}\n        bg={['red.400', 'blue.400']}\n      >\n        This is a Box\n      </Box>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Box/composition-card.tsx",
    "content": "import React from 'react';\nimport { Box, Stack, Heading, Icon, Text, HStack, Avatar } from 'native-base';\nimport {\n  MaterialCommunityIcons,\n  SimpleLineIcons,\n  MaterialIcons,\n} from '@expo/vector-icons';\nexport const Example = () => {\n  return (\n    <Box\n      p={5}\n      rounded=\"xl\"\n      _ios={{ shadow: 4 }}\n      _android={{ borderWidth: 1 }}\n      _light={{ borderColor: 'gray.300' }}\n      _dark={{ borderColor: 'gray.400' }}\n      w=\"100%\"\n    >\n      <Stack space={6}>\n        <HStack justifyContent=\"space-between\" alignItems=\"center\">\n          <Avatar\n            size={'sm'}\n            bg=\"teal.500\"\n            source={{\n              uri:\n                'https://i.pinimg.com/originals/4d/72/97/4d7297dad94265c0acbc3b677d418935.jpg',\n            }}\n          />\n          <HStack space={2} alignItems=\"center\">\n            <Icon\n              name=\"star\"\n              as={SimpleLineIcons}\n              size={4}\n              // color=\"blueGray.700\"\n              _light={{ color: 'blueGray.700' }}\n              _dark={{ color: 'blueGray.400' }}\n            />\n            <Icon\n              size={4}\n              name=\"more-horiz\"\n              // color=\"blueGray.700\"\n              _light={{ color: 'blueGray.700' }}\n              _dark={{ color: 'blueGray.400' }}\n              as={MaterialIcons}\n            />\n          </HStack>\n        </HStack>\n\n        <Stack space={3}>\n          <Heading\n            size=\"lg\"\n            _light={{ color: 'blueGray.700' }}\n            _dark={{ color: 'blueGray.100' }}\n          >\n            Dressing room\n          </Heading>\n          <Text\n            _light={{ color: 'blueGray.500' }}\n            _dark={{ color: 'blueGray.200' }}\n            fontWeight=\"medium\"\n            fontSize=\"xs\"\n          >\n            Design the new dressing room for the upcoming tour.\n          </Text>\n        </Stack>\n        <HStack\n          justifyContent=\"space-between\"\n          alignItems=\"flex-end\"\n          flexShrink={1}\n        >\n          <Stack space={3}>\n            <HStack space={3} alignItems=\"center\" flexShrink={1}>\n              <Icon\n                name=\"grid\"\n                as={MaterialCommunityIcons}\n                // color=\"blueGray.700\"\n                _light={{ color: 'blueGray.700' }}\n                _dark={{ color: 'blueGray.400' }}\n              />\n              <Text\n                flexShrink={1}\n                fontWeight=\"medium\"\n                _light={{ color: 'blueGray.500' }}\n                _dark={{ color: 'blueGray.200' }}\n              >\n                Task: KitchenSink\n              </Text>\n            </HStack>\n            <HStack space={3} alignItems=\"center\">\n              <Icon\n                name=\"calendar\"\n                as={MaterialCommunityIcons}\n                // color=\"blueGray.700\"\n                _light={{ color: 'blueGray.700' }}\n                _dark={{ color: 'blueGray.400' }}\n              />\n              <Text\n                _light={{ color: 'blueGray.500' }}\n                _dark={{ color: 'blueGray.200' }}\n                fontWeight=\"medium\"\n              >\n                Date: 10.04.2021\n              </Text>\n            </HStack>\n          </Stack>\n          {/* <Avatar.Group size=\"sm\" spacing={-3}>\n            <Avatar\n              source={{\n                uri: 'https://pbs.twimg.com/profile_images/1309797238651060226/18cm6VhQ_400x400.jpg',\n              }}\n            >\n              AK\n            </Avatar>\n            <Avatar\n              source={{\n                uri: 'https://pbs.twimg.com/profile_images/1352844693151731713/HKO7cnlW_400x400.jpg',\n              }}\n            >\n              RS\n            </Avatar>\n            <Avatar\n              source={{\n                uri: 'https://pbs.twimg.com/profile_images/1320985200663293952/lE_Kg6vr_400x400.jpg',\n              }}\n            >\n              MR\n            </Avatar>\n          </Avatar.Group>\n        */}\n        </HStack>\n      </Stack>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Box/composition-card1.tsx",
    "content": "import React from 'react';\nimport { Box, Heading, Image, Text, HStack, Stack, Button } from 'native-base';\nexport const Example = () => {\n  return (\n    <Box\n      rounded=\"25\"\n      w=\"100%\"\n      _ios={{ shadow: 4 }}\n      _android={{ borderWidth: 1 }}\n      _light={{ borderColor: 'gray.300' }}\n      _dark={{ borderColor: 'gray.400' }}\n      mx={{ base: 'auto', md: 0 }}\n    >\n      <Image\n        roundedTop=\"25\"\n        h={56}\n        source={{\n          uri:\n            'https://image.freepik.com/free-photo/clown-anemonefish-amphiprion-swimming-among-tentacles-its-anemone-home_211453-2.jpg',\n        }}\n        alt=\"NativeBase Card\"\n      />\n      <Stack p={4} space={3}>\n        <Heading\n          _light={{ color: 'blueGray.700' }}\n          _dark={{ color: 'blueGray.100' }}\n        >\n          Clownfish\n        </Heading>\n        <Text\n          _light={{ color: 'blueGray.500' }}\n          _dark={{ color: 'blueGray.200' }}\n        >\n          Bright orange with three distinctive white bars, clown anemonefish are\n          among the most recognizable at all reef-dwellers.\n        </Text>\n        <HStack space={4}>\n          <Button variant=\"ghost\" colorScheme=\"blue\" p={0} minH={0}>\n            SHARE\n          </Button>\n          <Button variant=\"ghost\" colorScheme=\"blue\" p={0} minH={0}>\n            LEARN MORE\n          </Button>\n        </HStack>\n      </Stack>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Box/composition-card2.tsx",
    "content": "import React from 'react';\nimport { Box, Heading, Image, Text, Stack } from 'native-base';\nexport const Example = () => {\n  return (\n    <Box\n      rounded=\"25\"\n      w=\"100%\"\n      _ios={{ shadow: 4 }}\n      _android={{ borderWidth: 1 }}\n      _light={{ borderColor: 'gray.300' }}\n      _dark={{ borderColor: 'gray.400' }}\n      mx={{ base: 'auto', md: 0 }}\n    >\n      <Image\n        h={64}\n        roundedTop=\"25\"\n        source={{\n          uri:\n            'https://image.freepik.com/free-photo/silhouette-person-standing-top-hill-beautiful-colorful-sky-morning_181624-24501.jpg',\n        }}\n        alt=\"NativeBase Card\"\n      />\n      <Stack p={4} space={2}>\n        <Heading\n          _light={{ color: 'blueGray.700' }}\n          _dark={{ color: 'blueGray.100' }}\n        >\n          Adventure\n        </Heading>\n        <Text\n          _light={{ color: 'blueGray.500' }}\n          _dark={{ color: 'blueGray.200' }}\n        >\n          An exciting experience that is typically bold, sometimes risky,\n          undertaking...\n          <Text\n            bold\n            _light={{ color: 'blueGray.500' }}\n            _dark={{ color: 'blueGray.200' }}\n          >\n            more\n          </Text>\n        </Text>\n      </Stack>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Box/composition-card3.tsx",
    "content": "import React from 'react';\nimport {\n  Box,\n  Heading,\n  Image,\n  Text,\n  Icon,\n  HStack,\n  Stack,\n  Center,\n} from 'native-base';\nimport { Feather, AntDesign } from '@expo/vector-icons';\n\nexport const Example = () => {\n  return (\n    <Box\n      rounded=\"25\"\n      w=\"100%\"\n      _ios={{ shadow: 4 }}\n      mx={{ base: 'auto', md: 0 }}\n    >\n      <Image\n        h={64}\n        // w={200}\n        w=\"100%\"\n        rounded=\"25\"\n        source={{\n          uri:\n            'https://image.freepik.com/free-photo/pathway-middle-green-leafed-trees-with-sun-shining-through-branches_181624-4539.jpg',\n        }}\n        alt=\"NativeBase Card\"\n      />\n\n      <Center position=\"absolute\" height=\"100%\" width=\"100%\">\n        <Icon\n          as={<AntDesign name=\"play\" />}\n          color=\"gray.200\"\n          size={12}\n          opacity={0.8}\n        />\n      </Center>\n\n      <HStack\n        position=\"absolute\"\n        bottom={4}\n        w={64}\n        px={4}\n        alignItems=\"center\"\n        justifyContent=\"space-between\"\n      >\n        <Stack>\n          <Heading color=\"gray.200\" size=\"md\">\n            Sacred Grove\n          </Heading>\n          <Text color=\"gray.200\">Meghalaya</Text>\n        </Stack>\n        <Icon as={<Feather name=\"more-horizontal\" />} color=\"white\" />\n      </HStack>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Box/composition-shoes-card.tsx",
    "content": "import React from 'react';\nimport { Box, Text, Image, Heading, Stack } from 'native-base';\nexport const Example = () => {\n  return (\n    <Box\n      flexDirection={{ base: 'column', md: 'row' }}\n      _ios={{ shadow: 4 }}\n      _android={{ borderWidth: 1 }}\n      _light={{ borderColor: 'gray.300' }}\n      _dark={{ borderColor: 'gray.400' }}\n      rounded=\"xl\"\n      overflow=\"hidden\"\n      w=\"100%\"\n    >\n      <Box width={{ md: 24 }} height={{ base: 32, md: '100%' }}>\n        <Image\n          source={{\n            uri:\n              'https://static.nike.com/a/images/f_auto/dpr_2.0/w_1328,c_limit/b56d1e9b-3861-4c89-995d-b8fb6240a762/nike-just-do-it.jpg',\n          }}\n          height={32}\n          alt=\"Shoes\"\n        />\n      </Box>\n      <Stack p={3} space={2} minW={32}>\n        <Text fontSize=\"xs\" color=\"red.400\" fontWeight=\"semibold\">\n          Just In\n        </Text>\n        <Stack space={1}>\n          <Heading size=\"sm\">Jordan MA2</Heading>\n          <Text\n            fontWeight=\"medium\"\n            _light={{ color: 'blueGray.600' }}\n            _dark={{ color: 'blueGray.50' }}\n          >\n            Older Kids' Shoe\n          </Text>\n          <Text\n            fontWeight=\"medium\"\n            _light={{ color: 'blueGray.600' }}\n            _dark={{ color: 'blueGray.50' }}\n          >\n            2 colors\n          </Text>\n        </Stack>\n        <Text\n          fontSize=\"md\"\n          fontWeight=\"semibold\"\n          _light={{ color: 'blueGray.600' }}\n          _dark={{ color: 'blueGray.50' }}\n        >\n          $ 150\n        </Text>\n      </Stack>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Box/composition.tsx",
    "content": "import React from 'react';\nimport {\n  Box,\n  Heading,\n  AspectRatio,\n  Image,\n  Text,\n  Center,\n  HStack,\n  Stack,\n} from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Box alignItems=\"center\">\n      <Box\n        maxW=\"80\"\n        rounded=\"lg\"\n        overflow=\"hidden\"\n        borderColor=\"coolGray.200\"\n        borderWidth=\"1\"\n        _dark={{ borderColor: 'coolGray.600', backgroundColor: 'gray.700' }}\n        _web={{\n          shadow: 2,\n          borderWidth: 0,\n        }}\n        _light={{ backgroundColor: 'gray.50' }}\n      >\n        <Box>\n          <AspectRatio w=\"100%\" ratio={16 / 9}>\n            <Image\n              source={{\n                uri:\n                  'https://www.holidify.com/images/cmsuploads/compressed/Bangalore_citycover_20190613234056.jpg',\n              }}\n              alt=\"image\"\n            />\n          </AspectRatio>\n          <Center\n            bg=\"violet.500\"\n            _dark={{ bg: 'violet.400' }}\n            _text={{ color: 'warmGray.50', fontWeight: '700', fontSize: 'xs' }}\n            position=\"absolute\"\n            bottom=\"0\"\n            px=\"3\"\n            py=\"1.5\"\n          >\n            PHOTOS\n          </Center>\n        </Box>\n        <Stack p=\"4\" space={3}>\n          <Stack space={2}>\n            <Heading size=\"md\" ml=\"-1\">\n              The Garden City\n            </Heading>\n            <Text\n              fontSize=\"xs\"\n              _light={{ color: 'violet.500' }}\n              _dark={{ color: 'violet.400' }}\n              fontWeight=\"500\"\n              ml=\"-0.5\"\n              mt=\"-1\"\n            >\n              The Silicon Valley of India.\n            </Text>\n          </Stack>\n          <Text fontWeight=\"400\">\n            Bengaluru (also called Bangalore) is the center of India's high-tech\n            industry. The city is also known for its parks and nightlife.\n          </Text>\n          <HStack alignItems=\"center\" space={4} justifyContent=\"space-between\">\n            <HStack alignItems=\"center\">\n              <Text\n                color=\"coolGray.600\"\n                _dark={{ color: 'warmGray.200' }}\n                fontWeight=\"400\"\n              >\n                6 mins ago\n              </Text>\n            </HStack>\n          </HStack>\n        </Stack>\n      </Box>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Box/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport { Example as Basic } from './basic';\nimport { Example as LinearGrad } from './LinearGrad';\nimport { Example as WithRef } from './WithRef';\nimport { Example as Composition } from './composition';\n// import { Example as CompositionCard } from './composition-card';\n// import { Example as CompositionCard1 } from './composition-card1';\n// import { Example as CompositionCard2 } from './composition-card2';\n// import { Example as CompositionCard3 } from './composition-card3';\n// import { Example as CompositionShoesCard } from './composition-shoes-card';\nimport Wrapper from './../../Wrapper';\n\nstoriesOf('Box', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic Box', () => <Basic />)\n  .add('LinearGradient Box', () => <LinearGrad />)\n  .add('Composition', () => <Composition />)\n  .add('With Ref', () => <WithRef />);\n// .add('Composition Card', () => <CompositionCard />)\n// .add('Composition Shoes Card', () => <CompositionShoesCard />)\n// .add('CompositionCard1', () => <CompositionCard1 />)\n// .add('CompositionCard2', () => <CompositionCard2 />)\n// .add('CompositionCard3', () => <CompositionCard3 />);\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Button/Composition.tsx",
    "content": "import React from 'react';\nimport { Button } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Button\n      size=\"md\"\n      height=\"48px\"\n      px=\"5\"\n      variant=\"outline\"\n      borderRadius=\"999\"\n      borderWidth=\"2\"\n      mx={{ base: 'auto', md: '0' }}\n    >\n      SHOP NOW\n    </Button>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Button/WithRef.tsx",
    "content": "import React from 'react';\nimport { Button, Box } from 'native-base';\n\nexport const Example = () => {\n  const myRef = React.useRef({});\n\n  React.useEffect(() => {\n    const styleObj = {\n      backgroundColor: '#facc15',\n      borderColor: '#CA8A04',\n      borderWidth: 1,\n      borderRadius: 4,\n    };\n\n    //@ts-ignore\n    myRef?.current?.setNativeProps({ style: styleObj });\n  }, [myRef]);\n  return (\n    <Box alignItems=\"center\">\n      <Button\n        size=\"sm\"\n        variant={'solid'}\n        _text={{ color: '#1F2937' }}\n        ref={myRef}\n        px=\"3\"\n      >\n        Send\n      </Button>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Button/basic.tsx",
    "content": "import React from 'react';\nimport { Button, Box } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Box alignItems=\"center\">\n      <Button onPress={() => console.log('hello world')}>Click Me</Button>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Button/icons.tsx",
    "content": "import React from 'react';\nimport { Button, Stack, Icon } from 'native-base';\nimport { Ionicons } from '@expo/vector-icons';\n\nexport const Example = () => {\n  return (\n    <Stack direction={{ base: 'column', md: 'row' }} space={4}>\n      <Button\n        leftIcon={<Icon as={Ionicons} name=\"cloud-upload-outline\" size=\"sm\" />}\n      >\n        Upload\n      </Button>\n      <Button\n        variant=\"subtle\"\n        endIcon={<Icon as={Ionicons} name=\"cloud-download-outline\" size=\"sm\" />}\n      >\n        Download\n      </Button>\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Button/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport { Example as WithRef } from './WithRef';\nimport { Example as Sizes } from './sizes';\nimport { Example as Basic } from './basic';\nimport { Example as Variants } from './variants';\nimport { Example as Loading } from './loading';\nimport { Example as Icons } from './icons';\nimport { Example as Composition } from './Composition';\nimport Wrapper from './../../Wrapper';\n\nstoriesOf('Button', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />)\n  .add('Variants', () => <Variants />)\n  .add('Sizes', () => <Sizes />)\n  .add('Loading', () => <Loading />)\n  .add('Icons', () => <Icons />)\n  .add('Composition', () => <Composition />)\n  .add('WithRef', () => <WithRef />);\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Button/loading.tsx",
    "content": "import React from 'react';\nimport { Button, Stack } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Stack\n      direction={{ base: 'column', md: 'row' }}\n      space={2}\n      alignItems={{ base: 'center', md: 'flex-start' }}\n    >\n      <Button isLoading>Button</Button>\n      <Button isLoading isLoadingText=\"Submitting\">\n        Button\n      </Button>\n      <Button isLoading spinnerPlacement=\"end\" isLoadingText=\"Submitting\">\n        Button\n      </Button>\n      <Button\n        isLoading\n        _loading={{\n          bg: 'amber.400:alpha.70',\n          _text: { color: 'coolGray.700' },\n        }}\n        _spinner={{ color: 'white' }}\n        isLoadingText=\"Submitting\"\n      >\n        Button\n      </Button>\n      <Button isLoading isLoadingText=\"Submitting\" variant=\"outline\">\n        Button\n      </Button>\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Button/sizes.tsx",
    "content": "import React from 'react';\nimport { Button, VStack } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <VStack space={4} alignItems=\"center\">\n      {['xs', 'sm', 'md', 'lg'].map((size) => (\n        <Button key={size} size={size}>\n          BUTTON\n        </Button>\n      ))}\n    </VStack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Button/variants.tsx",
    "content": "import React from 'react';\nimport {\n  Button,\n  Divider,\n  Heading,\n  VStack,\n  Stack,\n  ScrollView,\n} from 'native-base';\n\nexport const Example = () => {\n  return (\n    <ScrollView showsVerticalScrollIndicator={false} px=\"3\">\n      <VStack\n        w=\"100%\"\n        space={4}\n        px=\"2\"\n        mt=\"4\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n      >\n        {/* Solid */}\n        <Heading size=\"md\">Solid</Heading>\n        <Stack\n          mb=\"2.5\"\n          mt=\"1.5\"\n          direction={{ base: 'column', md: 'row' }}\n          space={2}\n          mx={{ base: 'auto', md: '0' }}\n        >\n          <Button size=\"sm\">PRIMARY</Button>\n          <Button size=\"sm\" colorScheme=\"secondary\">\n            SECONDARY\n          </Button>\n          <Button size=\"sm\" isDisabled>\n            DISABLED\n          </Button>\n        </Stack>\n\n        <Divider w=\"100%\" />\n\n        <Heading size=\"md\">Subtle</Heading>\n\n        {/* Subtle */}\n        <Stack\n          mb=\"2.5\"\n          mt=\"1.5\"\n          direction={{ base: 'column', md: 'row' }}\n          space={2}\n          mx={{ base: 'auto', md: '0' }}\n        >\n          <Button size=\"sm\" variant=\"subtle\">\n            PRIMARY\n          </Button>\n          <Button size=\"sm\" variant=\"subtle\" colorScheme=\"secondary\">\n            SECONDARY\n          </Button>\n          <Button size=\"sm\" variant=\"subtle\" isDisabled>\n            DISABLED\n          </Button>\n        </Stack>\n        <Divider />\n        <Heading size=\"md\">Outline</Heading>\n\n        {/* Outline */}\n        <Stack\n          mb=\"2.5\"\n          mt=\"1.5\"\n          direction={{ base: 'column', md: 'row' }}\n          space={2}\n          mx={{ base: 'auto', md: '0' }}\n        >\n          <Button size=\"sm\" variant=\"outline\">\n            PRIMARY\n          </Button>\n          <Button size=\"sm\" variant=\"outline\" colorScheme=\"secondary\">\n            SECONDARY\n          </Button>\n          <Button size=\"sm\" variant=\"outline\" isDisabled>\n            DISABLED\n          </Button>\n        </Stack>\n        <Divider w=\"100%\" />\n\n        <Heading size=\"md\">Link</Heading>\n\n        {/* Link */}\n        <Stack\n          mb=\"2.5\"\n          mt=\"1.5\"\n          direction={{ base: 'column', md: 'row' }}\n          space={2}\n          mx={{ base: 'auto', md: '0' }}\n        >\n          <Button size=\"sm\" variant=\"link\">\n            PRIMARY\n          </Button>\n          <Button size=\"sm\" variant=\"link\" colorScheme=\"secondary\">\n            SECONDARY\n          </Button>\n          <Button size=\"sm\" variant=\"link\" isDisabled>\n            DISABLED\n          </Button>\n        </Stack>\n        <Divider w=\"100%\" />\n\n        <Heading size=\"md\">Ghost</Heading>\n\n        {/* Ghost */}\n        <Stack\n          mb=\"2.5\"\n          mt=\"1.5\"\n          direction={{ base: 'column', md: 'row' }}\n          space={2}\n          mx={{ base: 'auto', md: '0' }}\n        >\n          <Button size=\"sm\" variant=\"ghost\">\n            PRIMARY\n          </Button>\n          <Button size=\"sm\" variant=\"ghost\" colorScheme=\"secondary\">\n            SECONDARY\n          </Button>\n          <Button size=\"sm\" variant=\"ghost\" isDisabled>\n            DISABLED\n          </Button>\n        </Stack>\n\n        <Divider w=\"100%\" />\n\n        <Heading size=\"md\">Unstyled</Heading>\n\n        {/* Unstyled */}\n        <Stack\n          mb=\"2.5\"\n          mt=\"1.5\"\n          direction={{ base: 'column', md: 'row' }}\n          space={2}\n          mx={{ base: 'auto', md: '0' }}\n        >\n          <Button variant=\"unstyled\">Unstyled</Button>\n        </Stack>\n      </VStack>\n    </ScrollView>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/ButtonGroup/basic.tsx",
    "content": "import React from 'react';\nimport { Button } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Button.Group\n      isAttached\n      colorScheme=\"blue\"\n      mx={{ base: 'auto', md: 0 }}\n      size=\"sm\"\n    >\n      <Button>Edit</Button>\n      <Button variant=\"outline\">Save</Button>\n    </Button.Group>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/ButtonGroup/direction.tsx",
    "content": "import React from 'react';\nimport { Button, Divider, Heading, VStack, Center } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <VStack\n      w={{ base: '50%', md: '25%' }}\n      space={2.5}\n      px=\"2\"\n      alignItems=\"center\"\n    >\n      {/* Row */}\n      <Center w=\"100%\">\n        <Heading mb=\"4\" size=\"md\">\n          Row\n        </Heading>\n        <Button.Group\n          variant=\"solid\"\n          direction=\"row\"\n          mx={{ base: 'auto', md: 0 }}\n        >\n          <Button colorScheme=\"teal\">Save</Button>\n          <Button colorScheme=\"rose\">Cancel</Button>\n        </Button.Group>\n        <Divider mt={5} />\n      </Center>\n\n      {/* Column */}\n      <Center>\n        <Heading mb=\"4\" size=\"md\">\n          Column\n        </Heading>\n        <Button.Group\n          variant=\"solid\"\n          direction=\"column\"\n          mx={{ base: 'auto', md: 0 }}\n        >\n          <Button colorScheme=\"teal\">Save</Button>\n          <Button colorScheme=\"rose\">Cancel</Button>\n        </Button.Group>\n      </Center>\n    </VStack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/ButtonGroup/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport { Example as Sizes } from './sizes';\nimport { Example as Basic } from './basic';\nimport { Example as Variants } from './variants';\nimport { Example as IsAttached } from './isAttached';\nimport { Example as Direction } from './direction';\nimport Wrapper from './../../Wrapper';\n\nstoriesOf('ButtonGroup', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />)\n  .add('Variants', () => <Variants />)\n  .add('Sizes', () => <Sizes />)\n  .add('isAttached', () => <IsAttached />)\n  .add('direction', () => <Direction />);\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/ButtonGroup/isAttached.tsx",
    "content": "import React from 'react';\nimport { Button, VStack, Heading, Divider, ScrollView } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <>\n      <ScrollView>\n        <VStack\n          w=\"100%\"\n          space={2.5}\n          mt=\"4\"\n          alignItems=\"center\"\n          justifyContent=\"center\"\n        >\n          {/* Solid */}\n          <Heading size=\"md\">Solid</Heading>\n          <Button.Group\n            mb=\"2.5\"\n            mt=\"1.5\"\n            isAttached\n            variant=\"solid\"\n            mx={{ base: 'auto', md: 0 }}\n          >\n            <Button colorScheme=\"teal\">Save</Button>\n            <Button colorScheme=\"danger\">Cancel</Button>\n          </Button.Group>\n\n          <Divider />\n\n          {/* Outline */}\n          <Heading size=\"md\">Outline</Heading>\n          <Button.Group\n            mb=\"2.5\"\n            mt=\"1.5\"\n            isAttached\n            variant=\"outline\"\n            mx={{ base: 'auto', md: 0 }}\n          >\n            <Button colorScheme=\"teal\">Save</Button>\n            <Button colorScheme=\"danger\">Cancel</Button>\n          </Button.Group>\n\n          <Divider />\n\n          <Heading size=\"md\">Link</Heading>\n\n          {/* Link */}\n          <Button.Group\n            isAttached\n            mb=\"2.5\"\n            mt=\"1.5\"\n            variant=\"link\"\n            mx={{ base: 'auto', md: 0 }}\n          >\n            <Button colorScheme=\"teal\">Save</Button>\n            <Button colorScheme=\"danger\">Cancel</Button>\n          </Button.Group>\n\n          <Divider />\n\n          <Heading size=\"md\">Ghost</Heading>\n\n          {/* Ghost */}\n          <Button.Group mb=\"2.5\" mt=\"1.5\" variant=\"ghost\">\n            <Button colorScheme=\"teal\">Save</Button>\n            <Button colorScheme=\"danger\">Cancel</Button>\n          </Button.Group>\n\n          <Divider />\n\n          <Heading size=\"md\">Unstyled</Heading>\n\n          {/* Unstyled */}\n\n          <Button.Group\n            isAttached\n            variant=\"unstyled\"\n            mb=\"2.5\"\n            mt=\"1.5\"\n            mx={{ base: 'auto', md: 0 }}\n          >\n            <Button colorScheme=\"teal\">Save</Button>\n            <Button colorScheme=\"danger\">Cancel</Button>\n          </Button.Group>\n        </VStack>\n      </ScrollView>\n    </>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/ButtonGroup/sizes.tsx",
    "content": "import React from 'react';\nimport { Button, Box, Heading, VStack } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <VStack space={4} alignItems=\"center\">\n      <Heading mb=\"10\" size=\"md\">\n        Sizes\n      </Heading>\n      <Button.Group space={3} alignItems=\"center\" direction=\"column\">\n        {['xs', 'sm', 'md', 'lg'].map((size) => (\n          <Box>\n            {/* @ts-ignore */}\n            <Button key={size} size={size}>\n              BUTTON\n            </Button>\n          </Box>\n        ))}\n      </Button.Group>\n    </VStack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/ButtonGroup/variants.tsx",
    "content": "import React from 'react';\nimport { Button, Divider, Heading, VStack, ScrollView } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <ScrollView>\n      <VStack\n        w=\"100%\"\n        space={2.5}\n        mt=\"4\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n      >\n        {/* Solid */}\n        <Heading size=\"md\">Solid</Heading>\n        <Button.Group variant=\"solid\" mb=\"2.5\" mt=\"1.5\">\n          <Button colorScheme=\"teal\">Save</Button>\n          <Button colorScheme=\"danger\">Cancel</Button>\n        </Button.Group>\n\n        <Divider />\n\n        {/* Subtle */}\n        <Heading size=\"md\">Subtle</Heading>\n        <Button.Group mb=\"2.5\" mt=\"1.5\" variant=\"subtle\">\n          <Button colorScheme=\"teal\">Save</Button>\n          <Button colorScheme=\"danger\">Cancel</Button>\n        </Button.Group>\n\n        <Divider />\n\n        {/* Outline */}\n        <Heading size=\"md\">Outline</Heading>\n        <Button.Group mb=\"2.5\" mt=\"1.5\" variant=\"outline\">\n          <Button colorScheme=\"teal\">Save</Button>\n          <Button colorScheme=\"danger\">Cancel</Button>\n        </Button.Group>\n\n        <Divider />\n\n        {/* Link */}\n        <Heading size=\"md\">Link</Heading>\n        <Button.Group mb=\"2.5\" mt=\"1.5\" variant=\"link\">\n          <Button colorScheme=\"teal\">Save</Button>\n          <Button colorScheme=\"danger\">Cancel</Button>\n        </Button.Group>\n\n        <Divider />\n\n        {/* Ghost */}\n        <Heading size=\"md\">Ghost</Heading>\n        <Button.Group mb=\"2.5\" mt=\"1.5\" variant=\"ghost\">\n          <Button colorScheme=\"teal\">Save</Button>\n          <Button colorScheme=\"danger\">Cancel</Button>\n        </Button.Group>\n\n        <Divider />\n\n        {/* Unstyled */}\n        <Heading size=\"md\">Unstyled</Heading>\n        <Button.Group mb=\"2.5\" mt=\"1.5\" variant=\"unstyled\">\n          <Button colorScheme=\"teal\">Save</Button>\n          <Button colorScheme=\"danger\">Cancel</Button>\n        </Button.Group>\n      </VStack>\n    </ScrollView>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Checkbox/FormControlled.tsx",
    "content": "import React from 'react';\nimport {\n  FormControl,\n  Checkbox,\n  Text,\n  Container,\n  WarningOutlineIcon,\n  Box,\n} from 'native-base';\n\nexport const Example = () => {\n  const [groupValue, setGroupValue] = React.useState(['Phone', 'Email']);\n\n  return (\n    <Box alignItems=\"center\">\n      <Container>\n        <FormControl isInvalid>\n          <FormControl.Label _text={{ fontSize: 'lg', bold: true }}>\n            Preferred contact method\n          </FormControl.Label>\n          <Text fontSize=\"md\">Selected Values: </Text>\n          <Checkbox.Group\n            mt=\"2\"\n            colorScheme=\"green\"\n            defaultValue={groupValue}\n            accessibilityLabel=\"choose multiple items\"\n            onChange={(values) => {\n              setGroupValue(values || []);\n            }}\n            alignItems=\"flex-start\"\n          >\n            <Checkbox value=\"Phone\" my=\"1\">\n              Phone\n            </Checkbox>\n            <Checkbox value=\"Email\" my=\"1\">\n              Email\n            </Checkbox>\n            <Checkbox value=\"Message\" my=\"1\">\n              Message\n            </Checkbox>\n            <Checkbox value=\"Fax\" my=\"1\">\n              Fax\n            </Checkbox>\n          </Checkbox.Group>\n          <FormControl.ErrorMessage\n            _stack={{ alignItems: 'flex-start' }}\n            leftIcon={<WarningOutlineIcon size=\"xs\" mt={1} />}\n          >\n            You must select at least three methods\n          </FormControl.ErrorMessage>\n        </FormControl>\n      </Container>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Checkbox/basic.tsx",
    "content": "import React from 'react';\nimport { HStack, Checkbox } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <HStack space={6}>\n      <Checkbox value=\"test\" accessibilityLabel=\"This is a dummy checkbox\" />\n      <Checkbox\n        value=\"test\"\n        accessibilityLabel=\"This is a dummy checkbox\"\n        defaultIsChecked\n      />\n    </HStack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Checkbox/checkboxGroup.tsx",
    "content": "import React from 'react';\nimport { Checkbox, Heading, HStack, VStack, Text, Box } from 'native-base';\n\nexport const Example = () => {\n  const [groupValue, setGroupValue] = React.useState([\n    'Photography',\n    'Gardening',\n  ]);\n\n  return (\n    <Box alignItems=\"center\">\n      <VStack space={2}>\n        <HStack alignItems=\"baseline\">\n          <Heading fontSize=\"lg\">Hobbies</Heading>\n        </HStack>\n        <VStack>\n          <Box>\n            <Text>Selected: ({groupValue.length})</Text>\n          </Box>\n        </VStack>\n        <Checkbox.Group\n          colorScheme=\"green\"\n          defaultValue={groupValue}\n          accessibilityLabel=\"pick an item\"\n          onChange={(values) => {\n            setGroupValue(values || []);\n          }}\n        >\n          <Checkbox value=\"Photography\" my=\"1\">\n            Photography\n          </Checkbox>\n          <Checkbox value=\"Writing\" my=\"1\">\n            Writing\n          </Checkbox>\n          <Checkbox value=\"Gardening\" my=\"1\">\n            Gardening\n          </Checkbox>\n          <Checkbox value=\"Cooking\" my=\"1\">\n            Cooking\n          </Checkbox>\n        </Checkbox.Group>\n      </VStack>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Checkbox/controlledCheckbox.tsx",
    "content": "import React from 'react';\nimport { Checkbox } from 'native-base';\n\nexport const Example = () => {\n  const [groupValues, setGroupValues] = React.useState([]);\n\n  return (\n    <Checkbox.Group\n      onChange={setGroupValues}\n      value={groupValues}\n      accessibilityLabel=\"choose numbers\"\n    >\n      <Checkbox value=\"one\" my={2}>\n        UX Research\n      </Checkbox>\n      <Checkbox value=\"two\">Software Development</Checkbox>\n    </Checkbox.Group>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Checkbox/customColor.tsx",
    "content": "import React from 'react';\nimport { Checkbox, Stack, Box } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Box alignItems=\"center\">\n      <Stack\n        direction={{ base: 'column', md: 'row' }}\n        space={3}\n        alignItems=\"flex-start\"\n      >\n        <Checkbox value=\"danger\" colorScheme=\"danger\" defaultIsChecked>\n          Danger\n        </Checkbox>\n        <Checkbox value=\"info\" colorScheme=\"info\" defaultIsChecked>\n          Info\n        </Checkbox>\n        <Checkbox value=\"orange\" colorScheme=\"orange\" defaultIsChecked>\n          Orange\n        </Checkbox>\n        <Checkbox value=\"purple\" colorScheme=\"purple\" defaultIsChecked>\n          Purple\n        </Checkbox>\n      </Stack>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Checkbox/customIcon.tsx",
    "content": "import React from 'react';\nimport { Checkbox, Stack, Icon, Box } from 'native-base';\nimport { MaterialCommunityIcons } from '@expo/vector-icons';\n\nexport const Example = () => {\n  return (\n    <Box alignItems=\"center\">\n      <Stack\n        direction={{ base: 'column', md: 'row' }}\n        space={3}\n        alignItems=\"flex-start\"\n      >\n        <Checkbox\n          value=\"orange\"\n          colorScheme=\"orange\"\n          size=\"md\"\n          icon={<Icon as={<MaterialCommunityIcons name=\"bullseye\" />} />}\n          defaultIsChecked\n        >\n          Darts\n        </Checkbox>\n        <Checkbox\n          value=\"dark\"\n          colorScheme=\"dark\"\n          size=\"md\"\n          icon={<Icon as={<MaterialCommunityIcons name=\"bat\" />} />}\n          defaultIsChecked\n        >\n          Movie\n        </Checkbox>\n        <Checkbox\n          colorScheme=\"red\"\n          value=\"red\"\n          size=\"md\"\n          icon={<Icon as={<MaterialCommunityIcons name=\"campfire\" />} />}\n          defaultIsChecked\n        >\n          Camping\n        </Checkbox>\n        <Checkbox\n          value=\"blue\"\n          colorScheme=\"blue\"\n          size=\"md\"\n          icon={<Icon as={<MaterialCommunityIcons name=\"chess-knight\" />} />}\n          defaultIsChecked\n        >\n          Chess\n        </Checkbox>\n      </Stack>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Checkbox/disabled.tsx",
    "content": "import React from 'react';\nimport { Checkbox, VStack } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <VStack space={2}>\n      <Checkbox isDisabled value=\"one\">\n        UX Research\n      </Checkbox>\n      <Checkbox isDisabled defaultIsChecked value=\"two\">\n        Software Development\n      </Checkbox>\n    </VStack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Checkbox/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport { Example as Playground } from './playground';\nimport { Example as Disabled } from './disabled';\nimport { Example as Basic } from './basic';\nimport { Example as CustomColor } from './customColor';\nimport { Example as Size } from './size';\nimport { Example as CustomIcon } from './customIcon';\nimport { Example as Invalid } from './invalid';\nimport { Example as WithRef } from './withRef';\nimport { Example as FormControlled } from './FormControlled';\nimport { Example as CheckboxGroup } from './checkboxGroup';\nimport { Example as ControlledCheckbox } from './controlledCheckbox';\nimport { Example as UnControlledCheckbox } from './uncontrolledCheckbox';\n\nstoriesOf('Checkbox', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />)\n  .add('Playground', () => <Playground />)\n  .add('Controlled checkbox', () => <ControlledCheckbox />)\n  .add('Uncontrolled checkbox', () => <UnControlledCheckbox />)\n  .add('Disabled', () => <Disabled />)\n  .add('Invalid', () => <Invalid />)\n  .add('Size', () => <Size />)\n  .add('Custom Color', () => <CustomColor />)\n  .add('Custom Icon', () => <CustomIcon />)\n  .add('Checkbox Group', () => <CheckboxGroup />)\n  .add('Form Controlled', () => <FormControlled />)\n  .add('With Ref', () => <WithRef />);\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Checkbox/invalid.tsx",
    "content": "import React from 'react';\nimport { Checkbox } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Checkbox isInvalid value=\"invalid\">\n      Software Development\n    </Checkbox>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Checkbox/playground.tsx",
    "content": "import React from 'react';\nimport { Checkbox, Box } from 'native-base';\nimport { boolean, select, text } from '@storybook/addon-knobs';\n\nexport const Example = () => {\n  const [toggleCheckBox, setToggleCheckBox] = React.useState(true);\n  const checkboxValue = text('value', 'Cool');\n  return (\n    <Box display=\"flex\" justifyContent=\"space-between\" alignItems=\"center\">\n      <Checkbox\n        colorScheme={text('colorScheme', 'primary')}\n        size={select('size', ['sm', 'md', 'lg'], 'md')}\n        isChecked={toggleCheckBox}\n        isDisabled={boolean('isDisabled', false)}\n        isInvalid={boolean('isInvalid', false)}\n        value={checkboxValue}\n        onChange={() => {\n          setToggleCheckBox(!toggleCheckBox);\n        }}\n      >\n        Yes\n      </Checkbox>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Checkbox/size.tsx",
    "content": "import React from 'react';\nimport { Checkbox, VStack, Center } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Center>\n      <VStack space={3}>\n        <Checkbox value=\"red\" size=\"sm\" defaultIsChecked>\n          UX Research\n        </Checkbox>\n        <Checkbox size=\"md\" defaultIsChecked value=\"green\">\n          UX Research\n        </Checkbox>\n        <Checkbox value=\"yellow\" size=\"lg\" defaultIsChecked>\n          UX Research\n        </Checkbox>\n      </VStack>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Checkbox/uncontrolledCheckbox.tsx",
    "content": "import React from 'react';\nimport { Checkbox } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Checkbox.Group accessibilityLabel=\"choose values\">\n      <Checkbox value=\"one\" my={2}>\n        UX Research\n      </Checkbox>\n      <Checkbox value=\"two\">Software Development</Checkbox>\n    </Checkbox.Group>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Checkbox/withRef.tsx",
    "content": "import React from 'react';\nimport { Checkbox, Icon, Box } from 'native-base';\nimport { MaterialCommunityIcons } from '@expo/vector-icons';\nimport { Platform } from 'react-native';\n\nexport const Example = () => {\n  const myRef = React.useRef();\n  const [bg, setBg] = React.useState('#fa000050');\n  React.useEffect(() => {\n    const styleObj = {\n      backgroundColor: bg,\n    };\n    if (Platform.OS !== 'web') {\n      // @ts-ignore\n      myRef?.current?.setNativeProps({\n        style: styleObj,\n      });\n    } else {\n      // @ts-ignore\n      myRef?.current?.setNativeProps({ style: styleObj });\n    }\n  }, [myRef, bg]);\n  return (\n    <Box alignItems=\"flex-start\">\n      <Checkbox\n        value=\"success\"\n        colorScheme=\"success\"\n        icon={<Icon as={MaterialCommunityIcons} name=\"bullseye\" opacity={1} />}\n        wrapperRef={myRef}\n        onChange={(state) => {\n          if (state) {\n            setBg('#00de0050');\n          } else {\n            setBg('#fa000050');\n          }\n        }}\n      >\n        Archery\n      </Checkbox>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Column/Basic.tsx",
    "content": "import React from 'react';\nimport { Column, Box } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Column>\n      <Box h=\"100px\" w=\"100px\" bg=\"green.500\" />\n      <Box h=\"100px\" w=\"100px\" bg=\"blue.300\" />\n      <Box h=\"100px\" w=\"100px\" bg=\"tomato\" />\n    </Column>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Column/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport { Example as Basic } from './Basic';\nimport Wrapper from './../../Wrapper';\n\nstoriesOf('Column', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />);\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Flex/basic.tsx",
    "content": "import React from 'react';\nimport {\n  Flex,\n  Center,\n  Heading,\n  ScrollView,\n  VStack,\n  Divider,\n  Box,\n} from 'native-base';\n\nexport function Example() {\n  return (\n    <Box flex=\"1\" safeAreaTop>\n      <ScrollView>\n        <VStack alignItems=\"start\" space={2.5} w=\"100%\" px=\"3\">\n          {/* flexDirection -> row */}\n          <Heading size=\"md\">row</Heading>\n          <Flex direction=\"row\" mb=\"2.5\" mt=\"1.5\">\n            <Center\n              size=\"16\"\n              bg=\"primary.100\"\n              _text={{\n                color: 'coolGray.800',\n              }}\n            >\n              100\n            </Center>\n            <Center\n              size=\"16\"\n              bg=\"primary.200\"\n              _text={{\n                color: 'coolGray.800',\n              }}\n            >\n              200\n            </Center>\n            <Center\n              bg=\"primary.300\"\n              size=\"16\"\n              _text={{\n                color: 'coolGray.800',\n              }}\n            >\n              300\n            </Center>\n            <Center\n              size=\"16\"\n              bg=\"primary.400\"\n              _text={{\n                color: 'coolGray.800',\n              }}\n            >\n              400\n            </Center>\n          </Flex>\n          <Divider />\n          {/* flexDirection -> column */}\n          <Heading size=\"md\">column</Heading>\n\n          <Flex direction=\"column\" mb=\"2.5\" mt=\"1.5\">\n            <Center\n              size=\"16\"\n              bg=\"primary.100\"\n              _text={{\n                color: 'coolGray.800',\n              }}\n            >\n              100\n            </Center>\n            <Center\n              size=\"16\"\n              bg=\"primary.200\"\n              _text={{\n                color: 'coolGray.800',\n              }}\n            >\n              200\n            </Center>\n            <Center\n              bg=\"primary.300\"\n              size=\"16\"\n              _text={{\n                color: 'coolGray.800',\n              }}\n            >\n              300\n            </Center>\n            <Center\n              size=\"16\"\n              bg=\"primary.400\"\n              _text={{\n                color: 'coolGray.800',\n              }}\n            >\n              400\n            </Center>\n          </Flex>\n          <Divider />\n          {/* flexDirection -> row-reverse */}\n          <Heading size=\"md\">row-reverse</Heading>\n          <Flex direction=\"row-reverse\" mb=\"2.5\" mt=\"1.5\">\n            <Center\n              size=\"16\"\n              bg=\"primary.100\"\n              _text={{\n                color: 'coolGray.800',\n              }}\n            >\n              100\n            </Center>\n            <Center\n              size=\"16\"\n              bg=\"primary.200\"\n              _text={{\n                color: 'coolGray.800',\n              }}\n            >\n              200\n            </Center>\n            <Center\n              bg=\"primary.300\"\n              size=\"16\"\n              _text={{\n                color: 'coolGray.800',\n              }}\n            >\n              300\n            </Center>\n            <Center\n              size=\"16\"\n              bg=\"primary.400\"\n              _text={{\n                color: 'coolGray.800',\n              }}\n            >\n              400\n            </Center>\n          </Flex>\n          <Divider />\n          {/* flexDirection -> column-reverse */}\n          <Heading size=\"md\">column-reverse</Heading>\n          <Flex direction=\"column-reverse\" mb=\"2.5\" mt=\"1.5\">\n            <Center\n              size=\"16\"\n              bg=\"primary.100\"\n              _text={{\n                color: 'coolGray.800',\n              }}\n            >\n              100\n            </Center>\n            <Center\n              size=\"16\"\n              bg=\"primary.200\"\n              _text={{\n                color: 'coolGray.800',\n              }}\n            >\n              200\n            </Center>\n            <Center\n              bg=\"primary.300\"\n              size=\"16\"\n              _text={{\n                color: 'coolGray.800',\n              }}\n            >\n              300\n            </Center>\n            <Center\n              size=\"16\"\n              bg=\"primary.400\"\n              _text={{\n                color: 'coolGray.800',\n              }}\n            >\n              400\n            </Center>\n          </Flex>\n          <Divider />\n        </VStack>\n      </ScrollView>\n    </Box>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Flex/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport { Example as Flex } from './basic';\nimport { Example as SpacerExample } from './spacer';\nimport Wrapper from './../../Wrapper';\n\nstoriesOf('Flex', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic Usage', () => <Flex />)\n  .add('Spacer Example', () => <SpacerExample />);\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Flex/spacer.tsx",
    "content": "import React from 'react';\nimport { Flex, Spacer, Center } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Flex h={40} alignItems=\"center\">\n      <Center\n        size={16}\n        bg=\"primary.500\"\n        _dark={{ bg: 'primary.400' }}\n        rounded=\"sm\"\n        _text={{\n          color: 'warmGray.50',\n          fontWeight: 'medium',\n        }}\n      >\n        Box 1\n      </Center>\n      <Spacer />\n      <Center\n        size={16}\n        bg=\"secondary.500\"\n        _dark={{ bg: 'secondary.400' }}\n        rounded=\"sm\"\n        _text={{\n          color: 'warmGray.50',\n          fontWeight: 'medium',\n        }}\n      >\n        Box 2\n      </Center>\n    </Flex>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/HStack/basic.tsx",
    "content": "import React from 'react';\nimport { HStack, Center } from 'native-base';\n\nexport function Example() {\n  return (\n    <HStack space={3} justifyContent=\"center\">\n      <Center h=\"40\" w=\"20\" bg=\"primary.300\" rounded=\"md\" shadow={3} />\n      <Center h=\"40\" w=\"20\" bg=\"primary.500\" rounded=\"md\" shadow={3} />\n      <Center h=\"40\" w=\"20\" bg=\"primary.700\" rounded=\"md\" shadow={3} />\n    </HStack>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/HStack/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport { Example } from './basic';\nimport Wrapper from './../../Wrapper';\n\nstoriesOf('HStack', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Example />);\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Heading/Basic.tsx",
    "content": "import React from 'react';\nimport { Heading } from 'native-base';\n\nexport function Example() {\n  return <Heading>I'm a Heading</Heading>;\n}\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Heading/Composition.tsx",
    "content": "import React from 'react';\nimport { Box, Text, Heading } from 'native-base';\n\nexport function Example() {\n  return (\n    <Box>\n      <Heading size=\"xl\" mb=\"4\">\n        Heading\n      </Heading>\n      <Text fontSize=\"xl\">\n        Headings are used for rendering headlines. Heading composes Text so you\n        can use all the style props.\n      </Text>\n    </Box>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Heading/OverridenStyle.tsx",
    "content": "import React from 'react';\nimport { Heading } from 'native-base';\n\nexport function Example() {\n  return (\n    <Heading size=\"lg\" fontSize={50} bold>\n      How are you?\n    </Heading>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Heading/Sizes.tsx",
    "content": "import React from 'react';\nimport { Heading, VStack } from 'native-base';\n\nexport function Example() {\n  return (\n    <VStack space={1} alignItems=\"center\">\n      <Heading size=\"xs\">xs</Heading>\n      <Heading size=\"sm\">sm</Heading>\n      <Heading size=\"md\">md</Heading>\n      <Heading size=\"lg\">lg</Heading>\n      <Heading size=\"xl\">xl</Heading>\n      <Heading size=\"2xl\">2xl</Heading>\n      <Heading size=\"3xl\">3xl</Heading>\n      <Heading size=\"4xl\">4xl</Heading>\n    </VStack>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Heading/Truncate.tsx",
    "content": "import React from 'react';\nimport { Heading } from 'native-base';\n\nexport function Example() {\n  return (\n    <Heading isTruncated>\n      NativeBase is a simple, modular and accessible component library that\n      gives you building blocks to build you React applications.\n    </Heading>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Heading/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport { Example as Basic } from './Basic';\nimport { Example as Sizes } from './Sizes';\nimport { Example as Truncate } from './Truncate';\nimport { Example as OverridenStyle } from './OverridenStyle';\nimport { Example as Composition } from './Composition';\n\nstoriesOf('Heading', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />)\n  .add('Sizes', () => <Sizes />)\n  .add('Truncate', () => <Truncate />)\n  .add('OverridenStyle', () => <OverridenStyle />)\n  .add('Composition', () => <Composition />);\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Hidden/basic.tsx",
    "content": "import React from 'react';\nimport { Hidden, Text, Stack, Box } from 'native-base';\n\nexport function Example() {\n  return (\n    <Stack>\n      <Box bg=\"orange.300\" p={2}>\n        <Text>This text will be always visible.</Text>\n      </Box>\n      <Hidden>\n        <Box bg=\"red.400\" p={2}>\n          <Text>This text will be always hidden.</Text>\n        </Box>\n      </Hidden>\n    </Stack>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Hidden/hiddenFromAndToBreakpoints.tsx",
    "content": "import React from 'react';\nimport { Hidden, Text, Stack, Box } from 'native-base';\n\nexport function Example() {\n  return (\n    <Stack>\n      <Box bg=\"orange.300\" p={2}>\n        <Text>This text will be always visible.</Text>\n      </Box>\n      <Hidden from=\"sm\" till=\"lg\">\n        <Box bg=\"red.400\" p={2}>\n          <Text>This text will be hidden from sm to lg screens.</Text>\n        </Box>\n      </Hidden>\n      <Hidden from=\"sm\">\n        <Box bg=\"blue.400\" p={2}>\n          <Text>This will be hidden from sm to all screen sizes.</Text>\n        </Box>\n      </Hidden>\n    </Stack>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Hidden/hiddenOnColorModes.tsx",
    "content": "import React from 'react';\nimport { Hidden, Button, Image, useColorMode, Center } from 'native-base';\n\nexport const Example = () => {\n  const { toggleColorMode } = useColorMode();\n  return (\n    <Center>\n      <Button\n        colorScheme=\"coolGray\"\n        _light={{ _text: { color: 'white' } }}\n        onPress={() => {\n          toggleColorMode();\n        }}\n      >\n        Change mode\n      </Button>\n      <Hidden colorMode=\"dark\">\n        <Center mt=\"5\">\n          <Image\n            w=\"150\"\n            h=\"150\"\n            source={{\n              uri:\n                'https://images.unsplash.com/photo-1561566482-5fa7e82d88b7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1471&q=80',\n            }}\n            alt=\"image\"\n          />\n        </Center>\n      </Hidden>\n      <Hidden colorMode=\"light\">\n        <Center mt=\"5\">\n          <Image\n            w=\"150\"\n            h=\"150\"\n            source={{\n              uri:\n                'https://images.unsplash.com/photo-1590083948603-b270aff24cc1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80',\n            }}\n            alt=\"image\"\n          />\n        </Center>\n      </Hidden>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Hidden/hiddenOnPlatforms.tsx",
    "content": "import React from 'react';\nimport { Hidden, Text, Stack, Box } from 'native-base';\n\nexport function Example() {\n  return (\n    <Stack>\n      <Box bg=\"orange.300\" p={2}>\n        <Text>This text will be visible on every platform.</Text>\n      </Box>\n      <Hidden platform={['android', 'web']}>\n        <Box bg=\"red.400\" p={2}>\n          <Text>This text will be hidden on android and web.</Text>\n        </Box>\n      </Hidden>\n    </Stack>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Hidden/hiddenOnlyOnBreakPoints.tsx",
    "content": "import React from 'react';\nimport { Hidden, Text, Stack, Box } from 'native-base';\n\nexport function Example() {\n  return (\n    <Stack>\n      <Box bg=\"orange.300\" p={2}>\n        <Text>This text will be visible on every screen size.</Text>\n      </Box>\n      <Hidden only={['sm', 'lg']}>\n        <Box bg=\"red.400\" p={2}>\n          <Text>This text will be hidden on sm and lg only.</Text>\n        </Box>\n      </Hidden>\n    </Stack>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Hidden/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport { Example as Basic } from './basic';\nimport { Example as HiddenFromAndToBreakpoints } from './hiddenFromAndToBreakpoints';\nimport { Example as HiddenOnColorModes } from './hiddenOnColorModes';\nimport { Example as HiddenOnlyOnBreakPoints } from './hiddenOnlyOnBreakPoints';\nimport { Example as HiddenOnPlatforms } from './hiddenOnPlatforms';\n\nstoriesOf('Hidden', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />)\n  .add('HiddenOnColorModes', () => <HiddenOnColorModes />)\n  .add('HiddenFromAndToBreakpoints', () => <HiddenFromAndToBreakpoints />)\n  .add('HiddenOnlyOnBreakPoints', () => <HiddenOnlyOnBreakPoints />)\n  .add('HiddenOnPlatforms', () => <HiddenOnPlatforms />);\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Icon/AllIcons.tsx",
    "content": "import React from 'react';\nimport {\n  Box,\n  Text,\n  MoonIcon,\n  SunIcon,\n  CheckIcon,\n  CircleIcon,\n  ArrowBackIcon,\n  AddIcon,\n  ArrowForwardIcon,\n  ArrowUpIcon,\n  ArrowDownIcon,\n  CheckCircleIcon,\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n  CloseIcon,\n  SmallCloseIcon,\n  HamburgerIcon,\n  InfoIcon,\n  InfoOutlineIcon,\n  MinusIcon,\n  QuestionIcon,\n  QuestionOutlineIcon,\n  SearchIcon,\n  WarningIcon,\n  WarningTwoIcon,\n  ThreeDotsIcon,\n  WarningOutlineIcon,\n  ShareIcon,\n  PlayIcon,\n  FavouriteIcon,\n  DeleteIcon,\n  VStack,\n  FlatList,\n  useBreakpointValue,\n} from 'native-base';\nexport const Example = () => {\n  const cols = useBreakpointValue({\n    base: 3,\n    sm: 4,\n    md: 8,\n  });\n  const icons = [\n    {\n      icon: <AddIcon />,\n      iconName: 'add',\n    },\n    {\n      icon: <ArrowBackIcon />,\n      iconName: 'arrow-back',\n    },\n    {\n      icon: <ArrowForwardIcon />,\n      iconName: 'arrow-forward',\n    },\n    {\n      icon: <ArrowUpIcon />,\n      iconName: 'arrow-up',\n    },\n    {\n      icon: <ArrowDownIcon />,\n      iconName: 'arrow-down',\n    },\n    {\n      icon: <CheckIcon />,\n      iconName: 'check',\n    },\n    {\n      icon: <CheckCircleIcon />,\n      iconName: 'check-circle',\n    },\n    {\n      icon: <ChevronDownIcon />,\n      iconName: 'chevron-down',\n    },\n    {\n      icon: <ChevronLeftIcon />,\n      iconName: 'chevron-left',\n    },\n    {\n      icon: <ChevronRightIcon />,\n      iconName: 'chevron-right',\n    },\n    {\n      icon: <ChevronUpIcon />,\n      iconName: 'chevron-up',\n    },\n    {\n      icon: <CircleIcon />,\n      iconName: 'circle',\n    },\n    {\n      icon: <CloseIcon />,\n      iconName: 'close',\n    },\n    {\n      icon: <SmallCloseIcon />,\n      iconName: 'small-close',\n    },\n    {\n      icon: <HamburgerIcon />,\n      iconName: 'menu',\n    },\n    {\n      icon: <InfoIcon />,\n      iconName: 'info',\n    },\n    {\n      icon: <InfoOutlineIcon />,\n      iconName: 'info-outline',\n    },\n    {\n      icon: <MinusIcon />,\n      iconName: 'minus',\n    },\n    {\n      icon: <MoonIcon />,\n      iconName: 'moon',\n    },\n    {\n      icon: <QuestionIcon />,\n      iconName: 'question',\n    },\n    {\n      icon: <QuestionOutlineIcon />,\n      iconName: 'question-outline',\n    },\n    {\n      icon: <SearchIcon />,\n      iconName: 'search',\n    },\n    {\n      icon: <SunIcon />,\n      iconName: 'sun',\n    },\n    {\n      icon: <WarningIcon />,\n      iconName: 'warning-1',\n    },\n    {\n      icon: <WarningTwoIcon />,\n      iconName: 'warning-2',\n    },\n    {\n      icon: <WarningOutlineIcon />,\n      iconName: 'warning-outline',\n    },\n    {\n      icon: <ThreeDotsIcon />,\n      iconName: 'three-dots',\n    },\n    {\n      icon: <ShareIcon />,\n      iconName: 'share',\n    },\n    {\n      icon: <PlayIcon />,\n      iconName: 'play',\n    },\n    {\n      icon: <FavouriteIcon />,\n      iconName: 'favourite',\n    },\n    {\n      icon: <DeleteIcon />,\n      iconName: 'delete',\n    },\n  ];\n  return (\n    <Box w=\"100%\">\n      <FlatList\n        data={icons}\n        renderItem={({ item }) => (\n          <VStack\n            py=\"2\"\n            flex={1}\n            space={2}\n            my={3}\n            mx={2}\n            boxSize=\"76\"\n            alignItems=\"center\"\n          >\n            <Box _text={{ textAlign: 'center' }}>{item.icon}</Box>\n            <Text textAlign=\"center\">{item.iconName}</Text>\n          </VStack>\n        )}\n        keyExtractor={(item) => item.iconName}\n        numColumns={cols}\n      />\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Icon/Basic.tsx",
    "content": "import React from 'react';\nimport { CheckIcon, HStack, Text } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <HStack space={2}>\n      <CheckIcon size=\"5\" mt=\"0.5\" color=\"emerald.500\" />\n      <Text color=\"emerald.500\" fontSize=\"md\">\n        Order Placed Successfully\n      </Text>\n    </HStack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Icon/CreateIcon.tsx",
    "content": "import React from 'react';\nimport { createIcon } from 'native-base';\nimport { Circle as CircleSvg } from 'react-native-svg';\nexport const Example = () => {\n  const CustomIcon = createIcon({\n    viewBox: '0 0 36 36',\n    // d: 'M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0',\n    path: [\n      <CircleSvg cx=\"18\" cy=\"18\" r=\"17.5\" fill=\"#06B6D4\" stroke=\"#0E7490\" />,\n      <CircleSvg cx=\"18\" cy=\"18\" r=\"13.5\" fill=\"white\" stroke=\"#0E7490\" />,\n      <CircleSvg cx=\"18\" cy=\"18\" r=\"9.5\" fill=\"#06B6D4\" stroke=\"#0E7490\" />,\n      <CircleSvg cx=\"18\" cy=\"18\" r=\"5.5\" fill=\"white\" stroke=\"#0E7490\" />,\n    ],\n  });\n  return <CustomIcon size={12} />;\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Icon/CustomIcon.tsx",
    "content": "import React from 'react';\nimport { Icon, Center } from 'native-base';\nimport { Path, G } from 'react-native-svg';\nexport const Example = () => {\n  return (\n    <Center>\n      <Icon size=\"4xl\" viewBox=\"0 0 870 873\">\n        <G fillRule=\"nonzero\" stroke=\"none\" strokeWidth={1} fill=\"none\">\n          <Path\n            d=\"M435 .1C194.8.1.1 194.8.1 435c0 187.3 118.4 346.9 284.4 408.1 3.3-29.9 15-57.2 32.7-79.6 12.1-15.4 26.9-28.5 43.9-38.4 2.1-5 4.6-10.6 7.1-16.6-50.3-26-84.7-78.1-84.7-138.6 0-51.7 25.3-97.7 64-125.9-10.9-20.6-21.3-40.2-31.8-58.2-18.1-31.5-46.7-59.7-68.4-78.9-21 11.9-47.8 4.7-59.7-16.3-11.9-21-4.7-47.8 16.3-59.7 21-11.9 47.4-4.7 59.7 15.9v.4c7.2 12.7 7.2 27.5 1.8 39.8 22.8 19.5 56.8 52.5 77.8 89 9.8 17 19.5 34.7 29.3 53.5 20.3-9.4 42.7-14.8 66.2-14.8 21.3 0 41.6 4.3 60.1 11.9 9.8-18.5 19.5-36.2 28.9-52.8 21-36.2 54.6-68.7 77.4-88.3-5.4-12.3-5.4-26.8 1.8-39.4v-.4c12.3-20.6 38.7-27.9 59.3-15.9 21 11.9 28.2 38.7 16.3 59.3-11.9 21-38.4 28.2-59.3 16.3-21.7 18.8-49.9 47.4-68 78.5-10.1 17.4-20.3 36.5-30.8 56.4 42 27.9 69.8 75.3 69.8 129.5 0 63-36.9 116.9-90.4 141.5.9 2.7 2 4.9 3 7.2 47 22.3 81.1 67.4 87.9 121.1C755.9 776 869.9 618.8 869.9 435 869.9 194.8 675.2.1 435 .1z\"\n            fill=\"#CA0000\"\n          />\n          <Path\n            d=\"M284.8 843.3h.1-.1zM284.8 843.3c-.1 0-.3-.1-.4-.1.2 0 .3 0 .4.1z\"\n            fill=\"#FFF\"\n          />\n          <G fill=\"#FFF\" stroke=\"#FFF\" strokeWidth={5}>\n            <Path\n              d=\"M485.2 5.8c-20.6-11.9-47-4.7-59.3 15.9v.4c-7.2 12.7-7.2 27.1-1.8 39.4-22.8 19.5-56.4 52.1-77.4 88.3-9.4 16.6-19.2 34.4-28.9 52.8-18.5-7.6-38.7-11.9-60.1-11.9-23.5 0-45.9 5.4-66.2 14.8-9.8-18.8-19.5-36.5-29.3-53.5-21-36.5-55-69.5-77.8-89 5.4-12.3 5.4-27.1-1.8-39.8v-.4C70.3 2.2 43.9-5.1 22.9 6.9 1.9 18.8-5.3 45.6 6.6 66.6c11.9 21 38.7 28.2 59.7 16.3 21.7 19.2 50.3 47.4 68.4 78.9 10.5 18.1 21 37.6 31.8 58.2-38.7 28.2-64 74.2-64 125.9 0 60.4 34.4 112.5 84.7 138.6-2.5 6.2-5.1 11.9-7.2 17-41.6 24.4-70.8 67.4-76.4 117.6 46.9 17.3 97.6 26.8 150.6 26.8 56.2 0 109.9-10.7 159.2-30.1-7.1-52.8-40.5-97.3-86.8-119.8-1.1-2.9-2.5-5.4-3.6-8.7 53.5-24.6 90.4-78.5 90.4-141.5 0-54.3-27.9-101.7-69.8-129.5 10.5-19.9 20.6-39.1 30.8-56.4 18.1-31.1 46.3-59.7 68-78.5 21 11.9 47.4 4.7 59.3-16.3 11.7-20.5 4.5-47.3-16.5-59.3z\"\n              transform=\"translate(181 224)\"\n            />\n          </G>\n        </G>\n      </Icon>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Icon/Sizes.tsx",
    "content": "import React from 'react';\nimport { Icon, Heading, Center, VStack } from 'native-base';\nimport { Ionicons } from '@expo/vector-icons';\n\nexport const Example = () => {\n  const sizes = ['10', '50px', '2xl'];\n  return (\n    <Center>\n      <Heading mb=\"10\">Sizes</Heading>\n      <VStack space={4} justifyContent=\"center\">\n        {sizes.map((size) => (\n          <Icon\n            as={Ionicons}\n            name=\"md-checkmark-circle\"\n            alignSelf=\"center\"\n            size={size}\n          />\n        ))}\n      </VStack>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Icon/ThirdPartyIcons.tsx",
    "content": "import React from 'react';\nimport { Icon, Center, HStack } from 'native-base';\nimport { MaterialCommunityIcons, AntDesign, Entypo } from '@expo/vector-icons';\n\nexport const Example = () => {\n  return (\n    <Center>\n      <HStack space={3}>\n        <Icon\n          as={AntDesign}\n          name=\"android1\"\n          color=\"coolGray.800\"\n          _dark={{ color: 'warmGray.50' }}\n        />\n        <Icon\n          as={Entypo}\n          name=\"app-store\"\n          color=\"coolGray.800\"\n          _dark={{ color: 'warmGray.50' }}\n        />\n        <Icon\n          as={MaterialCommunityIcons}\n          name=\"web\"\n          color=\"coolGray.800\"\n          _dark={{ color: 'warmGray.50' }}\n        />\n      </HStack>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Icon/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport { Example as Basic } from './Basic';\nimport { Example as Sizes } from './Sizes';\nimport { Example as AllIcons } from './AllIcons';\nimport { Example as CustomIcon } from './CustomIcon';\nimport { Example as CreateIcon } from './CreateIcon';\nimport { Example as ThirdPartyIcons } from './ThirdPartyIcons';\n\nstoriesOf('Icon', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('All Icons', () => <AllIcons />)\n  .add('Basic', () => <Basic />)\n  .add('Sizes', () => <Sizes />)\n  .add('CustomIcon', () => <CustomIcon />)\n  .add('CreateIcon', () => <CreateIcon />)\n  .add('Integration with Third Party Icons', () => <ThirdPartyIcons />);\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Image/Basic.tsx",
    "content": "import React from 'react';\nimport { Center, Image } from 'native-base';\nexport function Example() {\n  return (\n    <Center>\n      <Image\n        source={{\n          uri: 'https://wallpaperaccess.com/full/317501.jpg',\n        }}\n        alt=\"Alternate Text\"\n        size=\"xl\"\n      />\n    </Center>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Image/BorderRadius.tsx",
    "content": "import React from 'react';\nimport { Image, Center } from 'native-base';\nexport function Example() {\n  return (\n    <Center>\n      <Image\n        size={150}\n        borderRadius={100}\n        source={{\n          uri: 'https://wallpaperaccess.com/full/317501.jpg',\n        }}\n        alt=\"Alternate Text\"\n      />\n    </Center>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Image/FallbackElement.tsx",
    "content": "import React from 'react';\nimport { Image, Box, Center } from 'native-base';\nexport function Example() {\n  return (\n    <Center>\n      <Image\n        size={150}\n        alt=\"fallback text\"\n        borderRadius={2}\n        src=\"https://cdn.pixaba.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg\"\n        fallbackElement={\n          <Box boxSize={20} bg=\"red.100\">\n            This is a box\n          </Box>\n        }\n      />\n    </Center>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Image/FallbackSupport.tsx",
    "content": "import React from 'react';\nimport { Image, Center } from 'native-base';\nexport function Example() {\n  return (\n    <Center>\n      <Image\n        size={150}\n        alt=\"fallback text\"\n        borderRadius={100}\n        source={{\n          uri: 'https://-page-icon.png',\n        }}\n        fallbackSource={{\n          uri: 'https://www.w3schools.com/css/img_lights.jpg',\n        }}\n      />\n    </Center>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Image/Sizes.tsx",
    "content": "import React from 'react';\nimport { VStack, Image, ScrollView, Heading } from 'native-base';\n\nexport function Example() {\n  return (\n    <>\n      <Heading mb=\"10\" textAlign=\"center\" mt=\"3\">\n        Image Sizes\n      </Heading>\n      <ScrollView>\n        {/* <Center mt=\"3\" h=\"80\"> */}\n\n        <VStack\n          space={2}\n          justifyContent=\"center\"\n          alignItems=\"center\"\n          safeAreaTop\n          // my={6}\n          mb={6}\n        >\n          {['xs', 'sm', 'md', 'lg', 'xl', '2xl'].map((size) => (\n            <Image\n              key={size}\n              size={size}\n              resizeMode=\"cover\"\n              source={{\n                uri: 'https://wallpaperaccess.com/full/317501.jpg',\n              }}\n              alt={'Alternate Text ' + size}\n            />\n          ))}\n        </VStack>\n        {/* </Center> */}\n      </ScrollView>\n    </>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Image/WithRef.tsx",
    "content": "//@ts-nocheck\nimport React from 'react';\nimport { Center, Image } from 'native-base';\n\nexport function Example() {\n  const myRef = React.useRef(null);\n\n  React.useEffect(() => {\n    if (myRef.current && myRef.current.setNativeProps) {\n      const styleObj = {\n        borderWidth: 4,\n        borderRadius: 4,\n        borderColor: '#22D3EE',\n      };\n      myRef?.current?.setNativeProps({\n        style: styleObj,\n      });\n    }\n  }, [myRef]);\n\n  return (\n    <Center>\n      <Image\n        ref={myRef}\n        source={{\n          uri: 'https://wallpaperaccess.com/full/317501.jpg',\n        }}\n        alt=\"Alternate Text\"\n        size=\"xl\"\n      />\n    </Center>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Image/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport { Example as Basic } from './Basic';\nimport { Example as Sizes } from './Sizes';\nimport { Example as BorderRadius } from './BorderRadius';\nimport { Example as WithRef } from './WithRef';\nimport { Example as FallbackSupport } from './FallbackSupport';\nimport { Example as FallbackElement } from './FallbackElement';\n\nstoriesOf('Image', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />)\n  .add('Sizes', () => <Sizes />)\n  .add('BorderRadius', () => <BorderRadius />)\n  .add('FallbackSupport', () => <FallbackSupport />)\n  .add('FallbackElement', () => <FallbackElement />)\n  .add('WithRef', () => <WithRef />);\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Input/Addons.tsx",
    "content": "import React from 'react';\n\nimport {\n  Input,\n  InputGroup,\n  InputLeftAddon,\n  InputRightAddon,\n  Stack,\n} from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Stack>\n      <InputGroup w={{ base: '70%', md: '285' }} justifyContent=\"center\">\n        <InputLeftAddon children={'https://'} />\n        <Input w={{ base: '70%', md: '100%' }} placeholder=\"nativebase\" />\n        <InputRightAddon children={'.io'} />\n      </InputGroup>\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Input/Basic.tsx",
    "content": "import React from 'react';\nimport { Input, Box } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Box alignItems=\"center\">\n      <Input mx=\"3\" placeholder=\"Input\" w=\"100%\" />\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Input/Controlled.tsx",
    "content": "import React from 'react';\nimport { Input, Box } from 'native-base';\n\nexport const Example = () => {\n  const [value, setValue] = React.useState('');\n  const handleChange = (text: string) => setValue(text);\n  return (\n    <Box alignItems=\"center\">\n      <Input\n        value={value}\n        w=\"100%\"\n        onChangeText={handleChange}\n        placeholder=\"Value Controlled Input\"\n      />\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Input/Elements.tsx",
    "content": "import React from 'react';\nimport { Input, Icon, Stack, Pressable } from 'native-base';\nimport { MaterialIcons } from '@expo/vector-icons';\n\nexport const Example = () => {\n  const [show, setShow] = React.useState(false);\n  return (\n    <Stack space={4} w=\"100%\" alignItems=\"center\">\n      <Input\n        w={{ base: '75%', md: '25%' }}\n        InputLeftElement={\n          <Icon\n            as={<MaterialIcons name=\"person\" />}\n            size={5}\n            ml=\"2\"\n            color=\"muted.400\"\n          />\n        }\n        placeholder=\"Name\"\n      />\n      <Input\n        w={{ base: '75%', md: '25%' }}\n        type={show ? 'text' : 'password'}\n        InputRightElement={\n          <Pressable onPress={() => setShow(!show)}>\n            <Icon\n              as={\n                <MaterialIcons name={show ? 'visibility' : 'visibility-off'} />\n              }\n              size={5}\n              mr=\"2\"\n              color=\"muted.400\"\n            />\n          </Pressable>\n        }\n        placeholder=\"Password\"\n      />\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Input/FormControlled.tsx",
    "content": "import React from 'react';\nimport { Input, FormControl, WarningOutlineIcon, Box } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Box alignItems=\"center\">\n      <FormControl isInvalid w=\"75%\" maxW=\"300px\">\n        <FormControl.Label>Password</FormControl.Label>\n        <Input placeholder=\"Enter password\" />\n        <FormControl.ErrorMessage leftIcon={<WarningOutlineIcon size=\"xs\" />}>\n          Try different from previous passwords.\n        </FormControl.ErrorMessage>\n      </FormControl>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Input/Masked.tsx",
    "content": "import React from 'react';\nimport { Input, Button, Box } from 'native-base';\n\nexport const Example = () => {\n  const [show, setShow] = React.useState(false);\n  const handleClick = () => setShow(!show);\n\n  return (\n    <Box alignItems=\"center\">\n      <Input\n        type={show ? 'text' : 'password'}\n        w=\"100%\"\n        py=\"0\"\n        InputRightElement={\n          <Button\n            size=\"xs\"\n            rounded=\"none\"\n            w=\"1/6\"\n            h=\"full\"\n            onPress={handleClick}\n          >\n            {show ? 'Hide' : 'Show'}\n          </Button>\n        }\n        placeholder=\"Password\"\n      />\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Input/Size.tsx",
    "content": "import React from 'react';\nimport { Input, Stack } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Stack space={4} w=\"75%\" maxW=\"300px\" mx=\"auto\">\n      <Input size=\"xs\" placeholder=\"xs Input\" />\n      <Input size=\"sm\" placeholder=\"sm Input\" />\n      <Input size=\"md\" placeholder=\"md Input\" />\n      <Input size=\"lg\" placeholder=\"lg Input\" />\n      <Input size=\"xl\" placeholder=\"xl Input\" />\n      <Input size=\"2xl\" placeholder=\"2xl Input\" />\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Input/Variant.tsx",
    "content": "import React from 'react';\nimport { Input, Stack } from 'native-base';\nexport const Example = () => {\n  return (\n    <Stack space={4} w=\"75%\" maxW=\"300px\" mx=\"auto\">\n      <Input variant=\"outline\" placeholder=\"Outline\" />\n      <Input variant=\"filled\" placeholder=\"Filled\" />\n      <Input variant=\"underlined\" placeholder=\"Underlined\" />\n      <Input variant=\"unstyled\" placeholder=\"Unstyled\" />\n      <Input variant=\"rounded\" placeholder=\"Round\" />\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Input/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport { Example as Basic } from './Basic';\nimport { Example as Size } from './Size';\nimport { Example as Variant } from './Variant';\nimport { Example as Addons } from './Addons';\nimport { Example as Elements } from './Elements';\nimport { Example as Masked } from './Masked';\nimport { Example as Controlled } from './Controlled';\nimport { Example as FormControlled } from './FormControlled';\n\nstoriesOf('Input', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Primary', () => <Basic />)\n  .add('Size ', () => <Size />)\n  .add('Variants', () => <Variant />)\n  .add('Addons', () => <Addons />)\n  .add('Elements', () => <Elements />)\n  .add('Password', () => <Masked />)\n  .add('Value Controlled', () => <Controlled />)\n  .add('Form Controlled', () => <FormControlled />);\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Link/Basic.tsx",
    "content": "import React from 'react';\nimport { Link, Box } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Box alignItems=\"center\">\n      <Link href=\"https://nativebase.io\">\n        Click here to open documentation.\n      </Link>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Link/CompositeLink.tsx",
    "content": "import React from 'react';\nimport { Link, Text, Box, Flex, HStack, Spacer, Badge } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Box alignItems=\"center\">\n      <Link href=\"https://nativebase.io\" isExternal>\n        <Box\n          w={[64, 96]}\n          borderWidth=\"1\"\n          borderColor=\"coolGray.300\"\n          shadow=\"3\"\n          bg=\"coolGray.100\"\n          p=\"5\"\n          rounded=\"8\"\n        >\n          <HStack alignItems=\"center\">\n            <Badge\n              colorScheme=\"darkBlue\"\n              _text={{ color: 'white' }}\n              variant=\"solid\"\n              rounded=\"4\"\n            >\n              Open Source\n            </Badge>\n            <Spacer />\n            <Text fontSize={10} color=\"coolGray.800\">\n              2020\n            </Text>\n          </HStack>\n          <Text color=\"coolGray.800\" mt=\"3\" fontWeight=\"medium\" fontSize=\"xl\">\n            NativeBase v3\n          </Text>\n          <Text mt=\"2\" fontSize=\"sm\" color=\"coolGray.700\">\n            NativeBase is a component library that enables devs to build\n            universal design systems.\n          </Text>\n          <Flex>\n            <Text mt=\"2\" fontSize={12} fontWeight=\"medium\" color=\"darkBlue.600\">\n              Read More\n            </Text>\n          </Flex>\n        </Box>\n      </Link>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Link/CustomOnPress.tsx",
    "content": "import React from 'react';\nimport { Box, Link } from 'native-base';\n\nexport const Example = () => {\n  const [state, setState] = React.useState(false);\n  const toggleState = () => {\n    setState(!state);\n  };\n  return (\n    <Box alignItems=\"center\">\n      <Box h=\"100\" w=\"100\" bg={state ? 'emerald.500' : 'indigo.500'} />\n      <Link onPress={toggleState} mt=\"8\">\n        <Box\n          px=\"3\"\n          py=\"2\"\n          bg=\"primary.400\"\n          rounded=\"sm\"\n          _text={{ color: 'white', fontWeight: 'medium' }}\n        >\n          Change Color\n        </Box>\n      </Link>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Link/ExternalLink.tsx",
    "content": "import React from 'react';\nimport { Link, Text, Box } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Box alignItems=\"center\">\n      <Text mx=\"16\">\n        NativeBase is a component library that enables devs to build universal\n        design systems. It is built on top of React Native, allowing you to\n        develop apps for Android, iOS and the Web.{' '}\n        <Link\n          href=\"https://nativebase.io\"\n          isExternal\n          _text={{ color: 'blue.400' }}\n          mt={-0.5}\n          _web={{\n            mb: -2,\n          }}\n        >\n          Read More\n        </Link>\n      </Text>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Link/UnderlineLink.tsx",
    "content": "import React from 'react';\nimport { Link, Box } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Box alignItems=\"center\">\n      {/* @ts-ignore */}\n      <Link\n        _text={{\n          fontSize: 'xl',\n          _light: {\n            color: 'cyan.500',\n          },\n          color: 'cyan.300',\n        }}\n        href=\"https://nativebase.io\"\n        isUnderlined\n        _hover={{\n          _text: {\n            _light: {\n              color: 'cyan.600',\n            },\n            color: 'cyan.400',\n          },\n        }}\n      >\n        Click me to open NativeBase website.\n      </Link>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Link/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport { Example as DefaultLink } from './Basic';\nimport { Example as ExternalLink } from './ExternalLink';\nimport { Example as CustomOnPress } from './CustomOnPress';\nimport { Example as UnderlineLink } from './UnderlineLink';\nimport { Example as CompositeLink } from './CompositeLink';\n\nstoriesOf('Link', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Default Link', () => <DefaultLink />)\n  .add('External Link', () => <ExternalLink />)\n  .add('Custom Function onPress Link', () => <CustomOnPress />)\n  .add('Composite Link Example', () => <CompositeLink />)\n  .add('Underline Link', () => <UnderlineLink />);\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/List/Basic.tsx",
    "content": "import React from 'react';\nimport { List, Heading, Box } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Box w=\"80%\">\n      <Heading fontSize={24}>Topics (Plain List)</Heading>\n      <List space={2} my={2}>\n        <List.Item>Education</List.Item>\n        <List.Item>Health</List.Item>\n        <List.Item>Office</List.Item>\n        <List.Item>Sports</List.Item>\n      </List>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/List/ListWithIcon.tsx",
    "content": "import React from 'react';\nimport { List } from 'native-base';\nimport { SimpleLineIcons, Ionicons } from '@expo/vector-icons';\nexport const Example = () => {\n  return (\n    <List mt={2} my={2} width={80}>\n      <List.Item>\n        {/* <List.Icon as={<SearchIcon />} /> */}\n        Inbox\n      </List.Item>\n      <List.Item>\n        <List.Icon as={SimpleLineIcons} name=\"docs\" />\n        Drafts\n      </List.Item>\n      <List.Item>\n        <List.Icon as={Ionicons} name=\"stats-chart-outline\" />\n        Graphs and stats\n      </List.Item>\n      <List.Item>\n        <List.Icon as={Ionicons} name=\"attach\" />\n        Attachments\n      </List.Item>\n    </List>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/List/OrderedList.tsx",
    "content": "import React from 'react';\nimport { List, Heading, Box } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Box w=\"80%\">\n      <Heading fontSize={24}>Bill-#187 (Ordered List)</Heading>\n      <List.Ordered my={2} space={2}>\n        <List.Item>Fruit Juice x 2</List.Item>\n        <List.Item>Cheddar cheese - 200g</List.Item>\n        <List.Item>Milk 1L x 2</List.Item>\n        <List.Item>Brown Bread - 400g</List.Item>\n      </List.Ordered>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/List/PressableList.tsx",
    "content": "import React from 'react';\nimport { List, Heading, Box } from 'native-base';\n\nexport const Example = () => {\n  const [defaultColor, setDefaultColor] = React.useState('primary.400');\n  return (\n    <Box w=\"80%\">\n      <Heading\n        px={2}\n        py={4}\n        bg={defaultColor}\n        fontSize={24}\n        color={defaultColor === 'primary.400' ? 'white' : 'gray.800'}\n      >\n        Default Theme Color (Pressable List Items)\n      </Heading>\n      <List my={2} py={0}>\n        <List.Item\n          _text={{ color: 'white' }}\n          py={4}\n          bg=\"primary.400\"\n          onPress={() => setDefaultColor('primary.400')}\n        >\n          primary.400\n        </List.Item>\n        <List.Item\n          py={4}\n          bg=\"secondary.400\"\n          onPress={() => setDefaultColor('secondary.400')}\n        >\n          secondary.400\n        </List.Item>\n        <List.Item\n          py={4}\n          bg=\"emerald.400\"\n          onPress={() => setDefaultColor('emerald.400')}\n        >\n          emerald.400\n        </List.Item>\n        <List.Item\n          py={4}\n          bg=\"blue.400\"\n          onPress={() => setDefaultColor('blue.400')}\n        >\n          blue.400\n        </List.Item>\n      </List>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/List/StylingList.tsx",
    "content": "import React from 'react';\nimport { List, Heading, Box } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Box w=\"80%\">\n      <Heading fontSize={24}>Styled List</Heading>\n      <List.Ordered my={2} space={2} start={11} _text={{ color: 'amber.600' }}>\n        <List.Item>Ocean's </List.Item>\n        <List.Item _text={{ color: 'red.200' }}>Ocean's </List.Item>\n        <List.Item _text={{ color: 'teal.400', fontWeight: 'bold' }}>\n          Ocean's\n        </List.Item>\n      </List.Ordered>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/List/UnorderedList.tsx",
    "content": "import React from 'react';\nimport { List, Heading, Box } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Box w=\"80%\">\n      <Heading fontSize={24}>My Todos (Unordered List)</Heading>\n      <List.Unordered my={2} space={2}>\n        <List.Item>Get groceries by Tomorrow.</List.Item>\n        <List.Item>Book appointment with the Doc.</List.Item>\n        <List.Item>Bill payment - Electricity.</List.Item>\n        <List.Item>Pay Telephone Bill</List.Item>\n      </List.Unordered>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/List/VirtualizedList.tsx",
    "content": "import React from 'react';\nimport { VirtualizedList } from 'react-native';\nimport { List } from 'native-base';\n\nconst DATA = [];\n\nconst getItem = (_data, index) => ({\n  id: Math.random().toString(12).substring(0),\n  title: `Item ${index + 1}`,\n});\n\nconst getItemCount = (_data) => 500;\n\nconst Item = ({ title }: { title: String }) => (\n  <List.Item\n    bg=\"emerald.200\"\n    borderRadius=\"md\"\n    justifyContent=\"center\"\n    _text={{ fontSize: '2xl' }}\n    px={4}\n    py={2}\n    my={2}\n    width={32}\n  >\n    {title}\n  </List.Item>\n);\n\nexport const Example = () => {\n  return (\n    <VirtualizedList\n      data={DATA}\n      initialNumToRender={4}\n      renderItem={({ item }) => <Item title={item.title} />}\n      keyExtractor={(item) => item.key}\n      getItemCount={getItemCount}\n      getItem={getItem}\n    />\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/List/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport { Example as UnorderedList } from './UnorderedList';\nimport { Example as StylingList } from './StylingList';\nimport { Example as OrderedList } from './OrderedList';\nimport { Example as Basic } from './Basic';\nimport { Example as ListWithIcon } from './ListWithIcon';\nimport { Example as PressableList } from './PressableList';\nimport { Example as VirtualizedList } from './VirtualizedList';\n\nstoriesOf('List', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />)\n  .add('OrderedList', () => <OrderedList />)\n  .add('UnorderedList', () => <UnorderedList />)\n  .add('StylingList', () => <StylingList />)\n  .add('Pressable List Items', () => <PressableList />)\n  .add('List with Icon', () => <ListWithIcon />)\n  .add('VirtualizedList ', () => <VirtualizedList />);\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Pressable/Basic.tsx",
    "content": "import React from 'react';\nimport { Pressable, Text, Box, HStack, Spacer, Flex, Badge } from 'native-base';\n\nexport function Example() {\n  return (\n    <Box alignItems=\"center\">\n      <Pressable\n        onPress={() => console.log(\"I'm Pressed\")}\n        rounded=\"8\"\n        overflow=\"hidden\"\n        borderWidth=\"1\"\n        borderColor=\"coolGray.300\"\n        maxW=\"96\"\n        shadow=\"3\"\n        bg=\"coolGray.100\"\n        p=\"5\"\n      >\n        <Box>\n          <HStack alignItems=\"center\">\n            <Badge\n              colorScheme=\"darkBlue\"\n              _text={{ color: 'white' }}\n              variant=\"solid\"\n              rounded=\"4\"\n            >\n              Business\n            </Badge>\n            <Spacer />\n            <Text fontSize={10} color=\"coolGray.800\">\n              1 month ago\n            </Text>\n          </HStack>\n          <Text color=\"coolGray.800\" mt=\"3\" fontWeight=\"medium\" fontSize=\"xl\">\n            Marketing License\n          </Text>\n          <Text mt=\"2\" fontSize=\"sm\" color=\"coolGray.700\">\n            Unlock powerfull time-saving tools for creating email delivery and\n            collecting marketing data\n          </Text>\n          <Flex>\n            <Text mt=\"2\" fontSize={12} fontWeight=\"medium\" color=\"darkBlue.600\">\n              Read More\n            </Text>\n          </Flex>\n        </Box>\n      </Pressable>\n    </Box>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Pressable/Events.tsx",
    "content": "import React from 'react';\nimport { Pressable, Text, Box, HStack, Spacer, Flex, Badge } from 'native-base';\n\nexport function Example() {\n  return (\n    <Box alignItems=\"center\">\n      <Pressable maxW=\"96\">\n        {({ isHovered, isFocused, isPressed }) => {\n          return (\n            <Box\n              bg={\n                isPressed\n                  ? 'coolGray.200'\n                  : isHovered\n                  ? 'coolGray.200'\n                  : 'coolGray.100'\n              }\n              style={{\n                transform: [\n                  {\n                    scale: isPressed ? 0.96 : 1,\n                  },\n                ],\n              }}\n              p=\"5\"\n              rounded=\"8\"\n              shadow={3}\n              borderWidth=\"1\"\n              borderColor=\"coolGray.300\"\n            >\n              <HStack alignItems=\"center\">\n                <Badge\n                  colorScheme=\"darkBlue\"\n                  _text={{ color: 'white' }}\n                  variant=\"solid\"\n                  rounded=\"4\"\n                >\n                  Business\n                </Badge>\n                <Spacer />\n                <Text fontSize={10} color=\"coolGray.800\">\n                  1 month ago\n                </Text>\n              </HStack>\n              <Text\n                color=\"coolGray.800\"\n                mt=\"3\"\n                fontWeight=\"medium\"\n                fontSize=\"xl\"\n              >\n                Marketing License\n              </Text>\n              <Text mt=\"2\" fontSize=\"sm\" color=\"coolGray.700\">\n                Unlock powerfull time-saving tools for creating email delivery\n                and collecting marketing data\n              </Text>\n              <Flex>\n                {isFocused ? (\n                  <Text\n                    mt=\"2\"\n                    fontSize={12}\n                    fontWeight=\"medium\"\n                    textDecorationLine=\"underline\"\n                    color=\"darkBlue.600\"\n                    alignSelf=\"flex-start\"\n                  >\n                    Read More\n                  </Text>\n                ) : (\n                  <Text\n                    mt=\"2\"\n                    fontSize={12}\n                    fontWeight=\"medium\"\n                    color=\"darkBlue.600\"\n                  >\n                    Read More\n                  </Text>\n                )}\n              </Flex>\n            </Box>\n          );\n        }}\n      </Pressable>\n    </Box>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Pressable/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport { Example as Basic } from './Basic';\nimport { Example as Events } from './Events';\n\nstoriesOf('Pressable', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />)\n  .add('Events', () => <Events />);\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Radio/controlledRadio.tsx",
    "content": "import React from 'react';\nimport { Radio } from 'native-base';\n\nexport const Example = () => {\n  const [value, setValue] = React.useState('one');\n  return (\n    <Radio.Group\n      name=\"myRadioGroup\"\n      accessibilityLabel=\"favorite number\"\n      value={value}\n      onChange={(nextValue) => {\n        setValue(nextValue);\n      }}\n    >\n      <Radio value=\"one\" my={1}>\n        One\n      </Radio>\n      <Radio value=\"two\" my={1}>\n        Two\n      </Radio>\n    </Radio.Group>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Radio/customColor.tsx",
    "content": "import React from 'react';\nimport { Radio } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Radio.Group\n      defaultValue=\"1\"\n      name=\"exampleGroup\"\n      accessibilityLabel=\"favorite colorscheme\"\n    >\n      <Radio colorScheme=\"emerald\" value=\"1\" my={1}>\n        emerald\n      </Radio>\n      <Radio colorScheme=\"secondary\" value=\"2\" my={1}>\n        secondary\n      </Radio>\n      <Radio colorScheme=\"warning\" value=\"3\" my={1}>\n        warning\n      </Radio>\n    </Radio.Group>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Radio/customIcon.tsx",
    "content": "import React from 'react';\nimport { Radio, Icon } from 'native-base';\nimport { MaterialCommunityIcons } from '@expo/vector-icons';\n\nexport const Example = () => {\n  return (\n    <Radio.Group\n      defaultValue=\"1\"\n      size=\"lg\"\n      name=\"exampleGroup\"\n      accessibilityLabel=\"pick a choice\"\n    >\n      <Radio\n        _text={{ mx: 2 }}\n        colorScheme=\"green\"\n        value=\"1\"\n        icon={<Icon as={<MaterialCommunityIcons name=\"alien\" />} />}\n        my={1}\n      >\n        Alien\n      </Radio>\n      <Radio\n        _text={{ mx: 2 }}\n        colorScheme=\"red\"\n        value=\"2\"\n        icon={<Icon as={<MaterialCommunityIcons name=\"fire\" />} />}\n        my={1}\n      >\n        Fire\n      </Radio>\n      <Radio\n        colorScheme=\"warning\"\n        _text={{ mx: 2 }}\n        value=\"3\"\n        icon={<Icon as={<MaterialCommunityIcons name=\"exclamation\" />} />}\n        my={1}\n      >\n        Warning\n      </Radio>\n    </Radio.Group>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Radio/disabled.tsx",
    "content": "import React from 'react';\nimport { Radio } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Radio.Group\n      defaultValue=\"2\"\n      name=\"exampleGroup\"\n      accessibilityLabel=\"select prize\"\n    >\n      <Radio value=\"1\" my={1} isDisabled>\n        First\n      </Radio>\n      <Radio value=\"2\" my={1}>\n        Second\n      </Radio>\n      <Radio value=\"3\" my={1}>\n        Third\n      </Radio>\n    </Radio.Group>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Radio/formControlled.tsx",
    "content": "import React from 'react';\nimport { Container, FormControl, Radio, WarningOutlineIcon } from 'native-base';\n\nexport const Example = () => {\n  const [groupValue, setGroupValue] = React.useState('1');\n  return (\n    <Container>\n      <FormControl isInvalid>\n        <FormControl.Label _text={{ fontSize: 'lg', bold: true }}>\n          Select Prize\n        </FormControl.Label>\n        <Radio.Group\n          name=\"exampleGroup\"\n          accessibilityLabel=\"select prize\"\n          defaultValue={groupValue}\n          onChange={(value) => {\n            setGroupValue(value || '');\n          }}\n        >\n          <Radio value=\"1\" my=\"1\">\n            First\n          </Radio>\n          <Radio value=\"2\" my=\"1\">\n            Second\n          </Radio>\n          <Radio value=\"3\" my=\"1\">\n            Third\n          </Radio>\n        </Radio.Group>\n        <FormControl.ErrorMessage leftIcon={<WarningOutlineIcon size=\"xs\" />}>\n          You must select a Prize.\n        </FormControl.ErrorMessage>\n      </FormControl>\n    </Container>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Radio/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport { Example as Playground } from './playground';\nimport { Example as Disabled } from './disabled';\nimport { Example as CustomColor } from './customColor';\nimport { Example as CustomIcon } from './customIcon';\nimport { Example as Size } from './size';\nimport { Example as Invalid } from './invalid';\nimport { Example as FormControlled } from './formControlled';\nimport { Example as WithRef } from './withRef';\nimport { Example as ControlledRadio } from './controlledRadio';\nimport { Example as UncontrolledRadio } from './uncontrolledRadio';\n\nstoriesOf('Radio', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Controlled Radio', () => <ControlledRadio />)\n  .add('Uncontrolled Radio', () => <UncontrolledRadio />)\n  .add('Playground', () => <Playground />)\n  .add('Disabled', () => <Disabled />)\n  .add('Invalid', () => <Invalid />)\n  .add('Size', () => <Size />)\n  .add('Custom Color', () => <CustomColor />)\n  .add('Custom Icon', () => <CustomIcon />)\n  .add('Form Controlled', () => <FormControlled />)\n  .add('With Ref', () => <WithRef />);\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Radio/invalid.tsx",
    "content": "import React from 'react';\nimport { Radio } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Radio.Group name=\"exampleGroup\" accessibilityLabel=\"select an option\">\n      <Radio value=\"test\" isInvalid>\n        Others\n      </Radio>\n    </Radio.Group>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Radio/playground.tsx",
    "content": "import React from 'react';\nimport { Radio, Box } from 'native-base';\nimport { boolean, select, text } from '@storybook/addon-knobs';\nimport { useState } from 'react';\n\nexport const Example = () => {\n  const [value, setValue] = useState('');\n\n  return (\n    <Box display=\"flex\" justifyContent=\"space-between\" alignItems=\"center\">\n      <Radio.Group\n        value={value}\n        onChange={setValue}\n        name=\"exampleGroup\"\n        accessibilityLabel=\"pick an option from below\"\n      >\n        <Radio\n          colorScheme={text('colorScheme', 'primary')}\n          size={select('size', ['sm', 'md', 'lg'], 'md')}\n          isDisabled={boolean('isDisabled', false)}\n          isInvalid={boolean('isInvalid', false)}\n          value={'cool'}\n          my={1}\n        >\n          UX Research\n        </Radio>\n        <Radio\n          colorScheme={text('colorScheme', 'primary')}\n          size={select('size', ['sm', 'md', 'lg'], 'md')}\n          isDisabled={boolean('isDisabled', false)}\n          isInvalid={boolean('isInvalid', false)}\n          value={'awesome'}\n          my={1}\n        >\n          Software Development\n        </Radio>\n      </Radio.Group>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Radio/size.tsx",
    "content": "import React from 'react';\nimport { Radio, Stack } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Radio.Group\n      name=\"exampleGroup\"\n      defaultValue=\"1\"\n      accessibilityLabel=\"pick a size\"\n    >\n      <Stack\n        direction={{ base: 'column', md: 'row' }}\n        alignItems={{ base: 'flex-start', md: 'center' }}\n        space={4}\n        w=\"75%\"\n        maxW=\"300px\"\n      >\n        <Radio value=\"1\" colorScheme=\"red\" size=\"sm\" my={1}>\n          Small\n        </Radio>\n        <Radio value=\"2\" colorScheme=\"green\" size=\"md\" my={1}>\n          Medium\n        </Radio>\n        <Radio value=\"3\" colorScheme=\"yellow\" size=\"lg\" my={1}>\n          Large\n        </Radio>\n      </Stack>\n    </Radio.Group>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Radio/uncontrolledRadio.tsx",
    "content": "import React from 'react';\nimport { Radio } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Radio.Group\n      defaultValue=\"1\"\n      name=\"myRadioGroup\"\n      accessibilityLabel=\"Pick your favorite number\"\n    >\n      <Radio value=\"1\" my={1}>\n        First\n      </Radio>\n      <Radio value=\"2\" my={1}>\n        Second\n      </Radio>\n      <Radio value=\"3\" my={1}>\n        Third\n      </Radio>\n    </Radio.Group>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Radio/withRef.tsx",
    "content": "import React from 'react';\nimport { Radio } from 'native-base';\nimport { Platform } from 'react-native';\n\nexport const Example = () => {\n  const myRef = React.useRef({});\n\n  return (\n    <Radio.Group\n      name=\"exampleGroup\"\n      colorScheme=\"success\"\n      accessibilityLabel=\"pick an option\"\n      onChange={(value) => {\n        if (value === '2') {\n          if (Platform.OS !== 'web')\n            myRef?.current?.setNativeProps({ backgroundColor: '#00de0050' });\n        } else {\n          if (Platform.OS !== 'web')\n            myRef?.current?.setNativeProps({\n              backgroundColor: '#fa000050',\n            });\n        }\n      }}\n    >\n      <Radio colorScheme=\"success\" value=\"1\" my={1}>\n        Wrong\n      </Radio>\n      <Radio colorScheme=\"success\" ref={myRef} value=\"2\" my={1}>\n        Right\n      </Radio>\n    </Radio.Group>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Row/Basic.tsx",
    "content": "import React from 'react';\nimport { Center, Row } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Row space={2}>\n      <Center\n        size={16}\n        bg=\"primary.400\"\n        rounded=\"md\"\n        _text={{ color: 'white' }}\n        shadow={3}\n      >\n        Box 1\n      </Center>\n      <Center\n        bg=\"secondary.400\"\n        size={16}\n        rounded=\"md\"\n        _text={{ color: 'white' }}\n        shadow={3}\n      >\n        Box 2\n      </Center>\n      <Center\n        size={16}\n        bg=\"emerald.400\"\n        rounded=\"md\"\n        _text={{ color: 'white' }}\n        shadow={3}\n      >\n        Box 3\n      </Center>\n    </Row>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Row/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport { Example as Basic } from './Basic';\n\nstoriesOf('Row', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />);\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Select/Basic.tsx",
    "content": "import React from 'react';\nimport { Select, Box, CheckIcon, Center } from 'native-base';\n\nexport const Example = () => {\n  const [service, setService] = React.useState('');\n\n  return (\n    <Center>\n      <Box maxW=\"300\">\n        <Select\n          selectedValue={service}\n          minWidth=\"200\"\n          accessibilityLabel=\"Choose Service\"\n          placeholder=\"Choose Service\"\n          _selectedItem={{\n            bg: 'teal.600',\n            endIcon: <CheckIcon size=\"5\" />,\n          }}\n          mt={1}\n          onValueChange={(itemValue) => setService(itemValue)}\n        >\n          <Select.Item label=\"UX Research\" value=\"ux\" />\n          <Select.Item label=\"Web Development\" value=\"web\" />\n          <Select.Item label=\"Cross Platform Development\" value=\"cross\" />\n          <Select.Item label=\"UI Designing\" value=\"ui\" />\n          <Select.Item label=\"Backend Development\" value=\"backend\" />\n        </Select>\n      </Box>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Select/FormControlled.tsx",
    "content": "import React from 'react';\nimport {\n  FormControl,\n  Select,\n  Center,\n  CheckIcon,\n  WarningOutlineIcon,\n} from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Center>\n      <FormControl maxW=\"300\" isRequired isInvalid>\n        <FormControl.Label>Choose service</FormControl.Label>\n        <Select\n          minWidth=\"200\"\n          accessibilityLabel=\"Choose Service\"\n          placeholder=\"Choose Service\"\n          _selectedItem={{\n            bg: 'teal.600',\n            endIcon: <CheckIcon size={5} />,\n          }}\n          mt=\"1\"\n        >\n          <Select.Item label=\"UX Research\" value=\"ux\" />\n          <Select.Item label=\"Web Development\" value=\"web\" />\n          <Select.Item label=\"Cross Platform Development\" value=\"cross\" />\n          <Select.Item label=\"UI Designing\" value=\"ui\" />\n          <Select.Item label=\"Backend Development\" value=\"backend\" />\n        </Select>\n        <FormControl.ErrorMessage leftIcon={<WarningOutlineIcon size=\"xs\" />}>\n          Please make a selection!\n        </FormControl.ErrorMessage>\n      </FormControl>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Select/SelectLongList.tsx",
    "content": "import React from 'react';\nimport { FormControl, Select, Container, CheckIcon } from 'native-base';\n\nexport const Example = () => {\n  const [value, setValue] = React.useState('');\n  const colorNames = [\n    'Pink',\n    'Crimson',\n    'Red',\n    'Maroon',\n    'Brown',\n    'Misty-Rose',\n    'Salmon',\n    'Coral',\n    'Orange-Red',\n    'Chocolate',\n    'Orange',\n    'Gold',\n    'Ivory',\n    'Yellow',\n    'Olive',\n    'Yellow-Green',\n    'Lawngreen',\n    'Chartreuse',\n    'Lime',\n    'Green',\n    'Spring-green',\n    'Aquamarine',\n    'Turquoise',\n    'Azure',\n    'Aqua/Cyan',\n    'Teal',\n    'Lavender',\n    'Blue',\n    'Navy',\n    'Blue-Violet',\n    'Indigo',\n    'Dark-Violet',\n    'Plum',\n    'Magenta',\n    'Purple',\n    'Red-Violet',\n    'Tan',\n    'Beige',\n    'Slate-gray',\n    'White',\n    'White-Smoke',\n    'Light-Gray',\n    'Silver',\n    'Dark-Gray',\n    'Gray',\n    'Dim-Gray',\n    'Black',\n  ];\n  return (\n    <Container>\n      <FormControl maxW=\"300\">\n        <FormControl.Label>Select Color</FormControl.Label>\n        <Select\n          selectedValue={value}\n          minWidth=\"200\"\n          accessibilityLabel=\"Select a Color\"\n          placeholder=\"Select a Color\"\n          onValueChange={(itemValue) => {\n            setValue(itemValue);\n          }}\n          _selectedItem={{\n            bg: 'teal.600',\n            endIcon: <CheckIcon size={5} />,\n          }}\n          mt=\"1\"\n        >\n          {colorNames.map((value, ind) => {\n            return <Select.Item label={value} value={`${ind}`} />;\n          })}\n        </Select>\n      </FormControl>\n    </Container>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Select/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport { Example as Basic } from './Basic';\nimport { Example as FormControlled } from './FormControlled';\nimport { Example as SelectLongList } from './SelectLongList';\nimport Wrapper from './../../Wrapper';\n\nstoriesOf('Select', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />)\n  .add('FormControlled', () => <FormControlled />)\n  .add('Select Long list', () => <SelectLongList />);\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Slider/Customized.tsx",
    "content": "import React from 'react';\nimport { Slider, Icon, Box } from 'native-base';\nimport { MaterialIcons } from '@expo/vector-icons';\n\nexport const Example = () => {\n  return (\n    <Box alignItems=\"center\" w=\"100%\">\n      <Slider\n        defaultValue={70}\n        size=\"sm\"\n        colorScheme=\"green\"\n        w=\"75%\"\n        maxW=\"300\"\n      >\n        <Slider.Track bg=\"green.100\">\n          <Slider.FilledTrack bg=\"green.600\" />\n        </Slider.Track>\n        <Slider.Thumb borderWidth=\"0\" bg=\"transparent\">\n          <Icon as={MaterialIcons} name=\"park\" color=\"green.600\" size=\"sm\" />\n        </Slider.Thumb>\n      </Slider>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Slider/FormControlled.tsx",
    "content": "import React from 'react';\nimport {\n  FormControl,\n  Slider,\n  VStack,\n  WarningOutlineIcon,\n  Box,\n} from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Box alignItems=\"center\" w=\"100%\">\n      <VStack space={4} w=\"75%\" maxW=\"300\">\n        <FormControl isInvalid>\n          <FormControl.Label>Set your budget</FormControl.Label>\n          <Slider defaultValue={50}>\n            <Slider.Track>\n              <Slider.FilledTrack />\n            </Slider.Track>\n            <Slider.Thumb />\n          </Slider>\n          <FormControl.ErrorMessage leftIcon={<WarningOutlineIcon size=\"xs\" />}>\n            Something is wrong.\n          </FormControl.ErrorMessage>\n        </FormControl>\n      </VStack>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Slider/Playground.tsx",
    "content": "import React from 'react';\nimport { Slider, Box } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Box mx=\"5\" width=\"80%\">\n      <Slider minValue={0} maxValue={100} step={1} defaultValue={50}>\n        <Slider.Track>\n          <Slider.FilledTrack />\n        </Slider.Track>\n        <Slider.Thumb />\n      </Slider>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Slider/Size.tsx",
    "content": "import React from 'react';\nimport { Slider, VStack, Box } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Box alignItems=\"center\" w=\"100%\">\n      <VStack space={4} w=\"75%\" maxW=\"300\">\n        <Slider defaultValue={40} size=\"sm\">\n          <Slider.Track>\n            <Slider.FilledTrack />\n          </Slider.Track>\n          <Slider.Thumb />\n        </Slider>\n        <Slider defaultValue={60} size=\"md\">\n          <Slider.Track>\n            <Slider.FilledTrack />\n          </Slider.Track>\n          <Slider.Thumb />\n        </Slider>\n        <Slider defaultValue={80} size=\"lg\">\n          <Slider.Track>\n            <Slider.FilledTrack />\n          </Slider.Track>\n          <Slider.Thumb />\n        </Slider>\n      </VStack>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Slider/Value.tsx",
    "content": "import React from 'react';\nimport { Slider, Stack, Text, Box } from 'native-base';\n\nexport const Example = () => {\n  const [onChangeValue, setOnChangeValue] = React.useState(70);\n  const [onChangeEndValue, setOnChangeEndValue] = React.useState(70);\n  return (\n    <Box alignItems=\"center\" w=\"100%\">\n      <Stack space={4} alignItems=\"center\" w=\"75%\" maxW=\"300\">\n        <Text textAlign=\"center\">onChangeValue - {onChangeValue}</Text>\n        <Text textAlign=\"center\">onChangeEndValue - {onChangeEndValue}</Text>\n        <Slider\n          defaultValue={70}\n          colorScheme=\"cyan\"\n          onChange={(v) => {\n            setOnChangeValue(Math.floor(v));\n          }}\n          onChangeEnd={(v) => {\n            v && setOnChangeEndValue(Math.floor(v));\n          }}\n        >\n          <Slider.Track>\n            <Slider.FilledTrack />\n          </Slider.Track>\n          <Slider.Thumb />\n        </Slider>\n      </Stack>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Slider/Vertical.tsx",
    "content": "import React from 'react';\nimport { Slider, Box } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Box mx=\"5\" width=\"80%\">\n      <Slider\n        defaultValue={70}\n        colorScheme=\"teal\"\n        orientation=\"vertical\"\n        h=\"48\"\n      >\n        <Slider.Track>\n          <Slider.FilledTrack />\n        </Slider.Track>\n        <Slider.Thumb />\n      </Slider>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Slider/color.tsx",
    "content": "import React from 'react';\nimport { Slider, Box, VStack } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Box alignItems=\"center\" w=\"100%\">\n      <VStack w=\"3/4\" maxW=\"300\" space={4}>\n        <Slider defaultValue={70} colorScheme=\"orange\">\n          <Slider.Track>\n            <Slider.FilledTrack />\n          </Slider.Track>\n          <Slider.Thumb />\n        </Slider>\n        <Slider defaultValue={70} colorScheme=\"emerald\">\n          <Slider.Track>\n            <Slider.FilledTrack />\n          </Slider.Track>\n          <Slider.Thumb />\n        </Slider>\n        <Slider defaultValue={70} colorScheme=\"indigo\">\n          <Slider.Track>\n            <Slider.FilledTrack />\n          </Slider.Track>\n          <Slider.Thumb />\n        </Slider>\n      </VStack>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Slider/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport { Example as Usage } from './usage';\nimport { Example as Size } from './Size';\nimport { Example as Vertical } from './Vertical';\nimport { Example as Color } from './color';\nimport { Example as Value } from './Value';\nimport { Example as FormControlled } from './FormControlled';\nimport { Example as Customized } from './Customized';\nimport { Example as Playground } from './Playground';\nimport { Example as Disabled } from './isDisabled';\nimport { Example as ReadOnly } from './isReadOnly';\n\nstoriesOf('Slider', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Playground', () => <Playground />)\n  .add('Usage', () => <Usage />)\n  .add('Size', () => <Size />)\n  .add('Color', () => <Color />)\n  .add('Vertical', () => <Vertical />)\n  .add('Value', () => <Value />)\n  .add('Customized', () => <Customized />)\n  .add('Disabled', () => <Disabled />)\n  .add('ReadOnly', () => <ReadOnly />)\n  .add('Form Controlled', () => <FormControlled />);\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Slider/isDisabled.tsx",
    "content": "import React from 'react';\nimport { Slider, Box } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Box mx={5} width=\"80%\">\n      <Slider\n        minValue={0}\n        maxValue={100}\n        step={1}\n        defaultValue={50}\n        isDisabled\n        _disabled={{ opacity: 0.6 }}\n        colorScheme=\"indigo\"\n      >\n        <Slider.Track>\n          <Slider.FilledTrack />\n        </Slider.Track>\n        <Slider.Thumb />\n      </Slider>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Slider/isReadOnly.tsx",
    "content": "import React from 'react';\nimport { Slider, Box } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Box mx={5} width=\"80%\">\n      <Slider minValue={0} maxValue={100} step={1} defaultValue={50} isReadOnly>\n        <Slider.Track _readOnly={{ bg: 'indigo.100' }}>\n          <Slider.FilledTrack _readOnly={{ bg: 'indigo.600' }} />\n        </Slider.Track>\n        <Slider.Thumb _readOnly={{ bg: 'indigo.600' }} />\n      </Slider>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Slider/usage.tsx",
    "content": "import React from 'react';\nimport { Slider, Box } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Box alignItems=\"center\" w=\"100%\">\n      <Slider\n        w=\"3/4\"\n        maxW=\"300\"\n        defaultValue={70}\n        minValue={0}\n        maxValue={100}\n        accessibilityLabel=\"hello world\"\n        step={10}\n      >\n        <Slider.Track>\n          <Slider.FilledTrack />\n        </Slider.Track>\n        <Slider.Thumb />\n      </Slider>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Spinner/color.tsx",
    "content": "import React from 'react';\nimport { Spinner, HStack } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <HStack space={8} justifyContent=\"center\">\n      <Spinner color=\"emerald.500\" />\n      <Spinner color=\"warning.500\" />\n      <Spinner color=\"indigo.500\" />\n      <Spinner color=\"cyan.500\" />\n    </HStack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Spinner/duration.tsx",
    "content": "// import React from 'react';\n// import { Spinner } from 'native-base';\n\n//  export const Example = () => {\n//   // return <Spinner color=\"danger.400\" size=\"lg\" duration={1000} />;\n// }\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Spinner/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport { Example as Usage } from './usage';\nimport { Example as Color } from './color';\nimport { Example as Size } from './size';\nimport { Example as Playground } from './withKnob';\n// import {Example as Variant} from './variant';\n// import {Example as Duration} from './duration';\n\nstoriesOf('Spinner', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Playground', () => <Playground />)\n  .add('Usage', () => <Usage />)\n  .add('Color', () => <Color />)\n  .add('Size', () => <Size />);\n// .add('Variant', () => <Variant />);\n// .add('Duration', () => <Duration />);\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Spinner/size.tsx",
    "content": "import React from 'react';\nimport { Spinner, HStack } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <HStack space={8} justifyContent=\"center\" alignItems=\"center\">\n      <Spinner size=\"sm\" />\n      <Spinner size=\"lg\" />\n    </HStack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Spinner/usage.tsx",
    "content": "import React from 'react';\nimport { Spinner, HStack, Heading } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <HStack space={2} justifyContent=\"center\">\n      <Spinner accessibilityLabel=\"Loading posts\" />\n      <Heading color=\"primary.500\" fontSize=\"md\">\n        Loading\n      </Heading>\n    </HStack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Spinner/variant.tsx",
    "content": "// import React from 'react';\n// import { Spinner, HStack, Icon } from 'native-base';\n\n//  export const Example = () => {\n//   return (\n//     <HStack space={2}>\n//       <Spinner />\n//       {/* <Spinner color=\"danger.400\" variant=\"dotted\" />\n//       <Spinner color=\"blue.500\" variant=\"stroked\" />\n//       <Spinner color=\"gray.900\" variant=\"multiColorDotted\" />\n//       <Spinner color=\"yellow.500\" variant=\"squareDotted\" />\n//       <Spinner\n//         variant=\"custom\"\n//         renderProp={<Icon name=\"bat\" type=\"MaterialCommunityIcons\" size={12} />}\n//       /> */}\n//     </HStack>\n//   );\n// }\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Spinner/withKnob.tsx",
    "content": "import React from 'react';\nimport { Spinner, Box } from 'native-base';\nimport { select } from '@storybook/addon-knobs';\n\nexport const Example = () => {\n  return (\n    <Box display=\"flex\" justifyContent=\"space-between\" alignItems=\"center\">\n      <Spinner\n        size={select('size', ['sm', 'lg'], 'lg')}\n        color={\n          'primary.' +\n          select(\n            'color',\n            [\n              '50',\n              '100',\n              '200',\n              '300',\n              '400',\n              '500',\n              '600',\n              '700',\n              '800',\n              '900',\n            ],\n            '300'\n          )\n        }\n      />\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Stack/basic.tsx",
    "content": "//@ts-nocheck\nimport React from 'react';\nimport {\n  Stack,\n  Center,\n  Heading,\n  ScrollView,\n  VStack,\n  Divider,\n} from 'native-base';\n\nexport function Example() {\n  return (\n    <ScrollView>\n      <VStack space=\"2.5\" mt=\"4\" px=\"8\">\n        <Heading size=\"md\">row</Heading>\n        <Stack direction=\"row\" mb=\"2.5\" mt=\"1.5\" space={3}>\n          <Center\n            size=\"16\"\n            bg=\"primary.400\"\n            rounded=\"sm\"\n            _text={{\n              color: 'warmGray.50',\n              fontWeight: 'medium',\n            }}\n            shadow={'3'}\n          >\n            Box 1\n          </Center>\n          <Center\n            bg=\"primary.500\"\n            size=\"16\"\n            rounded=\"sm\"\n            _text={{\n              color: 'warmGray.50',\n              fontWeight: 'medium',\n            }}\n            shadow={'3'}\n          >\n            Box 2\n          </Center>\n          <Center\n            size=\"16\"\n            bg=\"primary.700\"\n            rounded=\"sm\"\n            _text={{\n              color: 'warmGray.50',\n              fontWeight: 'medium',\n            }}\n            shadow={'3'}\n          >\n            Box 3\n          </Center>\n        </Stack>\n        <Divider />\n        <Heading size=\"md\">column</Heading>\n        <Stack mb=\"2.5\" mt=\"1.5\" direction=\"column\" space={3}>\n          <Center\n            size=\"16\"\n            bg=\"primary.400\"\n            rounded=\"sm\"\n            _text={{\n              color: 'warmGray.50',\n              fontWeight: 'medium',\n            }}\n            shadow={'3'}\n          >\n            Box 1\n          </Center>\n          <Center\n            bg=\"primary.500\"\n            size=\"16\"\n            rounded=\"sm\"\n            _text={{\n              color: 'warmGray.50',\n              fontWeight: 'medium',\n            }}\n            shadow={'3'}\n          >\n            Box 2\n          </Center>\n          <Center\n            size=\"16\"\n            bg=\"primary.700\"\n            rounded=\"sm\"\n            _text={{\n              color: 'warmGray.50',\n              fontWeight: 'medium',\n            }}\n            shadow={'3'}\n          >\n            Box 3\n          </Center>\n        </Stack>\n        <Divider />\n        <Heading size=\"md\">row-reverse</Heading>\n        <Stack mb=\"2.5\" mt=\"1.5\" direction=\"row\" reversed space={3}>\n          <Center\n            size=\"16\"\n            bg=\"primary.400\"\n            rounded=\"sm\"\n            _text={{\n              color: 'warmGray.50',\n              fontWeight: 'medium',\n            }}\n            shadow={'3'}\n          >\n            Box 1\n          </Center>\n          <Center\n            bg=\"primary.500\"\n            size=\"16\"\n            rounded=\"sm\"\n            _text={{\n              color: 'warmGray.50',\n              fontWeight: 'medium',\n            }}\n            shadow={'3'}\n          >\n            Box 2\n          </Center>\n          <Center\n            size=\"16\"\n            bg=\"primary.700\"\n            rounded=\"sm\"\n            _text={{\n              color: 'warmGray.50',\n              fontWeight: 'medium',\n            }}\n            shadow={'3'}\n          >\n            Box 3\n          </Center>\n        </Stack>\n        <Divider />\n        <Heading size=\"md\">column-reverse</Heading>\n        <Stack mb=\"2.5\" mt=\"1.5\" direction=\"column-reverse\" space={3}>\n          <Center\n            size=\"16\"\n            bg=\"primary.400\"\n            rounded=\"sm\"\n            _text={{\n              color: 'warmGray.50',\n              fontWeight: 'medium',\n            }}\n            shadow={'3'}\n          >\n            Box 1\n          </Center>\n          <Center\n            bg=\"primary.500\"\n            size=\"16\"\n            rounded=\"sm\"\n            _text={{\n              color: 'warmGray.50',\n              fontWeight: 'medium',\n            }}\n            shadow={'3'}\n          >\n            Box 2\n          </Center>\n          <Center\n            size=\"16\"\n            bg=\"primary.700\"\n            rounded=\"sm\"\n            _text={{\n              color: 'warmGray.50',\n              fontWeight: 'medium',\n            }}\n            shadow={'3'}\n          >\n            Box 3\n          </Center>\n        </Stack>\n        <Divider />\n      </VStack>\n    </ScrollView>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Stack/divider.tsx",
    "content": "import React from 'react';\nimport { Stack, Divider, Box } from 'native-base';\n\nexport function Example() {\n  return (\n    <Stack space={3} alignItems=\"center\">\n      <Box>\n        <Stack\n          direction=\"row\"\n          space={2}\n          mb=\"3\"\n          alignItems=\"center\"\n          divider={<Divider thickness=\"2\" bg=\"coolGray.200\" />}\n        >\n          <Box>Simple</Box>\n          <Box>Easy</Box>\n          <Box>Beautiful</Box>\n        </Stack>\n      </Box>\n    </Stack>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Stack/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport { Example as Stack } from './basic';\nimport { Example as Divider } from './divider';\n\nstoriesOf('Stack', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Stack />)\n  .add('Divider', () => <Divider />);\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Switch/Accessibility.tsx",
    "content": "import React from 'react';\nimport { Switch, HStack, Text } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <HStack space={8} alignItems=\"center\">\n      <Text fontSize=\"lg\">Accessibility</Text>\n      <Switch\n        accessibilityLabel=\"switch-accessible\"\n        accessibilityHint=\"turn on or off\"\n      />\n    </HStack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Switch/Basic.tsx",
    "content": "import React from 'react';\nimport { Switch, HStack, Text } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <HStack alignItems=\"center\" space={4}>\n      <Text>Bluetooth</Text>\n      <Switch size=\"sm\" />\n    </HStack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Switch/ColorSchemes.tsx",
    "content": "import React from 'react';\nimport { Switch, VStack } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <VStack space={4} alignItems=\"center\">\n      <Switch defaultIsChecked colorScheme=\"primary\" />\n      <Switch defaultIsChecked colorScheme=\"secondary\" />\n      <Switch defaultIsChecked colorScheme=\"emerald\" />\n    </VStack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Switch/Sizes.tsx",
    "content": "import React from 'react';\nimport { Switch, VStack } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <VStack space={4} alignItems=\"center\">\n      <Switch size=\"sm\" />\n      <Switch size=\"md\" />\n      <Switch size=\"lg\" />\n    </VStack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Switch/SwitchBgColor.tsx",
    "content": "import React from 'react';\nimport { Switch, VStack } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <VStack space={4} alignItems=\"center\">\n      <Switch />\n      <Switch\n        offTrackColor=\"orange.100\"\n        onTrackColor=\"orange.200\"\n        onThumbColor=\"orange.500\"\n        offThumbColor=\"orange.50\"\n      />\n      <Switch\n        offTrackColor=\"indigo.100\"\n        onTrackColor=\"indigo.200\"\n        onThumbColor=\"indigo.500\"\n        offThumbColor=\"indigo.50\"\n      />\n    </VStack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Switch/example.tsx",
    "content": "import React from 'react';\nimport { VStack, Switch } from 'native-base';\nimport { select, boolean } from '@storybook/addon-knobs';\n\nexport const Example = () => {\n  return (\n    <VStack space={50}>\n      <Switch\n        // @ts-ignore\n        onColor=\"seagreen\"\n        // isChecked={boolean(\n        //   'isChecked',\n        //   false\n        // )}\n        size={select('size', ['sm', 'md', 'lg'], 'sm')}\n        isDisabled={boolean('isDisabled', false)}\n        isInvalid={boolean('isInvalid', false)}\n      />\n      <Switch\n        size=\"md\"\n        // @ts-ignore\n        onColor=\"seagreen\"\n        offColor=\"red\"\n        name=\"switch-sample\"\n        onToggle={(val: any) => console.log('button toggle value', val)}\n        iosBgColor=\"#f8d7d9\"\n      />\n      <Switch\n        size=\"lg\"\n        // @ts-ignore\n        onColor=\"seagreen\"\n        offColor=\"red\"\n        defaultIsChecked={true}\n        // switchTrackColor=\"#f8d7d9\"\n      />\n    </VStack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Switch/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport { Example as Basic } from './Basic';\nimport { Example as Sizes } from './Sizes';\nimport { Example as SwitchBgColor } from './SwitchBgColor';\nimport { Example as Accessibility } from './Accessibility';\nimport { Example as ColorSchemes } from './ColorSchemes';\n\nstoriesOf('Switch', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />)\n  .add('Sizes', () => <Sizes />)\n  .add('Switch bgColor', () => <SwitchBgColor />)\n  .add('ColorSchemes', () => <ColorSchemes />)\n  .add('Accessibility', () => <Accessibility />);\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Text/Basic.tsx",
    "content": "import React from 'react';\nimport { Text } from 'native-base';\n\nexport const Example = () => {\n  return <Text>This is Text.</Text>;\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Text/ChangingFontSize.tsx",
    "content": "import React from 'react';\nimport { Text, VStack } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <VStack space={1} alignItems=\"center\">\n      <Text fontSize=\"xs\">xs</Text>\n      <Text fontSize=\"sm\">sm</Text>\n      <Text fontSize=\"md\">md</Text>\n      <Text fontSize=\"lg\">lg</Text>\n      <Text fontSize=\"xl\">xl</Text>\n      <Text fontSize=\"2xl\">2xl</Text>\n      <Text fontSize=\"3xl\">3xl</Text>\n      <Text fontSize=\"4xl\">4xl</Text>\n      <Text fontSize=\"5xl\">5xl</Text>\n      <Text fontSize=\"6xl\">6xl</Text>\n    </VStack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Text/Nested.tsx",
    "content": "import React from 'react';\nimport { Text } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Text italic>\n      <Text bold>Taj Mahal</Text> is in Agra.\n    </Text>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Text/Overriden.tsx",
    "content": "import React from 'react';\nimport { Text, VStack } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <VStack space={2} alignItems=\"center\">\n      <Text bold>Bold</Text>\n      <Text italic>Italic</Text>\n      <Text underline>Underline</Text>\n      <Text highlight _dark={{ color: 'coolgray.800' }}>\n        Highlighted\n      </Text>\n      <Text>\n        H<Text sub>2</Text>O\n      </Text>\n      <Text underline>Underline</Text>\n      <Text strikeThrough>StrikeThrough</Text>\n      <Text bold italic underline>\n        Bold, Italic & Underline\n      </Text>\n    </VStack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Text/Truncated.tsx",
    "content": "import React from 'react';\nimport { Text } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Text isTruncated maxW=\"300\" w=\"80%\">\n      NativeBase gives you a contrasting color based on your theme. You can also\n      customise it using the useAccessibleColors hook.\n    </Text>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/Text/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport { Example as Basic } from './Basic';\nimport { Example as ChangingFontSize } from './ChangingFontSize';\nimport { Example as Overriden } from './Overriden';\nimport { Example as Truncated } from './Truncated';\nimport { Example as Nested } from './Nested';\n\nstoriesOf('Text', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />)\n  .add('Changing Font Size', () => <ChangingFontSize />)\n  .add('Truncated', () => <Truncated />)\n  .add('Overriden', () => <Overriden />)\n  .add('Nested', () => <Nested />);\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/TextArea/basic.tsx",
    "content": "import React from 'react';\nimport { TextArea, Box } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Box alignItems=\"center\" w=\"100%\">\n      <TextArea h={20} placeholder=\"Text Area Placeholder\" w=\"75%\" maxW=\"300\" />\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/TextArea/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport { Example as TextArea } from './basic';\nimport { Example as Invalid } from './invalid';\nimport { Example as Size } from './size';\nimport { Example as Value } from './value';\n\nstoriesOf('TextArea', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Default', () => <TextArea />)\n  .add('InValid and Disabled', () => <Invalid />)\n  .add('Sizes', () => <Size />)\n  .add('Value Controlled', () => <Value />);\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/TextArea/invalid.tsx",
    "content": "import React from 'react';\nimport { Box, TextArea, Text, Stack, Divider } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Box alignItems=\"center\" w=\"100%\">\n      <Stack space={2.5} w=\"75%\" maxW=\"300\">\n        <Box>\n          <Text mb=\"4\" bold fontSize=\"lg\">\n            Invalid TextArea\n          </Text>\n          <TextArea\n            aria-label=\"t1\"\n            numberOfLines={4}\n            placeholder=\"Invalid TextArea\"\n            isInvalid\n            _dark={{ placeholderTextColor: 'gray.300' }}\n            mb=\"5\"\n          />\n          <Divider />\n        </Box>\n        <Box>\n          <Text bold fontSize=\"lg\" mb=\"4\">\n            Disabled TextArea\n          </Text>\n\n          <TextArea\n            aria-label=\"t1Disabled\"\n            placeholder=\"Disabled TextArea\"\n            isDisabled\n          />\n        </Box>\n      </Stack>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/TextArea/size-kitchensink.tsx",
    "content": "import React from 'react';\nimport { TextArea, Stack } from 'native-base';\n\nexport const Example = () => {\n  const Sizes = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];\n  return (\n    <Stack space={4} w=\"90%\">\n      {Sizes.map((value) => {\n        return (\n          <TextArea\n            aria-label=\"t2\"\n            key={value}\n            size={value}\n            placeholder={value}\n            _dark={{ placeholderTextColor: 'white' }}\n          />\n        );\n      })}\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/TextArea/size.tsx",
    "content": "import React from 'react';\nimport { TextArea, Stack, ScrollView, Center, Heading } from 'native-base';\n\nexport const Example = () => {\n  const Sizes = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];\n  return (\n    <ScrollView w={{ base: '70%', md: '20%' }}>\n      <Center mt=\"4\">\n        <Heading textAlign=\"center\" mb=\"10\">\n          Sizes\n        </Heading>\n        <Stack space={4} w=\"90%\">\n          {Sizes.map((value) => {\n            return (\n              <TextArea\n                aria-label=\"t2\"\n                key={value}\n                size={value}\n                placeholder={value}\n                _dark={{ placeholderTextColor: 'white' }}\n              />\n            );\n          })}\n        </Stack>\n      </Center>\n    </ScrollView>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/TextArea/value.tsx",
    "content": "import React, { useState } from 'react';\nimport { TextArea, Box } from 'native-base';\n\nexport const Example = () => {\n  const [textAreaValue, setTextAreaValue] = useState('Value Controlled');\n  return (\n    <Box alignItems=\"center\" w=\"100%\">\n      <TextArea\n        value={textAreaValue}\n        onChange={(e: any) => setTextAreaValue(e.currentTarget.value)} // for web\n        onChangeText={(text: any) => setTextAreaValue(text)} // for android and ios\n        w=\"75%\"\n        maxW=\"300\"\n      />\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/VStack/basic.tsx",
    "content": "import React from 'react';\nimport { VStack, Center } from 'native-base';\n\nexport function Example() {\n  return (\n    <VStack space={4} alignItems=\"center\">\n      <Center w=\"64\" h=\"20\" bg=\"indigo.300\" rounded=\"md\" shadow={3} />\n      <Center w=\"64\" h=\"20\" bg=\"indigo.500\" rounded=\"md\" shadow={3} />\n      <Center w=\"64\" h=\"20\" bg=\"indigo.700\" rounded=\"md\" shadow={3} />\n    </VStack>\n  );\n}\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/VStack/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport { Example } from './basic';\n\nstoriesOf('VStack', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Example />);\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/View/Basic.tsx",
    "content": "import React from 'react';\nimport { Box, Heading, Text } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Box>\n      <Heading>\n        A component library for the\n        <Heading color=\"emerald.500\"> React Ecosystem</Heading>\n      </Heading>\n      <Text mt=\"3\" fontWeight=\"medium\">\n        NativeBase is a simple, modular and accessible component library that\n        gives you building blocks to build you React applications.\n      </Text>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/View/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport { Example as Basic } from './Basic';\n\nstoriesOf('View', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />);\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/ZStack/CenterStack.tsx",
    "content": "import React from 'react';\nimport { Center, ZStack, Box } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Center h=\"96\">\n      <ZStack alignItems=\"center\" justifyContent=\"center\">\n        <Box bg=\"indigo.700\" size=\"64\" rounded=\"lg\" />\n        <Box bg=\"indigo.500\" size=\"48\" rounded=\"lg\" shadow={8} />\n        <Box bg=\"indigo.300\" size=\"32\" rounded=\"lg\" shadow={8} />\n      </ZStack>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/ZStack/example.tsx",
    "content": "import React from 'react';\nimport { Center, ZStack, Box } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Center h=\"40\">\n      <Box mt=\"-32\">\n        <ZStack mt=\"3\" ml={-50}>\n          <Box bg=\"primary.700\" size=\"20\" rounded=\"lg\" shadow={3} />\n          <Box\n            bg=\"primary.500\"\n            mt=\"5\"\n            ml=\"5\"\n            size=\"20\"\n            rounded=\"lg\"\n            shadow={5}\n          />\n          <Box\n            bg=\"primary.300\"\n            mt=\"10\"\n            ml=\"10\"\n            size=\"20\"\n            rounded=\"lg\"\n            shadow={7}\n          />\n        </ZStack>\n      </Box>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/components/primitives/ZStack/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../Wrapper';\nimport { Example as ZStack } from './example';\nimport { Example as CenterStack } from './CenterStack';\n\nstoriesOf('ZStack', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic ZStack', () => <ZStack />)\n  .add('ZStack items centered', () => <CenterStack />);\n"
  },
  {
    "path": "example/storybook/stories/examples/Signin.tsx",
    "content": "import * as React from 'react';\nimport {\n  Box,\n  Text,\n  Heading,\n  VStack,\n  FormControl,\n  Input,\n  Link,\n  Button,\n  HStack,\n  Center,\n} from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Center w=\"100%\">\n      <Box safeArea p=\"2\" py=\"8\" w=\"90%\" maxW=\"290\">\n        <Heading\n          size=\"lg\"\n          fontWeight=\"600\"\n          color=\"coolGray.800\"\n          _dark={{ color: 'warmGray.50' }}\n        >\n          Welcome\n        </Heading>\n        <Heading\n          mt=\"1\"\n          _dark={{ color: 'warmGray.200' }}\n          color=\"coolGray.600\"\n          fontWeight=\"medium\"\n          size=\"xs\"\n        >\n          Sign in to continue!\n        </Heading>\n\n        <VStack space={3} mt=\"5\">\n          <FormControl>\n            <FormControl.Label>Email ID</FormControl.Label>\n            <Input />\n          </FormControl>\n          <FormControl>\n            <FormControl.Label>Password</FormControl.Label>\n            <Input type=\"password\" />\n            <Link\n              _text={{ fontSize: 'xs', fontWeight: '500', color: 'indigo.500' }}\n              alignSelf=\"flex-end\"\n              mt=\"1\"\n            >\n              Forget Password?\n            </Link>\n          </FormControl>\n          <Button mt=\"2\" colorScheme=\"indigo\">\n            Sign in\n          </Button>\n          <HStack mt=\"6\" justifyContent=\"center\">\n            <Text\n              fontSize=\"sm\"\n              color=\"coolGray.600\"\n              _dark={{ color: 'warmGray.200' }}\n            >\n              I'm a new user.{' '}\n            </Text>\n            <Link\n              _text={{\n                color: 'indigo.500',\n                fontWeight: 'medium',\n                fontSize: 'sm',\n              }}\n              href=\"#\"\n            >\n              Sign Up\n            </Link>\n          </HStack>\n        </VStack>\n      </Box>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/examples/Signup.tsx",
    "content": "import * as React from 'react';\nimport {\n  Box,\n  Heading,\n  VStack,\n  FormControl,\n  Input,\n  Button,\n  Center,\n} from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Center w=\"100%\">\n      <Box safeArea p=\"2\" w=\"90%\" maxW=\"290\" py=\"8\">\n        <Heading\n          size=\"lg\"\n          color=\"coolGray.800\"\n          _dark={{ color: 'warmGray.50' }}\n          fontWeight=\"semibold\"\n        >\n          Welcome\n        </Heading>\n        <Heading\n          mt=\"1\"\n          color=\"coolGray.600\"\n          _dark={{ color: 'warmGray.200' }}\n          fontWeight=\"medium\"\n          size=\"xs\"\n        >\n          Sign up to continue!\n        </Heading>\n        <VStack space={3} mt=\"5\">\n          <FormControl>\n            <FormControl.Label>Email</FormControl.Label>\n            <Input />\n          </FormControl>\n          <FormControl>\n            <FormControl.Label>Password</FormControl.Label>\n            <Input type=\"password\" />\n          </FormControl>\n          <FormControl>\n            <FormControl.Label>Confirm Password</FormControl.Label>\n            <Input type=\"password\" />\n          </FormControl>\n          <Button mt=\"2\" colorScheme=\"indigo\">\n            Sign up\n          </Button>\n        </VStack>\n      </Box>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/examples/TodoApp.tsx",
    "content": "import React from 'react';\nimport {\n  Input,\n  IconButton,\n  Checkbox,\n  Text,\n  Box,\n  VStack,\n  HStack,\n  Heading,\n  Icon,\n  Center,\n  useToast,\n} from 'native-base';\nimport { Feather, Entypo } from '@expo/vector-icons';\n\nexport const Example = () => {\n  const instState = [\n    {\n      title: 'Code',\n      isCompleted: true,\n    },\n    {\n      title: 'Meeting with team at 9',\n      isCompleted: false,\n    },\n    {\n      title: 'Check Emails',\n      isCompleted: false,\n    },\n    {\n      title: 'Write an article',\n      isCompleted: false,\n    },\n  ];\n  const [list, setList] = React.useState(instState);\n  const [inputValue, setInputValue] = React.useState('');\n  const toast = useToast();\n  const addItem = (title: string) => {\n    if (title === '') {\n      toast.show({\n        title: 'Please Enter Text',\n        status: 'warning',\n      });\n      return;\n    }\n    setList((prevList) => {\n      return [...prevList, { title: title, isCompleted: false }];\n    });\n  };\n\n  const handleDelete = (index: number) => {\n    setList((prevList) => {\n      const temp = prevList.filter((_, itemI) => itemI !== index);\n      return temp;\n    });\n  };\n\n  const handleStatusChange = (index: number) => {\n    setList((prevList) => {\n      const newList = [...prevList];\n      newList[index].isCompleted = !newList[index].isCompleted;\n      return newList;\n    });\n  };\n\n  return (\n    <Center w=\"100%\">\n      <Box maxW=\"300\" w=\"100%\">\n        <Heading mb=\"2\" size=\"md\">\n          Wednesday\n        </Heading>\n        <VStack space={4}>\n          <HStack space={2}>\n            <Input\n              flex={1}\n              onChangeText={(v) => setInputValue(v)}\n              value={inputValue}\n              placeholder=\"Add Task\"\n            />\n            <IconButton\n              borderRadius=\"sm\"\n              variant=\"solid\"\n              icon={\n                <Icon as={Feather} name=\"plus\" size=\"sm\" color=\"warmGray.50\" />\n              }\n              onPress={() => {\n                addItem(inputValue);\n                setInputValue('');\n              }}\n            />\n          </HStack>\n          <VStack space={2}>\n            {list.map((item, itemI) => (\n              <HStack\n                w=\"100%\"\n                justifyContent=\"space-between\"\n                alignItems=\"center\"\n                key={item.title + itemI.toString()}\n              >\n                <Checkbox\n                  isChecked={item.isCompleted}\n                  onChange={() => handleStatusChange(itemI)}\n                  value={item.title}\n                ></Checkbox>\n                <Text\n                  width=\"100%\"\n                  flexShrink={1}\n                  textAlign=\"left\"\n                  mx=\"2\"\n                  strikeThrough={item.isCompleted}\n                  _light={{\n                    color: item.isCompleted ? 'gray.400' : 'coolGray.800',\n                  }}\n                  _dark={{\n                    color: item.isCompleted ? 'gray.400' : 'coolGray.50',\n                  }}\n                  onPress={() => handleStatusChange(itemI)}\n                >\n                  {item.title}\n                </Text>\n                <IconButton\n                  size=\"sm\"\n                  colorScheme=\"trueGray\"\n                  icon={\n                    <Icon\n                      as={Entypo}\n                      name=\"minus\"\n                      size=\"xs\"\n                      color=\"trueGray.400\"\n                    />\n                  }\n                  onPress={() => handleDelete(itemI)}\n                />\n              </HStack>\n            ))}\n          </VStack>\n        </VStack>\n      </Box>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/examples/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from '../components/Wrapper';\nimport { Example as TodoApp } from './TodoApp';\nimport { Example as Signin } from './Signin';\nimport { Example as Signup } from './Signup';\n\nstoriesOf('Examples', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Todo App', () => <TodoApp />)\n  .add('Signin Screen', () => <Signin />)\n  .add('Signup Screen', () => <Signup />);\n"
  },
  {
    "path": "example/storybook/stories/hooks/useAccessibleColors/Basic.tsx",
    "content": "import React from 'react';\nimport {\n  Button,\n  useContrastText,\n  useAccessibleColors,\n  useTheme,\n  Center,\n  HStack,\n  Switch,\n  Text,\n  Stack,\n} from 'native-base';\n\nconst ButtonTemplate = ({ shade }: any) => {\n  const colorContrast = useContrastText(`emerald.${shade}`);\n  return (\n    <Center>\n      <Button\n        colorScheme=\"emerald\"\n        key={`emerald.${shade}`}\n        bg={`emerald.${shade}`}\n        _text={{\n          color: colorContrast,\n        }}\n        mb={1}\n      >\n        Save\n      </Button>\n    </Center>\n  );\n};\n\nexport const Example = () => {\n  const [, , toggleAccessibleColors] = useAccessibleColors();\n  const { colors } = useTheme();\n  return (\n    <Center>\n      <Stack space=\"3\" direction={['column', 'row']}>\n        {Object.keys(colors.yellow).map((key, index) => {\n          if (index > 2 && index < 9) return <ButtonTemplate shade={key} />;\n        })}\n      </Stack>\n      <HStack mt=\"6\" space=\"3\">\n        <Text>Toggle Accessible Colors</Text>\n        <Switch onValueChange={toggleAccessibleColors} colorScheme=\"coolGray\" />\n      </HStack>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/hooks/useAccessibleColors/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from '../../components/Wrapper';\nimport { Example as Basic } from './Basic';\n\nstoriesOf('useAccessibleColors', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />);\n"
  },
  {
    "path": "example/storybook/stories/hooks/useBreakpointValue/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../components/Wrapper';\nimport { Example as Usage } from './usage';\n\nstoriesOf('useBreakpointValue', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Usage', () => <Usage />);\n"
  },
  {
    "path": "example/storybook/stories/hooks/useBreakpointValue/usage.tsx",
    "content": "import React from 'react';\nimport {\n  Icon,\n  useBreakpointValue,\n  Text,\n  VStack,\n  Heading,\n  ScrollView,\n} from 'native-base';\nimport { Foundation, Feather } from '@expo/vector-icons';\nimport { View } from 'react-native';\n\nexport const Example = () => {\n  const flexDir = useBreakpointValue({\n    base: 'column',\n    lg: 'row',\n  });\n  return (\n    <ScrollView showsVerticalScrollIndicator={false}>\n      <VStack py=\"8\" space={8} alignItems=\"center\" justifyContent=\"center\">\n        <Heading>Why us?</Heading>\n        <View style={{ flexDirection: flexDir }}>\n          <VStack\n            m=\"3\"\n            w=\"140\"\n            borderRadius=\"xl\"\n            p=\"3\"\n            bg=\"cyan.200\"\n            space={2}\n            alignItems=\"center\"\n            justifyContent=\"center\"\n          >\n            <Icon\n              as={Foundation}\n              name=\"shield\"\n              size=\"sm\"\n              textAlign=\"center\"\n              _dark={{ color: 'coolGray.800' }}\n            />\n            <Text\n              fontSize=\"lg\"\n              textAlign=\"center\"\n              _dark={{ color: 'coolGray.800' }}\n            >\n              Secure Checkout\n            </Text>\n          </VStack>\n          <VStack\n            m=\"3\"\n            w=\"140\"\n            borderRadius=\"xl\"\n            p=\"3\"\n            bg=\"cyan.200\"\n            space={2}\n            alignItems=\"center\"\n            justifyContent=\"center\"\n          >\n            <Icon\n              as={Foundation}\n              name=\"shield\"\n              size=\"sm\"\n              textAlign=\"center\"\n              _dark={{ color: 'coolGray.800' }}\n            />\n            <Text\n              fontSize=\"lg\"\n              textAlign=\"center\"\n              _dark={{ color: 'coolGray.800' }}\n            >\n              Secure Checkout\n            </Text>\n          </VStack>\n          <VStack\n            m=\"3\"\n            w=\"140\"\n            borderRadius=\"xl\"\n            p=\"3\"\n            bg=\"cyan.200\"\n            space={2}\n            alignItems=\"center\"\n            justifyContent=\"center\"\n          >\n            <Icon\n              as={Feather}\n              name=\"clock\"\n              size=\"sm\"\n              textAlign=\"center\"\n              _dark={{ color: 'coolGray.800' }}\n            />\n            <Text\n              fontSize=\"lg\"\n              textAlign=\"center\"\n              _dark={{ color: 'coolGray.800' }}\n            >\n              Fast Turn Around\n            </Text>\n          </VStack>\n        </View>\n      </VStack>\n    </ScrollView>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/hooks/useClipboard/Usage.tsx",
    "content": "import React from 'react';\nimport {\n  Button,\n  Center,\n  HStack,\n  VStack,\n  Input,\n  useClipboard,\n} from 'native-base';\n\nexport const Example = () => {\n  const [copyText, setCopyText] = React.useState('Hello');\n  const [pasteText, setPasteText] = React.useState('');\n  const { value, onCopy } = useClipboard();\n  return (\n    <Center>\n      <VStack space={2} w=\"100%\" maxW=\"300\">\n        <HStack space={3}>\n          <Input\n            placeholder=\"Copy From\"\n            onChangeText={(v) => setCopyText(v)}\n            value={copyText}\n          />\n          <Button onPress={() => onCopy(copyText)}>Copy</Button>\n        </HStack>\n        <HStack space={3}>\n          <Input\n            placeholder=\"Paste Here\"\n            onChangeText={(v) => setPasteText(v)}\n            value={pasteText}\n          />\n          <Button onPress={() => setPasteText(value)}>Paste</Button>\n        </HStack>\n      </VStack>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/hooks/useClipboard/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../components/Wrapper';\nimport { Example as Usage } from './Usage';\n\nstoriesOf('useClipboard', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Usage', () => <Usage />);\n"
  },
  {
    "path": "example/storybook/stories/hooks/useColorMode/Basic.tsx",
    "content": "import React from 'react';\nimport {\n  NativeBaseProvider,\n  useColorMode,\n  Text,\n  Button,\n  Center,\n  Box,\n} from 'native-base';\n\nfunction UseColorMode() {\n  const { colorMode, toggleColorMode } = useColorMode();\n  return (\n    <Center>\n      <Box\n        p=\"4\"\n        flex=\"1\"\n        maxW=\"300\"\n        mt={10}\n        w=\"100%\"\n        bg={colorMode === 'dark' ? 'coolGray.800' : 'warmGray.50'}\n        safeArea\n      >\n        <Text fontSize=\"lg\" display=\"flex\" mb=\"20\">\n          The active color mode is{' '}\n          <Text bold fontSize=\"lg\">\n            {colorMode}\n          </Text>\n        </Text>\n        <Button onPress={toggleColorMode} h={10}>\n          Toggle\n        </Button>\n      </Box>\n    </Center>\n  );\n}\n\nexport const Example = () => {\n  return (\n    <NativeBaseProvider>\n      <UseColorMode />\n    </NativeBaseProvider>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/hooks/useColorMode/index.tsx",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport { Example as Basic } from './Basic';\n\nstoriesOf('useColorMode', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => (\n    <View style={{ flex: 1 }}>{getStory()}</View>\n  ))\n  .add('Basic', () => <Basic />);\n"
  },
  {
    "path": "example/storybook/stories/hooks/useColorModeValue/Basic.tsx",
    "content": "import React from 'react';\nimport {\n  NativeBaseProvider,\n  useColorMode,\n  Text,\n  Button,\n  Center,\n  Box,\n  useColorModeValue,\n} from 'native-base';\n\nfunction UseColorMode() {\n  const { toggleColorMode } = useColorMode();\n  const text = useColorModeValue('Light', 'Dark');\n  const bg = useColorModeValue('warmGray.50', 'coolGray.800');\n\n  return (\n    <Center>\n      <Box p=\"4\" flex=\"1\" bg={bg} maxW=\"300\" w=\"100%\" mt={10} safeArea>\n        <Text fontSize=\"lg\" display=\"flex\" mb={20}>\n          The active color mode is{' '}\n          <Text bold fontSize=\"18px\">\n            {text}\n          </Text>\n        </Text>\n        <Button onPress={toggleColorMode} h={10}>\n          Toggle\n        </Button>\n      </Box>\n    </Center>\n  );\n}\n\nexport const Example = () => {\n  return (\n    <NativeBaseProvider>\n      <UseColorMode />\n    </NativeBaseProvider>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/hooks/useColorModeValue/index.tsx",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport { Example as Basic } from './Basic';\n\nstoriesOf('useColorModeValue', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => (\n    <View style={{ flex: 1 }}>{getStory()}</View>\n  ))\n  .add('Basic', () => <Basic />);\n"
  },
  {
    "path": "example/storybook/stories/hooks/useContrastText/Basic.tsx",
    "content": "import React from 'react';\nimport { Button, Center, VStack, useContrastText } from 'native-base';\nexport const Example = () => {\n  const bgDark = 'coolGray.900';\n  const bgLight = 'coolGray.100';\n  const colorContrastDark = useContrastText(bgDark);\n  const colorContrastLight = useContrastText(bgLight);\n  return (\n    <Center>\n      <VStack space=\"4\">\n        <Button\n          bg={bgDark}\n          _text={{\n            color: colorContrastDark,\n          }}\n        >\n          NativeBase\n        </Button>\n        <Button\n          bg={bgLight}\n          _text={{\n            color: colorContrastLight,\n          }}\n        >\n          NativeBase\n        </Button>\n      </VStack>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/hooks/useContrastText/Variations.tsx",
    "content": "import React from 'react';\nimport {\n  Button,\n  useContrastText,\n  useAccessibleColors,\n  useTheme,\n} from 'native-base';\n\nconst ButtonTemplate = ({ shade }: any) => {\n  const colorContrast = useContrastText(`teal.${shade}`);\n  return (\n    <Button\n      key={`primary.${shade}`}\n      bg={`primary.${shade}`}\n      _text={{ color: colorContrast }}\n      mb={1}\n    >\n      NativeBase\n    </Button>\n  );\n};\n\nexport const Example = () => {\n  let [, , toggleAccessibleColors] = useAccessibleColors();\n  const { colors } = useTheme();\n\n  return (\n    <>\n      {Object.keys(colors.primary).map((key) => (\n        <ButtonTemplate shade={key} />\n      ))}\n      <Button mt={2} onPress={toggleAccessibleColors} colorScheme=\"indigo\">\n        Toggle Accessible Colors\n      </Button>\n    </>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/hooks/useContrastText/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from '../../components/Wrapper';\nimport { Example as Basic } from './Basic';\nimport { Example as Variations } from './Variations';\n\nstoriesOf('useContrastText', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />)\n  .add('Variations', () => <Variations />);\n"
  },
  {
    "path": "example/storybook/stories/hooks/useDisclose/Usage.tsx",
    "content": "import React from 'react';\nimport { Modal, Button, useDisclose, Center } from 'native-base';\n\nexport const Example = () => {\n  const { isOpen, onOpen, onClose } = useDisclose();\n  return (\n    <Center>\n      <Modal isOpen={isOpen} onClose={onClose}>\n        <Modal.Content>\n          <Modal.CloseButton />\n          <Modal.Header fontSize=\"4xl\" fontWeight=\"bold\">\n            Delete Customer\n          </Modal.Header>\n          <Modal.Body>\n            This will remove all data relating to Alex. This action cannot be\n            reversed. Deleted data can not be recovered.\n          </Modal.Body>\n          <Modal.Footer>\n            <Button variant=\"unstyled\" mr=\"1\" onPress={onClose}>\n              Cancel\n            </Button>\n            <Button colorScheme=\"error\" onPress={onClose}>\n              Delete\n            </Button>\n          </Modal.Footer>\n        </Modal.Content>\n      </Modal>\n      <Button onPress={onOpen}>Open Modal</Button>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/hooks/useDisclose/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../components/Wrapper';\nimport { Example as Usage } from './Usage';\n\nstoriesOf('useDisclose', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Usage', () => <Usage />);\n"
  },
  {
    "path": "example/storybook/stories/hooks/useMediaQuery/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../components/Wrapper';\nimport { Example as MinWidth } from './min-width';\nimport { Example as MaxHeight } from './max-height';\nimport { Example as Orientation } from './orientation';\n\nstoriesOf('useMediaQuery', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('MinWidth', () => <MinWidth />)\n  .add('MaxHeight', () => <MaxHeight />)\n  .add('Orientation', () => <Orientation />);\n"
  },
  {
    "path": "example/storybook/stories/hooks/useMediaQuery/max-height.tsx",
    "content": "import React from 'react';\nimport { useMediaQuery, HStack, VStack, Center, Skeleton } from 'native-base';\n\nexport const Example = () => {\n  const [isSmallScreen] = useMediaQuery({\n    minHeight: 280,\n    maxHeight: 480,\n  });\n  return (\n    <Center w=\"100%\">\n      {isSmallScreen ? (\n        <HStack\n          w=\"90%\"\n          maxW=\"400\"\n          borderWidth=\"1\"\n          space={8}\n          rounded=\"md\"\n          borderColor=\"coolGray.400\"\n          p=\"4\"\n        >\n          <VStack flex=\"3\" space=\"4\">\n            <Skeleton />\n            <Skeleton.Text />\n            <HStack space=\"2\" alignItems=\"center\">\n              <Skeleton size=\"5\" rounded=\"full\" />\n              <Skeleton h=\"3\" flex=\"2\" rounded=\"full\" />\n              <Skeleton h=\"3\" flex=\"1\" rounded=\"full\" />\n            </HStack>\n          </VStack>\n        </HStack>\n      ) : (\n        <HStack\n          w=\"90%\"\n          maxW=\"400\"\n          borderWidth=\"1\"\n          space={8}\n          rounded=\"md\"\n          borderColor=\"coolGray.400\"\n          p=\"4\"\n        >\n          <Skeleton flex=\"1\" h=\"150\" rounded=\"md\" />\n          <VStack flex=\"3\" space=\"4\">\n            <Skeleton />\n            <Skeleton.Text />\n            <HStack space=\"2\" alignItems=\"center\">\n              <Skeleton size=\"5\" rounded=\"full\" />\n              <Skeleton h=\"3\" flex=\"2\" rounded=\"full\" />\n              <Skeleton h=\"3\" flex=\"1\" rounded=\"full\" />\n            </HStack>\n          </VStack>\n        </HStack>\n      )}\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/hooks/useMediaQuery/min-width.tsx",
    "content": "import React from 'react';\nimport { useMediaQuery, HStack, VStack, Center, Skeleton } from 'native-base';\n\nexport const Example = () => {\n  const [isSmallScreen] = useMediaQuery({\n    minWidth: 280,\n  });\n  return (\n    <Center w=\"100%\">\n      {isSmallScreen ? (\n        <HStack\n          w=\"90%\"\n          maxW=\"400\"\n          borderWidth=\"1\"\n          space={8}\n          rounded=\"md\"\n          borderColor=\"coolGray.400\"\n          p=\"4\"\n        >\n          <VStack flex=\"3\" space=\"4\">\n            <Skeleton />\n            <Skeleton.Text />\n            <HStack space=\"2\" alignItems=\"center\">\n              <Skeleton size=\"5\" rounded=\"full\" />\n              <Skeleton h=\"3\" flex=\"2\" rounded=\"full\" />\n              <Skeleton h=\"3\" flex=\"1\" rounded=\"full\" />\n            </HStack>\n          </VStack>\n        </HStack>\n      ) : (\n        <HStack\n          w=\"90%\"\n          maxW=\"400\"\n          borderWidth=\"1\"\n          space={8}\n          rounded=\"md\"\n          borderColor=\"coolGray.400\"\n          p=\"4\"\n        >\n          <Skeleton flex=\"1\" h=\"150\" rounded=\"md\" />\n          <VStack flex=\"3\" space=\"4\">\n            <Skeleton />\n            <Skeleton.Text />\n            <HStack space=\"2\" alignItems=\"center\">\n              <Skeleton size=\"5\" rounded=\"full\" />\n              <Skeleton h=\"3\" flex=\"2\" rounded=\"full\" />\n              <Skeleton h=\"3\" flex=\"1\" rounded=\"full\" />\n            </HStack>\n          </VStack>\n        </HStack>\n      )}\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/hooks/useMediaQuery/orientation.tsx",
    "content": "import React from 'react';\nimport { useMediaQuery, VStack, Skeleton, Center, HStack } from 'native-base';\n\nexport const Example = () => {\n  const [isLandScape, isPortrait] = useMediaQuery([\n    { orientation: 'landscape' },\n    { orientation: 'portrait' },\n  ]);\n  return (\n    <Center w=\"100%\">\n      {isPortrait && (\n        <HStack\n          w=\"90%\"\n          maxW=\"400\"\n          borderWidth=\"1\"\n          space={8}\n          rounded=\"md\"\n          borderColor=\"coolGray.400\"\n          p=\"4\"\n        >\n          <VStack flex=\"3\" space=\"4\">\n            <Skeleton />\n            <Skeleton.Text />\n            <HStack space=\"2\" alignItems=\"center\">\n              <Skeleton size=\"5\" rounded=\"full\" />\n              <Skeleton h=\"3\" flex=\"2\" rounded=\"full\" />\n              <Skeleton h=\"3\" flex=\"1\" rounded=\"full\" />\n            </HStack>\n          </VStack>\n        </HStack>\n      )}\n      {isLandScape && (\n        <HStack\n          w=\"90%\"\n          maxW=\"400\"\n          borderWidth=\"1\"\n          space={8}\n          rounded=\"md\"\n          borderColor=\"coolGray.400\"\n          p=\"4\"\n        >\n          <Skeleton flex=\"1\" h=\"150\" rounded=\"md\" />\n          <VStack flex=\"3\" space=\"4\">\n            <Skeleton />\n            <Skeleton.Text />\n            <HStack space=\"2\" alignItems=\"center\">\n              <Skeleton size=\"5\" rounded=\"full\" />\n              <Skeleton h=\"3\" flex=\"2\" rounded=\"full\" />\n              <Skeleton h=\"3\" flex=\"1\" rounded=\"full\" />\n            </HStack>\n          </VStack>\n        </HStack>\n      )}\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/hooks/useSafeArea/Fixed.tsx",
    "content": "import React from 'react';\nimport { NativeBaseProvider, Box, Text } from 'native-base';\nfunction MyComponent() {\n  return (\n    // This would look same on all devices\n    <Box bg=\"teal.400\" height={200} width={200} safeAreaTop={8}>\n      <Text>NativeBase</Text>\n    </Box>\n  );\n}\n\nexport const Example = () => {\n  return (\n    <NativeBaseProvider>\n      <MyComponent />\n    </NativeBaseProvider>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/hooks/useSafeArea/Flexible.tsx",
    "content": "import React from 'react';\nimport { NativeBaseProvider, Text, Box } from 'native-base';\nfunction MyComponent() {\n  return (\n    // This would look different on devices with different insets\n    <Box bg=\"teal.400\" height={200} width={200} safeAreaTop>\n      <Text>NativeBase</Text>\n    </Box>\n  );\n}\n\nexport const Example = () => {\n  return (\n    <NativeBaseProvider>\n      <MyComponent />\n    </NativeBaseProvider>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/hooks/useSafeArea/Hook.tsx",
    "content": "import React from 'react';\nimport { NativeBaseProvider, Box, Text, useSafeArea } from 'native-base';\nfunction MyComponent() {\n  const safeAreaProps = useSafeArea({ safeAreaTop: true, pt: 2 });\n  return (\n    // This would look same on all devices\n    <Box bg=\"teal.400\" height={200} width={200} {...safeAreaProps}>\n      <Text>NativeBase</Text>\n    </Box>\n  );\n}\n\nexport const Example = () => {\n  return (\n    <NativeBaseProvider>\n      <MyComponent />\n    </NativeBaseProvider>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/hooks/useSafeArea/index.tsx",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport { Example as Flexible } from './Flexible';\nimport { Example as Fixed } from './Fixed';\nimport { Example as Hook } from './Hook';\n\nstoriesOf('useSafeArea', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <View>{getStory()}</View>)\n  .add('Flexible', () => <Flexible />)\n  .add('Fixed', () => <Fixed />)\n  .add('Hook', () => <Hook />);\n"
  },
  {
    "path": "example/storybook/stories/hooks/useSx/Basic.tsx",
    "content": "import React from 'react';\nimport { useSx } from 'native-base';\nimport type { StyledProps } from 'native-base';\nimport { View, Text } from 'react-native';\n\nconst textStyle: StyledProps = {\n  color: ['orange.900', 'white', 'black'],\n  textAlign: 'center',\n  size: '12',\n};\n\nexport const Example = () => {\n  const sx = useSx();\n  console.log('Size', sx(textStyle));\n  return (\n    <View\n      style={[\n        sx({\n          p: 2,\n          bg: ['blue.300', 'violet.400', 'red.400'],\n          width: 48,\n          height: 48,\n        }),\n        { justifyContent: 'center', alignItems: 'center' },\n      ]}\n    >\n      <Text style={sx(textStyle)}>New Feat useSx in NativeBase</Text>\n    </View>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/hooks/useSx/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from '../../components/Wrapper';\nimport { Example as Basic } from './Basic';\n\nstoriesOf('useSx', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />);\n"
  },
  {
    "path": "example/storybook/stories/index.ts",
    "content": "// Components\n//Basic\nexport * from './components/basic/ScrollView';\nexport * from './components/basic/FlatList';\nexport * from './components/basic/SectionList';\nexport * from './components/basic/StatusBar';\nexport * from './components/basic/KeyboardAvoidingView';\n\n// export * from './components/composites/Accordion';\nexport * from './components/composites/Actionsheet';\nexport * from './components/composites/Alert';\nexport * from './components/composites/AlertDialog';\n// export * from './components/composites/AppBar';\nexport * from './components/composites/AspectRatio';\nexport * from './components/composites/Avatar';\nexport * from './components/composites/Badge';\nexport * from './components/primitives/Box';\nexport * from './components/composites/Breadcrumb';\nexport * from './components/primitives/Button';\nexport * from './components/primitives/ButtonGroup';\nexport * from './components/composites/Center';\nexport * from './components/primitives/Checkbox';\n// export * from './components/composites/CircularProgress';\n// export * from './components/composites/CloseButton';\n// export * from './components/composites/Code';\n// export * from './components/composites/Collapse';\nexport * from './components/primitives/Column';\nexport * from './components/composites/Container';\nexport * from './components/composites/Divider';\nexport * from './components/composites/Fab';\n// export * from './components/composites/factory';\nexport * from './components/primitives/Flex';\nexport * from './components/composites/FormControl';\nexport * from './components/primitives/Heading';\nexport * from './components/primitives/Hidden';\nexport * from './components/primitives/HStack';\nexport * from './components/primitives/Icon';\nexport * from './components/composites/IconButton';\nexport * from './components/primitives/Image';\nexport * from './components/primitives/Input';\n// export * from './components/composites/Kbd';\nexport * from './components/primitives/Link';\nexport * from './components/primitives/List';\nexport * from './components/composites/Menu';\nexport * from './components/composites/Modal';\n// export * from './components/composites/NumberInput';\n// export * from './components/composites/PinInput';\nexport * from './components/composites/Popover';\nexport * from './components/composites/Progress';\nexport * from './components/primitives/Radio';\nexport * from './components/primitives/Row';\nexport * from './components/primitives/Select';\n// export * from './components/composites/SimpleGrid';\nexport * from './components/composites/Skeleton';\nexport * from './components/primitives/Slider';\nexport * from './components/primitives/Spinner';\nexport * from './components/primitives/Stack';\n// export * from './components/composites/Stat';\nexport * from './components/primitives/Switch';\n// export * from './components/composites/Tabs';\n// export * from './components/composites/Tag';\nexport * from './components/primitives/Text';\nexport * from './components/primitives/TextArea';\nexport * from './components/composites/Toast';\nexport * from './components/composites/Tooltip';\n// export * from './components/composites/TextField';\n// export * from './components/composites/Toast';\nexport * from './components/composites/Transitions';\nexport * from './components/primitives/Pressable';\n// export * from './components/composites/Typeahead';\n\nexport * from './components/primitives/View';\nexport * from './components/primitives/VStack';\n// export * from './components/composites/Wrap';\nexport * from './components/primitives/ZStack';\n// export * from './components/composites/Card';\nexport * from './components/composites/Card';\n\n// Hooks\nexport * from './hooks/useBreakpointValue';\nexport * from './hooks/useClipboard';\nexport * from './hooks/useColorMode';\nexport * from './hooks/useColorModeValue';\nexport * from './hooks/useDisclose';\nexport * from './hooks/useMediaQuery';\nexport * from './hooks/useSafeArea';\nexport * from './hooks/useContrastText';\nexport * from './hooks/useAccessibleColors';\nexport * from './hooks/useSx';\n// // Theme\nexport * from './theme/Custom';\nexport * from './theme/Mode';\nexport * from './theme/Responsive';\n\n// // Community integrations\n// export * from './community-integrations/Formik';\n// export * from './community-integrations/ReactHookForm';\n\n// // Examples\nexport * from './examples';\n"
  },
  {
    "path": "example/storybook/stories/theme/Custom/Basic.tsx",
    "content": "import React from 'react';\nimport { Heading, VStack, NativeBaseProvider, extendTheme } from 'native-base';\n\nexport const Example = () => {\n  const theme = extendTheme({\n    colors: {\n      custom: {\n        100: '#f7c',\n        200: '#faa',\n        300: '#1ac',\n      },\n    },\n    components: {\n      Heading: {\n        baseStyle: {\n          color: 'custom.100',\n        },\n      },\n    },\n  });\n\n  return (\n    <NativeBaseProvider theme={theme}>\n      <VStack flex={1} justifyContent=\"center\" alignItems=\"center\">\n        <Heading> I'm a Heading</Heading>\n        <Heading color=\"custom.300\"> I'm a Heading</Heading>\n      </VStack>\n    </NativeBaseProvider>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/theme/Custom/Content.tsx",
    "content": "import React from 'react';\n\nimport {\n  Heading,\n  useColorMode,\n  Button,\n  HStack,\n  Avatar,\n  VStack,\n  Text,\n  Box,\n  Center,\n} from 'native-base';\n\nexport const Content = () => {\n  const { toggleColorMode } = useColorMode();\n  return (\n    <Center\n      _light={{ bg: 'warmGray.50' }}\n      h=\"100%\"\n      _dark={{ bg: 'coolGray.800' }}\n    >\n      <Box flex={1}>\n        <VStack\n          my={4}\n          space={4}\n          flex={1}\n          justifyContent=\"center\"\n          // alignItems=\"center\"\n        >\n          <Heading\n            justifyContent=\"center\"\n            color=\"custom.200\"\n            _dark={{ color: 'warmGray.50' }}\n            mb=\"1\"\n          >\n            Inbox\n          </Heading>\n          <Box\n            py={2}\n            border={1}\n            borderRadius=\"md\"\n            _light={{ borderColor: 'gray.800' }}\n            _dark={{ borderColor: 'gray.50' }}\n          >\n            <HStack\n              alignItems=\"center\"\n              justifyContent=\"space-between\"\n              space={3}\n            >\n              <Box\n                flexDirection=\"row\"\n                alignItems=\"center\"\n                justifyContent=\"center\"\n              >\n                <Avatar\n                  mr={4}\n                  size=\"lg\"\n                  source={{\n                    uri:\n                      'https://pbs.twimg.com/profile_images/1309797238651060226/18cm6VhQ_400x400.jpg',\n                  }}\n                >\n                  Ankur\n                </Avatar>\n                <VStack>\n                  <Heading fontWeight=\"medium\" size=\"md\">\n                    Ankur\n                  </Heading>\n                  <Text color=\"amber.400\" _dark={{ color: 'amber.500' }}>\n                    Software Engineer\n                  </Text>\n                </VStack>\n              </Box>\n            </HStack>\n          </Box>\n          <Box\n            py={2}\n            border={1}\n            borderRadius=\"md\"\n            _light={{ borderColor: 'gray.800' }}\n            _dark={{ borderColor: 'gray.50' }}\n          >\n            <HStack\n              alignItems=\"center\"\n              justifyContent=\"space-between\"\n              space={3}\n            >\n              <Box\n                flexDirection=\"row\"\n                alignItems=\"center\"\n                justifyContent=\"center\"\n              >\n                <Avatar\n                  mr={4}\n                  size=\"lg\"\n                  source={{\n                    uri:\n                      'https://pbs.twimg.com/profile_images/1320985200663293952/lE_Kg6vr_400x400.jpg',\n                  }}\n                >\n                  Rehman\n                </Avatar>\n                <VStack>\n                  <Heading fontWeight=\"medium\" size=\"md\">\n                    Rehman\n                  </Heading>\n                  <Text color=\"amber.400\" _dark={{ color: 'amber.500' }}>\n                    Software Engineer\n                  </Text>\n                </VStack>\n              </Box>\n            </HStack>\n          </Box>\n          <Box\n            py={2}\n            border={1}\n            borderRadius=\"md\"\n            _light={{ borderColor: 'gray.800' }}\n            _dark={{ borderColor: 'gray.50' }}\n          >\n            <HStack\n              alignItems=\"center\"\n              justifyContent=\"space-between\"\n              space={3}\n            >\n              <Box\n                flexDirection=\"row\"\n                alignItems=\"center\"\n                justifyContent=\"center\"\n              >\n                <Avatar\n                  mr={4}\n                  size=\"lg\"\n                  source={{\n                    uri:\n                      'https://pbs.twimg.com/profile_images/1352844693151731713/HKO7cnlW_400x400.jpg',\n                  }}\n                >\n                  Rohit\n                </Avatar>\n                <VStack>\n                  <Heading fontWeight=\"medium\" size=\"md\">\n                    Rohit\n                  </Heading>\n                  <Text color=\"amber.400\" _dark={{ color: 'amber.500' }}>\n                    Software Engineer\n                  </Text>\n                </VStack>\n              </Box>\n            </HStack>\n          </Box>\n          <HStack justifyContent=\"center\">\n            <Button\n              mt={4}\n              onPress={() => {\n                toggleColorMode && toggleColorMode();\n              }}\n            >\n              Change mode\n            </Button>\n          </HStack>\n        </VStack>\n      </Box>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/theme/Custom/CustomizingBase.tsx",
    "content": "import React from 'react';\nimport { Text, extendTheme, Center, NativeBaseProvider } from 'native-base';\n\nexport const Example = () => {\n  const theme = extendTheme({\n    components: {\n      Text: {\n        baseStyle: {\n          color: 'emerald.400',\n        },\n        defaultProps: { size: 'lg' },\n        sizes: {\n          xl: { fontSize: '64px' },\n          lg: { fontSize: '32px' },\n          md: { fontSize: '16px' },\n          sm: { fontSize: '12px' },\n        },\n      },\n    },\n  });\n\n  return (\n    <NativeBaseProvider theme={theme}>\n      <Center flex={1}>\n        <Text>NativeBase</Text>\n      </Center>\n    </NativeBaseProvider>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/theme/Custom/CustomizingComponents.tsx",
    "content": "import React from 'react';\nimport { NativeBaseProvider, themeTools, extendTheme } from 'native-base';\nimport { Content } from './Content';\n\nexport const Example = () => {\n  const theme = extendTheme({\n    colors: {\n      // Add new color\n      custom: {\n        100: '#f7c',\n        200: '#333',\n        300: '#1ac',\n      },\n      amber: {\n        400: '#4B5563',\n        500: '#E7E5E4',\n      },\n    },\n    config: {\n      // Changing initialColorMode to 'dark'\n      initialColorMode: 'dark',\n    },\n    components: {\n      Button: {\n        // Can simply pass default props to change default behaviour of components.\n        defaultProps: {\n          colorScheme: 'primary',\n        },\n      },\n      Checkbox: {\n        defaultProps: {\n          size: 'lg',\n          colorScheme: 'amber',\n        },\n      },\n      Avatar: {\n        baseStyle: {\n          borderRadius: 'md',\n        },\n      },\n      Heading: {\n        // Can pass also function, giving you access themeingTools\n        baseStyle: (props: any) => {\n          return {\n            color: themeTools.mode('coolGray.800', 'warmGray.50')(props),\n            fontWeight: 'normal',\n          };\n        },\n      },\n    },\n  });\n  return (\n    <NativeBaseProvider theme={theme}>\n      <Content />\n    </NativeBaseProvider>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/theme/Custom/CustomizingTheme.tsx",
    "content": "import React from 'react';\nimport { NativeBaseProvider, extendTheme } from 'native-base';\nimport { Content } from './Content';\n\nexport const Example = () => {\n  const theme = extendTheme({\n    colors: {\n      // Add new color\n      custom: {\n        100: '#f7c',\n        200: '#333',\n        300: '#1ac',\n      },\n      // Update existing colors\n      amber: {\n        400: '#4B5563',\n        500: '#E7E5E4',\n      },\n    },\n    fonts: {\n      heading: `monospace`,\n      body: `monospace`,\n    },\n    config: {\n      // Changing initialColorMode to 'dark'\n      initialColorMode: 'dark',\n    },\n  });\n  return (\n    <NativeBaseProvider theme={theme}>\n      <Content />\n    </NativeBaseProvider>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/theme/Custom/CustomizingVariant.tsx",
    "content": "import React from 'react';\nimport {\n  NativeBaseProvider,\n  Button,\n  extendTheme,\n  Center,\n  VStack,\n} from 'native-base';\n\nexport const Example = () => {\n  const theme = extendTheme({\n    components: {\n      Button: {\n        variants: {\n          rounded: ({ colorScheme }: any) => {\n            return {\n              bg: `${colorScheme}.500`,\n              _hover: { bg: `${colorScheme}.600` },\n              _pressed: { bg: `${colorScheme}.700` },\n              _text: { color: `${colorScheme}.50` },\n              rounded: 'full',\n            };\n          },\n        },\n      },\n    },\n  });\n\n  return (\n    <NativeBaseProvider theme={theme}>\n      <Center flex={1}>\n        <VStack space={2}>\n          <Button colorScheme=\"emerald\">Default Button</Button>\n          <Button colorScheme=\"emerald\" variant=\"rounded\">\n            Rounded Button\n          </Button>\n        </VStack>\n      </Center>\n    </NativeBaseProvider>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/theme/Custom/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport { Example as Basic } from './Basic';\nimport { Example as CustomizingBase } from './CustomizingBase';\nimport { Example as CustomizingTheme } from './CustomizingTheme';\nimport { Example as CustomizingVariant } from './CustomizingVariant';\nimport { Example as CustomizingComponents } from './CustomizingComponents';\n\nstoriesOf('Custom Theme', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => getStory())\n  .add('Basic', () => <Basic />)\n  .add('CustomizingTheme', () => <CustomizingTheme />)\n  .add('CustomizingComponents', () => <CustomizingComponents />)\n  .add('CustomizingBase', () => <CustomizingBase />)\n  .add('CustomizingVariant', () => <CustomizingVariant />);\n"
  },
  {
    "path": "example/storybook/stories/theme/Mode/Basic.tsx",
    "content": "import React from 'react';\nimport { NativeBaseProvider, extendTheme, themeTools } from 'native-base';\nimport { Content } from './Content';\n\nconst customTheme = extendTheme({\n  components: {\n    Heading: {\n      baseStyle: (props: any) => {\n        return {\n          color: themeTools.mode('red.300', 'blue.300')(props),\n          fontWeight: 'bold',\n        };\n      },\n    },\n  },\n});\nexport const Example = () => {\n  return (\n    <NativeBaseProvider theme={customTheme}>\n      <Content />\n    </NativeBaseProvider>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/theme/Mode/Content.tsx",
    "content": "import React from 'react';\n\nimport {\n  Heading,\n  useColorMode,\n  Button,\n  HStack,\n  Avatar,\n  Center,\n} from 'native-base';\n\nexport const Content = () => {\n  const { colorMode, toggleColorMode } = useColorMode();\n  return (\n    <Center\n      height=\"100%\"\n      width=\"100%\"\n      _light={{ bg: 'gray.200' }}\n      _dark={{ bg: 'gray.800' }}\n    >\n      <Heading>I'm a Heading</Heading>\n      <Button\n        colorScheme={colorMode === 'light' ? 'blue' : 'red'}\n        onPress={toggleColorMode}\n      >\n        Change mode\n      </Button>\n      <HStack space={2} mt={3}>\n        <Avatar\n          source={{\n            uri:\n              'https://pbs.twimg.com/profile_images/1309797238651060226/18cm6VhQ_400x400.jpg',\n          }}\n        >\n          Ankur\n        </Avatar>\n        <Avatar\n          source={{\n            uri:\n              'https://pbs.twimg.com/profile_images/1260766060401188864/ySJfMIbZ_400x400.jpg',\n          }}\n        >\n          Rohit\n        </Avatar>\n      </HStack>\n    </Center>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/theme/Mode/DefaultMode.tsx",
    "content": "import React from 'react';\nimport { NativeBaseProvider, extendTheme } from 'native-base';\nimport { Content } from './Content';\n\nexport const Example = () => {\n  const config = {\n    useSystemColorMode: false,\n    initialColorMode: 'dark',\n  };\n  const customTheme = extendTheme({ config });\n  return (\n    <NativeBaseProvider theme={customTheme}>\n      <Content />\n    </NativeBaseProvider>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/theme/Mode/Persistence.tsx",
    "content": "import React from 'react';\nimport { NativeBaseProvider, StorageManager, ColorMode } from 'native-base';\nimport AsyncStorage from '@react-native-async-storage/async-storage';\nimport { Content } from './Content';\n\nconst colorModeManager: StorageManager = {\n  get: async () => {\n    try {\n      let val = await AsyncStorage.getItem('@color-mode');\n      return val === 'dark' ? 'dark' : 'light';\n    } catch (e) {\n      return 'light';\n    }\n  },\n  set: async (value: ColorMode) => {\n    try {\n      await AsyncStorage.setItem('@color-mode', value);\n    } catch (e) {\n      console.log(e);\n    }\n  },\n};\nexport const Example = () => {\n  return (\n    <NativeBaseProvider colorModeManager={colorModeManager}>\n      <Content />\n    </NativeBaseProvider>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/theme/Mode/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport { View, StyleSheet } from 'react-native';\nimport { Example as Basic } from './Basic';\nimport { Example as DefaultMode } from './DefaultMode';\nimport { Example as Persistence } from './Persistence';\n\nstoriesOf('Mode', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => (\n    <View style={styles.wrapper}>{getStory()}</View>\n  ))\n  .add('Basic', () => <Basic />)\n  .add('DefaultMode', () => <DefaultMode />)\n  .add('Persistence', () => <Persistence />);\n\nconst styles = StyleSheet.create({\n  wrapper: { position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 },\n});\n"
  },
  {
    "path": "example/storybook/stories/theme/Responsive/Basic.tsx",
    "content": "import React from 'react';\nimport { Box } from 'native-base';\nexport const Example = () => {\n  return (\n    <Box bg=\"red.200\" w={['100px', '400px', '560px']}>\n      This is a box\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/theme/Responsive/Demo.tsx",
    "content": "import React from 'react';\nimport { Box, HStack, Image, Text, Center, Stack, Heading } from 'native-base';\n\nexport const Example = () => {\n  return (\n    <Stack\n      direction={['column', 'column', 'row']}\n      rounded=\"lg\"\n      overflow=\"hidden\"\n      width={['72', '72', '4/6']}\n      borderColor=\"coolGray.200\"\n      borderWidth=\"1\"\n      _dark={{ borderColor: 'coolGray.600', backgroundColor: 'gray.700' }}\n      _web={{\n        shadow: 2,\n        borderWidth: 0,\n      }}\n      _light={{ backgroundColor: 'gray.50' }}\n    >\n      <Box>\n        <Image\n          w={['100%', '100%', '40']}\n          h=\"40\"\n          source={{\n            uri:\n              'https://www.holidify.com/images/cmsuploads/compressed/Bangalore_citycover_20190613234056.jpg',\n          }}\n          alt=\"image\"\n        />\n        <Center\n          bg=\"violet.500\"\n          _text={{ color: 'white', fontWeight: '700', fontSize: 'xs' }}\n          position=\"absolute\"\n          bottom={0}\n          px=\"3\"\n          py=\"1.5\"\n        >\n          PHOTOS\n        </Center>\n      </Box>\n      <Stack p=\"4\" space={[3, 3, 1.5]}>\n        <Stack space={2}>\n          <Heading size=\"md\" ml=\"-1\">\n            The Garden City\n          </Heading>\n          <Text\n            fontSize=\"xs\"\n            color=\"violet.500\"\n            fontWeight=\"500\"\n            ml=\"-0.5\"\n            mt=\"-1\"\n          >\n            The Silicon Valley of India.\n          </Text>\n        </Stack>\n        <Text fontWeight=\"400\">\n          Bengaluru (also called Bangalore) is the center of India's high-tech\n          industry. The city is also known for its parks and nightlife.\n        </Text>\n        <HStack alignItems=\"center\" space={4} justifyContent=\"space-between\">\n          <HStack alignItems=\"center\">\n            <Text\n              color=\"coolGray.600\"\n              _dark={{ color: 'warmGray.200' }}\n              fontWeight=\"400\"\n            >\n              6 mins ago\n            </Text>\n          </HStack>\n        </HStack>\n      </Stack>\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/theme/Responsive/Direction.tsx",
    "content": "import React from 'react';\nimport { Box, Avatar } from 'native-base';\nexport const Example = () => {\n  return (\n    <Box\n      justifyContent=\"space-between\"\n      alignItems=\"center\"\n      w=\"100%\"\n      flexDirection={{ base: 'column', sm: 'column', md: 'row' }}\n      p={4}\n    >\n      <Avatar\n        borderWidth={1}\n        size=\"xl\"\n        m={2}\n        source={{\n          uri:\n            'https://pbs.twimg.com/profile_images/1188747996843761665/8CiUdKZW_400x400.jpg',\n        }}\n      />\n      <Avatar\n        borderWidth={1}\n        size=\"xl\"\n        m={2}\n        source={{\n          uri:\n            'https://pbs.twimg.com/profile_images/1177303899243343872/B0sUJIH0_400x400.jpg',\n        }}\n      />\n      <Avatar\n        borderWidth={1}\n        size=\"xl\"\n        m={2}\n        source={{\n          uri:\n            'https://pbs.twimg.com/profile_images/1260766060401188864/ySJfMIbZ_400x400.jpg',\n        }}\n      />\n      <Avatar\n        borderWidth={1}\n        size=\"xl\"\n        m={2}\n        source={{\n          uri:\n            'https://pbs.twimg.com/profile_images/1309797238651060226/18cm6VhQ_400x400.jpg',\n        }}\n      />\n      <Avatar\n        borderWidth={1}\n        size=\"xl\"\n        m={2}\n        source={{\n          uri:\n            'https://pbs.twimg.com/profile_images/983582580372004864/h9ccP0Ea_400x400.jpg',\n        }}\n      />\n      <Avatar\n        borderWidth={1}\n        size=\"xl\"\n        m={2}\n        source={{\n          uri:\n            'https://pbs.twimg.com/profile_images/1320985200663293952/lE_Kg6vr_400x400.jpg',\n        }}\n      />\n    </Box>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/theme/Responsive/FontSize.tsx",
    "content": "import React from 'react';\nimport { Text } from 'native-base';\nexport const Example = () => {\n  return (\n    <Text fontSize={{ base: '24px', md: '40px', lg: '56px' }}>\n      This is responsive text\n    </Text>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/theme/Responsive/More.tsx",
    "content": "import React from 'react';\nimport { Box } from 'native-base';\nexport const Example = () => {\n  return (\n    <>\n      <Box\n        height={{\n          base: '75%', // 0-768px\n          md: '50%', // 768px-1280,\n          xl: '25%', // 1280px+\n        }}\n        bg=\"teal.400\"\n        width={[\n          '75%', // 0-480px\n          '50%', // 480px-768px\n          '25%', // 768px-992px\n          '15%', // 992px+\n        ]}\n      />\n      {/* responsive font size */}\n      <Box fontSize={['sm', 'md', 'lg', 'xl']}>Font Size</Box>\n      {/* responsive margin */}\n      <Box mt={[2, 4, 6, 8]} width=\"100%\" height=\"24px\" bg=\"green.400\" />\n      {/* responsive padding */}\n      <Box bg=\"red.200\" p={[2, 4, 6, 8]}>\n        Padding\n      </Box>\n    </>\n  );\n};\n"
  },
  {
    "path": "example/storybook/stories/theme/Responsive/index.tsx",
    "content": "import React from 'react';\nimport { storiesOf } from '@storybook/react-native';\nimport { withKnobs } from '@storybook/addon-knobs';\nimport Wrapper from './../../components/Wrapper';\nimport { Example as Basic } from './Basic';\nimport { Example as FontSize } from './FontSize';\nimport { Example as Direction } from './Direction';\nimport { Example as More } from './More';\nimport { Example as Demo } from './Demo';\n\nstoriesOf('Responsive', module)\n  .addDecorator(withKnobs)\n  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)\n  .add('Basic', () => <Basic />)\n  .add('FontSize', () => <FontSize />)\n  .add('More', () => <More />)\n  .add('Direction', () => <Direction />)\n  .add('Demo', () => <Demo />);\n"
  },
  {
    "path": "example/tests/storybook.test.js",
    "content": "/**\n * @jest-environment jsdom\n */\nimport initStoryshots from '@storybook/addon-storyshots';\n\njest.useFakeTimers();\nglobal.setImmediate = global.setTimeout;\ninitStoryshots();\n"
  },
  {
    "path": "example/tests/storybook.test.js.snap.android",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Storyshots Actionsheet Composition 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Actionsheet\n            </Text>\n          </View>\n        </View>\n      </View>\n      <Modal\n        animationType=\"slide\"\n        hardwareAccelerated={false}\n        onRequestClose={[Function]}\n        statusBarTranslucent={true}\n        transparent={true}\n        visible={false}\n      >\n        <View\n          pointerEvents=\"none\"\n          style={\n            Object {\n              \"bottom\": 0,\n              \"left\": 0,\n              \"opacity\": 0,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"top\": 0,\n              \"transform\": Array [\n                Object {\n                  \"translateY\": 0,\n                },\n                Object {\n                  \"translateX\": 0,\n                },\n                Object {\n                  \"scale\": 1,\n                },\n                Object {\n                  \"scaleX\": 1,\n                },\n                Object {\n                  \"scaleY\": 1,\n                },\n                Object {\n                  \"rotate\": \"0deg\",\n                },\n              ],\n            }\n          }\n        >\n          <View\n            accessible={false}\n            dataSet={Object {}}\n            focusable={true}\n            importantForAccessibility=\"no\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"backgroundColor\": \"rgb(0, 0, 0)\",\n                \"bottom\": 0,\n                \"left\": 0,\n                \"opacity\": 0.3,\n                \"position\": \"absolute\",\n                \"right\": 0,\n                \"top\": 0,\n              }\n            }\n          />\n        </View>\n        <View\n          pointerEvents=\"none\"\n          style={\n            Object {\n              \"bottom\": 0,\n              \"height\": \"100%\",\n              \"left\": 0,\n              \"opacity\": 1,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"transform\": Array [\n                Object {\n                  \"translateY\": 0,\n                },\n                Object {\n                  \"translateX\": 0,\n                },\n                Object {\n                  \"scale\": 1,\n                },\n                Object {\n                  \"scaleX\": 1,\n                },\n                Object {\n                  \"scaleY\": 1,\n                },\n                Object {\n                  \"rotate\": \"0deg\",\n                },\n              ],\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            onLayout={[Function]}\n            pointerEvents=\"box-none\"\n            style={\n              Object {\n                \"height\": \"100%\",\n                \"opacity\": 0,\n              }\n            }\n          >\n            <View\n              closeOnOverlayClick={true}\n              dataSet={Object {}}\n              pointerEvents=\"box-none\"\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"height\": \"100%\",\n                  \"justifyContent\": \"flex-end\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                onLayout={[Function]}\n                pointerEvents=\"box-none\"\n                style={\n                  Object {\n                    \"transform\": Array [\n                      Object {\n                        \"translateY\": 0,\n                      },\n                    ],\n                    \"width\": \"100%\",\n                  }\n                }\n              >\n                <View\n                  accessibilityViewIsModal={true}\n                  aria-modal=\"true\"\n                  dataSet={Object {}}\n                  onAccessibilityEscape={[Function]}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"#fafafa\",\n                      \"borderRadius\": 0,\n                      \"borderTopLeftRadius\": 0,\n                      \"borderTopRightRadius\": 0,\n                      \"elevation\": 2,\n                      \"maxHeight\": 1184,\n                      \"overflow\": \"hidden\",\n                      \"paddingBottom\": 8,\n                      \"paddingLeft\": 8,\n                      \"paddingRight\": 8,\n                      \"paddingTop\": 8,\n                      \"shadowColor\": \"#000000\",\n                      \"shadowOffset\": Object {\n                        \"height\": 1,\n                        \"width\": 0,\n                      },\n                      \"shadowOpacity\": 0.2,\n                      \"shadowRadius\": 1.41,\n                      \"width\": \"100%\",\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"height\": 60,\n                        \"justifyContent\": \"center\",\n                        \"paddingLeft\": 16,\n                        \"paddingRight\": 16,\n                        \"width\": \"100%\",\n                      }\n                    }\n                  >\n                    <Text\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"backgroundColor\": undefined,\n                          \"color\": \"#71717a\",\n                          \"fontFamily\": undefined,\n                          \"fontSize\": 16,\n                          \"fontStyle\": \"normal\",\n                          \"fontWeight\": \"400\",\n                          \"letterSpacing\": 0,\n                          \"lineHeight\": 24,\n                          \"textDecorationLine\": undefined,\n                        }\n                      }\n                    >\n                      Albums\n                    </Text>\n                  </View>\n                  <View\n                    accessible={true}\n                    dataSet={Object {}}\n                    focusable={true}\n                    onBlur={[Function]}\n                    onClick={[Function]}\n                    onFocus={[Function]}\n                    onHoverIn={[Function]}\n                    onHoverOut={[Function]}\n                    onResponderGrant={[Function]}\n                    onResponderMove={[Function]}\n                    onResponderRelease={[Function]}\n                    onResponderTerminate={[Function]}\n                    onResponderTerminationRequest={[Function]}\n                    onStartShouldSetResponder={[Function]}\n                    style={\n                      Object {\n                        \"backgroundColor\": \"#fafafa\",\n                        \"justifyContent\": \"flex-start\",\n                        \"paddingBottom\": 16,\n                        \"paddingLeft\": 16,\n                        \"paddingRight\": 16,\n                        \"paddingTop\": 16,\n                        \"width\": \"100%\",\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"flexDirection\": \"row\",\n                        }\n                      }\n                      test={true}\n                    >\n                      <View\n                        dataSet={Object {}}\n                        style={Object {}}\n                      >\n                        <Text\n                          dataSet={Object {}}\n                          style={\n                            Object {\n                              \"backgroundColor\": undefined,\n                              \"color\": \"#171717\",\n                              \"fontFamily\": undefined,\n                              \"fontSize\": 16,\n                              \"fontStyle\": \"normal\",\n                              \"fontWeight\": \"400\",\n                              \"letterSpacing\": 0,\n                              \"lineHeight\": 24,\n                              \"textDecorationLine\": undefined,\n                            }\n                          }\n                        >\n                          Delete\n                        </Text>\n                      </View>\n                    </View>\n                  </View>\n                  <View\n                    accessible={true}\n                    dataSet={Object {}}\n                    focusable={true}\n                    onBlur={[Function]}\n                    onClick={[Function]}\n                    onFocus={[Function]}\n                    onHoverIn={[Function]}\n                    onHoverOut={[Function]}\n                    onResponderGrant={[Function]}\n                    onResponderMove={[Function]}\n                    onResponderRelease={[Function]}\n                    onResponderTerminate={[Function]}\n                    onResponderTerminationRequest={[Function]}\n                    onStartShouldSetResponder={[Function]}\n                    style={\n                      Object {\n                        \"backgroundColor\": \"#fafafa\",\n                        \"justifyContent\": \"flex-start\",\n                        \"paddingBottom\": 16,\n                        \"paddingLeft\": 16,\n                        \"paddingRight\": 16,\n                        \"paddingTop\": 16,\n                        \"width\": \"100%\",\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"flexDirection\": \"row\",\n                        }\n                      }\n                      test={true}\n                    >\n                      <View\n                        dataSet={Object {}}\n                        style={Object {}}\n                      >\n                        <Text\n                          dataSet={Object {}}\n                          style={\n                            Object {\n                              \"backgroundColor\": undefined,\n                              \"color\": \"#171717\",\n                              \"fontFamily\": undefined,\n                              \"fontSize\": 16,\n                              \"fontStyle\": \"normal\",\n                              \"fontWeight\": \"400\",\n                              \"letterSpacing\": 0,\n                              \"lineHeight\": 24,\n                              \"textDecorationLine\": undefined,\n                            }\n                          }\n                        >\n                          Share\n                        </Text>\n                      </View>\n                    </View>\n                  </View>\n                  <View\n                    accessible={true}\n                    dataSet={Object {}}\n                    focusable={true}\n                    onBlur={[Function]}\n                    onClick={[Function]}\n                    onFocus={[Function]}\n                    onHoverIn={[Function]}\n                    onHoverOut={[Function]}\n                    onResponderGrant={[Function]}\n                    onResponderMove={[Function]}\n                    onResponderRelease={[Function]}\n                    onResponderTerminate={[Function]}\n                    onResponderTerminationRequest={[Function]}\n                    onStartShouldSetResponder={[Function]}\n                    style={\n                      Object {\n                        \"backgroundColor\": \"#fafafa\",\n                        \"justifyContent\": \"flex-start\",\n                        \"paddingBottom\": 16,\n                        \"paddingLeft\": 16,\n                        \"paddingRight\": 16,\n                        \"paddingTop\": 16,\n                        \"width\": \"100%\",\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"flexDirection\": \"row\",\n                        }\n                      }\n                      test={true}\n                    >\n                      <View\n                        dataSet={Object {}}\n                        style={Object {}}\n                      >\n                        <Text\n                          dataSet={Object {}}\n                          style={\n                            Object {\n                              \"backgroundColor\": undefined,\n                              \"color\": \"#171717\",\n                              \"fontFamily\": undefined,\n                              \"fontSize\": 16,\n                              \"fontStyle\": \"normal\",\n                              \"fontWeight\": \"400\",\n                              \"letterSpacing\": 0,\n                              \"lineHeight\": 24,\n                              \"textDecorationLine\": undefined,\n                            }\n                          }\n                        >\n                          Play\n                        </Text>\n                      </View>\n                    </View>\n                  </View>\n                  <View\n                    accessible={true}\n                    dataSet={Object {}}\n                    focusable={true}\n                    onBlur={[Function]}\n                    onClick={[Function]}\n                    onFocus={[Function]}\n                    onHoverIn={[Function]}\n                    onHoverOut={[Function]}\n                    onResponderGrant={[Function]}\n                    onResponderMove={[Function]}\n                    onResponderRelease={[Function]}\n                    onResponderTerminate={[Function]}\n                    onResponderTerminationRequest={[Function]}\n                    onStartShouldSetResponder={[Function]}\n                    style={\n                      Object {\n                        \"backgroundColor\": \"#fafafa\",\n                        \"justifyContent\": \"flex-start\",\n                        \"paddingBottom\": 16,\n                        \"paddingLeft\": 16,\n                        \"paddingRight\": 16,\n                        \"paddingTop\": 16,\n                        \"width\": \"100%\",\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"flexDirection\": \"row\",\n                        }\n                      }\n                      test={true}\n                    >\n                      <View\n                        dataSet={Object {}}\n                        style={Object {}}\n                      >\n                        <Text\n                          dataSet={Object {}}\n                          style={\n                            Object {\n                              \"backgroundColor\": undefined,\n                              \"color\": \"#171717\",\n                              \"fontFamily\": undefined,\n                              \"fontSize\": 16,\n                              \"fontStyle\": \"normal\",\n                              \"fontWeight\": \"400\",\n                              \"letterSpacing\": 0,\n                              \"lineHeight\": 24,\n                              \"textDecorationLine\": undefined,\n                            }\n                          }\n                        >\n                          Favourite\n                        </Text>\n                      </View>\n                    </View>\n                  </View>\n                  <View\n                    accessible={true}\n                    dataSet={Object {}}\n                    focusable={true}\n                    onBlur={[Function]}\n                    onClick={[Function]}\n                    onFocus={[Function]}\n                    onHoverIn={[Function]}\n                    onHoverOut={[Function]}\n                    onResponderGrant={[Function]}\n                    onResponderMove={[Function]}\n                    onResponderRelease={[Function]}\n                    onResponderTerminate={[Function]}\n                    onResponderTerminationRequest={[Function]}\n                    onStartShouldSetResponder={[Function]}\n                    style={\n                      Object {\n                        \"backgroundColor\": \"#fafafa\",\n                        \"justifyContent\": \"flex-start\",\n                        \"paddingBottom\": 16,\n                        \"paddingLeft\": 16,\n                        \"paddingRight\": 16,\n                        \"paddingTop\": 16,\n                        \"width\": \"100%\",\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"flexDirection\": \"row\",\n                        }\n                      }\n                      test={true}\n                    >\n                      <View\n                        dataSet={Object {}}\n                        style={Object {}}\n                      >\n                        <Text\n                          dataSet={Object {}}\n                          style={\n                            Object {\n                              \"backgroundColor\": undefined,\n                              \"color\": \"#171717\",\n                              \"fontFamily\": undefined,\n                              \"fontSize\": 16,\n                              \"fontStyle\": \"normal\",\n                              \"fontWeight\": \"400\",\n                              \"letterSpacing\": 0,\n                              \"lineHeight\": 24,\n                              \"textDecorationLine\": undefined,\n                            }\n                          }\n                        >\n                          Cancel\n                        </Text>\n                      </View>\n                    </View>\n                  </View>\n                </View>\n              </View>\n            </View>\n          </View>\n        </View>\n      </Modal>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Actionsheet Custom Backdrop 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"#0891b2\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 10,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 10,\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n          }\n        }\n        test={true}\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#fafafa\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Actionsheet\n          </Text>\n        </View>\n      </View>\n    </View>\n    <Modal\n      animationType=\"slide\"\n      hardwareAccelerated={false}\n      onRequestClose={[Function]}\n      statusBarTranslucent={true}\n      transparent={true}\n      visible={false}\n    >\n      <View\n        pointerEvents=\"none\"\n        style={\n          Object {\n            \"bottom\": 0,\n            \"left\": 0,\n            \"opacity\": 0,\n            \"position\": \"absolute\",\n            \"right\": 0,\n            \"top\": 0,\n            \"transform\": Array [\n              Object {\n                \"translateY\": 0,\n              },\n              Object {\n                \"translateX\": 0,\n              },\n              Object {\n                \"scale\": 1,\n              },\n              Object {\n                \"scaleX\": 1,\n              },\n              Object {\n                \"scaleY\": 1,\n              },\n              Object {\n                \"rotate\": \"0deg\",\n              },\n            ],\n          }\n        }\n      >\n        <View\n          accessible={false}\n          dataSet={Object {}}\n          focusable={true}\n          importantForAccessibility=\"no\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"backgroundColor\": \"#cffafe\",\n              \"bottom\": 0,\n              \"left\": 0,\n              \"opacity\": 0.3,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"top\": 0,\n            }\n          }\n        />\n      </View>\n      <View\n        pointerEvents=\"none\"\n        style={\n          Object {\n            \"bottom\": 0,\n            \"height\": \"100%\",\n            \"left\": 0,\n            \"opacity\": 1,\n            \"position\": \"absolute\",\n            \"right\": 0,\n            \"transform\": Array [\n              Object {\n                \"translateY\": 0,\n              },\n              Object {\n                \"translateX\": 0,\n              },\n              Object {\n                \"scale\": 1,\n              },\n              Object {\n                \"scaleX\": 1,\n              },\n              Object {\n                \"scaleY\": 1,\n              },\n              Object {\n                \"rotate\": \"0deg\",\n              },\n            ],\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          onLayout={[Function]}\n          pointerEvents=\"box-none\"\n          style={\n            Object {\n              \"height\": \"100%\",\n              \"opacity\": 0,\n            }\n          }\n        >\n          <View\n            closeOnOverlayClick={true}\n            dataSet={Object {}}\n            pointerEvents=\"box-none\"\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"height\": \"100%\",\n                \"justifyContent\": \"flex-end\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              onLayout={[Function]}\n              pointerEvents=\"box-none\"\n              style={\n                Object {\n                  \"transform\": Array [\n                    Object {\n                      \"translateY\": 0,\n                    },\n                  ],\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                collapsable={false}\n                dataSet={Object {}}\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                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                  }\n                }\n              />\n              <View\n                accessibilityViewIsModal={true}\n                aria-modal=\"true\"\n                dataSet={Object {}}\n                onAccessibilityEscape={[Function]}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#fafafa\",\n                    \"borderRadius\": 0,\n                    \"borderTopLeftRadius\": 20,\n                    \"borderTopRightRadius\": 20,\n                    \"elevation\": 2,\n                    \"maxHeight\": 1184,\n                    \"overflow\": \"hidden\",\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 8,\n                    \"paddingRight\": 8,\n                    \"paddingTop\": 8,\n                    \"shadowColor\": \"#000000\",\n                    \"shadowOffset\": Object {\n                      \"height\": 1,\n                      \"width\": 0,\n                    },\n                    \"shadowOpacity\": 0.2,\n                    \"shadowRadius\": 1.41,\n                    \"width\": \"100%\",\n                  }\n                }\n              >\n                <View\n                  collapsable={false}\n                  dataSet={Object {}}\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                      \"alignItems\": \"center\",\n                      \"marginTop\": -8,\n                      \"paddingBottom\": 12,\n                      \"paddingTop\": 12,\n                      \"width\": \"100%\",\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": \"#737373\",\n                        \"borderRadius\": 2,\n                        \"height\": 4,\n                        \"width\": 40,\n                      }\n                    }\n                  />\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 60,\n                      \"justifyContent\": \"center\",\n                      \"paddingLeft\": 16,\n                      \"paddingRight\": 16,\n                      \"width\": \"100%\",\n                    }\n                  }\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#71717a\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 16,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 24,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Albums\n                  </Text>\n                </View>\n                <View\n                  accessible={true}\n                  dataSet={Object {}}\n                  focusable={true}\n                  onBlur={[Function]}\n                  onClick={[Function]}\n                  onFocus={[Function]}\n                  onHoverIn={[Function]}\n                  onHoverOut={[Function]}\n                  onResponderGrant={[Function]}\n                  onResponderMove={[Function]}\n                  onResponderRelease={[Function]}\n                  onResponderTerminate={[Function]}\n                  onResponderTerminationRequest={[Function]}\n                  onStartShouldSetResponder={[Function]}\n                  style={\n                    Object {\n                      \"backgroundColor\": \"#fafafa\",\n                      \"justifyContent\": \"flex-start\",\n                      \"paddingBottom\": 16,\n                      \"paddingLeft\": 16,\n                      \"paddingRight\": 16,\n                      \"paddingTop\": 16,\n                      \"width\": \"100%\",\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"flexDirection\": \"row\",\n                      }\n                    }\n                    test={true}\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={Object {}}\n                    >\n                      <Text\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"backgroundColor\": undefined,\n                            \"color\": \"#171717\",\n                            \"fontFamily\": undefined,\n                            \"fontSize\": 16,\n                            \"fontStyle\": \"normal\",\n                            \"fontWeight\": \"400\",\n                            \"letterSpacing\": 0,\n                            \"lineHeight\": 24,\n                            \"textDecorationLine\": undefined,\n                          }\n                        }\n                      >\n                        Delete\n                      </Text>\n                    </View>\n                  </View>\n                </View>\n                <View\n                  accessible={true}\n                  dataSet={Object {}}\n                  focusable={true}\n                  onBlur={[Function]}\n                  onClick={[Function]}\n                  onFocus={[Function]}\n                  onHoverIn={[Function]}\n                  onHoverOut={[Function]}\n                  onResponderGrant={[Function]}\n                  onResponderMove={[Function]}\n                  onResponderRelease={[Function]}\n                  onResponderTerminate={[Function]}\n                  onResponderTerminationRequest={[Function]}\n                  onStartShouldSetResponder={[Function]}\n                  style={\n                    Object {\n                      \"backgroundColor\": \"#fafafa\",\n                      \"justifyContent\": \"flex-start\",\n                      \"paddingBottom\": 16,\n                      \"paddingLeft\": 16,\n                      \"paddingRight\": 16,\n                      \"paddingTop\": 16,\n                      \"width\": \"100%\",\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"flexDirection\": \"row\",\n                      }\n                    }\n                    test={true}\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={Object {}}\n                    >\n                      <Text\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"backgroundColor\": undefined,\n                            \"color\": \"#171717\",\n                            \"fontFamily\": undefined,\n                            \"fontSize\": 16,\n                            \"fontStyle\": \"normal\",\n                            \"fontWeight\": \"400\",\n                            \"letterSpacing\": 0,\n                            \"lineHeight\": 24,\n                            \"textDecorationLine\": undefined,\n                          }\n                        }\n                      >\n                        Share\n                      </Text>\n                    </View>\n                  </View>\n                </View>\n                <View\n                  accessible={true}\n                  dataSet={Object {}}\n                  focusable={true}\n                  onBlur={[Function]}\n                  onClick={[Function]}\n                  onFocus={[Function]}\n                  onHoverIn={[Function]}\n                  onHoverOut={[Function]}\n                  onResponderGrant={[Function]}\n                  onResponderMove={[Function]}\n                  onResponderRelease={[Function]}\n                  onResponderTerminate={[Function]}\n                  onResponderTerminationRequest={[Function]}\n                  onStartShouldSetResponder={[Function]}\n                  style={\n                    Object {\n                      \"backgroundColor\": \"#fafafa\",\n                      \"justifyContent\": \"flex-start\",\n                      \"paddingBottom\": 16,\n                      \"paddingLeft\": 16,\n                      \"paddingRight\": 16,\n                      \"paddingTop\": 16,\n                      \"width\": \"100%\",\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"flexDirection\": \"row\",\n                      }\n                    }\n                    test={true}\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={Object {}}\n                    >\n                      <Text\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"backgroundColor\": undefined,\n                            \"color\": \"#171717\",\n                            \"fontFamily\": undefined,\n                            \"fontSize\": 16,\n                            \"fontStyle\": \"normal\",\n                            \"fontWeight\": \"400\",\n                            \"letterSpacing\": 0,\n                            \"lineHeight\": 24,\n                            \"textDecorationLine\": undefined,\n                          }\n                        }\n                      >\n                        Play\n                      </Text>\n                    </View>\n                  </View>\n                </View>\n                <View\n                  accessible={true}\n                  dataSet={Object {}}\n                  focusable={true}\n                  onBlur={[Function]}\n                  onClick={[Function]}\n                  onFocus={[Function]}\n                  onHoverIn={[Function]}\n                  onHoverOut={[Function]}\n                  onResponderGrant={[Function]}\n                  onResponderMove={[Function]}\n                  onResponderRelease={[Function]}\n                  onResponderTerminate={[Function]}\n                  onResponderTerminationRequest={[Function]}\n                  onStartShouldSetResponder={[Function]}\n                  style={\n                    Object {\n                      \"backgroundColor\": \"#fafafa\",\n                      \"justifyContent\": \"flex-start\",\n                      \"paddingBottom\": 16,\n                      \"paddingLeft\": 16,\n                      \"paddingRight\": 16,\n                      \"paddingTop\": 16,\n                      \"width\": \"100%\",\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"flexDirection\": \"row\",\n                      }\n                    }\n                    test={true}\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={Object {}}\n                    >\n                      <Text\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"backgroundColor\": undefined,\n                            \"color\": \"#171717\",\n                            \"fontFamily\": undefined,\n                            \"fontSize\": 16,\n                            \"fontStyle\": \"normal\",\n                            \"fontWeight\": \"400\",\n                            \"letterSpacing\": 0,\n                            \"lineHeight\": 24,\n                            \"textDecorationLine\": undefined,\n                          }\n                        }\n                      >\n                        Favourite\n                      </Text>\n                    </View>\n                  </View>\n                </View>\n                <View\n                  accessible={true}\n                  dataSet={Object {}}\n                  focusable={true}\n                  onBlur={[Function]}\n                  onClick={[Function]}\n                  onFocus={[Function]}\n                  onHoverIn={[Function]}\n                  onHoverOut={[Function]}\n                  onResponderGrant={[Function]}\n                  onResponderMove={[Function]}\n                  onResponderRelease={[Function]}\n                  onResponderTerminate={[Function]}\n                  onResponderTerminationRequest={[Function]}\n                  onStartShouldSetResponder={[Function]}\n                  style={\n                    Object {\n                      \"backgroundColor\": \"#fafafa\",\n                      \"justifyContent\": \"flex-start\",\n                      \"paddingBottom\": 16,\n                      \"paddingLeft\": 16,\n                      \"paddingRight\": 16,\n                      \"paddingTop\": 16,\n                      \"width\": \"100%\",\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"flexDirection\": \"row\",\n                      }\n                    }\n                    test={true}\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={Object {}}\n                    >\n                      <Text\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"backgroundColor\": undefined,\n                            \"color\": \"#171717\",\n                            \"fontFamily\": undefined,\n                            \"fontSize\": 16,\n                            \"fontStyle\": \"normal\",\n                            \"fontWeight\": \"400\",\n                            \"letterSpacing\": 0,\n                            \"lineHeight\": 24,\n                            \"textDecorationLine\": undefined,\n                          }\n                        }\n                      >\n                        Cancel\n                      </Text>\n                    </View>\n                  </View>\n                </View>\n              </View>\n            </View>\n          </View>\n        </View>\n      </View>\n    </Modal>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Actionsheet DisableOverlay 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Actionsheet\n            </Text>\n          </View>\n        </View>\n      </View>\n      <Modal\n        animationType=\"slide\"\n        hardwareAccelerated={false}\n        onRequestClose={[Function]}\n        statusBarTranslucent={true}\n        transparent={true}\n        visible={false}\n      >\n        <View\n          pointerEvents=\"none\"\n          style={\n            Object {\n              \"bottom\": 0,\n              \"left\": 0,\n              \"opacity\": 0,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"top\": 0,\n              \"transform\": Array [\n                Object {\n                  \"translateY\": 0,\n                },\n                Object {\n                  \"translateX\": 0,\n                },\n                Object {\n                  \"scale\": 1,\n                },\n                Object {\n                  \"scaleX\": 1,\n                },\n                Object {\n                  \"scaleY\": 1,\n                },\n                Object {\n                  \"rotate\": \"0deg\",\n                },\n              ],\n            }\n          }\n        />\n        <View\n          pointerEvents=\"none\"\n          style={\n            Object {\n              \"bottom\": 0,\n              \"height\": \"100%\",\n              \"left\": 0,\n              \"opacity\": 1,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"transform\": Array [\n                Object {\n                  \"translateY\": 0,\n                },\n                Object {\n                  \"translateX\": 0,\n                },\n                Object {\n                  \"scale\": 1,\n                },\n                Object {\n                  \"scaleX\": 1,\n                },\n                Object {\n                  \"scaleY\": 1,\n                },\n                Object {\n                  \"rotate\": \"0deg\",\n                },\n              ],\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            onLayout={[Function]}\n            pointerEvents=\"box-none\"\n            style={\n              Object {\n                \"height\": \"100%\",\n                \"opacity\": 0,\n              }\n            }\n          >\n            <View\n              closeOnOverlayClick={true}\n              dataSet={Object {}}\n              pointerEvents=\"box-none\"\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"height\": \"100%\",\n                  \"justifyContent\": \"flex-end\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                onLayout={[Function]}\n                pointerEvents=\"box-none\"\n                style={\n                  Object {\n                    \"transform\": Array [\n                      Object {\n                        \"translateY\": 0,\n                      },\n                    ],\n                    \"width\": \"100%\",\n                  }\n                }\n              >\n                <View\n                  collapsable={false}\n                  dataSet={Object {}}\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                      \"paddingBottom\": 8,\n                      \"paddingTop\": 8,\n                    }\n                  }\n                />\n                <View\n                  accessibilityViewIsModal={true}\n                  aria-modal=\"true\"\n                  dataSet={Object {}}\n                  onAccessibilityEscape={[Function]}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"#fafafa\",\n                      \"borderRadius\": 0,\n                      \"borderTopLeftRadius\": 20,\n                      \"borderTopRightRadius\": 20,\n                      \"elevation\": 2,\n                      \"maxHeight\": 1184,\n                      \"overflow\": \"hidden\",\n                      \"paddingBottom\": 8,\n                      \"paddingLeft\": 8,\n                      \"paddingRight\": 8,\n                      \"paddingTop\": 8,\n                      \"shadowColor\": \"#000000\",\n                      \"shadowOffset\": Object {\n                        \"height\": 1,\n                        \"width\": 0,\n                      },\n                      \"shadowOpacity\": 0.2,\n                      \"shadowRadius\": 1.41,\n                      \"width\": \"100%\",\n                    }\n                  }\n                >\n                  <View\n                    collapsable={false}\n                    dataSet={Object {}}\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                        \"alignItems\": \"center\",\n                        \"marginTop\": -8,\n                        \"paddingBottom\": 12,\n                        \"paddingTop\": 12,\n                        \"width\": \"100%\",\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"backgroundColor\": \"#737373\",\n                          \"borderRadius\": 2,\n                          \"height\": 4,\n                          \"width\": 40,\n                        }\n                      }\n                    />\n                  </View>\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"height\": 60,\n                        \"justifyContent\": \"center\",\n                        \"paddingLeft\": 16,\n                        \"paddingRight\": 16,\n                        \"width\": \"100%\",\n                      }\n                    }\n                  >\n                    <Text\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"backgroundColor\": undefined,\n                          \"color\": \"#71717a\",\n                          \"fontFamily\": undefined,\n                          \"fontSize\": 16,\n                          \"fontStyle\": \"normal\",\n                          \"fontWeight\": \"400\",\n                          \"letterSpacing\": 0,\n                          \"lineHeight\": 24,\n                          \"textDecorationLine\": undefined,\n                        }\n                      }\n                    >\n                      Albums\n                    </Text>\n                  </View>\n                  <View\n                    accessible={true}\n                    dataSet={Object {}}\n                    focusable={true}\n                    onBlur={[Function]}\n                    onClick={[Function]}\n                    onFocus={[Function]}\n                    onHoverIn={[Function]}\n                    onHoverOut={[Function]}\n                    onResponderGrant={[Function]}\n                    onResponderMove={[Function]}\n                    onResponderRelease={[Function]}\n                    onResponderTerminate={[Function]}\n                    onResponderTerminationRequest={[Function]}\n                    onStartShouldSetResponder={[Function]}\n                    style={\n                      Object {\n                        \"backgroundColor\": \"#fafafa\",\n                        \"justifyContent\": \"flex-start\",\n                        \"paddingBottom\": 16,\n                        \"paddingLeft\": 16,\n                        \"paddingRight\": 16,\n                        \"paddingTop\": 16,\n                        \"width\": \"100%\",\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"flexDirection\": \"row\",\n                        }\n                      }\n                      test={true}\n                    >\n                      <View\n                        dataSet={Object {}}\n                        style={Object {}}\n                      >\n                        <Text\n                          dataSet={Object {}}\n                          style={\n                            Object {\n                              \"backgroundColor\": undefined,\n                              \"color\": \"#171717\",\n                              \"fontFamily\": undefined,\n                              \"fontSize\": 16,\n                              \"fontStyle\": \"normal\",\n                              \"fontWeight\": \"400\",\n                              \"letterSpacing\": 0,\n                              \"lineHeight\": 24,\n                              \"textDecorationLine\": undefined,\n                            }\n                          }\n                        >\n                          Delete\n                        </Text>\n                      </View>\n                    </View>\n                  </View>\n                  <View\n                    accessible={true}\n                    dataSet={Object {}}\n                    focusable={true}\n                    onBlur={[Function]}\n                    onClick={[Function]}\n                    onFocus={[Function]}\n                    onHoverIn={[Function]}\n                    onHoverOut={[Function]}\n                    onResponderGrant={[Function]}\n                    onResponderMove={[Function]}\n                    onResponderRelease={[Function]}\n                    onResponderTerminate={[Function]}\n                    onResponderTerminationRequest={[Function]}\n                    onStartShouldSetResponder={[Function]}\n                    style={\n                      Object {\n                        \"backgroundColor\": \"#fafafa\",\n                        \"justifyContent\": \"flex-start\",\n                        \"paddingBottom\": 16,\n                        \"paddingLeft\": 16,\n                        \"paddingRight\": 16,\n                        \"paddingTop\": 16,\n                        \"width\": \"100%\",\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"flexDirection\": \"row\",\n                        }\n                      }\n                      test={true}\n                    >\n                      <View\n                        dataSet={Object {}}\n                        style={Object {}}\n                      >\n                        <Text\n                          dataSet={Object {}}\n                          style={\n                            Object {\n                              \"backgroundColor\": undefined,\n                              \"color\": \"#171717\",\n                              \"fontFamily\": undefined,\n                              \"fontSize\": 16,\n                              \"fontStyle\": \"normal\",\n                              \"fontWeight\": \"400\",\n                              \"letterSpacing\": 0,\n                              \"lineHeight\": 24,\n                              \"textDecorationLine\": undefined,\n                            }\n                          }\n                        >\n                          Share\n                        </Text>\n                      </View>\n                    </View>\n                  </View>\n                  <View\n                    accessible={true}\n                    dataSet={Object {}}\n                    focusable={true}\n                    onBlur={[Function]}\n                    onClick={[Function]}\n                    onFocus={[Function]}\n                    onHoverIn={[Function]}\n                    onHoverOut={[Function]}\n                    onResponderGrant={[Function]}\n                    onResponderMove={[Function]}\n                    onResponderRelease={[Function]}\n                    onResponderTerminate={[Function]}\n                    onResponderTerminationRequest={[Function]}\n                    onStartShouldSetResponder={[Function]}\n                    style={\n                      Object {\n                        \"backgroundColor\": \"#fafafa\",\n                        \"justifyContent\": \"flex-start\",\n                        \"paddingBottom\": 16,\n                        \"paddingLeft\": 16,\n                        \"paddingRight\": 16,\n                        \"paddingTop\": 16,\n                        \"width\": \"100%\",\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"flexDirection\": \"row\",\n                        }\n                      }\n                      test={true}\n                    >\n                      <View\n                        dataSet={Object {}}\n                        style={Object {}}\n                      >\n                        <Text\n                          dataSet={Object {}}\n                          style={\n                            Object {\n                              \"backgroundColor\": undefined,\n                              \"color\": \"#171717\",\n                              \"fontFamily\": undefined,\n                              \"fontSize\": 16,\n                              \"fontStyle\": \"normal\",\n                              \"fontWeight\": \"400\",\n                              \"letterSpacing\": 0,\n                              \"lineHeight\": 24,\n                              \"textDecorationLine\": undefined,\n                            }\n                          }\n                        >\n                          Play\n                        </Text>\n                      </View>\n                    </View>\n                  </View>\n                  <View\n                    accessible={true}\n                    dataSet={Object {}}\n                    focusable={true}\n                    onBlur={[Function]}\n                    onClick={[Function]}\n                    onFocus={[Function]}\n                    onHoverIn={[Function]}\n                    onHoverOut={[Function]}\n                    onResponderGrant={[Function]}\n                    onResponderMove={[Function]}\n                    onResponderRelease={[Function]}\n                    onResponderTerminate={[Function]}\n                    onResponderTerminationRequest={[Function]}\n                    onStartShouldSetResponder={[Function]}\n                    style={\n                      Object {\n                        \"backgroundColor\": \"#fafafa\",\n                        \"justifyContent\": \"flex-start\",\n                        \"paddingBottom\": 16,\n                        \"paddingLeft\": 16,\n                        \"paddingRight\": 16,\n                        \"paddingTop\": 16,\n                        \"width\": \"100%\",\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"flexDirection\": \"row\",\n                        }\n                      }\n                      test={true}\n                    >\n                      <View\n                        dataSet={Object {}}\n                        style={Object {}}\n                      >\n                        <Text\n                          dataSet={Object {}}\n                          style={\n                            Object {\n                              \"backgroundColor\": undefined,\n                              \"color\": \"#171717\",\n                              \"fontFamily\": undefined,\n                              \"fontSize\": 16,\n                              \"fontStyle\": \"normal\",\n                              \"fontWeight\": \"400\",\n                              \"letterSpacing\": 0,\n                              \"lineHeight\": 24,\n                              \"textDecorationLine\": undefined,\n                            }\n                          }\n                        >\n                          Favourite\n                        </Text>\n                      </View>\n                    </View>\n                  </View>\n                  <View\n                    accessible={true}\n                    dataSet={Object {}}\n                    focusable={true}\n                    onBlur={[Function]}\n                    onClick={[Function]}\n                    onFocus={[Function]}\n                    onHoverIn={[Function]}\n                    onHoverOut={[Function]}\n                    onResponderGrant={[Function]}\n                    onResponderMove={[Function]}\n                    onResponderRelease={[Function]}\n                    onResponderTerminate={[Function]}\n                    onResponderTerminationRequest={[Function]}\n                    onStartShouldSetResponder={[Function]}\n                    style={\n                      Object {\n                        \"backgroundColor\": \"#fafafa\",\n                        \"justifyContent\": \"flex-start\",\n                        \"paddingBottom\": 16,\n                        \"paddingLeft\": 16,\n                        \"paddingRight\": 16,\n                        \"paddingTop\": 16,\n                        \"width\": \"100%\",\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"flexDirection\": \"row\",\n                        }\n                      }\n                      test={true}\n                    >\n                      <View\n                        dataSet={Object {}}\n                        style={Object {}}\n                      >\n                        <Text\n                          dataSet={Object {}}\n                          style={\n                            Object {\n                              \"backgroundColor\": undefined,\n                              \"color\": \"#171717\",\n                              \"fontFamily\": undefined,\n                              \"fontSize\": 16,\n                              \"fontStyle\": \"normal\",\n                              \"fontWeight\": \"400\",\n                              \"letterSpacing\": 0,\n                              \"lineHeight\": 24,\n                              \"textDecorationLine\": undefined,\n                            }\n                          }\n                        >\n                          Cancel\n                        </Text>\n                      </View>\n                    </View>\n                  </View>\n                </View>\n              </View>\n            </View>\n          </View>\n        </View>\n      </Modal>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Actionsheet Icon 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Actionsheet\n            </Text>\n          </View>\n        </View>\n      </View>\n      <Modal\n        animationType=\"slide\"\n        hardwareAccelerated={false}\n        onRequestClose={[Function]}\n        statusBarTranslucent={true}\n        transparent={true}\n        visible={false}\n      >\n        <View\n          pointerEvents=\"none\"\n          style={\n            Object {\n              \"bottom\": 0,\n              \"left\": 0,\n              \"opacity\": 0,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"top\": 0,\n              \"transform\": Array [\n                Object {\n                  \"translateY\": 0,\n                },\n                Object {\n                  \"translateX\": 0,\n                },\n                Object {\n                  \"scale\": 1,\n                },\n                Object {\n                  \"scaleX\": 1,\n                },\n                Object {\n                  \"scaleY\": 1,\n                },\n                Object {\n                  \"rotate\": \"0deg\",\n                },\n              ],\n            }\n          }\n        >\n          <View\n            accessible={false}\n            dataSet={Object {}}\n            focusable={true}\n            importantForAccessibility=\"no\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"backgroundColor\": \"rgb(0, 0, 0)\",\n                \"bottom\": 0,\n                \"left\": 0,\n                \"opacity\": 0.3,\n                \"position\": \"absolute\",\n                \"right\": 0,\n                \"top\": 0,\n              }\n            }\n          />\n        </View>\n        <View\n          pointerEvents=\"none\"\n          style={\n            Object {\n              \"bottom\": 0,\n              \"height\": \"100%\",\n              \"left\": 0,\n              \"opacity\": 1,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"transform\": Array [\n                Object {\n                  \"translateY\": 0,\n                },\n                Object {\n                  \"translateX\": 0,\n                },\n                Object {\n                  \"scale\": 1,\n                },\n                Object {\n                  \"scaleX\": 1,\n                },\n                Object {\n                  \"scaleY\": 1,\n                },\n                Object {\n                  \"rotate\": \"0deg\",\n                },\n              ],\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            onLayout={[Function]}\n            pointerEvents=\"box-none\"\n            style={\n              Object {\n                \"height\": \"100%\",\n                \"opacity\": 0,\n              }\n            }\n          >\n            <View\n              closeOnOverlayClick={true}\n              dataSet={Object {}}\n              pointerEvents=\"box-none\"\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"height\": \"100%\",\n                  \"justifyContent\": \"flex-end\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                onLayout={[Function]}\n                pointerEvents=\"box-none\"\n                style={\n                  Object {\n                    \"transform\": Array [\n                      Object {\n                        \"translateY\": 0,\n                      },\n                    ],\n                    \"width\": \"100%\",\n                  }\n                }\n              >\n                <View\n                  collapsable={false}\n                  dataSet={Object {}}\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                      \"paddingBottom\": 8,\n                      \"paddingTop\": 8,\n                    }\n                  }\n                />\n                <View\n                  accessibilityViewIsModal={true}\n                  aria-modal=\"true\"\n                  dataSet={Object {}}\n                  onAccessibilityEscape={[Function]}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"#fafafa\",\n                      \"borderRadius\": 0,\n                      \"borderTopLeftRadius\": 20,\n                      \"borderTopRightRadius\": 20,\n                      \"elevation\": 2,\n                      \"maxHeight\": 1184,\n                      \"overflow\": \"hidden\",\n                      \"paddingBottom\": 8,\n                      \"paddingLeft\": 8,\n                      \"paddingRight\": 8,\n                      \"paddingTop\": 8,\n                      \"shadowColor\": \"#000000\",\n                      \"shadowOffset\": Object {\n                        \"height\": 1,\n                        \"width\": 0,\n                      },\n                      \"shadowOpacity\": 0.2,\n                      \"shadowRadius\": 1.41,\n                      \"width\": \"100%\",\n                    }\n                  }\n                >\n                  <View\n                    collapsable={false}\n                    dataSet={Object {}}\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                        \"alignItems\": \"center\",\n                        \"marginTop\": -8,\n                        \"paddingBottom\": 12,\n                        \"paddingTop\": 12,\n                        \"width\": \"100%\",\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"backgroundColor\": \"#737373\",\n                          \"borderRadius\": 2,\n                          \"height\": 4,\n                          \"width\": 40,\n                        }\n                      }\n                    />\n                  </View>\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"height\": 60,\n                        \"justifyContent\": \"center\",\n                        \"paddingLeft\": 16,\n                        \"paddingRight\": 16,\n                        \"width\": \"100%\",\n                      }\n                    }\n                  >\n                    <Text\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"backgroundColor\": undefined,\n                          \"color\": \"#71717a\",\n                          \"fontFamily\": undefined,\n                          \"fontSize\": 16,\n                          \"fontStyle\": \"normal\",\n                          \"fontWeight\": \"400\",\n                          \"letterSpacing\": 0,\n                          \"lineHeight\": 24,\n                          \"textDecorationLine\": undefined,\n                        }\n                      }\n                    >\n                      Albums\n                    </Text>\n                  </View>\n                  <View\n                    accessible={true}\n                    dataSet={Object {}}\n                    focusable={true}\n                    onBlur={[Function]}\n                    onClick={[Function]}\n                    onFocus={[Function]}\n                    onHoverIn={[Function]}\n                    onHoverOut={[Function]}\n                    onResponderGrant={[Function]}\n                    onResponderMove={[Function]}\n                    onResponderRelease={[Function]}\n                    onResponderTerminate={[Function]}\n                    onResponderTerminationRequest={[Function]}\n                    onStartShouldSetResponder={[Function]}\n                    style={\n                      Object {\n                        \"backgroundColor\": \"#fafafa\",\n                        \"justifyContent\": \"flex-start\",\n                        \"paddingBottom\": 16,\n                        \"paddingLeft\": 16,\n                        \"paddingRight\": 16,\n                        \"paddingTop\": 16,\n                        \"width\": \"100%\",\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"flexDirection\": \"row\",\n                        }\n                      }\n                      test={true}\n                    >\n                      <Text />\n                      <View\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"width\": 16,\n                          }\n                        }\n                      />\n                      <View\n                        dataSet={Object {}}\n                        style={Object {}}\n                      >\n                        <Text\n                          dataSet={Object {}}\n                          style={\n                            Object {\n                              \"backgroundColor\": undefined,\n                              \"color\": \"#171717\",\n                              \"fontFamily\": undefined,\n                              \"fontSize\": 16,\n                              \"fontStyle\": \"normal\",\n                              \"fontWeight\": \"400\",\n                              \"letterSpacing\": 0,\n                              \"lineHeight\": 24,\n                              \"textDecorationLine\": undefined,\n                            }\n                          }\n                        >\n                          Delete\n                        </Text>\n                      </View>\n                    </View>\n                  </View>\n                  <View\n                    accessible={true}\n                    dataSet={Object {}}\n                    focusable={true}\n                    onBlur={[Function]}\n                    onClick={[Function]}\n                    onFocus={[Function]}\n                    onHoverIn={[Function]}\n                    onHoverOut={[Function]}\n                    onResponderGrant={[Function]}\n                    onResponderMove={[Function]}\n                    onResponderRelease={[Function]}\n                    onResponderTerminate={[Function]}\n                    onResponderTerminationRequest={[Function]}\n                    onStartShouldSetResponder={[Function]}\n                    style={\n                      Object {\n                        \"backgroundColor\": \"#fafafa\",\n                        \"justifyContent\": \"flex-start\",\n                        \"paddingBottom\": 16,\n                        \"paddingLeft\": 16,\n                        \"paddingRight\": 16,\n                        \"paddingTop\": 16,\n                        \"width\": \"100%\",\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"flexDirection\": \"row\",\n                        }\n                      }\n                      test={true}\n                    >\n                      <Text />\n                      <View\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"width\": 16,\n                          }\n                        }\n                      />\n                      <View\n                        dataSet={Object {}}\n                        style={Object {}}\n                      >\n                        <Text\n                          dataSet={Object {}}\n                          style={\n                            Object {\n                              \"backgroundColor\": undefined,\n                              \"color\": \"#171717\",\n                              \"fontFamily\": undefined,\n                              \"fontSize\": 16,\n                              \"fontStyle\": \"normal\",\n                              \"fontWeight\": \"400\",\n                              \"letterSpacing\": 0,\n                              \"lineHeight\": 24,\n                              \"textDecorationLine\": undefined,\n                            }\n                          }\n                        >\n                          Share\n                        </Text>\n                      </View>\n                    </View>\n                  </View>\n                  <View\n                    accessible={true}\n                    dataSet={Object {}}\n                    focusable={true}\n                    onBlur={[Function]}\n                    onClick={[Function]}\n                    onFocus={[Function]}\n                    onHoverIn={[Function]}\n                    onHoverOut={[Function]}\n                    onResponderGrant={[Function]}\n                    onResponderMove={[Function]}\n                    onResponderRelease={[Function]}\n                    onResponderTerminate={[Function]}\n                    onResponderTerminationRequest={[Function]}\n                    onStartShouldSetResponder={[Function]}\n                    style={\n                      Object {\n                        \"backgroundColor\": \"#fafafa\",\n                        \"justifyContent\": \"flex-start\",\n                        \"paddingBottom\": 16,\n                        \"paddingLeft\": 16,\n                        \"paddingRight\": 16,\n                        \"paddingTop\": 16,\n                        \"width\": \"100%\",\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"flexDirection\": \"row\",\n                        }\n                      }\n                      test={true}\n                    >\n                      <Text />\n                      <View\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"width\": 16,\n                          }\n                        }\n                      />\n                      <View\n                        dataSet={Object {}}\n                        style={Object {}}\n                      >\n                        <Text\n                          dataSet={Object {}}\n                          style={\n                            Object {\n                              \"backgroundColor\": undefined,\n                              \"color\": \"#171717\",\n                              \"fontFamily\": undefined,\n                              \"fontSize\": 16,\n                              \"fontStyle\": \"normal\",\n                              \"fontWeight\": \"400\",\n                              \"letterSpacing\": 0,\n                              \"lineHeight\": 24,\n                              \"textDecorationLine\": undefined,\n                            }\n                          }\n                        >\n                          Play\n                        </Text>\n                      </View>\n                    </View>\n                  </View>\n                  <View\n                    accessible={true}\n                    dataSet={Object {}}\n                    focusable={true}\n                    onBlur={[Function]}\n                    onClick={[Function]}\n                    onFocus={[Function]}\n                    onHoverIn={[Function]}\n                    onHoverOut={[Function]}\n                    onResponderGrant={[Function]}\n                    onResponderMove={[Function]}\n                    onResponderRelease={[Function]}\n                    onResponderTerminate={[Function]}\n                    onResponderTerminationRequest={[Function]}\n                    onStartShouldSetResponder={[Function]}\n                    style={\n                      Object {\n                        \"backgroundColor\": \"#fafafa\",\n                        \"justifyContent\": \"flex-start\",\n                        \"paddingBottom\": 16,\n                        \"paddingLeft\": 16,\n                        \"paddingRight\": 16,\n                        \"paddingTop\": 16,\n                        \"width\": \"100%\",\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"flexDirection\": \"row\",\n                        }\n                      }\n                      test={true}\n                    >\n                      <Text />\n                      <View\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"width\": 16,\n                          }\n                        }\n                      />\n                      <View\n                        dataSet={Object {}}\n                        style={Object {}}\n                      >\n                        <Text\n                          dataSet={Object {}}\n                          style={\n                            Object {\n                              \"backgroundColor\": undefined,\n                              \"color\": \"#171717\",\n                              \"fontFamily\": undefined,\n                              \"fontSize\": 16,\n                              \"fontStyle\": \"normal\",\n                              \"fontWeight\": \"400\",\n                              \"letterSpacing\": 0,\n                              \"lineHeight\": 24,\n                              \"textDecorationLine\": undefined,\n                            }\n                          }\n                        >\n                          Favourite\n                        </Text>\n                      </View>\n                    </View>\n                  </View>\n                  <View\n                    accessible={true}\n                    dataSet={Object {}}\n                    focusable={true}\n                    onBlur={[Function]}\n                    onClick={[Function]}\n                    onFocus={[Function]}\n                    onHoverIn={[Function]}\n                    onHoverOut={[Function]}\n                    onResponderGrant={[Function]}\n                    onResponderMove={[Function]}\n                    onResponderRelease={[Function]}\n                    onResponderTerminate={[Function]}\n                    onResponderTerminationRequest={[Function]}\n                    onStartShouldSetResponder={[Function]}\n                    style={\n                      Object {\n                        \"backgroundColor\": \"#fafafa\",\n                        \"justifyContent\": \"flex-start\",\n                        \"paddingBottom\": 16,\n                        \"paddingLeft\": 16,\n                        \"paddingRight\": 16,\n                        \"paddingTop\": 16,\n                        \"width\": \"100%\",\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"flexDirection\": \"row\",\n                        }\n                      }\n                      test={true}\n                    >\n                      <RNSVGSvgView\n                        accessibilityRole=\"image\"\n                        align=\"xMidYMid\"\n                        bbHeight={24}\n                        bbWidth={24}\n                        color={-9211021}\n                        dataSet={Object {}}\n                        fill=\"none\"\n                        focusable={false}\n                        meetOrSlice={0}\n                        minX={0}\n                        minY={0}\n                        stroke=\"\"\n                        style={\n                          Array [\n                            Object {\n                              \"backgroundColor\": \"transparent\",\n                              \"borderWidth\": 0,\n                            },\n                            Object {\n                              \"color\": \"#737373\",\n                              \"height\": 24,\n                              \"width\": 24,\n                            },\n                            Object {\n                              \"flex\": 0,\n                              \"height\": 24,\n                              \"width\": 24,\n                            },\n                          ]\n                        }\n                        tintColor={-9211021}\n                        vbHeight={24}\n                        vbWidth={24}\n                      >\n                        <RNSVGGroup\n                          fill={null}\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        >\n                          <RNSVGGroup>\n                            <RNSVGPath\n                              d=\"M12.0007 10.5862L16.9507 5.63623L18.3647 7.05023L13.4147 12.0002L18.3647 16.9502L16.9507 18.3642L12.0007 13.4142L7.05072 18.3642L5.63672 16.9502L10.5867 12.0002L5.63672 7.05023L7.05072 5.63623L12.0007 10.5862Z\"\n                              fill={\n                                Array [\n                                  2,\n                                ]\n                              }\n                              propList={\n                                Array [\n                                  \"fill\",\n                                  \"stroke\",\n                                ]\n                              }\n                              stroke={null}\n                            />\n                          </RNSVGGroup>\n                        </RNSVGGroup>\n                      </RNSVGSvgView>\n                      <View\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"width\": 16,\n                          }\n                        }\n                      />\n                      <View\n                        dataSet={Object {}}\n                        style={Object {}}\n                      >\n                        <Text\n                          dataSet={Object {}}\n                          style={\n                            Object {\n                              \"backgroundColor\": undefined,\n                              \"color\": \"#171717\",\n                              \"fontFamily\": undefined,\n                              \"fontSize\": 16,\n                              \"fontStyle\": \"normal\",\n                              \"fontWeight\": \"400\",\n                              \"letterSpacing\": 0,\n                              \"lineHeight\": 24,\n                              \"textDecorationLine\": undefined,\n                            }\n                          }\n                        >\n                          Cancel\n                        </Text>\n                      </View>\n                    </View>\n                  </View>\n                </View>\n              </View>\n            </View>\n          </View>\n        </View>\n      </Modal>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Actionsheet Usage 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Actionsheet\n            </Text>\n          </View>\n        </View>\n      </View>\n      <Modal\n        animationType=\"slide\"\n        hardwareAccelerated={false}\n        onRequestClose={[Function]}\n        statusBarTranslucent={true}\n        transparent={true}\n        visible={false}\n      >\n        <View\n          pointerEvents=\"none\"\n          style={\n            Object {\n              \"bottom\": 0,\n              \"left\": 0,\n              \"opacity\": 0,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"top\": 0,\n              \"transform\": Array [\n                Object {\n                  \"translateY\": 0,\n                },\n                Object {\n                  \"translateX\": 0,\n                },\n                Object {\n                  \"scale\": 1,\n                },\n                Object {\n                  \"scaleX\": 1,\n                },\n                Object {\n                  \"scaleY\": 1,\n                },\n                Object {\n                  \"rotate\": \"0deg\",\n                },\n              ],\n            }\n          }\n        >\n          <View\n            accessible={false}\n            dataSet={Object {}}\n            focusable={true}\n            importantForAccessibility=\"no\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"backgroundColor\": \"rgb(0, 0, 0)\",\n                \"bottom\": 0,\n                \"left\": 0,\n                \"opacity\": 0.3,\n                \"position\": \"absolute\",\n                \"right\": 0,\n                \"top\": 0,\n              }\n            }\n          />\n        </View>\n        <View\n          pointerEvents=\"none\"\n          style={\n            Object {\n              \"bottom\": 0,\n              \"height\": \"100%\",\n              \"left\": 0,\n              \"opacity\": 1,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"transform\": Array [\n                Object {\n                  \"translateY\": 0,\n                },\n                Object {\n                  \"translateX\": 0,\n                },\n                Object {\n                  \"scale\": 1,\n                },\n                Object {\n                  \"scaleX\": 1,\n                },\n                Object {\n                  \"scaleY\": 1,\n                },\n                Object {\n                  \"rotate\": \"0deg\",\n                },\n              ],\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            onLayout={[Function]}\n            pointerEvents=\"box-none\"\n            style={\n              Object {\n                \"height\": \"100%\",\n                \"opacity\": 0,\n              }\n            }\n          >\n            <View\n              closeOnOverlayClick={true}\n              dataSet={Object {}}\n              pointerEvents=\"box-none\"\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"height\": \"100%\",\n                  \"justifyContent\": \"flex-end\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                onLayout={[Function]}\n                pointerEvents=\"box-none\"\n                style={\n                  Object {\n                    \"transform\": Array [\n                      Object {\n                        \"translateY\": 0,\n                      },\n                    ],\n                    \"width\": \"100%\",\n                  }\n                }\n              >\n                <View\n                  collapsable={false}\n                  dataSet={Object {}}\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                      \"paddingBottom\": 8,\n                      \"paddingTop\": 8,\n                    }\n                  }\n                />\n                <View\n                  accessibilityViewIsModal={true}\n                  aria-modal=\"true\"\n                  dataSet={Object {}}\n                  onAccessibilityEscape={[Function]}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"#fafafa\",\n                      \"borderRadius\": 0,\n                      \"borderTopLeftRadius\": 20,\n                      \"borderTopRightRadius\": 20,\n                      \"elevation\": 2,\n                      \"maxHeight\": 1184,\n                      \"overflow\": \"hidden\",\n                      \"paddingBottom\": 8,\n                      \"paddingLeft\": 8,\n                      \"paddingRight\": 8,\n                      \"paddingTop\": 8,\n                      \"shadowColor\": \"#000000\",\n                      \"shadowOffset\": Object {\n                        \"height\": 1,\n                        \"width\": 0,\n                      },\n                      \"shadowOpacity\": 0.2,\n                      \"shadowRadius\": 1.41,\n                      \"width\": \"100%\",\n                    }\n                  }\n                >\n                  <View\n                    collapsable={false}\n                    dataSet={Object {}}\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                        \"alignItems\": \"center\",\n                        \"marginTop\": -8,\n                        \"paddingBottom\": 12,\n                        \"paddingTop\": 12,\n                        \"width\": \"100%\",\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"backgroundColor\": \"#737373\",\n                          \"borderRadius\": 2,\n                          \"height\": 4,\n                          \"width\": 40,\n                        }\n                      }\n                    />\n                  </View>\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"height\": 60,\n                        \"justifyContent\": \"center\",\n                        \"paddingLeft\": 16,\n                        \"paddingRight\": 16,\n                        \"width\": \"100%\",\n                      }\n                    }\n                  >\n                    <Text\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"backgroundColor\": undefined,\n                          \"color\": \"#71717a\",\n                          \"fontFamily\": undefined,\n                          \"fontSize\": 16,\n                          \"fontStyle\": \"normal\",\n                          \"fontWeight\": \"400\",\n                          \"letterSpacing\": 0,\n                          \"lineHeight\": 24,\n                          \"textDecorationLine\": undefined,\n                        }\n                      }\n                    >\n                      Albums\n                    </Text>\n                  </View>\n                  <View\n                    accessible={true}\n                    dataSet={Object {}}\n                    focusable={true}\n                    onBlur={[Function]}\n                    onClick={[Function]}\n                    onFocus={[Function]}\n                    onHoverIn={[Function]}\n                    onHoverOut={[Function]}\n                    onResponderGrant={[Function]}\n                    onResponderMove={[Function]}\n                    onResponderRelease={[Function]}\n                    onResponderTerminate={[Function]}\n                    onResponderTerminationRequest={[Function]}\n                    onStartShouldSetResponder={[Function]}\n                    style={\n                      Object {\n                        \"backgroundColor\": \"#fafafa\",\n                        \"justifyContent\": \"flex-start\",\n                        \"paddingBottom\": 16,\n                        \"paddingLeft\": 16,\n                        \"paddingRight\": 16,\n                        \"paddingTop\": 16,\n                        \"width\": \"100%\",\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"flexDirection\": \"row\",\n                        }\n                      }\n                      test={true}\n                    >\n                      <View\n                        dataSet={Object {}}\n                        style={Object {}}\n                      >\n                        <Text\n                          dataSet={Object {}}\n                          style={\n                            Object {\n                              \"backgroundColor\": undefined,\n                              \"color\": \"#171717\",\n                              \"fontFamily\": undefined,\n                              \"fontSize\": 16,\n                              \"fontStyle\": \"normal\",\n                              \"fontWeight\": \"400\",\n                              \"letterSpacing\": 0,\n                              \"lineHeight\": 24,\n                              \"textDecorationLine\": undefined,\n                            }\n                          }\n                        >\n                          Delete\n                        </Text>\n                      </View>\n                    </View>\n                  </View>\n                  <View\n                    accessible={true}\n                    dataSet={Object {}}\n                    focusable={true}\n                    onBlur={[Function]}\n                    onClick={[Function]}\n                    onFocus={[Function]}\n                    onHoverIn={[Function]}\n                    onHoverOut={[Function]}\n                    onResponderGrant={[Function]}\n                    onResponderMove={[Function]}\n                    onResponderRelease={[Function]}\n                    onResponderTerminate={[Function]}\n                    onResponderTerminationRequest={[Function]}\n                    onStartShouldSetResponder={[Function]}\n                    style={\n                      Object {\n                        \"backgroundColor\": \"#fafafa\",\n                        \"justifyContent\": \"flex-start\",\n                        \"opacity\": 0.4,\n                        \"paddingBottom\": 16,\n                        \"paddingLeft\": 16,\n                        \"paddingRight\": 16,\n                        \"paddingTop\": 16,\n                        \"width\": \"100%\",\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"flexDirection\": \"row\",\n                        }\n                      }\n                      test={true}\n                    >\n                      <View\n                        dataSet={Object {}}\n                        style={Object {}}\n                      >\n                        <Text\n                          dataSet={Object {}}\n                          style={\n                            Object {\n                              \"backgroundColor\": undefined,\n                              \"color\": \"#171717\",\n                              \"fontFamily\": undefined,\n                              \"fontSize\": 16,\n                              \"fontStyle\": \"normal\",\n                              \"fontWeight\": \"400\",\n                              \"letterSpacing\": 0,\n                              \"lineHeight\": 24,\n                              \"textDecorationLine\": undefined,\n                            }\n                          }\n                        >\n                          Share\n                        </Text>\n                      </View>\n                    </View>\n                  </View>\n                  <View\n                    accessible={true}\n                    dataSet={Object {}}\n                    focusable={true}\n                    onBlur={[Function]}\n                    onClick={[Function]}\n                    onFocus={[Function]}\n                    onHoverIn={[Function]}\n                    onHoverOut={[Function]}\n                    onResponderGrant={[Function]}\n                    onResponderMove={[Function]}\n                    onResponderRelease={[Function]}\n                    onResponderTerminate={[Function]}\n                    onResponderTerminationRequest={[Function]}\n                    onStartShouldSetResponder={[Function]}\n                    style={\n                      Object {\n                        \"backgroundColor\": \"#fafafa\",\n                        \"justifyContent\": \"flex-start\",\n                        \"paddingBottom\": 16,\n                        \"paddingLeft\": 16,\n                        \"paddingRight\": 16,\n                        \"paddingTop\": 16,\n                        \"width\": \"100%\",\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"flexDirection\": \"row\",\n                        }\n                      }\n                      test={true}\n                    >\n                      <View\n                        dataSet={Object {}}\n                        style={Object {}}\n                      >\n                        <Text\n                          dataSet={Object {}}\n                          style={\n                            Object {\n                              \"backgroundColor\": undefined,\n                              \"color\": \"#171717\",\n                              \"fontFamily\": undefined,\n                              \"fontSize\": 16,\n                              \"fontStyle\": \"normal\",\n                              \"fontWeight\": \"400\",\n                              \"letterSpacing\": 0,\n                              \"lineHeight\": 24,\n                              \"textDecorationLine\": undefined,\n                            }\n                          }\n                        >\n                          Play\n                        </Text>\n                      </View>\n                    </View>\n                  </View>\n                  <View\n                    accessible={true}\n                    dataSet={Object {}}\n                    focusable={true}\n                    onBlur={[Function]}\n                    onClick={[Function]}\n                    onFocus={[Function]}\n                    onHoverIn={[Function]}\n                    onHoverOut={[Function]}\n                    onResponderGrant={[Function]}\n                    onResponderMove={[Function]}\n                    onResponderRelease={[Function]}\n                    onResponderTerminate={[Function]}\n                    onResponderTerminationRequest={[Function]}\n                    onStartShouldSetResponder={[Function]}\n                    style={\n                      Object {\n                        \"backgroundColor\": \"#fafafa\",\n                        \"justifyContent\": \"flex-start\",\n                        \"paddingBottom\": 16,\n                        \"paddingLeft\": 16,\n                        \"paddingRight\": 16,\n                        \"paddingTop\": 16,\n                        \"width\": \"100%\",\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"flexDirection\": \"row\",\n                        }\n                      }\n                      test={true}\n                    >\n                      <View\n                        dataSet={Object {}}\n                        style={Object {}}\n                      >\n                        <Text\n                          dataSet={Object {}}\n                          style={\n                            Object {\n                              \"backgroundColor\": undefined,\n                              \"color\": \"#171717\",\n                              \"fontFamily\": undefined,\n                              \"fontSize\": 16,\n                              \"fontStyle\": \"normal\",\n                              \"fontWeight\": \"400\",\n                              \"letterSpacing\": 0,\n                              \"lineHeight\": 24,\n                              \"textDecorationLine\": undefined,\n                            }\n                          }\n                        >\n                          Favourite\n                        </Text>\n                      </View>\n                    </View>\n                  </View>\n                  <View\n                    accessible={true}\n                    dataSet={Object {}}\n                    focusable={true}\n                    onBlur={[Function]}\n                    onClick={[Function]}\n                    onFocus={[Function]}\n                    onHoverIn={[Function]}\n                    onHoverOut={[Function]}\n                    onResponderGrant={[Function]}\n                    onResponderMove={[Function]}\n                    onResponderRelease={[Function]}\n                    onResponderTerminate={[Function]}\n                    onResponderTerminationRequest={[Function]}\n                    onStartShouldSetResponder={[Function]}\n                    style={\n                      Object {\n                        \"backgroundColor\": \"#fafafa\",\n                        \"justifyContent\": \"flex-start\",\n                        \"paddingBottom\": 16,\n                        \"paddingLeft\": 16,\n                        \"paddingRight\": 16,\n                        \"paddingTop\": 16,\n                        \"width\": \"100%\",\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"flexDirection\": \"row\",\n                        }\n                      }\n                      test={true}\n                    >\n                      <View\n                        dataSet={Object {}}\n                        style={Object {}}\n                      >\n                        <Text\n                          dataSet={Object {}}\n                          style={\n                            Object {\n                              \"backgroundColor\": undefined,\n                              \"color\": \"#171717\",\n                              \"fontFamily\": undefined,\n                              \"fontSize\": 16,\n                              \"fontStyle\": \"normal\",\n                              \"fontWeight\": \"400\",\n                              \"letterSpacing\": 0,\n                              \"lineHeight\": 24,\n                              \"textDecorationLine\": undefined,\n                            }\n                          }\n                        >\n                          Cancel\n                        </Text>\n                      </View>\n                    </View>\n                  </View>\n                </View>\n              </View>\n            </View>\n          </View>\n        </View>\n      </Modal>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Alert Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        space={3}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#bae6fd\",\n            \"borderRadius\": 4,\n            \"justifyContent\": \"flex-start\",\n            \"maxWidth\": 400,\n            \"paddingBottom\": 12,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 12,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexShrink\": 1,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"flexShrink\": 1,\n                \"justifyContent\": \"space-between\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"flexShrink\": 1,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={16}\n                  bbWidth={16}\n                  color={-16553567}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#0369a1\",\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                    ]\n                  }\n                  tintColor={-16553567}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M12 0C9.62663 0 7.30655 0.703788 5.33316 2.02236C3.35977 3.34094 1.8217 5.21509 0.913451 7.4078C0.00519948 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6689 1.83649 18.807 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0865C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6935 24 14.3734 24 12C23.9966 8.81846 22.7312 5.76821 20.4815 3.51852C18.2318 1.26883 15.1815 0.00344108 12 0ZM12.25 5C12.5467 5 12.8367 5.08797 13.0834 5.25279C13.33 5.41762 13.5223 5.65189 13.6358 5.92597C13.7494 6.20006 13.7791 6.50166 13.7212 6.79263C13.6633 7.08361 13.5204 7.35088 13.3107 7.56066C13.1009 7.77044 12.8336 7.9133 12.5426 7.97118C12.2517 8.02905 11.9501 7.99935 11.676 7.88582C11.4019 7.77229 11.1676 7.58003 11.0028 7.33335C10.838 7.08668 10.75 6.79667 10.75 6.5C10.75 6.10217 10.908 5.72064 11.1893 5.43934C11.4706 5.15803 11.8522 5 12.25 5ZM14.5 18.5H10.5C10.2348 18.5 9.98043 18.3946 9.7929 18.2071C9.60536 18.0196 9.5 17.7652 9.5 17.5C9.5 17.2348 9.60536 16.9804 9.7929 16.7929C9.98043 16.6054 10.2348 16.5 10.5 16.5H11.25C11.3163 16.5 11.3799 16.4737 11.4268 16.4268C11.4737 16.3799 11.5 16.3163 11.5 16.25V11.75C11.5 11.6837 11.4737 11.6201 11.4268 11.5732C11.3799 11.5263 11.3163 11.5 11.25 11.5H10.5C10.2348 11.5 9.98043 11.3946 9.7929 11.2071C9.60536 11.0196 9.5 10.7652 9.5 10.5C9.5 10.2348 9.60536 9.98043 9.7929 9.79289C9.98043 9.60536 10.2348 9.5 10.5 9.5H11.5C12.0304 9.5 12.5391 9.71071 12.9142 10.0858C13.2893 10.4609 13.5 10.9696 13.5 11.5V16.25C13.5 16.3163 13.5263 16.3799 13.5732 16.4268C13.6201 16.4737 13.6837 16.5 13.75 16.5H14.5C14.7652 16.5 15.0196 16.6054 15.2071 16.7929C15.3946 16.9804 15.5 17.2348 15.5 17.5C15.5 17.7652 15.3946 18.0196 15.2071 18.2071C15.0196 18.3946 14.7652 18.5 14.5 18.5Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#1f2937\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 16,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 20,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                We are going live in July!\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 10,\n                  \"paddingRight\": 10,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={-11840157}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#4b5563\",\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={-11840157}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 4,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"paddingLeft\": 24,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#4b5563\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              We are happy to announce that we are going live on July 28th. Get ready!\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Alert ColorScheme 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"marginLeft\": 12,\n          \"marginRight\": 12,\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        space={3}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#fecaca\",\n            \"borderRadius\": 4,\n            \"justifyContent\": \"flex-start\",\n            \"paddingBottom\": 12,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 12,\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexShrink\": 1,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"flexShrink\": 1,\n                \"justifyContent\": \"space-between\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"flexShrink\": 1,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={16}\n                  bbWidth={16}\n                  color={-4645860}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#b91c1c\",\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                    ]\n                  }\n                  tintColor={-4645860}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M12 0C9.62663 0 7.30655 0.703788 5.33316 2.02236C3.35977 3.34094 1.8217 5.21509 0.913451 7.4078C0.00519948 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6689 1.83649 18.807 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0865C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6935 24 14.3734 24 12C23.9966 8.81846 22.7312 5.76821 20.4815 3.51852C18.2318 1.26883 15.1815 0.00344108 12 0ZM12.25 5C12.5467 5 12.8367 5.08797 13.0834 5.25279C13.33 5.41762 13.5223 5.65189 13.6358 5.92597C13.7494 6.20006 13.7791 6.50166 13.7212 6.79263C13.6633 7.08361 13.5204 7.35088 13.3107 7.56066C13.1009 7.77044 12.8336 7.9133 12.5426 7.97118C12.2517 8.02905 11.9501 7.99935 11.676 7.88582C11.4019 7.77229 11.1676 7.58003 11.0028 7.33335C10.838 7.08668 10.75 6.79667 10.75 6.5C10.75 6.10217 10.908 5.72064 11.1893 5.43934C11.4706 5.15803 11.8522 5 12.25 5ZM14.5 18.5H10.5C10.2348 18.5 9.98043 18.3946 9.7929 18.2071C9.60536 18.0196 9.5 17.7652 9.5 17.5C9.5 17.2348 9.60536 16.9804 9.7929 16.7929C9.98043 16.6054 10.2348 16.5 10.5 16.5H11.25C11.3163 16.5 11.3799 16.4737 11.4268 16.4268C11.4737 16.3799 11.5 16.3163 11.5 16.25V11.75C11.5 11.6837 11.4737 11.6201 11.4268 11.5732C11.3799 11.5263 11.3163 11.5 11.25 11.5H10.5C10.2348 11.5 9.98043 11.3946 9.7929 11.2071C9.60536 11.0196 9.5 10.7652 9.5 10.5C9.5 10.2348 9.60536 9.98043 9.7929 9.79289C9.98043 9.60536 10.2348 9.5 10.5 9.5H11.5C12.0304 9.5 12.5391 9.71071 12.9142 10.0858C13.2893 10.4609 13.5 10.9696 13.5 11.5V16.25C13.5 16.3163 13.5263 16.3799 13.5732 16.4268C13.6201 16.4737 13.6837 16.5 13.75 16.5H14.5C14.7652 16.5 15.0196 16.6054 15.2071 16.7929C15.3946 16.9804 15.5 17.2348 15.5 17.5C15.5 17.7652 15.3946 18.0196 15.2071 18.2071C15.0196 18.3946 14.7652 18.5 14.5 18.5Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#1f2937\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 16,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 24,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Please try again later!\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 10,\n                  \"paddingRight\": 10,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={-11840157}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#4b5563\",\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={-11840157}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 8,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"paddingLeft\": 24,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#4b5563\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Your coupon could not be processed at this time.\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        space={3}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#fed7aa\",\n            \"borderRadius\": 4,\n            \"justifyContent\": \"flex-start\",\n            \"paddingBottom\": 12,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 12,\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexShrink\": 1,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"flexShrink\": 1,\n                \"justifyContent\": \"space-between\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"flexShrink\": 1,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={16}\n                  bbWidth={16}\n                  color={-4046580}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#c2410c\",\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                    ]\n                  }\n                  tintColor={-4046580}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M12 0C9.62663 0 7.30655 0.703788 5.33316 2.02236C3.35977 3.34094 1.8217 5.21509 0.913451 7.4078C0.00519948 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6689 1.83649 18.807 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0865C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6935 24 14.3734 24 12C23.9966 8.81846 22.7312 5.76821 20.4815 3.51852C18.2318 1.26883 15.1815 0.00344108 12 0ZM12.25 5C12.5467 5 12.8367 5.08797 13.0834 5.25279C13.33 5.41762 13.5223 5.65189 13.6358 5.92597C13.7494 6.20006 13.7791 6.50166 13.7212 6.79263C13.6633 7.08361 13.5204 7.35088 13.3107 7.56066C13.1009 7.77044 12.8336 7.9133 12.5426 7.97118C12.2517 8.02905 11.9501 7.99935 11.676 7.88582C11.4019 7.77229 11.1676 7.58003 11.0028 7.33335C10.838 7.08668 10.75 6.79667 10.75 6.5C10.75 6.10217 10.908 5.72064 11.1893 5.43934C11.4706 5.15803 11.8522 5 12.25 5ZM14.5 18.5H10.5C10.2348 18.5 9.98043 18.3946 9.7929 18.2071C9.60536 18.0196 9.5 17.7652 9.5 17.5C9.5 17.2348 9.60536 16.9804 9.7929 16.7929C9.98043 16.6054 10.2348 16.5 10.5 16.5H11.25C11.3163 16.5 11.3799 16.4737 11.4268 16.4268C11.4737 16.3799 11.5 16.3163 11.5 16.25V11.75C11.5 11.6837 11.4737 11.6201 11.4268 11.5732C11.3799 11.5263 11.3163 11.5 11.25 11.5H10.5C10.2348 11.5 9.98043 11.3946 9.7929 11.2071C9.60536 11.0196 9.5 10.7652 9.5 10.5C9.5 10.2348 9.60536 9.98043 9.7929 9.79289C9.98043 9.60536 10.2348 9.5 10.5 9.5H11.5C12.0304 9.5 12.5391 9.71071 12.9142 10.0858C13.2893 10.4609 13.5 10.9696 13.5 11.5V16.25C13.5 16.3163 13.5263 16.3799 13.5732 16.4268C13.6201 16.4737 13.6837 16.5 13.75 16.5H14.5C14.7652 16.5 15.0196 16.6054 15.2071 16.7929C15.3946 16.9804 15.5 17.2348 15.5 17.5C15.5 17.7652 15.3946 18.0196 15.2071 18.2071C15.0196 18.3946 14.7652 18.5 14.5 18.5Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#1f2937\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 16,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 24,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Please try again later!\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 10,\n                  \"paddingRight\": 10,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={-11840157}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#4b5563\",\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={-11840157}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 8,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"paddingLeft\": 24,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#4b5563\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Your coupon could not be processed at this time.\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        space={3}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#fbcfe8\",\n            \"borderRadius\": 4,\n            \"justifyContent\": \"flex-start\",\n            \"paddingBottom\": 12,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 12,\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexShrink\": 1,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"flexShrink\": 1,\n                \"justifyContent\": \"space-between\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"flexShrink\": 1,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={16}\n                  bbWidth={16}\n                  color={-4319139}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#be185d\",\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                    ]\n                  }\n                  tintColor={-4319139}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M12 0C9.62663 0 7.30655 0.703788 5.33316 2.02236C3.35977 3.34094 1.8217 5.21509 0.913451 7.4078C0.00519948 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6689 1.83649 18.807 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0865C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6935 24 14.3734 24 12C23.9966 8.81846 22.7312 5.76821 20.4815 3.51852C18.2318 1.26883 15.1815 0.00344108 12 0ZM12.25 5C12.5467 5 12.8367 5.08797 13.0834 5.25279C13.33 5.41762 13.5223 5.65189 13.6358 5.92597C13.7494 6.20006 13.7791 6.50166 13.7212 6.79263C13.6633 7.08361 13.5204 7.35088 13.3107 7.56066C13.1009 7.77044 12.8336 7.9133 12.5426 7.97118C12.2517 8.02905 11.9501 7.99935 11.676 7.88582C11.4019 7.77229 11.1676 7.58003 11.0028 7.33335C10.838 7.08668 10.75 6.79667 10.75 6.5C10.75 6.10217 10.908 5.72064 11.1893 5.43934C11.4706 5.15803 11.8522 5 12.25 5ZM14.5 18.5H10.5C10.2348 18.5 9.98043 18.3946 9.7929 18.2071C9.60536 18.0196 9.5 17.7652 9.5 17.5C9.5 17.2348 9.60536 16.9804 9.7929 16.7929C9.98043 16.6054 10.2348 16.5 10.5 16.5H11.25C11.3163 16.5 11.3799 16.4737 11.4268 16.4268C11.4737 16.3799 11.5 16.3163 11.5 16.25V11.75C11.5 11.6837 11.4737 11.6201 11.4268 11.5732C11.3799 11.5263 11.3163 11.5 11.25 11.5H10.5C10.2348 11.5 9.98043 11.3946 9.7929 11.2071C9.60536 11.0196 9.5 10.7652 9.5 10.5C9.5 10.2348 9.60536 9.98043 9.7929 9.79289C9.98043 9.60536 10.2348 9.5 10.5 9.5H11.5C12.0304 9.5 12.5391 9.71071 12.9142 10.0858C13.2893 10.4609 13.5 10.9696 13.5 11.5V16.25C13.5 16.3163 13.5263 16.3799 13.5732 16.4268C13.6201 16.4737 13.6837 16.5 13.75 16.5H14.5C14.7652 16.5 15.0196 16.6054 15.2071 16.7929C15.3946 16.9804 15.5 17.2348 15.5 17.5C15.5 17.7652 15.3946 18.0196 15.2071 18.2071C15.0196 18.3946 14.7652 18.5 14.5 18.5Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#1f2937\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 16,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 24,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Please try again later!\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 10,\n                  \"paddingRight\": 10,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={-11840157}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#4b5563\",\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={-11840157}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 8,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"paddingLeft\": 24,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#4b5563\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Your coupon could not be processed at this time.\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Alert Composition 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"maxWidth\": 400,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          space={3}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#bbf7d0\",\n              \"borderRadius\": 4,\n              \"justifyContent\": \"flex-start\",\n              \"paddingBottom\": 12,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 12,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexShrink\": 1,\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"flexShrink\": 1,\n                  \"justifyContent\": \"space-between\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"flexShrink\": 1,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={-15368131}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#15803d\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={-15368131}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 16,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"500\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 24,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Application received!\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 4,\n                  }\n                }\n              />\n              <View\n                accessibilityRole=\"button\"\n                accessible={true}\n                colorScheme=\"primary\"\n                dataSet={Object {}}\n                focusable={true}\n                onBlur={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onHoverIn={[Function]}\n                onHoverOut={[Function]}\n                onResponderGrant={[Function]}\n                onResponderMove={[Function]}\n                onResponderRelease={[Function]}\n                onResponderTerminate={[Function]}\n                onResponderTerminationRequest={[Function]}\n                onStartShouldSetResponder={[Function]}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"borderRadius\": 4,\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"center\",\n                    \"paddingBottom\": 10,\n                    \"paddingLeft\": 10,\n                    \"paddingRight\": 10,\n                    \"paddingTop\": 10,\n                  }\n                }\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={12}\n                  bbWidth={12}\n                  color={-11840157}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#4b5563\",\n                        \"height\": 12,\n                        \"width\": 12,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 12,\n                        \"width\": 12,\n                      },\n                    ]\n                  }\n                  tintColor={-11840157}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 8,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"paddingLeft\": 24,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Your application has been received. We will review your application and respond within the next 48 hours.\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 20,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          space={3}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#bbf7d0\",\n              \"borderRadius\": 4,\n              \"justifyContent\": \"flex-start\",\n              \"paddingBottom\": 12,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 12,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexShrink\": 1,\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={20}\n                bbWidth={20}\n                color={-15368131}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#15803d\",\n                      \"height\": 20,\n                      \"width\": 20,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 20,\n                      \"width\": 20,\n                    },\n                  ]\n                }\n                tintColor={-15368131}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 4,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 16,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"500\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 24,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Application received!\n            </Text>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 4,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textAlign\": \"center\",\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Your application has been received. We will review your application and respond within the next 48 hours.\n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Alert Status 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"maxWidth\": 400,\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        space={3}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#bbf7d0\",\n            \"borderRadius\": 4,\n            \"justifyContent\": \"flex-start\",\n            \"paddingBottom\": 12,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 12,\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexShrink\": 1,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"flexShrink\": 1,\n                \"justifyContent\": \"space-between\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                  \"flexShrink\": 1,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={16}\n                  bbWidth={16}\n                  color={-15368131}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#15803d\",\n                        \"height\": 16,\n                        \"marginTop\": 4,\n                        \"width\": 16,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                    ]\n                  }\n                  tintColor={-15368131}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#1f2937\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 16,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 24,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Selection successfully moved!\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 10,\n                  \"paddingRight\": 10,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={-11840157}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#4b5563\",\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={-11840157}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 12,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        space={3}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#fecaca\",\n            \"borderRadius\": 4,\n            \"justifyContent\": \"flex-start\",\n            \"paddingBottom\": 12,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 12,\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexShrink\": 1,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"flexShrink\": 1,\n                \"justifyContent\": \"space-between\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                  \"flexShrink\": 1,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={16}\n                  bbWidth={16}\n                  color={-4645860}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#b91c1c\",\n                        \"height\": 16,\n                        \"marginTop\": 4,\n                        \"width\": 16,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                    ]\n                  }\n                  tintColor={-4645860}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGGroup\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      >\n                        <RNSVGPath\n                          d=\"M13.9193 18.4271C13.8992 17.9392 13.6816 17.4813 13.3178 17.1478C12.9545 16.8148 12.4731 16.631 11.975 16.6304H11.9746H11.945V16.6304L11.9392 16.6305C11.6898 16.6348 11.4434 16.6864 11.2142 16.7827L11.333 17.0655L11.2142 16.7827C10.9851 16.879 10.7773 17.0183 10.6035 17.1931C10.4296 17.368 10.2932 17.5751 10.2031 17.8026C10.113 18.0302 10.0712 18.2732 10.0806 18.5171L10.0807 18.5176C10.1001 19.0055 10.3169 19.4638 10.6802 19.7979C11.043 20.1315 11.5241 20.3162 12.0222 20.3177H12.0233H12.0529V20.3178L12.058 20.3177C12.3081 20.3138 12.5552 20.2624 12.785 20.1661C13.0148 20.0698 13.2232 19.9303 13.3974 19.7549C13.5716 19.5795 13.7081 19.3718 13.7981 19.1436C13.8881 18.9153 13.9295 18.6716 13.9193 18.4271ZM13.9193 18.4271L13.5863 18.4408M13.9193 18.4271C13.9193 18.4271 13.9193 18.4271 13.9193 18.427L13.5863 18.4408M13.5863 18.4408C13.5945 18.6386 13.5611 18.836 13.488 19.0213C13.415 19.2066 13.3037 19.3762 13.1609 19.52C13.018 19.6638 12.8464 19.779 12.6561 19.8587C12.4658 19.9385 12.2607 19.9812 12.0529 19.9844H12.0233C11.6062 19.9831 11.2058 19.8284 10.9059 19.5525C10.6059 19.2767 10.4296 18.9011 10.4137 18.5043C10.4061 18.3069 10.4399 18.1101 10.513 17.9254C10.5862 17.7406 10.6973 17.5715 10.8399 17.4281C10.9824 17.2847 11.1536 17.1698 11.3434 17.09C11.5331 17.0103 11.7376 16.9674 11.945 16.9638H11.9746C12.3916 16.9642 12.7922 17.1182 13.0926 17.3936C13.393 17.6689 13.5699 18.0442 13.5863 18.4408ZM23.4665 20.2125L23.4665 20.2125C23.6068 20.4676 23.6751 20.7517 23.6658 21.0376C23.6566 21.3234 23.57 21.6033 23.4131 21.8501C23.2562 22.097 23.0337 22.3031 22.7658 22.4469C22.4978 22.5907 22.1942 22.6667 21.8847 22.6667H21.8846H2.11538H2.11533C1.80576 22.6667 1.50222 22.5907 1.23422 22.4469C0.96631 22.3031 0.743845 22.097 0.586879 21.8501L0.305565 22.0289L0.586879 21.8501C0.429998 21.6033 0.343434 21.3234 0.334166 21.0376C0.324898 20.7517 0.393165 20.4676 0.533517 20.2125L0.53353 20.2125L10.4192 2.23977C10.5681 1.96911 10.7933 1.74021 11.0721 1.5796C11.3511 1.41893 11.6722 1.33333 12.0005 1.33333C12.3289 1.33333 12.65 1.41893 12.9289 1.5796C13.2078 1.74021 13.4329 1.96911 13.5819 2.23977L23.4665 20.2125ZM11.0224 7.44182C10.7599 7.69176 10.6091 8.03434 10.6091 8.39521V14.4365C10.6091 14.7974 10.7599 15.1399 11.0224 15.3899C11.2843 15.6393 11.6363 15.7767 12 15.7767C12.3637 15.7767 12.7157 15.6393 12.9776 15.3899C13.2401 15.1399 13.3909 14.7974 13.3909 14.4365V8.39521C13.3909 8.03434 13.2401 7.69176 12.9776 7.44182C12.7157 7.19242 12.3637 7.05499 12 7.05499C11.6363 7.05499 11.2843 7.19242 11.0224 7.44182Z\"\n                          propList={\n                            Array [\n                              \"stroke\",\n                              \"strokeWidth\",\n                            ]\n                          }\n                          stroke={\n                            Array [\n                              2,\n                            ]\n                          }\n                          strokeWidth=\"0.666667\"\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#1f2937\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 16,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 24,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Please try again later!\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 10,\n                  \"paddingRight\": 10,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={-11840157}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#4b5563\",\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={-11840157}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 12,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        space={3}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#bae6fd\",\n            \"borderRadius\": 4,\n            \"justifyContent\": \"flex-start\",\n            \"paddingBottom\": 12,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 12,\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexShrink\": 1,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"flexShrink\": 1,\n                \"justifyContent\": \"space-between\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                  \"flexShrink\": 1,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={16}\n                  bbWidth={16}\n                  color={-16553567}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#0369a1\",\n                        \"height\": 16,\n                        \"marginTop\": 4,\n                        \"width\": 16,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                    ]\n                  }\n                  tintColor={-16553567}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M12 0C9.62663 0 7.30655 0.703788 5.33316 2.02236C3.35977 3.34094 1.8217 5.21509 0.913451 7.4078C0.00519948 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6689 1.83649 18.807 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0865C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6935 24 14.3734 24 12C23.9966 8.81846 22.7312 5.76821 20.4815 3.51852C18.2318 1.26883 15.1815 0.00344108 12 0ZM12.25 5C12.5467 5 12.8367 5.08797 13.0834 5.25279C13.33 5.41762 13.5223 5.65189 13.6358 5.92597C13.7494 6.20006 13.7791 6.50166 13.7212 6.79263C13.6633 7.08361 13.5204 7.35088 13.3107 7.56066C13.1009 7.77044 12.8336 7.9133 12.5426 7.97118C12.2517 8.02905 11.9501 7.99935 11.676 7.88582C11.4019 7.77229 11.1676 7.58003 11.0028 7.33335C10.838 7.08668 10.75 6.79667 10.75 6.5C10.75 6.10217 10.908 5.72064 11.1893 5.43934C11.4706 5.15803 11.8522 5 12.25 5ZM14.5 18.5H10.5C10.2348 18.5 9.98043 18.3946 9.7929 18.2071C9.60536 18.0196 9.5 17.7652 9.5 17.5C9.5 17.2348 9.60536 16.9804 9.7929 16.7929C9.98043 16.6054 10.2348 16.5 10.5 16.5H11.25C11.3163 16.5 11.3799 16.4737 11.4268 16.4268C11.4737 16.3799 11.5 16.3163 11.5 16.25V11.75C11.5 11.6837 11.4737 11.6201 11.4268 11.5732C11.3799 11.5263 11.3163 11.5 11.25 11.5H10.5C10.2348 11.5 9.98043 11.3946 9.7929 11.2071C9.60536 11.0196 9.5 10.7652 9.5 10.5C9.5 10.2348 9.60536 9.98043 9.7929 9.79289C9.98043 9.60536 10.2348 9.5 10.5 9.5H11.5C12.0304 9.5 12.5391 9.71071 12.9142 10.0858C13.2893 10.4609 13.5 10.9696 13.5 11.5V16.25C13.5 16.3163 13.5263 16.3799 13.5732 16.4268C13.6201 16.4737 13.6837 16.5 13.75 16.5H14.5C14.7652 16.5 15.0196 16.6054 15.2071 16.7929C15.3946 16.9804 15.5 17.2348 15.5 17.5C15.5 17.7652 15.3946 18.0196 15.2071 18.2071C15.0196 18.3946 14.7652 18.5 14.5 18.5Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#1f2937\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 16,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 24,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                We are going live in July!\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 10,\n                  \"paddingRight\": 10,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={-11840157}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#4b5563\",\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={-11840157}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 12,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        space={3}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#fed7aa\",\n            \"borderRadius\": 4,\n            \"justifyContent\": \"flex-start\",\n            \"paddingBottom\": 12,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 12,\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexShrink\": 1,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"flexShrink\": 1,\n                \"justifyContent\": \"space-between\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                  \"flexShrink\": 1,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={16}\n                  bbWidth={16}\n                  color={-4046580}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#c2410c\",\n                        \"height\": 16,\n                        \"marginTop\": 4,\n                        \"width\": 16,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                    ]\n                  }\n                  tintColor={-4046580}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M11.9836 0.00267822C8.77744 0.0551662 5.72075 1.36728 3.47427 3.65538C2.35024 4.77447 1.46338 6.10869 0.866705 7.57831C0.270027 9.04793 -0.0242179 10.6228 0.00155827 12.2087C-0.000286057 13.7583 0.303697 15.2931 0.896087 16.7251C1.48848 18.1571 2.35763 19.458 3.45373 20.5535C4.54983 21.6489 5.85133 22.5173 7.28365 23.1089C8.71596 23.7004 10.2509 24.0035 11.8006 24.0007H12.0146C15.2217 23.9677 18.2847 22.6638 20.5316 20.3751C22.7785 18.0864 24.0257 14.9999 23.9996 11.7927C24.0033 10.2243 23.6933 8.6709 23.0879 7.22398C22.4825 5.77706 21.5939 4.4658 20.4744 3.36731C19.3548 2.26882 18.0269 1.40527 16.5688 0.827453C15.1106 0.249636 13.5517 -0.0307856 11.9836 0.00267822ZM10.5007 16.5433C10.4935 16.3473 10.5254 16.1517 10.5947 15.9682C10.6639 15.7846 10.7691 15.6167 10.904 15.4742C11.0389 15.3318 11.2009 15.2177 11.3804 15.1386C11.5599 15.0594 11.7534 15.0169 11.9496 15.0135H11.9766C12.3712 15.0142 12.7501 15.1677 13.034 15.4417C13.3179 15.7157 13.4847 16.089 13.4995 16.4833C13.5068 16.6794 13.4749 16.875 13.4057 17.0586C13.3365 17.2423 13.2314 17.4102 13.0965 17.5527C12.9615 17.6952 12.7995 17.8093 12.6199 17.8884C12.4403 17.9674 12.2468 18.0099 12.0506 18.0132H12.0236C11.6291 18.0119 11.2505 17.8583 10.9667 17.5844C10.6829 17.3105 10.5159 16.9375 10.5007 16.5433ZM11.0007 12.5017V6.50215C11.0007 6.23695 11.106 5.98262 11.2935 5.7951C11.481 5.60758 11.7354 5.50223 12.0006 5.50223C12.2658 5.50223 12.5201 5.60758 12.7076 5.7951C12.8951 5.98262 13.0005 6.23695 13.0005 6.50215V12.5017C13.0005 12.7669 12.8951 13.0212 12.7076 13.2087C12.5201 13.3962 12.2658 13.5016 12.0006 13.5016C11.7354 13.5016 11.481 13.3962 11.2935 13.2087C11.106 13.0212 11.0007 12.7669 11.0007 12.5017Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#1f2937\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 16,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 24,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Poor internet connection.\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 10,\n                  \"paddingRight\": 10,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={-11840157}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#4b5563\",\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={-11840157}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Alert Usage 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        space={3}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#bae6fd\",\n            \"borderRadius\": 4,\n            \"justifyContent\": \"flex-start\",\n            \"maxWidth\": 400,\n            \"paddingBottom\": 12,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 12,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexShrink\": 1,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"flexShrink\": 1,\n                \"justifyContent\": \"space-between\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"flexShrink\": 1,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={16}\n                  bbWidth={16}\n                  color={-16553567}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#0369a1\",\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                    ]\n                  }\n                  tintColor={-16553567}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M12 0C9.62663 0 7.30655 0.703788 5.33316 2.02236C3.35977 3.34094 1.8217 5.21509 0.913451 7.4078C0.00519948 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6689 1.83649 18.807 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0865C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6935 24 14.3734 24 12C23.9966 8.81846 22.7312 5.76821 20.4815 3.51852C18.2318 1.26883 15.1815 0.00344108 12 0ZM12.25 5C12.5467 5 12.8367 5.08797 13.0834 5.25279C13.33 5.41762 13.5223 5.65189 13.6358 5.92597C13.7494 6.20006 13.7791 6.50166 13.7212 6.79263C13.6633 7.08361 13.5204 7.35088 13.3107 7.56066C13.1009 7.77044 12.8336 7.9133 12.5426 7.97118C12.2517 8.02905 11.9501 7.99935 11.676 7.88582C11.4019 7.77229 11.1676 7.58003 11.0028 7.33335C10.838 7.08668 10.75 6.79667 10.75 6.5C10.75 6.10217 10.908 5.72064 11.1893 5.43934C11.4706 5.15803 11.8522 5 12.25 5ZM14.5 18.5H10.5C10.2348 18.5 9.98043 18.3946 9.7929 18.2071C9.60536 18.0196 9.5 17.7652 9.5 17.5C9.5 17.2348 9.60536 16.9804 9.7929 16.7929C9.98043 16.6054 10.2348 16.5 10.5 16.5H11.25C11.3163 16.5 11.3799 16.4737 11.4268 16.4268C11.4737 16.3799 11.5 16.3163 11.5 16.25V11.75C11.5 11.6837 11.4737 11.6201 11.4268 11.5732C11.3799 11.5263 11.3163 11.5 11.25 11.5H10.5C10.2348 11.5 9.98043 11.3946 9.7929 11.2071C9.60536 11.0196 9.5 10.7652 9.5 10.5C9.5 10.2348 9.60536 9.98043 9.7929 9.79289C9.98043 9.60536 10.2348 9.5 10.5 9.5H11.5C12.0304 9.5 12.5391 9.71071 12.9142 10.0858C13.2893 10.4609 13.5 10.9696 13.5 11.5V16.25C13.5 16.3163 13.5263 16.3799 13.5732 16.4268C13.6201 16.4737 13.6837 16.5 13.75 16.5H14.5C14.7652 16.5 15.0196 16.6054 15.2071 16.7929C15.3946 16.9804 15.5 17.2348 15.5 17.5C15.5 17.7652 15.3946 18.0196 15.2071 18.2071C15.0196 18.3946 14.7652 18.5 14.5 18.5Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#1f2937\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 16,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 24,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                We are going live in July!\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 10,\n                  \"paddingRight\": 10,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={-11840157}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#4b5563\",\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={-11840157}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 8,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"paddingLeft\": 24,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#4b5563\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              We are happy to announce that we are going live on July 28th. Get ready!\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Alert Variant 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <RCTScrollView\n      contentContainerStyle={\n        Array [\n          Object {},\n          Object {\n            \"dataSet\": Object {},\n          },\n          Object {},\n        ]\n      }\n      dataSet={Object {}}\n      style={\n        Object {\n          \"marginTop\": 20,\n        }\n      }\n    >\n      <View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"column\",\n              \"justifyContent\": \"center\",\n              \"marginRight\": 20,\n              \"maxWidth\": 400,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 30,\n                \"marginBottom\": 16,\n                \"textAlign\": \"center\",\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            solid\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            space={3}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#15803d\",\n                \"borderRadius\": 4,\n                \"justifyContent\": \"flex-start\",\n                \"paddingBottom\": 12,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 12,\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"flexShrink\": 1,\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"flexShrink\": 1,\n                    \"justifyContent\": \"space-between\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                      \"flexShrink\": 1,\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={Object {}}\n                  >\n                    <RNSVGSvgView\n                      accessibilityRole=\"image\"\n                      align=\"xMidYMid\"\n                      bbHeight={16}\n                      bbWidth={16}\n                      color={-328966}\n                      dataSet={Object {}}\n                      focusable={false}\n                      meetOrSlice={0}\n                      minX={0}\n                      minY={0}\n                      stroke=\"\"\n                      style={\n                        Array [\n                          Object {\n                            \"backgroundColor\": \"transparent\",\n                            \"borderWidth\": 0,\n                          },\n                          Object {\n                            \"color\": \"#fafafa\",\n                            \"height\": 16,\n                            \"width\": 16,\n                          },\n                          Object {\n                            \"flex\": 0,\n                            \"height\": 16,\n                            \"width\": 16,\n                          },\n                        ]\n                      }\n                      tintColor={-328966}\n                      vbHeight={24}\n                      vbWidth={24}\n                    >\n                      <RNSVGGroup\n                        propList={\n                          Array [\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      >\n                        <RNSVGGroup>\n                          <RNSVGPath\n                            d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z\"\n                            fill={\n                              Array [\n                                2,\n                              ]\n                            }\n                            propList={\n                              Array [\n                                \"fill\",\n                                \"stroke\",\n                              ]\n                            }\n                            stroke={null}\n                          />\n                        </RNSVGGroup>\n                      </RNSVGGroup>\n                    </RNSVGSvgView>\n                  </View>\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"width\": 8,\n                      }\n                    }\n                  />\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#fafaf9\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Selection successfully moved!\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"marginBottom\": 10,\n                \"marginTop\": 20,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 30,\n                \"marginBottom\": 16,\n                \"textAlign\": \"center\",\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            left-accent\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            space={3}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#bbf7d0\",\n                \"borderLeftColor\": \"#15803d\",\n                \"borderLeftWidth\": 4,\n                \"borderRadius\": 4,\n                \"justifyContent\": \"flex-start\",\n                \"paddingBottom\": 12,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 12,\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"flexShrink\": 1,\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"flexShrink\": 1,\n                    \"justifyContent\": \"space-between\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                      \"flexShrink\": 1,\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={Object {}}\n                  >\n                    <RNSVGSvgView\n                      accessibilityRole=\"image\"\n                      align=\"xMidYMid\"\n                      bbHeight={16}\n                      bbWidth={16}\n                      color={-15368131}\n                      dataSet={Object {}}\n                      focusable={false}\n                      meetOrSlice={0}\n                      minX={0}\n                      minY={0}\n                      stroke=\"\"\n                      style={\n                        Array [\n                          Object {\n                            \"backgroundColor\": \"transparent\",\n                            \"borderWidth\": 0,\n                          },\n                          Object {\n                            \"color\": \"#15803d\",\n                            \"height\": 16,\n                            \"width\": 16,\n                          },\n                          Object {\n                            \"flex\": 0,\n                            \"height\": 16,\n                            \"width\": 16,\n                          },\n                        ]\n                      }\n                      tintColor={-15368131}\n                      vbHeight={24}\n                      vbWidth={24}\n                    >\n                      <RNSVGGroup\n                        propList={\n                          Array [\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      >\n                        <RNSVGGroup>\n                          <RNSVGPath\n                            d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z\"\n                            fill={\n                              Array [\n                                2,\n                              ]\n                            }\n                            propList={\n                              Array [\n                                \"fill\",\n                                \"stroke\",\n                              ]\n                            }\n                            stroke={null}\n                          />\n                        </RNSVGGroup>\n                      </RNSVGGroup>\n                    </RNSVGSvgView>\n                  </View>\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"width\": 8,\n                      }\n                    }\n                  />\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#1f2937\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Selection successfully moved!\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"marginBottom\": 10,\n                \"marginTop\": 20,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 30,\n                \"marginBottom\": 16,\n                \"textAlign\": \"center\",\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            top-accent\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            space={3}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#bbf7d0\",\n                \"borderRadius\": 4,\n                \"borderTopColor\": \"#15803d\",\n                \"borderTopWidth\": 4,\n                \"justifyContent\": \"flex-start\",\n                \"paddingBottom\": 12,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 12,\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"flexShrink\": 1,\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"flexShrink\": 1,\n                    \"justifyContent\": \"space-between\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                      \"flexShrink\": 1,\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={Object {}}\n                  >\n                    <RNSVGSvgView\n                      accessibilityRole=\"image\"\n                      align=\"xMidYMid\"\n                      bbHeight={16}\n                      bbWidth={16}\n                      color={-15368131}\n                      dataSet={Object {}}\n                      focusable={false}\n                      meetOrSlice={0}\n                      minX={0}\n                      minY={0}\n                      stroke=\"\"\n                      style={\n                        Array [\n                          Object {\n                            \"backgroundColor\": \"transparent\",\n                            \"borderWidth\": 0,\n                          },\n                          Object {\n                            \"color\": \"#15803d\",\n                            \"height\": 16,\n                            \"width\": 16,\n                          },\n                          Object {\n                            \"flex\": 0,\n                            \"height\": 16,\n                            \"width\": 16,\n                          },\n                        ]\n                      }\n                      tintColor={-15368131}\n                      vbHeight={24}\n                      vbWidth={24}\n                    >\n                      <RNSVGGroup\n                        propList={\n                          Array [\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      >\n                        <RNSVGGroup>\n                          <RNSVGPath\n                            d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z\"\n                            fill={\n                              Array [\n                                2,\n                              ]\n                            }\n                            propList={\n                              Array [\n                                \"fill\",\n                                \"stroke\",\n                              ]\n                            }\n                            stroke={null}\n                          />\n                        </RNSVGGroup>\n                      </RNSVGGroup>\n                    </RNSVGSvgView>\n                  </View>\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"width\": 8,\n                      }\n                    }\n                  />\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#1f2937\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Selection successfully moved!\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"marginBottom\": 10,\n                \"marginTop\": 20,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 30,\n                \"marginBottom\": 16,\n                \"textAlign\": \"center\",\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            outline\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            space={3}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"borderColor\": \"#15803d\",\n                \"borderRadius\": 4,\n                \"borderWidth\": 1,\n                \"justifyContent\": \"flex-start\",\n                \"paddingBottom\": 12,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 12,\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"flexShrink\": 1,\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"flexShrink\": 1,\n                    \"justifyContent\": \"space-between\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                      \"flexShrink\": 1,\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={Object {}}\n                  >\n                    <RNSVGSvgView\n                      accessibilityRole=\"image\"\n                      align=\"xMidYMid\"\n                      bbHeight={16}\n                      bbWidth={16}\n                      color={-15368131}\n                      dataSet={Object {}}\n                      focusable={false}\n                      meetOrSlice={0}\n                      minX={0}\n                      minY={0}\n                      stroke=\"\"\n                      style={\n                        Array [\n                          Object {\n                            \"backgroundColor\": \"transparent\",\n                            \"borderWidth\": 0,\n                          },\n                          Object {\n                            \"color\": \"#15803d\",\n                            \"height\": 16,\n                            \"width\": 16,\n                          },\n                          Object {\n                            \"flex\": 0,\n                            \"height\": 16,\n                            \"width\": 16,\n                          },\n                        ]\n                      }\n                      tintColor={-15368131}\n                      vbHeight={24}\n                      vbWidth={24}\n                    >\n                      <RNSVGGroup\n                        propList={\n                          Array [\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      >\n                        <RNSVGGroup>\n                          <RNSVGPath\n                            d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z\"\n                            fill={\n                              Array [\n                                2,\n                              ]\n                            }\n                            propList={\n                              Array [\n                                \"fill\",\n                                \"stroke\",\n                              ]\n                            }\n                            stroke={null}\n                          />\n                        </RNSVGGroup>\n                      </RNSVGGroup>\n                    </RNSVGSvgView>\n                  </View>\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"width\": 8,\n                      }\n                    }\n                  />\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#171717\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Selection successfully moved!\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"marginBottom\": 10,\n                \"marginTop\": 20,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 30,\n                \"marginBottom\": 16,\n                \"textAlign\": \"center\",\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            subtle\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            space={3}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#bbf7d0\",\n                \"borderRadius\": 4,\n                \"justifyContent\": \"flex-start\",\n                \"paddingBottom\": 12,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 12,\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"flexShrink\": 1,\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"flexShrink\": 1,\n                    \"justifyContent\": \"space-between\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                      \"flexShrink\": 1,\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={Object {}}\n                  >\n                    <RNSVGSvgView\n                      accessibilityRole=\"image\"\n                      align=\"xMidYMid\"\n                      bbHeight={16}\n                      bbWidth={16}\n                      color={-15368131}\n                      dataSet={Object {}}\n                      focusable={false}\n                      meetOrSlice={0}\n                      minX={0}\n                      minY={0}\n                      stroke=\"\"\n                      style={\n                        Array [\n                          Object {\n                            \"backgroundColor\": \"transparent\",\n                            \"borderWidth\": 0,\n                          },\n                          Object {\n                            \"color\": \"#15803d\",\n                            \"height\": 16,\n                            \"width\": 16,\n                          },\n                          Object {\n                            \"flex\": 0,\n                            \"height\": 16,\n                            \"width\": 16,\n                          },\n                        ]\n                      }\n                      tintColor={-15368131}\n                      vbHeight={24}\n                      vbWidth={24}\n                    >\n                      <RNSVGGroup\n                        propList={\n                          Array [\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      >\n                        <RNSVGGroup>\n                          <RNSVGPath\n                            d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z\"\n                            fill={\n                              Array [\n                                2,\n                              ]\n                            }\n                            propList={\n                              Array [\n                                \"fill\",\n                                \"stroke\",\n                              ]\n                            }\n                            stroke={null}\n                          />\n                        </RNSVGGroup>\n                      </RNSVGGroup>\n                    </RNSVGSvgView>\n                  </View>\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"width\": 8,\n                      }\n                    }\n                  />\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#1f2937\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Selection successfully moved!\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"marginBottom\": 10,\n                \"marginTop\": 20,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 30,\n                \"marginBottom\": 16,\n                \"textAlign\": \"center\",\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            outline-light\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            space={3}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"borderColor\": \"rgba(21, 128, 61, 0.4)\",\n                \"borderRadius\": 4,\n                \"borderWidth\": 1,\n                \"justifyContent\": \"flex-start\",\n                \"paddingBottom\": 12,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 12,\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"flexShrink\": 1,\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"flexShrink\": 1,\n                    \"justifyContent\": \"space-between\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                      \"flexShrink\": 1,\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={Object {}}\n                  >\n                    <RNSVGSvgView\n                      accessibilityRole=\"image\"\n                      align=\"xMidYMid\"\n                      bbHeight={16}\n                      bbWidth={16}\n                      color={-15368131}\n                      dataSet={Object {}}\n                      focusable={false}\n                      meetOrSlice={0}\n                      minX={0}\n                      minY={0}\n                      stroke=\"\"\n                      style={\n                        Array [\n                          Object {\n                            \"backgroundColor\": \"transparent\",\n                            \"borderWidth\": 0,\n                          },\n                          Object {\n                            \"color\": \"#15803d\",\n                            \"height\": 16,\n                            \"width\": 16,\n                          },\n                          Object {\n                            \"flex\": 0,\n                            \"height\": 16,\n                            \"width\": 16,\n                          },\n                        ]\n                      }\n                      tintColor={-15368131}\n                      vbHeight={24}\n                      vbWidth={24}\n                    >\n                      <RNSVGGroup\n                        propList={\n                          Array [\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      >\n                        <RNSVGGroup>\n                          <RNSVGPath\n                            d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z\"\n                            fill={\n                              Array [\n                                2,\n                              ]\n                            }\n                            propList={\n                              Array [\n                                \"fill\",\n                                \"stroke\",\n                              ]\n                            }\n                            stroke={null}\n                          />\n                        </RNSVGGroup>\n                      </RNSVGGroup>\n                    </RNSVGSvgView>\n                  </View>\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"width\": 8,\n                      }\n                    }\n                  />\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#171717\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Selection successfully moved!\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"marginBottom\": 10,\n                \"marginTop\": 20,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n        </View>\n      </View>\n    </RCTScrollView>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Alert action 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Array [\n            Object {\n              \"overflow\": \"hidden\",\n            },\n            Object {\n              \"height\": undefined,\n            },\n          ]\n        }\n      >\n        <View\n          dataSet={Object {}}\n          onLayout={[Function]}\n          style={\n            Object {\n              \"overflow\": \"scroll\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            space={3}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#fecaca\",\n                \"borderRadius\": 4,\n                \"justifyContent\": \"flex-start\",\n                \"maxWidth\": 400,\n                \"paddingBottom\": 12,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 12,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"flexShrink\": 1,\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"flexShrink\": 1,\n                    \"justifyContent\": \"space-between\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                      \"flexShrink\": 1,\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={Object {}}\n                  >\n                    <RNSVGSvgView\n                      accessibilityRole=\"image\"\n                      align=\"xMidYMid\"\n                      bbHeight={16}\n                      bbWidth={16}\n                      color={-4645860}\n                      dataSet={Object {}}\n                      focusable={false}\n                      meetOrSlice={0}\n                      minX={0}\n                      minY={0}\n                      stroke=\"\"\n                      style={\n                        Array [\n                          Object {\n                            \"backgroundColor\": \"transparent\",\n                            \"borderWidth\": 0,\n                          },\n                          Object {\n                            \"color\": \"#b91c1c\",\n                            \"height\": 16,\n                            \"width\": 16,\n                          },\n                          Object {\n                            \"flex\": 0,\n                            \"height\": 16,\n                            \"width\": 16,\n                          },\n                        ]\n                      }\n                      tintColor={-4645860}\n                      vbHeight={24}\n                      vbWidth={24}\n                    >\n                      <RNSVGGroup\n                        propList={\n                          Array [\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      >\n                        <RNSVGGroup>\n                          <RNSVGGroup\n                            fill={\n                              Array [\n                                2,\n                              ]\n                            }\n                            propList={\n                              Array [\n                                \"fill\",\n                                \"stroke\",\n                              ]\n                            }\n                            stroke={null}\n                          >\n                            <RNSVGPath\n                              d=\"M13.9193 18.4271C13.8992 17.9392 13.6816 17.4813 13.3178 17.1478C12.9545 16.8148 12.4731 16.631 11.975 16.6304H11.9746H11.945V16.6304L11.9392 16.6305C11.6898 16.6348 11.4434 16.6864 11.2142 16.7827L11.333 17.0655L11.2142 16.7827C10.9851 16.879 10.7773 17.0183 10.6035 17.1931C10.4296 17.368 10.2932 17.5751 10.2031 17.8026C10.113 18.0302 10.0712 18.2732 10.0806 18.5171L10.0807 18.5176C10.1001 19.0055 10.3169 19.4638 10.6802 19.7979C11.043 20.1315 11.5241 20.3162 12.0222 20.3177H12.0233H12.0529V20.3178L12.058 20.3177C12.3081 20.3138 12.5552 20.2624 12.785 20.1661C13.0148 20.0698 13.2232 19.9303 13.3974 19.7549C13.5716 19.5795 13.7081 19.3718 13.7981 19.1436C13.8881 18.9153 13.9295 18.6716 13.9193 18.4271ZM13.9193 18.4271L13.5863 18.4408M13.9193 18.4271C13.9193 18.4271 13.9193 18.4271 13.9193 18.427L13.5863 18.4408M13.5863 18.4408C13.5945 18.6386 13.5611 18.836 13.488 19.0213C13.415 19.2066 13.3037 19.3762 13.1609 19.52C13.018 19.6638 12.8464 19.779 12.6561 19.8587C12.4658 19.9385 12.2607 19.9812 12.0529 19.9844H12.0233C11.6062 19.9831 11.2058 19.8284 10.9059 19.5525C10.6059 19.2767 10.4296 18.9011 10.4137 18.5043C10.4061 18.3069 10.4399 18.1101 10.513 17.9254C10.5862 17.7406 10.6973 17.5715 10.8399 17.4281C10.9824 17.2847 11.1536 17.1698 11.3434 17.09C11.5331 17.0103 11.7376 16.9674 11.945 16.9638H11.9746C12.3916 16.9642 12.7922 17.1182 13.0926 17.3936C13.393 17.6689 13.5699 18.0442 13.5863 18.4408ZM23.4665 20.2125L23.4665 20.2125C23.6068 20.4676 23.6751 20.7517 23.6658 21.0376C23.6566 21.3234 23.57 21.6033 23.4131 21.8501C23.2562 22.097 23.0337 22.3031 22.7658 22.4469C22.4978 22.5907 22.1942 22.6667 21.8847 22.6667H21.8846H2.11538H2.11533C1.80576 22.6667 1.50222 22.5907 1.23422 22.4469C0.96631 22.3031 0.743845 22.097 0.586879 21.8501L0.305565 22.0289L0.586879 21.8501C0.429998 21.6033 0.343434 21.3234 0.334166 21.0376C0.324898 20.7517 0.393165 20.4676 0.533517 20.2125L0.53353 20.2125L10.4192 2.23977C10.5681 1.96911 10.7933 1.74021 11.0721 1.5796C11.3511 1.41893 11.6722 1.33333 12.0005 1.33333C12.3289 1.33333 12.65 1.41893 12.9289 1.5796C13.2078 1.74021 13.4329 1.96911 13.5819 2.23977L23.4665 20.2125ZM11.0224 7.44182C10.7599 7.69176 10.6091 8.03434 10.6091 8.39521V14.4365C10.6091 14.7974 10.7599 15.1399 11.0224 15.3899C11.2843 15.6393 11.6363 15.7767 12 15.7767C12.3637 15.7767 12.7157 15.6393 12.9776 15.3899C13.2401 15.1399 13.3909 14.7974 13.3909 14.4365V8.39521C13.3909 8.03434 13.2401 7.69176 12.9776 7.44182C12.7157 7.19242 12.3637 7.05499 12 7.05499C11.6363 7.05499 11.2843 7.19242 11.0224 7.44182Z\"\n                              propList={\n                                Array [\n                                  \"stroke\",\n                                  \"strokeWidth\",\n                                ]\n                              }\n                              stroke={\n                                Array [\n                                  2,\n                                ]\n                              }\n                              strokeWidth=\"0.666667\"\n                            />\n                          </RNSVGGroup>\n                        </RNSVGGroup>\n                      </RNSVGGroup>\n                    </RNSVGSvgView>\n                  </View>\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"width\": 8,\n                      }\n                    }\n                  />\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#171717\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 16,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"500\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 24,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Please try again later!\n                  </Text>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 8,\n                    }\n                  }\n                />\n                <View\n                  accessibilityRole=\"button\"\n                  accessible={true}\n                  colorScheme=\"primary\"\n                  dataSet={Object {}}\n                  focusable={true}\n                  onBlur={[Function]}\n                  onClick={[Function]}\n                  onFocus={[Function]}\n                  onHoverIn={[Function]}\n                  onHoverOut={[Function]}\n                  onResponderGrant={[Function]}\n                  onResponderMove={[Function]}\n                  onResponderRelease={[Function]}\n                  onResponderTerminate={[Function]}\n                  onResponderTerminationRequest={[Function]}\n                  onStartShouldSetResponder={[Function]}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"borderRadius\": 4,\n                      \"flexDirection\": \"row\",\n                      \"justifyContent\": \"center\",\n                      \"paddingBottom\": 10,\n                      \"paddingLeft\": 10,\n                      \"paddingRight\": 10,\n                      \"paddingTop\": 10,\n                    }\n                  }\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={12}\n                    bbWidth={12}\n                    color={-11840157}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#4b5563\",\n                          \"height\": 12,\n                          \"width\": 12,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 12,\n                          \"width\": 12,\n                        },\n                      ]\n                    }\n                    tintColor={-11840157}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"height\": 4,\n                  }\n                }\n              />\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"paddingLeft\": 24,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Your coupon could not be processed at this time.\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n      </View>\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"marginLeft\": \"auto\",\n            \"marginRight\": \"auto\",\n            \"marginTop\": 32,\n            \"paddingBottom\": 8,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 8,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 18,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Re-Open\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots AlertDialog Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"danger\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#e11d48\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Delete Customer\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots AlertDialog Transition 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Discard\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots AspectRatio Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Array [\n          Object {\n            \"height\": 200,\n          },\n          Object {\n            \"aspectRatio\": 1.3333333333333333,\n            \"style\": undefined,\n          },\n        ]\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"#f87171\",\n            },\n            Object {\n              \"bottom\": 0,\n              \"left\": 0,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"top\": 0,\n            },\n          ]\n        }\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots AspectRatio EmbedImage 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Array [\n          Object {\n            \"height\": 200,\n          },\n          Object {\n            \"aspectRatio\": 0.75,\n            \"style\": undefined,\n          },\n        ]\n      }\n    >\n      <Image\n        accessibilityLabel=\"Picture of a Flower\"\n        alt=\"Picture of a Flower\"\n        dataSet={Object {}}\n        onError={[Function]}\n        resizeMode=\"cover\"\n        source={\n          Object {\n            \"uri\": \"https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260\",\n          }\n        }\n        style={\n          Array [\n            Object {\n              \"maxWidth\": \"100%\",\n            },\n            Object {\n              \"bottom\": 0,\n              \"left\": 0,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"top\": 0,\n            },\n          ]\n        }\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Avatar AvatarBadge 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#38bdf8\",\n            \"borderColor\": \"#27272a\",\n            \"borderRadius\": 9999,\n            \"height\": 24,\n            \"justifyContent\": \"center\",\n            \"position\": \"relative\",\n            \"width\": 24,\n          }\n        }\n      >\n        <Image\n          accessibilityLabel=\"--\"\n          alt=\"--\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80\",\n            }\n          }\n          style={\n            Array [\n              Object {\n                \"borderRadius\": 9999,\n                \"maxWidth\": \"100%\",\n              },\n              Object {\n                \"height\": \"100%\",\n                \"width\": \"100%\",\n              },\n            ]\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": \"#22c55e\",\n              \"borderColor\": \"#fafafa\",\n              \"borderRadius\": 9999,\n              \"borderWidth\": 2,\n              \"bottom\": 0,\n              \"height\": 8,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"width\": 8,\n            }\n          }\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#f59e0b\",\n            \"borderColor\": \"#27272a\",\n            \"borderRadius\": 9999,\n            \"height\": 32,\n            \"justifyContent\": \"center\",\n            \"position\": \"relative\",\n            \"width\": 32,\n          }\n        }\n      >\n        <Image\n          accessibilityLabel=\"--\"\n          alt=\"--\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://images.unsplash.com/photo-1614289371518-722f2615943d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80\",\n            }\n          }\n          style={\n            Array [\n              Object {\n                \"borderRadius\": 9999,\n                \"maxWidth\": \"100%\",\n              },\n              Object {\n                \"height\": \"100%\",\n                \"width\": \"100%\",\n              },\n            ]\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": \"#22c55e\",\n              \"borderColor\": \"#fafafa\",\n              \"borderRadius\": 9999,\n              \"borderWidth\": 2,\n              \"bottom\": 0,\n              \"height\": 12,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"width\": 12,\n            }\n          }\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#f59e0b\",\n            \"borderColor\": \"#27272a\",\n            \"borderRadius\": 9999,\n            \"height\": 48,\n            \"justifyContent\": \"center\",\n            \"position\": \"relative\",\n            \"width\": 48,\n          }\n        }\n      >\n        <Image\n          accessibilityLabel=\"--\"\n          alt=\"--\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://images.unsplash.com/photo-1614289371518-722f2615943d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80\",\n            }\n          }\n          style={\n            Array [\n              Object {\n                \"borderRadius\": 9999,\n                \"maxWidth\": \"100%\",\n              },\n              Object {\n                \"height\": \"100%\",\n                \"width\": \"100%\",\n              },\n            ]\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": \"#22c55e\",\n              \"borderColor\": \"#fafafa\",\n              \"borderRadius\": 9999,\n              \"borderWidth\": 2,\n              \"bottom\": 0,\n              \"height\": 16,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"width\": 16,\n            }\n          }\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#f59e0b\",\n            \"borderColor\": \"#27272a\",\n            \"borderRadius\": 9999,\n            \"height\": 64,\n            \"justifyContent\": \"center\",\n            \"position\": \"relative\",\n            \"width\": 64,\n          }\n        }\n      >\n        <Image\n          accessibilityLabel=\"--\"\n          alt=\"--\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://images.unsplash.com/photo-1614289371518-722f2615943d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80\",\n            }\n          }\n          style={\n            Array [\n              Object {\n                \"borderRadius\": 9999,\n                \"maxWidth\": \"100%\",\n              },\n              Object {\n                \"height\": \"100%\",\n                \"width\": \"100%\",\n              },\n            ]\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": \"#22c55e\",\n              \"borderColor\": \"#fafafa\",\n              \"borderRadius\": 9999,\n              \"borderWidth\": 2,\n              \"bottom\": 0,\n              \"height\": 20,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"width\": 20,\n            }\n          }\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#f59e0b\",\n            \"borderColor\": \"#27272a\",\n            \"borderRadius\": 9999,\n            \"height\": 96,\n            \"justifyContent\": \"center\",\n            \"position\": \"relative\",\n            \"width\": 96,\n          }\n        }\n      >\n        <Image\n          accessibilityLabel=\"--\"\n          alt=\"--\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://images.unsplash.com/photo-1614289371518-722f2615943d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80\",\n            }\n          }\n          style={\n            Array [\n              Object {\n                \"borderRadius\": 9999,\n                \"maxWidth\": \"100%\",\n              },\n              Object {\n                \"height\": \"100%\",\n                \"width\": \"100%\",\n              },\n            ]\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": \"#22c55e\",\n              \"borderColor\": \"#fafafa\",\n              \"borderRadius\": 9999,\n              \"borderWidth\": 2,\n              \"bottom\": 0,\n              \"height\": 24,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"width\": 24,\n            }\n          }\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#f59e0b\",\n            \"borderColor\": \"#27272a\",\n            \"borderRadius\": 9999,\n            \"height\": 128,\n            \"justifyContent\": \"center\",\n            \"position\": \"relative\",\n            \"width\": 128,\n          }\n        }\n      >\n        <Image\n          accessibilityLabel=\"--\"\n          alt=\"--\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://images.unsplash.com/photo-1614289371518-722f2615943d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80\",\n            }\n          }\n          style={\n            Array [\n              Object {\n                \"borderRadius\": 9999,\n                \"maxWidth\": \"100%\",\n              },\n              Object {\n                \"height\": \"100%\",\n                \"width\": \"100%\",\n              },\n            ]\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": \"#22c55e\",\n              \"borderColor\": \"#fafafa\",\n              \"borderRadius\": 9999,\n              \"borderWidth\": 2,\n              \"bottom\": 0,\n              \"height\": 28,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"width\": 28,\n            }\n          }\n        />\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Avatar AvatarGroup 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"flexDirection\": \"row-reverse\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#52525b\",\n              \"borderColor\": \"#fafafa\",\n              \"borderRadius\": 9999,\n              \"borderWidth\": 2,\n              \"height\": 64,\n              \"justifyContent\": \"center\",\n              \"marginLeft\": -16,\n              \"marginTop\": 0,\n              \"position\": \"relative\",\n              \"width\": 64,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#fafafa\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"600\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 30,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            + 5\n          </Text>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#6366f1\",\n              \"borderColor\": \"#fafafa\",\n              \"borderRadius\": 9999,\n              \"borderWidth\": 2,\n              \"height\": 64,\n              \"justifyContent\": \"center\",\n              \"marginLeft\": -16,\n              \"marginTop\": 0,\n              \"position\": \"relative\",\n              \"width\": 64,\n            }\n          }\n        >\n          <Image\n            accessibilityLabel=\"--\"\n            alt=\"--\"\n            dataSet={Object {}}\n            onError={[Function]}\n            source={\n              Object {\n                \"uri\": \"https://images.unsplash.com/photo-1614289371518-722f2615943d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80\",\n              }\n            }\n            style={\n              Array [\n                Object {\n                  \"borderRadius\": 9999,\n                  \"maxWidth\": \"100%\",\n                },\n                Object {\n                  \"height\": \"100%\",\n                  \"width\": \"100%\",\n                },\n              ]\n            }\n          />\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#06b6d4\",\n              \"borderColor\": \"#fafafa\",\n              \"borderRadius\": 9999,\n              \"borderWidth\": 2,\n              \"height\": 64,\n              \"justifyContent\": \"center\",\n              \"marginLeft\": -16,\n              \"marginTop\": 0,\n              \"position\": \"relative\",\n              \"width\": 64,\n            }\n          }\n        >\n          <Image\n            accessibilityLabel=\"--\"\n            alt=\"--\"\n            dataSet={Object {}}\n            onError={[Function]}\n            source={\n              Object {\n                \"uri\": \"https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80\",\n              }\n            }\n            style={\n              Array [\n                Object {\n                  \"borderRadius\": 9999,\n                  \"maxWidth\": \"100%\",\n                },\n                Object {\n                  \"height\": \"100%\",\n                  \"width\": \"100%\",\n                },\n              ]\n            }\n          />\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#22c55e\",\n              \"borderColor\": \"#fafafa\",\n              \"borderRadius\": 9999,\n              \"borderWidth\": 2,\n              \"height\": 64,\n              \"justifyContent\": \"center\",\n              \"position\": \"relative\",\n              \"width\": 64,\n            }\n          }\n        >\n          <Image\n            accessibilityLabel=\"--\"\n            alt=\"--\"\n            dataSet={Object {}}\n            onError={[Function]}\n            source={\n              Object {\n                \"uri\": \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80\",\n              }\n            }\n            style={\n              Array [\n                Object {\n                  \"borderRadius\": 9999,\n                  \"maxWidth\": \"100%\",\n                },\n                Object {\n                  \"height\": \"100%\",\n                  \"width\": \"100%\",\n                },\n              ]\n            }\n          />\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Avatar Fallback 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginLeft\": \"auto\",\n          \"marginRight\": \"auto\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#22c55e\",\n            \"borderColor\": \"#27272a\",\n            \"borderRadius\": 9999,\n            \"height\": 48,\n            \"justifyContent\": \"center\",\n            \"marginRight\": 4,\n            \"position\": \"relative\",\n            \"width\": 48,\n          }\n        }\n      >\n        <Image\n          accessibilityLabel=\"--\"\n          alt=\"--\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://bit.ly/broken-link\",\n            }\n          }\n          style={\n            Array [\n              Object {\n                \"borderRadius\": 9999,\n                \"maxWidth\": \"100%\",\n              },\n              Object {\n                \"height\": \"100%\",\n                \"width\": \"100%\",\n              },\n            ]\n          }\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 8,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#f59e0b\",\n            \"borderColor\": \"#27272a\",\n            \"borderRadius\": 9999,\n            \"height\": 48,\n            \"justifyContent\": \"center\",\n            \"position\": \"relative\",\n            \"width\": 48,\n          }\n        }\n      >\n        <Image\n          accessibilityLabel=\"--\"\n          alt=\"--\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://bit.ly/broken-link\",\n            }\n          }\n          style={\n            Array [\n              Object {\n                \"borderRadius\": 9999,\n                \"maxWidth\": \"100%\",\n              },\n              Object {\n                \"height\": \"100%\",\n                \"width\": \"100%\",\n              },\n            ]\n          }\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 8,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#38bdf8\",\n            \"borderColor\": \"#27272a\",\n            \"borderRadius\": 9999,\n            \"height\": 48,\n            \"justifyContent\": \"center\",\n            \"position\": \"relative\",\n            \"width\": 48,\n          }\n        }\n      >\n        <Image\n          accessibilityLabel=\"--\"\n          alt=\"--\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://bit.ly/broken-link\",\n            }\n          }\n          style={\n            Array [\n              Object {\n                \"borderRadius\": 9999,\n                \"maxWidth\": \"100%\",\n              },\n              Object {\n                \"height\": \"100%\",\n                \"width\": \"100%\",\n              },\n            ]\n          }\n        />\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Avatar Playground 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"#0d9488\",\n          \"borderColor\": \"#000000\",\n          \"borderRadius\": 999,\n          \"borderWidth\": 2,\n          \"height\": 48,\n          \"justifyContent\": \"center\",\n          \"position\": \"relative\",\n          \"width\": 48,\n        }\n      }\n    >\n      <Image\n        accessibilityLabel=\"--\"\n        alt=\"--\"\n        dataSet={Object {}}\n        onError={[Function]}\n        source={\n          Object {\n            \"uri\": \"https://alpha.nativebase.io/img/native-base-icon.png\",\n          }\n        }\n        style={\n          Array [\n            Object {\n              \"borderRadius\": 9999,\n              \"maxWidth\": \"100%\",\n            },\n            Object {\n              \"height\": \"100%\",\n              \"width\": \"100%\",\n            },\n          ]\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": \"#fecaca\",\n            \"borderColor\": \"#fafafa\",\n            \"borderRadius\": 9999,\n            \"borderWidth\": 2,\n            \"bottom\": 0,\n            \"height\": 16,\n            \"position\": \"absolute\",\n            \"right\": 0,\n            \"width\": 16,\n          }\n        }\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Avatar Size 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"alignSelf\": \"center\",\n              \"backgroundColor\": \"#22c55e\",\n              \"borderColor\": \"#27272a\",\n              \"borderRadius\": 9999,\n              \"height\": 24,\n              \"justifyContent\": \"center\",\n              \"position\": \"relative\",\n              \"width\": 24,\n            }\n          }\n        >\n          <Image\n            accessibilityLabel=\"--\"\n            alt=\"--\"\n            dataSet={Object {}}\n            onError={[Function]}\n            source={\n              Object {\n                \"uri\": \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80\",\n              }\n            }\n            style={\n              Array [\n                Object {\n                  \"borderRadius\": 9999,\n                  \"maxWidth\": \"100%\",\n                },\n                Object {\n                  \"height\": \"100%\",\n                  \"width\": \"100%\",\n                },\n              ]\n            }\n          />\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"alignSelf\": \"center\",\n              \"backgroundColor\": \"#06b6d4\",\n              \"borderColor\": \"#27272a\",\n              \"borderRadius\": 9999,\n              \"height\": 32,\n              \"justifyContent\": \"center\",\n              \"position\": \"relative\",\n              \"width\": 32,\n            }\n          }\n        >\n          <Image\n            accessibilityLabel=\"--\"\n            alt=\"--\"\n            dataSet={Object {}}\n            onError={[Function]}\n            source={\n              Object {\n                \"uri\": \"https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80\",\n              }\n            }\n            style={\n              Array [\n                Object {\n                  \"borderRadius\": 9999,\n                  \"maxWidth\": \"100%\",\n                },\n                Object {\n                  \"height\": \"100%\",\n                  \"width\": \"100%\",\n                },\n              ]\n            }\n          />\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"alignSelf\": \"center\",\n              \"backgroundColor\": \"#6366f1\",\n              \"borderColor\": \"#27272a\",\n              \"borderRadius\": 9999,\n              \"height\": 48,\n              \"justifyContent\": \"center\",\n              \"position\": \"relative\",\n              \"width\": 48,\n            }\n          }\n        >\n          <Image\n            accessibilityLabel=\"--\"\n            alt=\"--\"\n            dataSet={Object {}}\n            onError={[Function]}\n            source={\n              Object {\n                \"uri\": \"https://images.unsplash.com/photo-1614289371518-722f2615943d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80\",\n              }\n            }\n            style={\n              Array [\n                Object {\n                  \"borderRadius\": 9999,\n                  \"maxWidth\": \"100%\",\n                },\n                Object {\n                  \"height\": \"100%\",\n                  \"width\": \"100%\",\n                },\n              ]\n            }\n          />\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"alignSelf\": \"center\",\n              \"backgroundColor\": \"#f59e0b\",\n              \"borderColor\": \"#27272a\",\n              \"borderRadius\": 9999,\n              \"height\": 64,\n              \"justifyContent\": \"center\",\n              \"position\": \"relative\",\n              \"width\": 64,\n            }\n          }\n        >\n          <Image\n            accessibilityLabel=\"--\"\n            alt=\"--\"\n            dataSet={Object {}}\n            onError={[Function]}\n            source={\n              Object {\n                \"uri\": \"https://images.unsplash.com/photo-1607746882042-944635dfe10e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80\",\n              }\n            }\n            style={\n              Array [\n                Object {\n                  \"borderRadius\": 9999,\n                  \"maxWidth\": \"100%\",\n                },\n                Object {\n                  \"height\": \"100%\",\n                  \"width\": \"100%\",\n                },\n              ]\n            }\n          />\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"alignSelf\": \"center\",\n              \"backgroundColor\": \"#db2777\",\n              \"borderColor\": \"#27272a\",\n              \"borderRadius\": 9999,\n              \"height\": 96,\n              \"justifyContent\": \"center\",\n              \"position\": \"relative\",\n              \"width\": 96,\n            }\n          }\n        >\n          <Image\n            accessibilityLabel=\"--\"\n            alt=\"--\"\n            dataSet={Object {}}\n            onError={[Function]}\n            source={\n              Object {\n                \"uri\": \"https://images.unsplash.com/photo-1601233749202-95d04d5b3c00?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2876&q=80\",\n              }\n            }\n            style={\n              Array [\n                Object {\n                  \"borderRadius\": 9999,\n                  \"maxWidth\": \"100%\",\n                },\n                Object {\n                  \"height\": \"100%\",\n                  \"width\": \"100%\",\n                },\n              ]\n            }\n          />\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"alignSelf\": \"center\",\n              \"backgroundColor\": \"#9333ea\",\n              \"borderColor\": \"#27272a\",\n              \"borderRadius\": 9999,\n              \"height\": 128,\n              \"justifyContent\": \"center\",\n              \"position\": \"relative\",\n              \"width\": 128,\n            }\n          }\n        >\n          <Image\n            accessibilityLabel=\"--\"\n            alt=\"--\"\n            dataSet={Object {}}\n            onError={[Function]}\n            source={\n              Object {\n                \"uri\": \"https://images.unsplash.com/photo-1510771463146-e89e6e86560e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=627&q=80\",\n              }\n            }\n            style={\n              Array [\n                Object {\n                  \"borderRadius\": 9999,\n                  \"maxWidth\": \"100%\",\n                },\n                Object {\n                  \"height\": \"100%\",\n                  \"width\": \"100%\",\n                },\n              ]\n            }\n          />\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Avatar Usage 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#22c55e\",\n            \"borderColor\": \"#27272a\",\n            \"borderRadius\": 9999,\n            \"height\": 48,\n            \"justifyContent\": \"center\",\n            \"position\": \"relative\",\n            \"width\": 48,\n          }\n        }\n      >\n        <Image\n          accessibilityLabel=\"--\"\n          alt=\"--\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80\",\n            }\n          }\n          style={\n            Array [\n              Object {\n                \"borderRadius\": 9999,\n                \"maxWidth\": \"100%\",\n              },\n              Object {\n                \"height\": \"100%\",\n                \"width\": \"100%\",\n              },\n            ]\n          }\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 8,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#06b6d4\",\n            \"borderColor\": \"#27272a\",\n            \"borderRadius\": 9999,\n            \"height\": 48,\n            \"justifyContent\": \"center\",\n            \"position\": \"relative\",\n            \"width\": 48,\n          }\n        }\n      >\n        <Image\n          accessibilityLabel=\"--\"\n          alt=\"--\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80\",\n            }\n          }\n          style={\n            Array [\n              Object {\n                \"borderRadius\": 9999,\n                \"maxWidth\": \"100%\",\n              },\n              Object {\n                \"height\": \"100%\",\n                \"width\": \"100%\",\n              },\n            ]\n          }\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 8,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#6366f1\",\n            \"borderColor\": \"#27272a\",\n            \"borderRadius\": 9999,\n            \"height\": 48,\n            \"justifyContent\": \"center\",\n            \"position\": \"relative\",\n            \"width\": 48,\n          }\n        }\n      >\n        <Image\n          accessibilityLabel=\"--\"\n          alt=\"--\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://images.unsplash.com/photo-1614289371518-722f2615943d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80\",\n            }\n          }\n          style={\n            Array [\n              Object {\n                \"borderRadius\": 9999,\n                \"maxWidth\": \"100%\",\n              },\n              Object {\n                \"height\": \"100%\",\n                \"width\": \"100%\",\n              },\n            ]\n          }\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 8,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#f59e0b\",\n            \"borderColor\": \"#27272a\",\n            \"borderRadius\": 9999,\n            \"height\": 48,\n            \"justifyContent\": \"center\",\n            \"position\": \"relative\",\n            \"width\": 48,\n          }\n        }\n      >\n        <Image\n          accessibilityLabel=\"--\"\n          alt=\"--\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://images.unsplash.com/photo-1607746882042-944635dfe10e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80\",\n            }\n          }\n          style={\n            Array [\n              Object {\n                \"borderRadius\": 9999,\n                \"maxWidth\": \"100%\",\n              },\n              Object {\n                \"height\": \"100%\",\n                \"width\": \"100%\",\n              },\n            ]\n          }\n        />\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Badge Color 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"flexDirection\": \"row\",\n          \"marginLeft\": \"auto\",\n          \"marginRight\": \"auto\",\n        }\n      }\n    >\n      <View\n        colorScheme=\"success\"\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#dcfce7\",\n            \"borderColor\": \"transparent\",\n            \"borderRadius\": 2,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 2,\n            \"paddingLeft\": 8,\n            \"paddingRight\": 8,\n            \"paddingTop\": 2,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#14532d\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 12,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 18,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            SUCCESS\n          </Text>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 16,\n          }\n        }\n      />\n      <View\n        colorScheme=\"danger\"\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#ffe4e6\",\n            \"borderColor\": \"transparent\",\n            \"borderRadius\": 2,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 2,\n            \"paddingLeft\": 8,\n            \"paddingRight\": 8,\n            \"paddingTop\": 2,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#881337\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 12,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 18,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            DANGER\n          </Text>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 16,\n          }\n        }\n      />\n      <View\n        colorScheme=\"info\"\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#e0f2fe\",\n            \"borderColor\": \"transparent\",\n            \"borderRadius\": 2,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 2,\n            \"paddingLeft\": 8,\n            \"paddingRight\": 8,\n            \"paddingTop\": 2,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#0c4a6e\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 12,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 18,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            INFO\n          </Text>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 16,\n          }\n        }\n      />\n      <View\n        colorScheme=\"coolGray\"\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#f3f4f6\",\n            \"borderColor\": \"transparent\",\n            \"borderRadius\": 2,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 2,\n            \"paddingLeft\": 8,\n            \"paddingRight\": 8,\n            \"paddingTop\": 2,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#111827\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 12,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 18,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            DARK\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Badge Composition 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      >\n        <View\n          colorScheme=\"danger\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"alignSelf\": \"flex-end\",\n              \"backgroundColor\": \"#e11d48\",\n              \"borderColor\": \"transparent\",\n              \"borderRadius\": 9999,\n              \"borderWidth\": 1,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"marginBottom\": -16,\n              \"marginRight\": -16,\n              \"paddingBottom\": 2,\n              \"paddingLeft\": 8,\n              \"paddingRight\": 8,\n              \"paddingTop\": 2,\n              \"zIndex\": 1,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"500\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 18,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              2\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#06b6d4\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"marginLeft\": \"auto\",\n              \"marginRight\": \"auto\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 8,\n              \"paddingRight\": 8,\n              \"paddingTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Notifications\n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Badge Icon 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"flexDirection\": \"column\",\n        }\n      }\n    >\n      <View\n        colorScheme=\"success\"\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#dcfce7\",\n            \"borderColor\": \"transparent\",\n            \"borderRadius\": 2,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 2,\n            \"paddingLeft\": 8,\n            \"paddingRight\": 8,\n            \"paddingTop\": 2,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#14532d\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 12,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 18,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            SUCCESS\n          </Text>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"width\": 4,\n            }\n          }\n        />\n        <RNSVGSvgView\n          accessibilityRole=\"image\"\n          align=\"xMidYMid\"\n          bbHeight={8}\n          bbWidth={8}\n          color={-15445203}\n          dataSet={Object {}}\n          focusable={false}\n          meetOrSlice={0}\n          minX={0}\n          minY={0}\n          stroke=\"\"\n          style={\n            Array [\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"borderWidth\": 0,\n              },\n              Object {\n                \"color\": \"#14532d\",\n                \"height\": 8,\n                \"width\": 8,\n              },\n              Object {\n                \"flex\": 0,\n                \"height\": 8,\n                \"width\": 8,\n              },\n            ]\n          }\n          tintColor={-15445203}\n          vbHeight={24}\n          vbWidth={24}\n        >\n          <RNSVGGroup\n            propList={\n              Array [\n                \"stroke\",\n              ]\n            }\n            stroke={null}\n          >\n            <RNSVGGroup>\n              <RNSVGPath\n                d=\"M13.25 10.75V2H10.75V10.75H2V13.25H10.75V22H13.25V13.25H22V10.75H13.25Z\"\n                fill={\n                  Array [\n                    2,\n                  ]\n                }\n                propList={\n                  Array [\n                    \"fill\",\n                    \"stroke\",\n                  ]\n                }\n                stroke={null}\n              />\n            </RNSVGGroup>\n          </RNSVGGroup>\n        </RNSVGSvgView>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        colorScheme=\"warning\"\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#ea580c\",\n            \"borderRadius\": 2,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 2,\n            \"paddingLeft\": 8,\n            \"paddingRight\": 8,\n            \"paddingTop\": 2,\n          }\n        }\n      >\n        <RNSVGSvgView\n          accessibilityRole=\"image\"\n          align=\"xMidYMid\"\n          bbHeight={8}\n          bbWidth={8}\n          color={-1419252}\n          dataSet={Object {}}\n          focusable={false}\n          meetOrSlice={0}\n          minX={0}\n          minY={0}\n          stroke=\"\"\n          style={\n            Array [\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"borderWidth\": 0,\n              },\n              Object {\n                \"color\": \"#ea580c\",\n                \"height\": 8,\n                \"width\": 8,\n              },\n              Object {\n                \"flex\": 0,\n                \"height\": 8,\n                \"width\": 8,\n              },\n            ]\n          }\n          tintColor={-1419252}\n          vbHeight={24}\n          vbWidth={24}\n        >\n          <RNSVGGroup\n            propList={\n              Array [\n                \"stroke\",\n              ]\n            }\n            stroke={null}\n          >\n            <RNSVGGroup>\n              <RNSVGPath\n                d=\"M13.25 10.75V2H10.75V10.75H2V13.25H10.75V22H13.25V13.25H22V10.75H13.25Z\"\n                fill={\n                  Array [\n                    2,\n                  ]\n                }\n                propList={\n                  Array [\n                    \"fill\",\n                    \"stroke\",\n                  ]\n                }\n                stroke={null}\n              />\n            </RNSVGGroup>\n          </RNSVGGroup>\n        </RNSVGSvgView>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"width\": 4,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#ea580c\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 12,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 18,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            SUCCESS\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Badge Playground 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      colorScheme=\"success\"\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"#16a34a\",\n          \"borderColor\": \"transparent\",\n          \"borderRadius\": 2,\n          \"borderWidth\": 1,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 2,\n          \"paddingLeft\": 8,\n          \"paddingRight\": 8,\n          \"paddingTop\": 2,\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#fafafa\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 12,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"500\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 18,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          NATIVEBASE\n        </Text>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Badge Usage 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        colorScheme=\"muted\"\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#f5f5f5\",\n            \"borderColor\": \"transparent\",\n            \"borderRadius\": 2,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 2,\n            \"paddingLeft\": 8,\n            \"paddingRight\": 8,\n            \"paddingTop\": 2,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 12,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 18,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            NEW FEATURE\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Badge Variants 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"flexDirection\": \"row\",\n            \"marginLeft\": \"auto\",\n            \"marginRight\": \"auto\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <View\n            colorScheme=\"muted\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"#525252\",\n                \"borderColor\": \"transparent\",\n                \"borderRadius\": 2,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 2,\n                \"paddingLeft\": 8,\n                \"paddingRight\": 8,\n                \"paddingTop\": 2,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 18,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                DEFAULT\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            colorScheme=\"success\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"#16a34a\",\n                \"borderColor\": \"transparent\",\n                \"borderRadius\": 2,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 2,\n                \"paddingLeft\": 8,\n                \"paddingRight\": 8,\n                \"paddingTop\": 2,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 18,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                SUCCESS\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            colorScheme=\"error\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"#dc2626\",\n                \"borderColor\": \"transparent\",\n                \"borderRadius\": 2,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 2,\n                \"paddingLeft\": 8,\n                \"paddingRight\": 8,\n                \"paddingTop\": 2,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 18,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                ERROR\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            colorScheme=\"info\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"#0284c7\",\n                \"borderColor\": \"transparent\",\n                \"borderRadius\": 2,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 2,\n                \"paddingLeft\": 8,\n                \"paddingRight\": 8,\n                \"paddingTop\": 2,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 18,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                INFO\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            colorScheme=\"warning\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"#ea580c\",\n                \"borderColor\": \"transparent\",\n                \"borderRadius\": 2,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 2,\n                \"paddingLeft\": 8,\n                \"paddingRight\": 8,\n                \"paddingTop\": 2,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 18,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                WARNING\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"width\": 16,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <View\n            colorScheme=\"muted\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"borderColor\": \"#525252\",\n                \"borderRadius\": 2,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 2,\n                \"paddingLeft\": 8,\n                \"paddingRight\": 8,\n                \"paddingTop\": 2,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#525252\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 18,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                DEFAULT\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            colorScheme=\"success\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"borderColor\": \"#16a34a\",\n                \"borderRadius\": 2,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 2,\n                \"paddingLeft\": 8,\n                \"paddingRight\": 8,\n                \"paddingTop\": 2,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#16a34a\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 18,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                SUCCESS\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            colorScheme=\"error\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"borderColor\": \"#dc2626\",\n                \"borderRadius\": 2,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 2,\n                \"paddingLeft\": 8,\n                \"paddingRight\": 8,\n                \"paddingTop\": 2,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#dc2626\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 18,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                ERROR\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            colorScheme=\"info\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"borderColor\": \"#0284c7\",\n                \"borderRadius\": 2,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 2,\n                \"paddingLeft\": 8,\n                \"paddingRight\": 8,\n                \"paddingTop\": 2,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#0284c7\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 18,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                INFO\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            colorScheme=\"warning\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"borderColor\": \"#ea580c\",\n                \"borderRadius\": 2,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 2,\n                \"paddingLeft\": 8,\n                \"paddingRight\": 8,\n                \"paddingTop\": 2,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#ea580c\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 18,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                WARNING\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"width\": 16,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <View\n            colorScheme=\"muted\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"#f5f5f5\",\n                \"borderColor\": \"transparent\",\n                \"borderRadius\": 2,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 2,\n                \"paddingLeft\": 8,\n                \"paddingRight\": 8,\n                \"paddingTop\": 2,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 18,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                DEFAULT\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            colorScheme=\"success\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"#dcfce7\",\n                \"borderColor\": \"transparent\",\n                \"borderRadius\": 2,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 2,\n                \"paddingLeft\": 8,\n                \"paddingRight\": 8,\n                \"paddingTop\": 2,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#14532d\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 18,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                SUCCESS\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            colorScheme=\"error\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"#fee2e2\",\n                \"borderColor\": \"transparent\",\n                \"borderRadius\": 2,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 2,\n                \"paddingLeft\": 8,\n                \"paddingRight\": 8,\n                \"paddingTop\": 2,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#7f1d1d\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 18,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                ERROR\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            colorScheme=\"info\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"#e0f2fe\",\n                \"borderColor\": \"transparent\",\n                \"borderRadius\": 2,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 2,\n                \"paddingLeft\": 8,\n                \"paddingRight\": 8,\n                \"paddingTop\": 2,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#0c4a6e\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 18,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                INFO\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            colorScheme=\"warning\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"#ffedd5\",\n                \"borderColor\": \"transparent\",\n                \"borderRadius\": 2,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 2,\n                \"paddingLeft\": 8,\n                \"paddingRight\": 8,\n                \"paddingTop\": 2,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#7c2d12\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 18,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                WARNING\n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Box Basic Box 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignSelf\": \"center\",\n            \"backgroundColor\": \"#06b6d4\",\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#fafaf9\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 16,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"500\",\n              \"letterSpacing\": 0.4,\n              \"lineHeight\": 24,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          This is a Box\n        </Text>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Box Composition 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": \"#fafafa\",\n            \"borderColor\": \"#e5e7eb\",\n            \"borderRadius\": 8,\n            \"borderWidth\": 1,\n            \"maxWidth\": 320,\n            \"overflow\": \"hidden\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Array [\n                Object {\n                  \"width\": \"100%\",\n                },\n                Object {\n                  \"aspectRatio\": 1.7777777777777777,\n                  \"style\": undefined,\n                },\n              ]\n            }\n          >\n            <Image\n              accessibilityLabel=\"image\"\n              alt=\"image\"\n              dataSet={Object {}}\n              onError={[Function]}\n              source={\n                Object {\n                  \"uri\": \"https://www.holidify.com/images/cmsuploads/compressed/Bangalore_citycover_20190613234056.jpg\",\n                }\n              }\n              style={\n                Array [\n                  Object {\n                    \"maxWidth\": \"100%\",\n                  },\n                  Object {\n                    \"bottom\": 0,\n                    \"left\": 0,\n                    \"position\": \"absolute\",\n                    \"right\": 0,\n                    \"top\": 0,\n                  },\n                ]\n              }\n            />\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#8b5cf6\",\n                \"bottom\": 0,\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 6,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 6,\n                \"position\": \"absolute\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafaf9\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 18,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              PHOTOS\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"paddingBottom\": 16,\n              \"paddingLeft\": 16,\n              \"paddingRight\": 16,\n              \"paddingTop\": 16,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 20,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 25,\n                  \"marginLeft\": -4,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              The Garden City\n            </Text>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 8,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#8b5cf6\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"500\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 18,\n                  \"marginLeft\": -2,\n                  \"marginTop\": -4,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              The Silicon Valley of India.\n            </Text>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Bengaluru (also called Bangalore) is the center of India's high-tech industry. The city is also known for its parks and nightlife.\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"space-between\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#4b5563\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                6 mins ago\n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Box LinearGradient Box 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"borderRadius\": 12,\n          \"paddingBottom\": 48,\n          \"paddingLeft\": 48,\n          \"paddingRight\": 48,\n          \"paddingTop\": 48,\n          \"width\": 288,\n        }\n      }\n    >\n      <ViewManagerAdapter_ExpoLinearGradient\n        proxiedProperties={\n          Object {\n            \"borderRadii\": Array [\n              12,\n              12,\n              12,\n              12,\n              12,\n              12,\n              12,\n              12,\n            ],\n            \"colors\": Array [\n              -8530948,\n              -10804810,\n            ],\n            \"endPoint\": Array [\n              1,\n              0,\n            ],\n            \"locations\": undefined,\n            \"startPoint\": Array [\n              0,\n              0,\n            ],\n          }\n        }\n        style={\n          Object {\n            \"bottom\": 0,\n            \"left\": 0,\n            \"position\": \"absolute\",\n            \"right\": 0,\n            \"top\": 0,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#fafaf9\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 16,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"500\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 24,\n            \"textAlign\": \"center\",\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        This is a Box with Linear Gradient\n      </Text>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Box With Ref 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"backgroundColor\": \"#06b6d4\",\n          \"elevation\": 3,\n          \"paddingBottom\": 16,\n          \"paddingLeft\": 16,\n          \"paddingRight\": 16,\n          \"paddingTop\": 16,\n          \"shadowColor\": \"#000000\",\n          \"shadowOffset\": Object {\n            \"height\": 1,\n            \"width\": 0,\n          },\n          \"shadowOpacity\": 0.22,\n          \"shadowRadius\": 2.22,\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#FFFFFF\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 16,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 24,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        This is a Box\n      </Text>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Breadcrumb Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 24,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 30,\n            \"marginBottom\": 16,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Default Breadcrumb\n      </Text>\n      <View\n        accessibilityLabel=\"Breadcrumb\"\n        dataSet={Object {}}\n        style={\n          Object {\n            \"display\": \"flex\",\n            \"flexDirection\": \"row\",\n            \"flexWrap\": \"wrap\",\n            \"height\": \"auto\",\n            \"width\": \"auto\",\n          }\n        }\n        wrap=\"wrap\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"link\"\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              direction=\"row\"\n              spacing=\"2\"\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#ef4444\",\n                  \"display\": \"flex\",\n                  \"flexDirection\": \"row\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"height\": \"auto\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                  \"width\": \"auto\",\n                }\n              }\n              wrap=\"wrap\"\n            >\n              Home (This is currently active)\n            </Text>\n          </View>\n        </View>\n        <Text\n          dataSet={Object {}}\n          orientation=\"vertical\"\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"marginLeft\": 8,\n              \"marginRight\": 8,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          /\n        </Text>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"link\"\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              direction=\"row\"\n              spacing=\"2\"\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"display\": \"flex\",\n                  \"flexDirection\": \"row\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"auto\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                  \"width\": \"auto\",\n                }\n              }\n              wrap=\"wrap\"\n            >\n              Docs\n            </Text>\n          </View>\n        </View>\n        <Text\n          dataSet={Object {}}\n          orientation=\"vertical\"\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"marginLeft\": 8,\n              \"marginRight\": 8,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          /\n        </Text>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"link\"\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              direction=\"row\"\n              spacing=\"2\"\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"display\": \"flex\",\n                  \"flexDirection\": \"row\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"auto\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                  \"width\": \"auto\",\n                }\n              }\n              wrap=\"wrap\"\n            >\n              Github\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Breadcrumb Collapsible 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 24,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 30,\n            \"marginBottom\": 16,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Breadcrumb Collapsible\n      </Text>\n      <View\n        accessibilityLabel=\"Breadcrumb\"\n        dataSet={Object {}}\n        style={\n          Object {\n            \"display\": \"flex\",\n            \"flexDirection\": \"row\",\n            \"flexWrap\": \"wrap\",\n            \"height\": \"auto\",\n            \"marginTop\": 12,\n            \"width\": \"auto\",\n          }\n        }\n        wrap=\"wrap\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"link\"\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <Text\n                allowFontScaling={false}\n                dataSet={Object {}}\n                direction=\"row\"\n                spacing=\"2\"\n                style={\n                  Array [\n                    Object {\n                      \"color\": undefined,\n                      \"fontSize\": 12,\n                    },\n                    Object {\n                      \"color\": \"#737373\",\n                      \"display\": \"flex\",\n                      \"flexDirection\": \"row\",\n                      \"fontSize\": 12,\n                      \"height\": 12,\n                      \"lineHeight\": 12,\n                      \"marginRight\": 4,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"fontFamily\": \"material\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"normal\",\n                    },\n                    Object {},\n                  ]\n                }\n                wrap=\"wrap\"\n              >\n                \n              </Text>\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <Text\n                dataSet={Object {}}\n                direction=\"row\"\n                spacing=\"2\"\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"display\": \"flex\",\n                    \"flexDirection\": \"row\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"auto\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                    \"width\": \"auto\",\n                  }\n                }\n                wrap=\"wrap\"\n              >\n                Home\n              </Text>\n            </View>\n          </View>\n        </View>\n        <Text\n          dataSet={Object {}}\n          orientation=\"vertical\"\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"marginLeft\": 8,\n              \"marginRight\": 8,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          /\n        </Text>\n        <View\n          _text={Object {}}\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          setCollapsed={[Function]}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n            }\n          }\n        >\n          <RNSVGSvgView\n            accessibilityRole=\"image\"\n            align=\"xMidYMid\"\n            bbHeight={16}\n            bbWidth={16}\n            color={-9211021}\n            dataSet={Object {}}\n            focusable={false}\n            meetOrSlice={0}\n            minX={0}\n            minY={0}\n            stroke=\"\"\n            style={\n              Array [\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderWidth\": 0,\n                },\n                Object {\n                  \"color\": \"#737373\",\n                  \"height\": 16,\n                  \"width\": 16,\n                },\n                Object {\n                  \"flex\": 0,\n                  \"height\": 16,\n                  \"width\": 16,\n                },\n              ]\n            }\n            tintColor={-9211021}\n            vbHeight={32.055}\n            vbWidth={32.055}\n          >\n            <RNSVGGroup\n              propList={\n                Array [\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            >\n              <RNSVGGroup>\n                <RNSVGGroup\n                  fill={\n                    Array [\n                      2,\n                    ]\n                  }\n                  propList={\n                    Array [\n                      \"fill\",\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGPath\n                    d=\"M3.968,12.061C1.775,12.061,0,13.835,0,16.027c0,2.192,1.773,3.967,3.968,3.967c2.189,0,3.966-1.772,3.966-3.967   C7.934,13.835,6.157,12.061,3.968,12.061z M16.233,12.061c-2.188,0-3.968,1.773-3.968,3.965c0,2.192,1.778,3.967,3.968,3.967   s3.97-1.772,3.97-3.967C20.201,13.835,18.423,12.061,16.233,12.061z M28.09,12.061c-2.192,0-3.969,1.774-3.969,3.967   c0,2.19,1.774,3.965,3.969,3.965c2.188,0,3.965-1.772,3.965-3.965S30.278,12.061,28.09,12.061z\"\n                  />\n                </RNSVGGroup>\n              </RNSVGGroup>\n            </RNSVGGroup>\n          </RNSVGSvgView>\n        </View>\n        <Text\n          dataSet={Object {}}\n          orientation=\"vertical\"\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"marginLeft\": 8,\n              \"marginRight\": 8,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          /\n        </Text>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"link\"\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <Text\n                allowFontScaling={false}\n                dataSet={Object {}}\n                direction=\"row\"\n                spacing=\"2\"\n                style={\n                  Array [\n                    Object {\n                      \"color\": undefined,\n                      \"fontSize\": 12,\n                    },\n                    Object {\n                      \"color\": \"#ef4444\",\n                      \"display\": \"flex\",\n                      \"flexDirection\": \"row\",\n                      \"fontSize\": 12,\n                      \"height\": 12,\n                      \"lineHeight\": 12,\n                      \"marginRight\": 4,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"fontFamily\": \"anticon\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"normal\",\n                    },\n                    Object {},\n                  ]\n                }\n                wrap=\"wrap\"\n              >\n                \n              </Text>\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <Text\n                dataSet={Object {}}\n                direction=\"row\"\n                spacing=\"2\"\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#ef4444\",\n                    \"display\": \"flex\",\n                    \"flexDirection\": \"row\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"height\": \"auto\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                    \"width\": \"auto\",\n                  }\n                }\n                wrap=\"wrap\"\n              >\n                Github (This is currently active)\n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"marginTop\": 12,\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"gray\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 0,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 12,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 12,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#52525b\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Expand\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Breadcrumb ComponentSeparator 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 24,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 30,\n            \"marginBottom\": 16,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Breadcrumb with Custom Separator\n      </Text>\n      <View\n        accessibilityLabel=\"Breadcrumb\"\n        dataSet={Object {}}\n        style={\n          Object {\n            \"display\": \"flex\",\n            \"flexDirection\": \"row\",\n            \"flexWrap\": \"wrap\",\n            \"height\": \"auto\",\n            \"width\": \"auto\",\n          }\n        }\n        wrap=\"wrap\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"link\"\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": \"none\",\n                }\n              }\n            >\n              Home (This is currently active)\n            </Text>\n          </View>\n        </View>\n        <Text\n          allowFontScaling={false}\n          dataSet={Object {}}\n          orientation=\"vertical\"\n          style={\n            Array [\n              Object {\n                \"color\": undefined,\n                \"fontSize\": 12,\n              },\n              Object {\n                \"color\": \"#737373\",\n                \"fontSize\": 20,\n                \"height\": 20,\n                \"lineHeight\": 20,\n                \"marginLeft\": 4,\n                \"marginRight\": 4,\n                \"width\": 20,\n              },\n              Object {\n                \"fontFamily\": \"ionicons\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"normal\",\n              },\n              Object {},\n            ]\n          }\n        >\n          \n        </Text>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"link\"\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": \"none\",\n                }\n              }\n            >\n              Docs\n            </Text>\n          </View>\n        </View>\n        <Text\n          allowFontScaling={false}\n          dataSet={Object {}}\n          orientation=\"vertical\"\n          style={\n            Array [\n              Object {\n                \"color\": undefined,\n                \"fontSize\": 12,\n              },\n              Object {\n                \"color\": \"#737373\",\n                \"fontSize\": 20,\n                \"height\": 20,\n                \"lineHeight\": 20,\n                \"marginLeft\": 4,\n                \"marginRight\": 4,\n                \"width\": 20,\n              },\n              Object {\n                \"fontFamily\": \"ionicons\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"normal\",\n              },\n              Object {},\n            ]\n          }\n        >\n          \n        </Text>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"link\"\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": \"none\",\n                }\n              }\n            >\n              Github\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Breadcrumb Composition 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 24,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 30,\n            \"marginBottom\": 16,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Breadcrumb Composition\n      </Text>\n      <View\n        accessibilityLabel=\"Breadcrumb\"\n        dataSet={Object {}}\n        style={\n          Object {\n            \"display\": \"flex\",\n            \"flexDirection\": \"row\",\n            \"flexWrap\": \"wrap\",\n            \"height\": \"auto\",\n            \"width\": \"auto\",\n          }\n        }\n        wrap=\"wrap\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"link\"\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <Text\n                allowFontScaling={false}\n                dataSet={Object {}}\n                direction=\"row\"\n                spacing=\"2\"\n                style={\n                  Array [\n                    Object {\n                      \"color\": undefined,\n                      \"fontSize\": 12,\n                    },\n                    Object {\n                      \"color\": \"#737373\",\n                      \"display\": \"flex\",\n                      \"flexDirection\": \"row\",\n                      \"fontSize\": 12,\n                      \"height\": 12,\n                      \"lineHeight\": 12,\n                      \"marginRight\": 4,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"fontFamily\": \"material\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"normal\",\n                    },\n                    Object {},\n                  ]\n                }\n                wrap=\"wrap\"\n              >\n                \n              </Text>\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <Text\n                dataSet={Object {}}\n                direction=\"row\"\n                spacing=\"2\"\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"display\": \"flex\",\n                    \"flexDirection\": \"row\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"auto\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                    \"width\": \"auto\",\n                  }\n                }\n                wrap=\"wrap\"\n              >\n                Home\n              </Text>\n            </View>\n          </View>\n        </View>\n        <Text\n          dataSet={Object {}}\n          orientation=\"vertical\"\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"marginLeft\": 8,\n              \"marginRight\": 8,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          /\n        </Text>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"link\"\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <Text />\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <Text\n                dataSet={Object {}}\n                direction=\"row\"\n                spacing=\"2\"\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"display\": \"flex\",\n                    \"flexDirection\": \"row\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"auto\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                    \"width\": \"auto\",\n                  }\n                }\n                wrap=\"wrap\"\n              >\n                Docs\n              </Text>\n            </View>\n          </View>\n        </View>\n        <Text\n          dataSet={Object {}}\n          orientation=\"vertical\"\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"marginLeft\": 8,\n              \"marginRight\": 8,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          /\n        </Text>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"link\"\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <Text />\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <Text\n                dataSet={Object {}}\n                direction=\"row\"\n                spacing=\"2\"\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"display\": \"flex\",\n                    \"flexDirection\": \"row\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"height\": \"auto\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                    \"width\": \"auto\",\n                  }\n                }\n                wrap=\"wrap\"\n              >\n                Github (This is currently active)\n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Breadcrumb Separators 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 24,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 30,\n            \"marginBottom\": 16,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Breadcrumb with String Separator\n      </Text>\n      <View\n        accessibilityLabel=\"Breadcrumb\"\n        dataSet={Object {}}\n        style={\n          Object {\n            \"display\": \"flex\",\n            \"flexDirection\": \"row\",\n            \"flexWrap\": \"wrap\",\n            \"height\": \"auto\",\n            \"width\": \"auto\",\n          }\n        }\n        wrap=\"wrap\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"link\"\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              direction=\"row\"\n              spacing=\"2\"\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#ef4444\",\n                  \"display\": \"flex\",\n                  \"flexDirection\": \"row\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"height\": \"auto\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                  \"width\": \"auto\",\n                }\n              }\n              wrap=\"wrap\"\n            >\n              Home (This is currently active)\n            </Text>\n          </View>\n        </View>\n        <Text\n          dataSet={Object {}}\n          orientation=\"vertical\"\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"marginLeft\": 8,\n              \"marginRight\": 8,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          -\n        </Text>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"link\"\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": \"none\",\n                }\n              }\n            >\n              Docs\n            </Text>\n          </View>\n        </View>\n        <Text\n          dataSet={Object {}}\n          orientation=\"vertical\"\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"marginLeft\": 8,\n              \"marginRight\": 8,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          -\n        </Text>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"link\"\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": \"none\",\n                }\n              }\n            >\n              Github\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Button Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Click Me\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Button Composition 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderColor\": \"#d4d4d4\",\n          \"borderRadius\": 999,\n          \"borderWidth\": 2,\n          \"flexDirection\": \"row\",\n          \"height\": 48,\n          \"justifyContent\": \"center\",\n          \"marginLeft\": \"auto\",\n          \"marginRight\": \"auto\",\n          \"paddingBottom\": 10,\n          \"paddingLeft\": 20,\n          \"paddingRight\": 20,\n          \"paddingTop\": 10,\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n          }\n        }\n        test={true}\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#0891b2\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            SHOP NOW\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Button Icons 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"flexDirection\": \"column\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <Text\n            allowFontScaling={false}\n            dataSet={Object {}}\n            style={\n              Array [\n                Object {\n                  \"color\": undefined,\n                  \"fontSize\": 12,\n                },\n                Object {\n                  \"color\": \"#fafafa\",\n                  \"fontSize\": 16,\n                  \"height\": 16,\n                  \"lineHeight\": 16,\n                  \"width\": 16,\n                },\n                Object {\n                  \"fontFamily\": \"ionicons\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"normal\",\n                },\n                Object {},\n              ]\n            }\n          >\n            \n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 6,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Upload\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#cffafe\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#164e63\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Download\n            </Text>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 6,\n              }\n            }\n          />\n          <Text\n            allowFontScaling={false}\n            dataSet={Object {}}\n            style={\n              Array [\n                Object {\n                  \"color\": undefined,\n                  \"fontSize\": 12,\n                },\n                Object {\n                  \"color\": \"#164e63\",\n                  \"fontSize\": 16,\n                  \"height\": 16,\n                  \"lineHeight\": 16,\n                  \"width\": 16,\n                },\n                Object {\n                  \"fontFamily\": \"ionicons\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"normal\",\n                },\n                Object {},\n              ]\n            }\n          >\n            \n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Button Loading 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"flexDirection\": \"column\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"opacity\": 0.4,\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <ActivityIndicator\n            accessibilityLabel=\"loading\"\n            accessible={true}\n            animating={true}\n            color=\"#fafafa\"\n            hidesWhenStopped={true}\n            size=\"small\"\n            style={\n              Array [\n                Array [\n                  Object {},\n                  Object {\n                    \"dataSet\": Object {},\n                    \"focusable\": false,\n                  },\n                  Object {},\n                ],\n                undefined,\n              ]\n            }\n          />\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"opacity\": 0.4,\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <ActivityIndicator\n            accessibilityLabel=\"loading\"\n            accessible={true}\n            animating={true}\n            color=\"#fafafa\"\n            hidesWhenStopped={true}\n            size=\"small\"\n            style={\n              Array [\n                Array [\n                  Object {},\n                  Object {\n                    \"dataSet\": Object {},\n                    \"focusable\": false,\n                  },\n                  Object {},\n                ],\n                undefined,\n              ]\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 6,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Submitting\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"opacity\": 0.4,\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Submitting\n            </Text>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 6,\n              }\n            }\n          />\n          <ActivityIndicator\n            accessibilityLabel=\"loading\"\n            accessible={true}\n            animating={true}\n            color=\"#fafafa\"\n            hidesWhenStopped={true}\n            size=\"small\"\n            style={\n              Array [\n                Array [\n                  Object {},\n                  Object {\n                    \"dataSet\": Object {},\n                    \"focusable\": false,\n                  },\n                  Object {},\n                ],\n                undefined,\n              ]\n            }\n          />\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(251, 191, 36, 0.7)\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"opacity\": 0.4,\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <ActivityIndicator\n            accessibilityLabel=\"loading\"\n            accessible={true}\n            animating={true}\n            color=\"#FFFFFF\"\n            hidesWhenStopped={true}\n            size=\"small\"\n            style={\n              Array [\n                Array [\n                  Object {},\n                  Object {\n                    \"dataSet\": Object {},\n                    \"focusable\": false,\n                  },\n                  Object {},\n                ],\n                undefined,\n              ]\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 6,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#374151\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Submitting\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"opacity\": 0.4,\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <ActivityIndicator\n            accessibilityLabel=\"loading\"\n            accessible={true}\n            animating={true}\n            color=\"#0891b2\"\n            hidesWhenStopped={true}\n            size=\"small\"\n            style={\n              Array [\n                Array [\n                  Object {},\n                  Object {\n                    \"dataSet\": Object {},\n                    \"focusable\": false,\n                  },\n                  Object {},\n                ],\n                undefined,\n              ]\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 6,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#0891b2\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Submitting\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Button Sizes 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 8,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 8,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 10,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 15,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              BUTTON\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 8,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 8,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 18,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              BUTTON\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              BUTTON\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 12,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 12,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 16,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 24,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              BUTTON\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Button Variants 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <RCTScrollView\n      contentContainerStyle={\n        Array [\n          Object {},\n          Object {\n            \"dataSet\": Object {},\n          },\n          Object {},\n        ]\n      }\n      dataSet={Object {}}\n      showsVerticalScrollIndicator={false}\n      style={\n        Object {\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n        }\n      }\n    >\n      <View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"marginTop\": 16,\n              \"paddingLeft\": 8,\n              \"paddingRight\": 8,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Solid\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"column\",\n                \"marginBottom\": 10,\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#0891b2\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#fafafa\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 12,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 18,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    PRIMARY\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"secondary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#db2777\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#fafafa\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 12,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 18,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    SECONDARY\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#0891b2\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"opacity\": 0.4,\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#fafafa\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 12,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 18,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    DISABLED\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Subtle\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"column\",\n                \"marginBottom\": 10,\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#cffafe\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#164e63\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 12,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 18,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    PRIMARY\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"secondary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fce7f3\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#831843\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 12,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 18,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    SECONDARY\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#cffafe\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"opacity\": 0.4,\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#164e63\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 12,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 18,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    DISABLED\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Outline\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"column\",\n                \"marginBottom\": 10,\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#0891b2\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 12,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 18,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    PRIMARY\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"secondary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#db2777\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 12,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 18,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    SECONDARY\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"opacity\": 0.4,\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#0891b2\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 12,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 18,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    DISABLED\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Link\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"column\",\n                \"marginBottom\": 10,\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#0891b2\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 12,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 18,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    PRIMARY\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"secondary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#db2777\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 12,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 18,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    SECONDARY\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"opacity\": 0.4,\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#0891b2\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 12,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 18,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    DISABLED\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Ghost\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"column\",\n                \"marginBottom\": 10,\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#0891b2\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 12,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 18,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    PRIMARY\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"secondary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#db2777\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 12,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 18,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    SECONDARY\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"opacity\": 0.4,\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#0891b2\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 12,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 18,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    DISABLED\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Unstyled\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"column\",\n                \"marginBottom\": 10,\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#171717\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Unstyled\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n        </View>\n      </View>\n    </RCTScrollView>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Button WithRef 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 8,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 8,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#1F2937\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 18,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Send\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots ButtonGroup Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"flexDirection\": \"row\",\n          \"marginLeft\": \"auto\",\n          \"marginRight\": \"auto\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"blue\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#2563eb\",\n            \"borderBottomLeftRadius\": 4,\n            \"borderRadius\": 0,\n            \"borderTopLeftRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 8,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 8,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 18,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Edit\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 0,\n          }\n        }\n      />\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"blue\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderBottomRightRadius\": 4,\n            \"borderColor\": \"#d4d4d4\",\n            \"borderLeftWidth\": 0,\n            \"borderRadius\": 0,\n            \"borderTopRightRadius\": 4,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 8,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 8,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#2563eb\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 18,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Save\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots ButtonGroup Sizes 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 20,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 25,\n            \"marginBottom\": 40,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Sizes\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"column\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"primary\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#0891b2\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 8,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 8,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#fafafa\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 10,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 15,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  BUTTON\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 12,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"primary\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#0891b2\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 8,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 8,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#fafafa\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 12,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 18,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  BUTTON\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 12,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"primary\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#0891b2\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#fafafa\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  BUTTON\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 12,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"primary\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#0891b2\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 12,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 12,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#fafafa\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 16,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 24,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  BUTTON\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots ButtonGroup Variants 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <RCTScrollView\n      contentContainerStyle={\n        Array [\n          Object {},\n          Object {\n            \"dataSet\": Object {},\n          },\n          Object {},\n        ]\n      }\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"marginTop\": 16,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Solid\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"marginBottom\": 10,\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"teal\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#0d9488\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#fafafa\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Save\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"danger\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#e11d48\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#fafafa\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Cancel\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Subtle\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"marginBottom\": 10,\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"teal\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#ccfbf1\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#134e4a\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Save\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"danger\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#ffe4e6\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#881337\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Cancel\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Outline\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"marginBottom\": 10,\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"teal\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#0d9488\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Save\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"danger\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#e11d48\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Cancel\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Link\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"marginBottom\": 10,\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"teal\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#0d9488\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Save\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"danger\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#e11d48\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Cancel\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Ghost\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"marginBottom\": 10,\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"teal\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#0d9488\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Save\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"danger\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#e11d48\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Cancel\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Unstyled\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"marginBottom\": 10,\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"teal\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#171717\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Save\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"danger\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#171717\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Cancel\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n        </View>\n      </View>\n    </RCTScrollView>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots ButtonGroup direction 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"paddingLeft\": 8,\n          \"paddingRight\": 8,\n          \"width\": \"50%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"display\": \"flex\",\n            \"justifyContent\": \"center\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 20,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 25,\n              \"marginBottom\": 16,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Row\n        </Text>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n              \"marginLeft\": \"auto\",\n              \"marginRight\": \"auto\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"teal\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#0d9488\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#fafafa\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Save\n                </Text>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"rose\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#e11d48\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#fafafa\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Cancel\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n        <View\n          aria-orientation=\"horizontal\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": \"#d4d4d4\",\n              \"height\": 1,\n              \"marginTop\": 20,\n              \"width\": \"100%\",\n            }\n          }\n          thickness=\"1\"\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 10,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"display\": \"flex\",\n            \"justifyContent\": \"center\",\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 20,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 25,\n              \"marginBottom\": 16,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Column\n        </Text>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexDirection\": \"column\",\n              \"marginLeft\": \"auto\",\n              \"marginRight\": \"auto\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"teal\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#0d9488\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#fafafa\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Save\n                </Text>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 8,\n              }\n            }\n          />\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"rose\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#e11d48\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#fafafa\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Cancel\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots ButtonGroup isAttached 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <RCTScrollView\n      contentContainerStyle={\n        Array [\n          Object {},\n          Object {\n            \"dataSet\": Object {},\n          },\n          Object {},\n        ]\n      }\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"marginTop\": 16,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Solid\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"marginBottom\": 10,\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"teal\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#0d9488\",\n                  \"borderBottomLeftRadius\": 4,\n                  \"borderRadius\": 0,\n                  \"borderTopLeftRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#fafafa\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Save\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 0,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"danger\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#e11d48\",\n                  \"borderBottomRightRadius\": 4,\n                  \"borderLeftWidth\": 0,\n                  \"borderRadius\": 0,\n                  \"borderTopRightRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#fafafa\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Cancel\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Outline\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"marginBottom\": 10,\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"teal\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": 4,\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderRadius\": 0,\n                  \"borderTopLeftRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#0d9488\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Save\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 0,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"danger\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderBottomRightRadius\": 4,\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderLeftWidth\": 0,\n                  \"borderRadius\": 0,\n                  \"borderTopRightRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#e11d48\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Cancel\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Link\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"marginBottom\": 10,\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"teal\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": 4,\n                  \"borderRadius\": 0,\n                  \"borderTopLeftRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#0d9488\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Save\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 0,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"danger\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderBottomRightRadius\": 4,\n                  \"borderLeftWidth\": 0,\n                  \"borderRadius\": 0,\n                  \"borderTopRightRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#e11d48\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Cancel\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Ghost\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"marginBottom\": 10,\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"teal\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#0d9488\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Save\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"danger\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#e11d48\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Cancel\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Unstyled\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"marginBottom\": 10,\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"teal\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": 4,\n                  \"borderRadius\": 0,\n                  \"borderTopLeftRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#171717\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Save\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 0,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"danger\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderBottomRightRadius\": 4,\n                  \"borderLeftWidth\": 0,\n                  \"borderRadius\": 0,\n                  \"borderTopRightRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#171717\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Cancel\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n        </View>\n      </View>\n    </RCTScrollView>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Card Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"backgroundColor\": \"#0e7490\",\n          \"borderRadius\": 6,\n          \"elevation\": 5,\n          \"overflow\": \"hidden\",\n          \"paddingBottom\": 16,\n          \"paddingLeft\": 16,\n          \"paddingRight\": 16,\n          \"paddingTop\": 16,\n          \"shadowColor\": \"#000000\",\n          \"shadowOffset\": Object {\n            \"height\": 2,\n            \"width\": 0,\n          },\n          \"shadowOpacity\": 0.25,\n          \"shadowRadius\": 3.84,\n          \"width\": 296,\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"flex-start\",\n            \"flexDirection\": \"row\",\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#ecfeff\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 12,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"500\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 18,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Open Source\n        </Text>\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexGrow\": 1,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        />\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#cffafe\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 10,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 15,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          1 month ago\n        </Text>\n      </View>\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#ecfeff\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 18,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"500\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 22.5,\n            \"marginTop\": 8,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        NativeBase\n      </Text>\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#FFFFFF\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 14,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 21,\n            \"marginTop\": 4,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        NativeBase is a component library that enables devs to build universal design systems.\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"display\": \"flex\",\n            \"flexDirection\": \"column\",\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#22d3ee\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 12,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"500\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 18,\n              \"marginTop\": 8,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Read More\n        </Text>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Center Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#22d3ee\",\n            \"display\": \"flex\",\n            \"height\": 200,\n            \"justifyContent\": \"center\",\n            \"width\": 200,\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#FFFFFF\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          This is the Center\n        </Text>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Center SquareCircle 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"flexDirection\": \"row\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#f472b6\",\n            \"borderRadius\": 9999,\n            \"height\": 40,\n            \"justifyContent\": \"center\",\n            \"width\": 40,\n          }\n        }\n      >\n        <Text\n          allowFontScaling={false}\n          dataSet={Object {}}\n          style={\n            Array [\n              Object {\n                \"color\": undefined,\n                \"fontSize\": 12,\n              },\n              Object {\n                \"color\": \"#FFFFFF\",\n                \"fontSize\": 20,\n                \"height\": 20,\n                \"lineHeight\": 20,\n                \"width\": 20,\n              },\n              Object {\n                \"fontFamily\": \"material\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"normal\",\n              },\n              Object {},\n            ]\n          }\n        >\n          \n        </Text>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 12,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#22d3ee\",\n            \"height\": 40,\n            \"justifyContent\": \"center\",\n            \"width\": 40,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#FFFFFF\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 18,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 27,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            20\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Center WithIcons 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"flexDirection\": \"row\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#22d3ee\",\n            \"display\": \"flex\",\n            \"height\": 40,\n            \"justifyContent\": \"center\",\n            \"width\": 40,\n          }\n        }\n      >\n        <Text\n          allowFontScaling={false}\n          dataSet={Object {}}\n          style={\n            Array [\n              Object {\n                \"color\": undefined,\n                \"fontSize\": 12,\n              },\n              Object {\n                \"color\": \"#FFFFFF\",\n                \"fontSize\": 24,\n                \"height\": 24,\n                \"lineHeight\": 24,\n                \"width\": 24,\n              },\n              Object {\n                \"fontFamily\": \"material\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"normal\",\n              },\n              Object {},\n            ]\n          }\n        >\n          \n        </Text>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 4,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#f472b6\",\n            \"display\": \"flex\",\n            \"height\": 40,\n            \"justifyContent\": \"center\",\n            \"width\": 40,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#FFFFFF\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 18,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 27,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            20\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Checkbox Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"flexDirection\": \"row\",\n        }\n      }\n    >\n      <View\n        accessibilityLabel=\"This is a dummy checkbox\"\n        accessibilityRole=\"checkbox\"\n        accessibilityState={\n          Object {\n            \"checked\": false,\n            \"disabled\": undefined,\n          }\n        }\n        accessible={true}\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={Object {}}\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              checked={false}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              disabled={false}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#a3a3a3\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"opacity\": 1,\n                  \"paddingBottom\": 2,\n                  \"paddingLeft\": 2,\n                  \"paddingRight\": 2,\n                  \"paddingTop\": 2,\n                }\n              }\n              value=\"test\"\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"color\": \"#fafafa\",\n                    \"height\": 12,\n                    \"width\": 12,\n                  }\n                }\n              />\n            </View>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 24,\n          }\n        }\n      />\n      <View\n        accessibilityLabel=\"This is a dummy checkbox\"\n        accessibilityRole=\"checkbox\"\n        accessibilityState={\n          Object {\n            \"checked\": true,\n            \"disabled\": undefined,\n          }\n        }\n        accessible={true}\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={Object {}}\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              checked={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              defaultIsChecked={true}\n              disabled={false}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#0891b2\",\n                  \"borderColor\": \"#0891b2\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"opacity\": 1,\n                  \"paddingBottom\": 2,\n                  \"paddingLeft\": 2,\n                  \"paddingRight\": 2,\n                  \"paddingTop\": 2,\n                }\n              }\n              value=\"test\"\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={-328966}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#fafafa\",\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={-328966}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Checkbox Checkbox Group 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"baseline\",\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 18,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 22.5,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Hobbies\n          </Text>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Selected: (\n              2\n              )\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityLabel=\"pick an item\"\n          accessibilityState={\n            Object {\n              \"disabled\": undefined,\n            }\n          }\n          aria-label=\"pick an item\"\n          dataSet={Object {}}\n          defaultValue={\n            Array [\n              \"Photography\",\n              \"Gardening\",\n            ]\n          }\n          onChange={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"flex-start\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"checkbox\"\n            accessibilityState={\n              Object {\n                \"checked\": true,\n                \"disabled\": false,\n              }\n            }\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={Object {}}\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"flex-start\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                />\n                <View\n                  checked={true}\n                  colorScheme=\"green\"\n                  dataSet={Object {}}\n                  defaultIsChecked={false}\n                  disabled={false}\n                  isDisabled={false}\n                  isReadOnly={false}\n                  readOnly={false}\n                  state={\n                    Object {\n                      \"addValue\": [Function],\n                      \"isDisabled\": false,\n                      \"isReadOnly\": false,\n                      \"isSelected\": [Function],\n                      \"removeValue\": [Function],\n                      \"setValue\": [Function],\n                      \"toggleValue\": [Function],\n                      \"value\": Array [\n                        \"Photography\",\n                        \"Gardening\",\n                      ],\n                    }\n                  }\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"#16a34a\",\n                      \"borderColor\": \"#16a34a\",\n                      \"borderRadius\": 4,\n                      \"borderWidth\": 2,\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"opacity\": 1,\n                      \"paddingBottom\": 2,\n                      \"paddingLeft\": 2,\n                      \"paddingRight\": 2,\n                      \"paddingTop\": 2,\n                    }\n                  }\n                  value=\"Photography\"\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={12}\n                    bbWidth={12}\n                    color={-328966}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#fafafa\",\n                          \"height\": 12,\n                          \"width\": 12,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 12,\n                          \"width\": 12,\n                        },\n                      ]\n                    }\n                    tintColor={-328966}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#000000\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 16,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 24,\n                    \"marginLeft\": 8,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Photography\n              </Text>\n            </View>\n          </View>\n          <View\n            accessibilityRole=\"checkbox\"\n            accessibilityState={\n              Object {\n                \"checked\": false,\n                \"disabled\": false,\n              }\n            }\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={Object {}}\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"flex-start\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                />\n                <View\n                  checked={false}\n                  colorScheme=\"green\"\n                  dataSet={Object {}}\n                  defaultIsChecked={false}\n                  disabled={false}\n                  isDisabled={false}\n                  isReadOnly={false}\n                  readOnly={false}\n                  state={\n                    Object {\n                      \"addValue\": [Function],\n                      \"isDisabled\": false,\n                      \"isReadOnly\": false,\n                      \"isSelected\": [Function],\n                      \"removeValue\": [Function],\n                      \"setValue\": [Function],\n                      \"toggleValue\": [Function],\n                      \"value\": Array [\n                        \"Photography\",\n                        \"Gardening\",\n                      ],\n                    }\n                  }\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"#fafafa\",\n                      \"borderColor\": \"#a3a3a3\",\n                      \"borderRadius\": 4,\n                      \"borderWidth\": 2,\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"opacity\": 1,\n                      \"paddingBottom\": 2,\n                      \"paddingLeft\": 2,\n                      \"paddingRight\": 2,\n                      \"paddingTop\": 2,\n                    }\n                  }\n                  value=\"Writing\"\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"color\": \"#fafafa\",\n                        \"height\": 12,\n                        \"width\": 12,\n                      }\n                    }\n                  />\n                </View>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#000000\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 16,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 24,\n                    \"marginLeft\": 8,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Writing\n              </Text>\n            </View>\n          </View>\n          <View\n            accessibilityRole=\"checkbox\"\n            accessibilityState={\n              Object {\n                \"checked\": true,\n                \"disabled\": false,\n              }\n            }\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={Object {}}\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"flex-start\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                />\n                <View\n                  checked={true}\n                  colorScheme=\"green\"\n                  dataSet={Object {}}\n                  defaultIsChecked={false}\n                  disabled={false}\n                  isDisabled={false}\n                  isReadOnly={false}\n                  readOnly={false}\n                  state={\n                    Object {\n                      \"addValue\": [Function],\n                      \"isDisabled\": false,\n                      \"isReadOnly\": false,\n                      \"isSelected\": [Function],\n                      \"removeValue\": [Function],\n                      \"setValue\": [Function],\n                      \"toggleValue\": [Function],\n                      \"value\": Array [\n                        \"Photography\",\n                        \"Gardening\",\n                      ],\n                    }\n                  }\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"#16a34a\",\n                      \"borderColor\": \"#16a34a\",\n                      \"borderRadius\": 4,\n                      \"borderWidth\": 2,\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"opacity\": 1,\n                      \"paddingBottom\": 2,\n                      \"paddingLeft\": 2,\n                      \"paddingRight\": 2,\n                      \"paddingTop\": 2,\n                    }\n                  }\n                  value=\"Gardening\"\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={12}\n                    bbWidth={12}\n                    color={-328966}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#fafafa\",\n                          \"height\": 12,\n                          \"width\": 12,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 12,\n                          \"width\": 12,\n                        },\n                      ]\n                    }\n                    tintColor={-328966}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#000000\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 16,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 24,\n                    \"marginLeft\": 8,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Gardening\n              </Text>\n            </View>\n          </View>\n          <View\n            accessibilityRole=\"checkbox\"\n            accessibilityState={\n              Object {\n                \"checked\": false,\n                \"disabled\": false,\n              }\n            }\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={Object {}}\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"flex-start\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                />\n                <View\n                  checked={false}\n                  colorScheme=\"green\"\n                  dataSet={Object {}}\n                  defaultIsChecked={false}\n                  disabled={false}\n                  isDisabled={false}\n                  isReadOnly={false}\n                  readOnly={false}\n                  state={\n                    Object {\n                      \"addValue\": [Function],\n                      \"isDisabled\": false,\n                      \"isReadOnly\": false,\n                      \"isSelected\": [Function],\n                      \"removeValue\": [Function],\n                      \"setValue\": [Function],\n                      \"toggleValue\": [Function],\n                      \"value\": Array [\n                        \"Photography\",\n                        \"Gardening\",\n                      ],\n                    }\n                  }\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"#fafafa\",\n                      \"borderColor\": \"#a3a3a3\",\n                      \"borderRadius\": 4,\n                      \"borderWidth\": 2,\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"opacity\": 1,\n                      \"paddingBottom\": 2,\n                      \"paddingLeft\": 2,\n                      \"paddingRight\": 2,\n                      \"paddingTop\": 2,\n                    }\n                  }\n                  value=\"Cooking\"\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"color\": \"#fafafa\",\n                        \"height\": 12,\n                        \"width\": 12,\n                      }\n                    }\n                  />\n                </View>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#000000\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 16,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 24,\n                    \"marginLeft\": 8,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Cooking\n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Checkbox Controlled checkbox 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      accessibilityLabel=\"choose numbers\"\n      accessibilityState={\n        Object {\n          \"disabled\": undefined,\n        }\n      }\n      aria-label=\"choose numbers\"\n      dataSet={Object {}}\n      onChange={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"flex-start\",\n        }\n      }\n      value={Array []}\n    >\n      <View\n        accessibilityRole=\"checkbox\"\n        accessibilityState={\n          Object {\n            \"checked\": false,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={Object {}}\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"marginBottom\": 8,\n              \"marginTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              checked={false}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              disabled={false}\n              isDisabled={false}\n              isReadOnly={false}\n              readOnly={false}\n              state={\n                Object {\n                  \"addValue\": [Function],\n                  \"isDisabled\": false,\n                  \"isReadOnly\": false,\n                  \"isSelected\": [Function],\n                  \"removeValue\": [Function],\n                  \"setValue\": [Function],\n                  \"toggleValue\": [Function],\n                  \"value\": Array [],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#a3a3a3\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"opacity\": 1,\n                  \"paddingBottom\": 2,\n                  \"paddingLeft\": 2,\n                  \"paddingRight\": 2,\n                  \"paddingTop\": 2,\n                }\n              }\n              value=\"one\"\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"color\": \"#fafafa\",\n                    \"height\": 12,\n                    \"width\": 12,\n                  }\n                }\n              />\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#000000\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"marginLeft\": 8,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            UX Research\n          </Text>\n        </View>\n      </View>\n      <View\n        accessibilityRole=\"checkbox\"\n        accessibilityState={\n          Object {\n            \"checked\": false,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={Object {}}\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              checked={false}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              disabled={false}\n              isDisabled={false}\n              isReadOnly={false}\n              readOnly={false}\n              state={\n                Object {\n                  \"addValue\": [Function],\n                  \"isDisabled\": false,\n                  \"isReadOnly\": false,\n                  \"isSelected\": [Function],\n                  \"removeValue\": [Function],\n                  \"setValue\": [Function],\n                  \"toggleValue\": [Function],\n                  \"value\": Array [],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#a3a3a3\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"opacity\": 1,\n                  \"paddingBottom\": 2,\n                  \"paddingLeft\": 2,\n                  \"paddingRight\": 2,\n                  \"paddingTop\": 2,\n                }\n              }\n              value=\"two\"\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"color\": \"#fafafa\",\n                    \"height\": 12,\n                    \"width\": 12,\n                  }\n                }\n              />\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#000000\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"marginLeft\": 8,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Software Development\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Checkbox Custom Color 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"flex-start\",\n            \"flexDirection\": \"column\",\n          }\n        }\n      >\n        <View\n          accessibilityRole=\"checkbox\"\n          accessibilityState={\n            Object {\n              \"checked\": true,\n              \"disabled\": undefined,\n            }\n          }\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={Object {}}\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                checked={true}\n                colorScheme=\"danger\"\n                dataSet={Object {}}\n                defaultIsChecked={true}\n                disabled={false}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#e11d48\",\n                    \"borderColor\": \"#e11d48\",\n                    \"borderRadius\": 4,\n                    \"borderWidth\": 2,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": 2,\n                    \"paddingLeft\": 2,\n                    \"paddingRight\": 2,\n                    \"paddingTop\": 2,\n                  }\n                }\n                value=\"danger\"\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={12}\n                  bbWidth={12}\n                  color={-328966}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#fafafa\",\n                        \"height\": 12,\n                        \"width\": 12,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 12,\n                        \"width\": 12,\n                      },\n                    ]\n                  }\n                  tintColor={-328966}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#000000\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 16,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 24,\n                  \"marginLeft\": 8,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Danger\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 12,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"checkbox\"\n          accessibilityState={\n            Object {\n              \"checked\": true,\n              \"disabled\": undefined,\n            }\n          }\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={Object {}}\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                checked={true}\n                colorScheme=\"info\"\n                dataSet={Object {}}\n                defaultIsChecked={true}\n                disabled={false}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#0284c7\",\n                    \"borderColor\": \"#0284c7\",\n                    \"borderRadius\": 4,\n                    \"borderWidth\": 2,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": 2,\n                    \"paddingLeft\": 2,\n                    \"paddingRight\": 2,\n                    \"paddingTop\": 2,\n                  }\n                }\n                value=\"info\"\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={12}\n                  bbWidth={12}\n                  color={-328966}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#fafafa\",\n                        \"height\": 12,\n                        \"width\": 12,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 12,\n                        \"width\": 12,\n                      },\n                    ]\n                  }\n                  tintColor={-328966}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#000000\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 16,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 24,\n                  \"marginLeft\": 8,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Info\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 12,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"checkbox\"\n          accessibilityState={\n            Object {\n              \"checked\": true,\n              \"disabled\": undefined,\n            }\n          }\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={Object {}}\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                checked={true}\n                colorScheme=\"orange\"\n                dataSet={Object {}}\n                defaultIsChecked={true}\n                disabled={false}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#ea580c\",\n                    \"borderColor\": \"#ea580c\",\n                    \"borderRadius\": 4,\n                    \"borderWidth\": 2,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": 2,\n                    \"paddingLeft\": 2,\n                    \"paddingRight\": 2,\n                    \"paddingTop\": 2,\n                  }\n                }\n                value=\"orange\"\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={12}\n                  bbWidth={12}\n                  color={-328966}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#fafafa\",\n                        \"height\": 12,\n                        \"width\": 12,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 12,\n                        \"width\": 12,\n                      },\n                    ]\n                  }\n                  tintColor={-328966}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#000000\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 16,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 24,\n                  \"marginLeft\": 8,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Orange\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 12,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"checkbox\"\n          accessibilityState={\n            Object {\n              \"checked\": true,\n              \"disabled\": undefined,\n            }\n          }\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={Object {}}\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                checked={true}\n                colorScheme=\"purple\"\n                dataSet={Object {}}\n                defaultIsChecked={true}\n                disabled={false}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#9333ea\",\n                    \"borderColor\": \"#9333ea\",\n                    \"borderRadius\": 4,\n                    \"borderWidth\": 2,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": 2,\n                    \"paddingLeft\": 2,\n                    \"paddingRight\": 2,\n                    \"paddingTop\": 2,\n                  }\n                }\n                value=\"purple\"\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={12}\n                  bbWidth={12}\n                  color={-328966}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#fafafa\",\n                        \"height\": 12,\n                        \"width\": 12,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 12,\n                        \"width\": 12,\n                      },\n                    ]\n                  }\n                  tintColor={-328966}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#000000\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 16,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 24,\n                  \"marginLeft\": 8,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Purple\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Checkbox Custom Icon 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"flex-start\",\n            \"flexDirection\": \"column\",\n          }\n        }\n      >\n        <View\n          accessibilityRole=\"checkbox\"\n          accessibilityState={\n            Object {\n              \"checked\": true,\n              \"disabled\": undefined,\n            }\n          }\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={Object {}}\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                checked={true}\n                colorScheme=\"orange\"\n                dataSet={Object {}}\n                defaultIsChecked={true}\n                disabled={false}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#ea580c\",\n                    \"borderColor\": \"#ea580c\",\n                    \"borderRadius\": 4,\n                    \"borderWidth\": 2,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": 2,\n                    \"paddingLeft\": 2,\n                    \"paddingRight\": 2,\n                    \"paddingTop\": 2,\n                  }\n                }\n                value=\"orange\"\n              >\n                <Text\n                  allowFontScaling={false}\n                  dataSet={Object {}}\n                  style={\n                    Array [\n                      Object {\n                        \"color\": undefined,\n                        \"fontSize\": 12,\n                      },\n                      Object {\n                        \"color\": \"#fafafa\",\n                        \"fontSize\": 16,\n                        \"height\": 16,\n                        \"lineHeight\": 16,\n                        \"width\": 16,\n                      },\n                      Object {\n                        \"fontFamily\": \"material-community\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"normal\",\n                      },\n                      Object {},\n                    ]\n                  }\n                >\n                  󰗝\n                </Text>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#000000\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 18,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 27,\n                  \"marginLeft\": 8,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Darts\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 12,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"checkbox\"\n          accessibilityState={\n            Object {\n              \"checked\": true,\n              \"disabled\": undefined,\n            }\n          }\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={Object {}}\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                checked={true}\n                colorScheme=\"dark\"\n                dataSet={Object {}}\n                defaultIsChecked={true}\n                disabled={false}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#d4d4d8\",\n                    \"borderColor\": \"#d4d4d8\",\n                    \"borderRadius\": 4,\n                    \"borderWidth\": 2,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": 2,\n                    \"paddingLeft\": 2,\n                    \"paddingRight\": 2,\n                    \"paddingTop\": 2,\n                  }\n                }\n                value=\"dark\"\n              >\n                <Text\n                  allowFontScaling={false}\n                  dataSet={Object {}}\n                  style={\n                    Array [\n                      Object {\n                        \"color\": undefined,\n                        \"fontSize\": 12,\n                      },\n                      Object {\n                        \"color\": \"#fafafa\",\n                        \"fontSize\": 16,\n                        \"height\": 16,\n                        \"lineHeight\": 16,\n                        \"width\": 16,\n                      },\n                      Object {\n                        \"fontFamily\": \"material-community\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"normal\",\n                      },\n                      Object {},\n                    ]\n                  }\n                >\n                  󰭟\n                </Text>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#000000\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 18,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 27,\n                  \"marginLeft\": 8,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Movie\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 12,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"checkbox\"\n          accessibilityState={\n            Object {\n              \"checked\": true,\n              \"disabled\": undefined,\n            }\n          }\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={Object {}}\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                checked={true}\n                colorScheme=\"red\"\n                dataSet={Object {}}\n                defaultIsChecked={true}\n                disabled={false}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#dc2626\",\n                    \"borderColor\": \"#dc2626\",\n                    \"borderRadius\": 4,\n                    \"borderWidth\": 2,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": 2,\n                    \"paddingLeft\": 2,\n                    \"paddingRight\": 2,\n                    \"paddingTop\": 2,\n                  }\n                }\n                value=\"red\"\n              >\n                <Text\n                  allowFontScaling={false}\n                  dataSet={Object {}}\n                  style={\n                    Array [\n                      Object {\n                        \"color\": undefined,\n                        \"fontSize\": 12,\n                      },\n                      Object {\n                        \"color\": \"#fafafa\",\n                        \"fontSize\": 16,\n                        \"height\": 16,\n                        \"lineHeight\": 16,\n                        \"width\": 16,\n                      },\n                      Object {\n                        \"fontFamily\": \"material-community\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"normal\",\n                      },\n                      Object {},\n                    ]\n                  }\n                >\n                  󰻝\n                </Text>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#000000\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 18,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 27,\n                  \"marginLeft\": 8,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Camping\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 12,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"checkbox\"\n          accessibilityState={\n            Object {\n              \"checked\": true,\n              \"disabled\": undefined,\n            }\n          }\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={Object {}}\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                checked={true}\n                colorScheme=\"blue\"\n                dataSet={Object {}}\n                defaultIsChecked={true}\n                disabled={false}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#2563eb\",\n                    \"borderColor\": \"#2563eb\",\n                    \"borderRadius\": 4,\n                    \"borderWidth\": 2,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": 2,\n                    \"paddingLeft\": 2,\n                    \"paddingRight\": 2,\n                    \"paddingTop\": 2,\n                  }\n                }\n                value=\"blue\"\n              >\n                <Text\n                  allowFontScaling={false}\n                  dataSet={Object {}}\n                  style={\n                    Array [\n                      Object {\n                        \"color\": undefined,\n                        \"fontSize\": 12,\n                      },\n                      Object {\n                        \"color\": \"#fafafa\",\n                        \"fontSize\": 16,\n                        \"height\": 16,\n                        \"lineHeight\": 16,\n                        \"width\": 16,\n                      },\n                      Object {\n                        \"fontFamily\": \"material-community\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"normal\",\n                      },\n                      Object {},\n                    ]\n                  }\n                >\n                  󰡘\n                </Text>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#000000\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 18,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 27,\n                  \"marginLeft\": 8,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Chess\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Checkbox Disabled 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <View\n        accessibilityRole=\"checkbox\"\n        accessibilityState={\n          Object {\n            \"checked\": false,\n            \"disabled\": true,\n          }\n        }\n        accessible={true}\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={Object {}}\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              checked={false}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              disabled={true}\n              isDisabled={true}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#a3a3a3\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"opacity\": 0.4,\n                  \"paddingBottom\": 2,\n                  \"paddingLeft\": 2,\n                  \"paddingRight\": 2,\n                  \"paddingTop\": 2,\n                }\n              }\n              value=\"one\"\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"color\": \"#fafafa\",\n                    \"height\": 12,\n                    \"width\": 12,\n                  }\n                }\n              />\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#000000\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"marginLeft\": 8,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            UX Research\n          </Text>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <View\n        accessibilityRole=\"checkbox\"\n        accessibilityState={\n          Object {\n            \"checked\": true,\n            \"disabled\": true,\n          }\n        }\n        accessible={true}\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={Object {}}\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              checked={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              defaultIsChecked={true}\n              disabled={true}\n              isDisabled={true}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#0891b2\",\n                  \"borderColor\": \"#0891b2\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"opacity\": 0.4,\n                  \"paddingBottom\": 2,\n                  \"paddingLeft\": 2,\n                  \"paddingRight\": 2,\n                  \"paddingTop\": 2,\n                }\n              }\n              value=\"two\"\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={-328966}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#fafafa\",\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={-328966}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#000000\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"marginLeft\": 8,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Software Development\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Checkbox Form Controlled 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"flex-start\",\n            \"maxWidth\": \"80%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          isInvalid={true}\n          style={\n            Object {\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            feedbackId=\"field-69-feedback\"\n            hasFeedbackText={false}\n            hasHelpText={false}\n            helpTextId=\"field-69-helptext\"\n            isDisabled={false}\n            isInvalid={true}\n            isReadOnly={false}\n            isRequired={false}\n            labelId=\"field-69-label\"\n            nativeID=\"field-69-label\"\n            setHasFeedbackText={[Function]}\n            setHasHelpText={[Function]}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n                \"marginBottom\": 4,\n                \"marginTop\": 4,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#737373\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 18,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 27,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Preferred contact method\n            </Text>\n          </View>\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Selected Values: \n          </Text>\n          <View\n            accessibilityLabel=\"choose multiple items\"\n            accessibilityState={\n              Object {\n                \"disabled\": undefined,\n              }\n            }\n            aria-label=\"choose multiple items\"\n            dataSet={Object {}}\n            defaultValue={\n              Array [\n                \"Phone\",\n                \"Email\",\n              ]\n            }\n            onChange={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"flex-start\",\n                \"marginTop\": 8,\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"checkbox\"\n              accessibilityState={\n                Object {\n                  \"checked\": true,\n                  \"disabled\": false,\n                }\n              }\n              accessible={true}\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={Object {}}\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"flex-start\",\n                    \"marginBottom\": 4,\n                    \"marginTop\": 4,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={Object {}}\n                  />\n                  <View\n                    checked={true}\n                    colorScheme=\"green\"\n                    dataSet={Object {}}\n                    defaultIsChecked={false}\n                    disabled={false}\n                    feedbackId=\"field-69-feedback\"\n                    hasFeedbackText={false}\n                    hasHelpText={false}\n                    helpTextId=\"field-69-helptext\"\n                    isDisabled={false}\n                    isInvalid={true}\n                    isReadOnly={false}\n                    isRequired={false}\n                    labelId=\"field-69-label\"\n                    nativeID=\"field-69\"\n                    readOnly={false}\n                    required={false}\n                    setHasFeedbackText={[Function]}\n                    setHasHelpText={[Function]}\n                    state={\n                      Object {\n                        \"addValue\": [Function],\n                        \"isDisabled\": false,\n                        \"isReadOnly\": false,\n                        \"isSelected\": [Function],\n                        \"removeValue\": [Function],\n                        \"setValue\": [Function],\n                        \"toggleValue\": [Function],\n                        \"value\": Array [\n                          \"Phone\",\n                          \"Email\",\n                        ],\n                      }\n                    }\n                    style={\n                      Object {\n                        \"alignItems\": \"center\",\n                        \"backgroundColor\": \"#16a34a\",\n                        \"borderColor\": \"#dc2626\",\n                        \"borderRadius\": 4,\n                        \"borderWidth\": 2,\n                        \"display\": \"flex\",\n                        \"justifyContent\": \"center\",\n                        \"opacity\": 1,\n                        \"paddingBottom\": 2,\n                        \"paddingLeft\": 2,\n                        \"paddingRight\": 2,\n                        \"paddingTop\": 2,\n                      }\n                    }\n                    value=\"Phone\"\n                  >\n                    <RNSVGSvgView\n                      accessibilityRole=\"image\"\n                      align=\"xMidYMid\"\n                      bbHeight={12}\n                      bbWidth={12}\n                      color={-328966}\n                      dataSet={Object {}}\n                      focusable={false}\n                      meetOrSlice={0}\n                      minX={0}\n                      minY={0}\n                      stroke=\"\"\n                      style={\n                        Array [\n                          Object {\n                            \"backgroundColor\": \"transparent\",\n                            \"borderWidth\": 0,\n                          },\n                          Object {\n                            \"color\": \"#fafafa\",\n                            \"height\": 12,\n                            \"width\": 12,\n                          },\n                          Object {\n                            \"flex\": 0,\n                            \"height\": 12,\n                            \"width\": 12,\n                          },\n                        ]\n                      }\n                      tintColor={-328966}\n                      vbHeight={24}\n                      vbWidth={24}\n                    >\n                      <RNSVGGroup\n                        propList={\n                          Array [\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      >\n                        <RNSVGGroup>\n                          <RNSVGPath\n                            d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                            fill={\n                              Array [\n                                2,\n                              ]\n                            }\n                            propList={\n                              Array [\n                                \"fill\",\n                                \"stroke\",\n                              ]\n                            }\n                            stroke={null}\n                          />\n                        </RNSVGGroup>\n                      </RNSVGGroup>\n                    </RNSVGSvgView>\n                  </View>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#000000\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 16,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 24,\n                      \"marginLeft\": 8,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Phone\n                </Text>\n              </View>\n            </View>\n            <View\n              accessibilityRole=\"checkbox\"\n              accessibilityState={\n                Object {\n                  \"checked\": true,\n                  \"disabled\": false,\n                }\n              }\n              accessible={true}\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={Object {}}\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"flex-start\",\n                    \"marginBottom\": 4,\n                    \"marginTop\": 4,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={Object {}}\n                  />\n                  <View\n                    checked={true}\n                    colorScheme=\"green\"\n                    dataSet={Object {}}\n                    defaultIsChecked={false}\n                    disabled={false}\n                    feedbackId=\"field-69-feedback\"\n                    hasFeedbackText={false}\n                    hasHelpText={false}\n                    helpTextId=\"field-69-helptext\"\n                    isDisabled={false}\n                    isInvalid={true}\n                    isReadOnly={false}\n                    isRequired={false}\n                    labelId=\"field-69-label\"\n                    nativeID=\"field-69\"\n                    readOnly={false}\n                    required={false}\n                    setHasFeedbackText={[Function]}\n                    setHasHelpText={[Function]}\n                    state={\n                      Object {\n                        \"addValue\": [Function],\n                        \"isDisabled\": false,\n                        \"isReadOnly\": false,\n                        \"isSelected\": [Function],\n                        \"removeValue\": [Function],\n                        \"setValue\": [Function],\n                        \"toggleValue\": [Function],\n                        \"value\": Array [\n                          \"Phone\",\n                          \"Email\",\n                        ],\n                      }\n                    }\n                    style={\n                      Object {\n                        \"alignItems\": \"center\",\n                        \"backgroundColor\": \"#16a34a\",\n                        \"borderColor\": \"#dc2626\",\n                        \"borderRadius\": 4,\n                        \"borderWidth\": 2,\n                        \"display\": \"flex\",\n                        \"justifyContent\": \"center\",\n                        \"opacity\": 1,\n                        \"paddingBottom\": 2,\n                        \"paddingLeft\": 2,\n                        \"paddingRight\": 2,\n                        \"paddingTop\": 2,\n                      }\n                    }\n                    value=\"Email\"\n                  >\n                    <RNSVGSvgView\n                      accessibilityRole=\"image\"\n                      align=\"xMidYMid\"\n                      bbHeight={12}\n                      bbWidth={12}\n                      color={-328966}\n                      dataSet={Object {}}\n                      focusable={false}\n                      meetOrSlice={0}\n                      minX={0}\n                      minY={0}\n                      stroke=\"\"\n                      style={\n                        Array [\n                          Object {\n                            \"backgroundColor\": \"transparent\",\n                            \"borderWidth\": 0,\n                          },\n                          Object {\n                            \"color\": \"#fafafa\",\n                            \"height\": 12,\n                            \"width\": 12,\n                          },\n                          Object {\n                            \"flex\": 0,\n                            \"height\": 12,\n                            \"width\": 12,\n                          },\n                        ]\n                      }\n                      tintColor={-328966}\n                      vbHeight={24}\n                      vbWidth={24}\n                    >\n                      <RNSVGGroup\n                        propList={\n                          Array [\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      >\n                        <RNSVGGroup>\n                          <RNSVGPath\n                            d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                            fill={\n                              Array [\n                                2,\n                              ]\n                            }\n                            propList={\n                              Array [\n                                \"fill\",\n                                \"stroke\",\n                              ]\n                            }\n                            stroke={null}\n                          />\n                        </RNSVGGroup>\n                      </RNSVGGroup>\n                    </RNSVGSvgView>\n                  </View>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#000000\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 16,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 24,\n                      \"marginLeft\": 8,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Email\n                </Text>\n              </View>\n            </View>\n            <View\n              accessibilityRole=\"checkbox\"\n              accessibilityState={\n                Object {\n                  \"checked\": false,\n                  \"disabled\": false,\n                }\n              }\n              accessible={true}\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={Object {}}\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"flex-start\",\n                    \"marginBottom\": 4,\n                    \"marginTop\": 4,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={Object {}}\n                  />\n                  <View\n                    checked={false}\n                    colorScheme=\"green\"\n                    dataSet={Object {}}\n                    defaultIsChecked={false}\n                    disabled={false}\n                    feedbackId=\"field-69-feedback\"\n                    hasFeedbackText={false}\n                    hasHelpText={false}\n                    helpTextId=\"field-69-helptext\"\n                    isDisabled={false}\n                    isInvalid={true}\n                    isReadOnly={false}\n                    isRequired={false}\n                    labelId=\"field-69-label\"\n                    nativeID=\"field-69\"\n                    readOnly={false}\n                    required={false}\n                    setHasFeedbackText={[Function]}\n                    setHasHelpText={[Function]}\n                    state={\n                      Object {\n                        \"addValue\": [Function],\n                        \"isDisabled\": false,\n                        \"isReadOnly\": false,\n                        \"isSelected\": [Function],\n                        \"removeValue\": [Function],\n                        \"setValue\": [Function],\n                        \"toggleValue\": [Function],\n                        \"value\": Array [\n                          \"Phone\",\n                          \"Email\",\n                        ],\n                      }\n                    }\n                    style={\n                      Object {\n                        \"alignItems\": \"center\",\n                        \"backgroundColor\": \"#fafafa\",\n                        \"borderColor\": \"#dc2626\",\n                        \"borderRadius\": 4,\n                        \"borderWidth\": 2,\n                        \"display\": \"flex\",\n                        \"justifyContent\": \"center\",\n                        \"opacity\": 1,\n                        \"paddingBottom\": 2,\n                        \"paddingLeft\": 2,\n                        \"paddingRight\": 2,\n                        \"paddingTop\": 2,\n                      }\n                    }\n                    value=\"Message\"\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"color\": \"#fafafa\",\n                          \"height\": 12,\n                          \"width\": 12,\n                        }\n                      }\n                    />\n                  </View>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#000000\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 16,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 24,\n                      \"marginLeft\": 8,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Message\n                </Text>\n              </View>\n            </View>\n            <View\n              accessibilityRole=\"checkbox\"\n              accessibilityState={\n                Object {\n                  \"checked\": false,\n                  \"disabled\": false,\n                }\n              }\n              accessible={true}\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={Object {}}\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"flex-start\",\n                    \"marginBottom\": 4,\n                    \"marginTop\": 4,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={Object {}}\n                  />\n                  <View\n                    checked={false}\n                    colorScheme=\"green\"\n                    dataSet={Object {}}\n                    defaultIsChecked={false}\n                    disabled={false}\n                    feedbackId=\"field-69-feedback\"\n                    hasFeedbackText={false}\n                    hasHelpText={false}\n                    helpTextId=\"field-69-helptext\"\n                    isDisabled={false}\n                    isInvalid={true}\n                    isReadOnly={false}\n                    isRequired={false}\n                    labelId=\"field-69-label\"\n                    nativeID=\"field-69\"\n                    readOnly={false}\n                    required={false}\n                    setHasFeedbackText={[Function]}\n                    setHasHelpText={[Function]}\n                    state={\n                      Object {\n                        \"addValue\": [Function],\n                        \"isDisabled\": false,\n                        \"isReadOnly\": false,\n                        \"isSelected\": [Function],\n                        \"removeValue\": [Function],\n                        \"setValue\": [Function],\n                        \"toggleValue\": [Function],\n                        \"value\": Array [\n                          \"Phone\",\n                          \"Email\",\n                        ],\n                      }\n                    }\n                    style={\n                      Object {\n                        \"alignItems\": \"center\",\n                        \"backgroundColor\": \"#fafafa\",\n                        \"borderColor\": \"#dc2626\",\n                        \"borderRadius\": 4,\n                        \"borderWidth\": 2,\n                        \"display\": \"flex\",\n                        \"justifyContent\": \"center\",\n                        \"opacity\": 1,\n                        \"paddingBottom\": 2,\n                        \"paddingLeft\": 2,\n                        \"paddingRight\": 2,\n                        \"paddingTop\": 2,\n                      }\n                    }\n                    value=\"Fax\"\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"color\": \"#fafafa\",\n                          \"height\": 12,\n                          \"width\": 12,\n                        }\n                      }\n                    />\n                  </View>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#000000\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 16,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 24,\n                      \"marginLeft\": 8,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Fax\n                </Text>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            feedbackId=\"field-69-feedback\"\n            hasFeedbackText={false}\n            hasHelpText={false}\n            helpTextId=\"field-69-helptext\"\n            isDisabled={false}\n            isInvalid={true}\n            isReadOnly={false}\n            isRequired={false}\n            labelId=\"field-69-label\"\n            nativeID=\"field-69\"\n            setHasFeedbackText={[Function]}\n            setHasHelpText={[Function]}\n            style={\n              Object {\n                \"marginTop\": 8,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"flex-start\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={-2349530}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#dc2626\",\n                      \"fontSize\": 12,\n                      \"height\": 12,\n                      \"marginTop\": 4,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={-2349530}\n                vbHeight={16}\n                vbWidth={16}\n              >\n                <RNSVGGroup\n                  font={\n                    Object {\n                      \"fontSize\": 12,\n                    }\n                  }\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M8 16C6.41775 16 4.87103 15.5308 3.55544 14.6518C2.23985 13.7727 1.21447 12.5233 0.608967 11.0615C0.00346627 9.59966 -0.15496 7.99113 0.153721 6.43928C0.462403 4.88743 1.22433 3.46197 2.34315 2.34315C3.46197 1.22433 4.88743 0.462403 6.43928 0.153721C7.99113 -0.15496 9.59966 0.00346627 11.0615 0.608967C12.5233 1.21447 13.7727 2.23985 14.6518 3.55544C15.5308 4.87103 16 6.41775 16 8C16 10.1217 15.1571 12.1566 13.6569 13.6569C12.1566 15.1571 10.1217 16 8 16ZM8 14.4C9.2658 14.4 10.5032 14.0246 11.5556 13.3214C12.6081 12.6182 13.4284 11.6186 13.9128 10.4492C14.3972 9.27973 14.524 7.9929 14.277 6.75142C14.0301 5.50995 13.4205 4.36958 12.5255 3.47452C11.6304 2.57946 10.4901 1.96992 9.24858 1.72298C8.0071 1.47603 6.72028 1.60277 5.55083 2.08717C4.38138 2.57158 3.38184 3.39188 2.6786 4.44435C1.97536 5.49683 1.6 6.7342 1.6 8C1.6 9.69739 2.27429 11.3253 3.47452 12.5255C4.67475 13.7257 6.30262 14.4 8 14.4ZM7.2 10.4H8.8V12H7.2V10.4ZM7.2 4H8.8V8.8H7.2V4Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 4,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#dc2626\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 18,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                You must select at least three methods\n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Checkbox Invalid 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      accessibilityRole=\"checkbox\"\n      accessibilityState={\n        Object {\n          \"checked\": false,\n          \"disabled\": undefined,\n        }\n      }\n      accessible={true}\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={Object {}}\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"flex-start\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          />\n          <View\n            checked={false}\n            colorScheme=\"primary\"\n            dataSet={Object {}}\n            defaultIsChecked={false}\n            disabled={false}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#fafafa\",\n                \"borderColor\": \"#dc2626\",\n                \"borderRadius\": 4,\n                \"borderWidth\": 2,\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"opacity\": 1,\n                \"paddingBottom\": 2,\n                \"paddingLeft\": 2,\n                \"paddingRight\": 2,\n                \"paddingTop\": 2,\n              }\n            }\n            value=\"invalid\"\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"color\": \"#fafafa\",\n                  \"height\": 12,\n                  \"width\": 12,\n                }\n              }\n            />\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"width\": 8,\n            }\n          }\n        />\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#000000\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 16,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 24,\n              \"marginLeft\": 8,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Software Development\n        </Text>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Checkbox Playground 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"space-between\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"checkbox\"\n        accessibilityState={\n          Object {\n            \"checked\": true,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={Object {}}\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              checked={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              disabled={false}\n              isChecked={true}\n              isDisabled={false}\n              onChange={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#0891b2\",\n                  \"borderColor\": \"#0891b2\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"opacity\": 1,\n                  \"paddingBottom\": 2,\n                  \"paddingLeft\": 2,\n                  \"paddingRight\": 2,\n                  \"paddingTop\": 2,\n                }\n              }\n              value=\"Cool\"\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={16}\n                bbWidth={16}\n                color={-328966}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#fafafa\",\n                      \"height\": 16,\n                      \"width\": 16,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 16,\n                      \"width\": 16,\n                    },\n                  ]\n                }\n                tintColor={-328966}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#000000\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 18,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 27,\n                \"marginLeft\": 8,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Yes\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Checkbox Size 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      >\n        <View\n          accessibilityRole=\"checkbox\"\n          accessibilityState={\n            Object {\n              \"checked\": true,\n              \"disabled\": undefined,\n            }\n          }\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={Object {}}\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                checked={true}\n                colorScheme=\"primary\"\n                dataSet={Object {}}\n                defaultIsChecked={true}\n                disabled={false}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#0891b2\",\n                    \"borderColor\": \"#0891b2\",\n                    \"borderRadius\": 4,\n                    \"borderWidth\": 2,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": 2,\n                    \"paddingLeft\": 2,\n                    \"paddingRight\": 2,\n                    \"paddingTop\": 2,\n                  }\n                }\n                value=\"red\"\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={12}\n                  bbWidth={12}\n                  color={-328966}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#fafafa\",\n                        \"height\": 12,\n                        \"width\": 12,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 12,\n                        \"width\": 12,\n                      },\n                    ]\n                  }\n                  tintColor={-328966}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#000000\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 16,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 24,\n                  \"marginLeft\": 8,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              UX Research\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 12,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"checkbox\"\n          accessibilityState={\n            Object {\n              \"checked\": true,\n              \"disabled\": undefined,\n            }\n          }\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={Object {}}\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                checked={true}\n                colorScheme=\"primary\"\n                dataSet={Object {}}\n                defaultIsChecked={true}\n                disabled={false}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#0891b2\",\n                    \"borderColor\": \"#0891b2\",\n                    \"borderRadius\": 4,\n                    \"borderWidth\": 2,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": 2,\n                    \"paddingLeft\": 2,\n                    \"paddingRight\": 2,\n                    \"paddingTop\": 2,\n                  }\n                }\n                value=\"green\"\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={16}\n                  bbWidth={16}\n                  color={-328966}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#fafafa\",\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                    ]\n                  }\n                  tintColor={-328966}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#000000\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 18,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 27,\n                  \"marginLeft\": 8,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              UX Research\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 12,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"checkbox\"\n          accessibilityState={\n            Object {\n              \"checked\": true,\n              \"disabled\": undefined,\n            }\n          }\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={Object {}}\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                checked={true}\n                colorScheme=\"primary\"\n                dataSet={Object {}}\n                defaultIsChecked={true}\n                disabled={false}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#0891b2\",\n                    \"borderColor\": \"#0891b2\",\n                    \"borderRadius\": 4,\n                    \"borderWidth\": 2,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": 2,\n                    \"paddingLeft\": 2,\n                    \"paddingRight\": 2,\n                    \"paddingTop\": 2,\n                  }\n                }\n                value=\"yellow\"\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={20}\n                  bbWidth={20}\n                  color={-328966}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#fafafa\",\n                        \"height\": 20,\n                        \"width\": 20,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 20,\n                        \"width\": 20,\n                      },\n                    ]\n                  }\n                  tintColor={-328966}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#000000\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 20,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 30,\n                  \"marginLeft\": 8,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              UX Research\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Checkbox Uncontrolled checkbox 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      accessibilityLabel=\"choose values\"\n      accessibilityState={\n        Object {\n          \"disabled\": undefined,\n        }\n      }\n      aria-label=\"choose values\"\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"flex-start\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"checkbox\"\n        accessibilityState={\n          Object {\n            \"checked\": false,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={Object {}}\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"marginBottom\": 8,\n              \"marginTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              checked={false}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              disabled={false}\n              isDisabled={false}\n              isReadOnly={false}\n              readOnly={false}\n              state={\n                Object {\n                  \"addValue\": [Function],\n                  \"isDisabled\": false,\n                  \"isReadOnly\": false,\n                  \"isSelected\": [Function],\n                  \"removeValue\": [Function],\n                  \"setValue\": [Function],\n                  \"toggleValue\": [Function],\n                  \"value\": Array [],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#a3a3a3\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"opacity\": 1,\n                  \"paddingBottom\": 2,\n                  \"paddingLeft\": 2,\n                  \"paddingRight\": 2,\n                  \"paddingTop\": 2,\n                }\n              }\n              value=\"one\"\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"color\": \"#fafafa\",\n                    \"height\": 12,\n                    \"width\": 12,\n                  }\n                }\n              />\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#000000\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"marginLeft\": 8,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            UX Research\n          </Text>\n        </View>\n      </View>\n      <View\n        accessibilityRole=\"checkbox\"\n        accessibilityState={\n          Object {\n            \"checked\": false,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={Object {}}\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              checked={false}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              disabled={false}\n              isDisabled={false}\n              isReadOnly={false}\n              readOnly={false}\n              state={\n                Object {\n                  \"addValue\": [Function],\n                  \"isDisabled\": false,\n                  \"isReadOnly\": false,\n                  \"isSelected\": [Function],\n                  \"removeValue\": [Function],\n                  \"setValue\": [Function],\n                  \"toggleValue\": [Function],\n                  \"value\": Array [],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#a3a3a3\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"opacity\": 1,\n                  \"paddingBottom\": 2,\n                  \"paddingLeft\": 2,\n                  \"paddingRight\": 2,\n                  \"paddingTop\": 2,\n                }\n              }\n              value=\"two\"\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"color\": \"#fafafa\",\n                    \"height\": 12,\n                    \"width\": 12,\n                  }\n                }\n              />\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#000000\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"marginLeft\": 8,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Software Development\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Checkbox With Ref 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"flex-start\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"checkbox\"\n        accessibilityState={\n          Object {\n            \"checked\": false,\n            \"disabled\": undefined,\n          }\n        }\n        accessible={true}\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={Object {}}\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              checked={false}\n              colorScheme=\"success\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              disabled={false}\n              onChange={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#a3a3a3\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"opacity\": 1,\n                  \"paddingBottom\": 2,\n                  \"paddingLeft\": 2,\n                  \"paddingRight\": 2,\n                  \"paddingTop\": 2,\n                }\n              }\n              value=\"success\"\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"color\": \"#fafafa\",\n                    \"height\": 12,\n                    \"width\": 12,\n                  }\n                }\n              />\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#000000\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"marginLeft\": 8,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Archery\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Column Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": \"#22c55e\",\n            \"height\": 100,\n            \"width\": 100,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": \"#93c5fd\",\n            \"height\": 100,\n            \"width\": 100,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": \"tomato\",\n            \"height\": 100,\n            \"width\": 100,\n          }\n        }\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Container Playground 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      centerContent={true}\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"maxWidth\": \"80%\",\n        }\n      }\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 24,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 30,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Benefits to a joint design and development system\n      </Text>\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 14,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 21,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        There are many benefits to a joint design and development system. Not only does it bring benefits to the design team, but it also brings benefits to engineering teams. It makes sure that our experiences have a consistent look and feel, not just in our design specs, but in production\n      </Text>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Container Usage 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"flex-start\",\n            \"maxWidth\": \"80%\",\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 24,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 30,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          A component library for the\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#10b981\",\n                \"fontFamily\": undefined,\n                \"fontSize\": undefined,\n                \"fontStyle\": undefined,\n                \"fontWeight\": undefined,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n             React Ecosystem\n          </Text>\n        </Text>\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"500\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"marginTop\": 12,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          NativeBase is a simple, modular and accessible component library that gives you building blocks to build you React applications.\n        </Text>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Custom Theme Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n/>\n`;\n\nexports[`Storyshots Custom Theme CustomizingBase 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n/>\n`;\n\nexports[`Storyshots Custom Theme CustomizingComponents 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n/>\n`;\n\nexports[`Storyshots Custom Theme CustomizingTheme 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n/>\n`;\n\nexports[`Storyshots Custom Theme CustomizingVariant 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n/>\n`;\n\nexports[`Storyshots Divider Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 140,\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"flexDirection\": \"row\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 24,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 30,\n              \"marginLeft\": 12,\n              \"marginRight\": 12,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Chrome\n        </Text>\n        <View\n          aria-orientation=\"horizontal\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": \"#262626\",\n              \"height\": 1,\n              \"marginBottom\": 8,\n              \"marginTop\": 8,\n              \"width\": \"100%\",\n            }\n          }\n          thickness=\"1\"\n        />\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"flexDirection\": \"row\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 24,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 30,\n              \"marginLeft\": 12,\n              \"marginRight\": 12,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Firefox\n        </Text>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Divider Composition 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"display\": \"flex\",\n            \"flexDirection\": \"row\",\n            \"height\": 58,\n            \"paddingBottom\": 16,\n            \"paddingLeft\": 16,\n            \"paddingRight\": 16,\n            \"paddingTop\": 16,\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Simple\n        </Text>\n        <View\n          aria-orientation=\"vertical\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": \"#10b981\",\n              \"height\": \"100%\",\n              \"marginLeft\": 8,\n              \"marginRight\": 8,\n              \"width\": 2,\n            }\n          }\n          thickness=\"2\"\n        />\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Easy\n        </Text>\n        <View\n          aria-orientation=\"vertical\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": \"#6366f1\",\n              \"height\": \"100%\",\n              \"marginLeft\": 8,\n              \"marginRight\": 8,\n              \"width\": 2,\n            }\n          }\n          thickness=\"2\"\n        />\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Beautiful\n        </Text>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Divider Orientation 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 160,\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 24,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 30,\n              \"marginLeft\": \"auto\",\n              \"marginRight\": \"auto\",\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Shoes\n        </Text>\n        <View\n          aria-orientation=\"horizontal\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": \"#262626\",\n              \"height\": 1,\n              \"marginBottom\": 8,\n              \"marginTop\": 8,\n              \"width\": \"100%\",\n            }\n          }\n          thickness=\"1\"\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"display\": \"flex\",\n              \"flexDirection\": \"row\",\n              \"height\": 60,\n              \"justifyContent\": \"space-evenly\",\n              \"marginLeft\": 12,\n              \"marginRight\": 12,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 24,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 30,\n                \"paddingBottom\": 8,\n                \"paddingTop\": 8,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Girls\n          </Text>\n          <View\n            aria-orientation=\"vertical\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#262626\",\n                \"height\": \"100%\",\n                \"marginLeft\": 12,\n                \"marginRight\": 12,\n                \"width\": 1,\n              }\n            }\n            thickness=\"1\"\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 24,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 30,\n                \"paddingBottom\": 8,\n                \"paddingTop\": 8,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Boys\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Examples Signin Screen 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"maxWidth\": 290,\n            \"paddingBottom\": 32,\n            \"paddingLeft\": 8,\n            \"paddingRight\": 8,\n            \"paddingTop\": 32,\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#1f2937\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 24,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"600\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 30,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Welcome\n        </Text>\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#4b5563\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"500\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 17.5,\n              \"marginTop\": 4,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Sign in to continue!\n        </Text>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"marginTop\": 20,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              feedbackId=\"field-271-feedback\"\n              hasFeedbackText={false}\n              hasHelpText={false}\n              helpTextId=\"field-271-helptext\"\n              isDisabled={false}\n              isInvalid={false}\n              isReadOnly={false}\n              isRequired={false}\n              labelId=\"field-271-label\"\n              nativeID=\"field-271-label\"\n              setHasFeedbackText={[Function]}\n              setHasHelpText={[Function]}\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"flex-start\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#737373\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Email ID\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              isFocused={false}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <TextInput\n                accessible={true}\n                allowFontScaling={true}\n                dataSet={Object {}}\n                disabled={false}\n                editable={true}\n                isRequired={false}\n                nativeID=\"field-271-input\"\n                onBlur={[Function]}\n                onFocus={[Function]}\n                onKeyPress={[Function]}\n                placeholderTextColor=\"#a3a3a3\"\n                readOnly={false}\n                rejectResponderTermination={true}\n                required={false}\n                secureTextEntry={false}\n                style={\n                  Object {\n                    \"backgroundColor\": \"transparent\",\n                    \"color\": \"#171717\",\n                    \"flex\": 1,\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 12,\n                    \"paddingRight\": 12,\n                    \"paddingTop\": 8,\n                    \"width\": \"100%\",\n                  }\n                }\n                underlineColorAndroid=\"transparent\"\n              />\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              feedbackId=\"field-272-feedback\"\n              hasFeedbackText={false}\n              hasHelpText={false}\n              helpTextId=\"field-272-helptext\"\n              isDisabled={false}\n              isInvalid={false}\n              isReadOnly={false}\n              isRequired={false}\n              labelId=\"field-272-label\"\n              nativeID=\"field-272-label\"\n              setHasFeedbackText={[Function]}\n              setHasHelpText={[Function]}\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"flex-start\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#737373\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Password\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              isFocused={false}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <TextInput\n                accessible={true}\n                allowFontScaling={true}\n                dataSet={Object {}}\n                disabled={false}\n                editable={true}\n                isRequired={false}\n                nativeID=\"field-272-input\"\n                onBlur={[Function]}\n                onFocus={[Function]}\n                onKeyPress={[Function]}\n                placeholderTextColor=\"#a3a3a3\"\n                readOnly={false}\n                rejectResponderTermination={true}\n                required={false}\n                secureTextEntry={true}\n                style={\n                  Object {\n                    \"backgroundColor\": \"transparent\",\n                    \"color\": \"#171717\",\n                    \"flex\": 1,\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 12,\n                    \"paddingRight\": 12,\n                    \"paddingTop\": 8,\n                    \"width\": \"100%\",\n                  }\n                }\n                underlineColorAndroid=\"transparent\"\n              />\n            </View>\n            <View\n              accessibilityRole=\"link\"\n              accessible={true}\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignSelf\": \"flex-end\",\n                  \"flexDirection\": \"row\",\n                  \"height\": \"auto\",\n                  \"marginTop\": 4,\n                  \"width\": \"auto\",\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#6366f1\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 18,\n                    \"textDecorationLine\": \"underline\",\n                  }\n                }\n              >\n                Forget Password?\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"indigo\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#4f46e5\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginTop\": 8,\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#fafafa\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Sign in\n                </Text>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginTop\": 24,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#4b5563\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              I'm a new user.\n               \n            </Text>\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              accessibilityRole=\"link\"\n              accessible={true}\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                  \"height\": \"auto\",\n                  \"width\": \"auto\",\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#6366f1\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": \"underline\",\n                  }\n                }\n              >\n                Sign Up\n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Examples Signup Screen 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"maxWidth\": 290,\n            \"paddingBottom\": 32,\n            \"paddingLeft\": 8,\n            \"paddingRight\": 8,\n            \"paddingTop\": 32,\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#1f2937\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 24,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"600\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 30,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Welcome\n        </Text>\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#4b5563\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"500\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 17.5,\n              \"marginTop\": 4,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Sign up to continue!\n        </Text>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"marginTop\": 20,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              feedbackId=\"field-274-feedback\"\n              hasFeedbackText={false}\n              hasHelpText={false}\n              helpTextId=\"field-274-helptext\"\n              isDisabled={false}\n              isInvalid={false}\n              isReadOnly={false}\n              isRequired={false}\n              labelId=\"field-274-label\"\n              nativeID=\"field-274-label\"\n              setHasFeedbackText={[Function]}\n              setHasHelpText={[Function]}\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"flex-start\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#737373\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Email\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              isFocused={false}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <TextInput\n                accessible={true}\n                allowFontScaling={true}\n                dataSet={Object {}}\n                disabled={false}\n                editable={true}\n                isRequired={false}\n                nativeID=\"field-274-input\"\n                onBlur={[Function]}\n                onFocus={[Function]}\n                onKeyPress={[Function]}\n                placeholderTextColor=\"#a3a3a3\"\n                readOnly={false}\n                rejectResponderTermination={true}\n                required={false}\n                secureTextEntry={false}\n                style={\n                  Object {\n                    \"backgroundColor\": \"transparent\",\n                    \"color\": \"#171717\",\n                    \"flex\": 1,\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 12,\n                    \"paddingRight\": 12,\n                    \"paddingTop\": 8,\n                    \"width\": \"100%\",\n                  }\n                }\n                underlineColorAndroid=\"transparent\"\n              />\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              feedbackId=\"field-275-feedback\"\n              hasFeedbackText={false}\n              hasHelpText={false}\n              helpTextId=\"field-275-helptext\"\n              isDisabled={false}\n              isInvalid={false}\n              isReadOnly={false}\n              isRequired={false}\n              labelId=\"field-275-label\"\n              nativeID=\"field-275-label\"\n              setHasFeedbackText={[Function]}\n              setHasHelpText={[Function]}\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"flex-start\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#737373\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Password\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              isFocused={false}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <TextInput\n                accessible={true}\n                allowFontScaling={true}\n                dataSet={Object {}}\n                disabled={false}\n                editable={true}\n                isRequired={false}\n                nativeID=\"field-275-input\"\n                onBlur={[Function]}\n                onFocus={[Function]}\n                onKeyPress={[Function]}\n                placeholderTextColor=\"#a3a3a3\"\n                readOnly={false}\n                rejectResponderTermination={true}\n                required={false}\n                secureTextEntry={true}\n                style={\n                  Object {\n                    \"backgroundColor\": \"transparent\",\n                    \"color\": \"#171717\",\n                    \"flex\": 1,\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 12,\n                    \"paddingRight\": 12,\n                    \"paddingTop\": 8,\n                    \"width\": \"100%\",\n                  }\n                }\n                underlineColorAndroid=\"transparent\"\n              />\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              feedbackId=\"field-276-feedback\"\n              hasFeedbackText={false}\n              hasHelpText={false}\n              helpTextId=\"field-276-helptext\"\n              isDisabled={false}\n              isInvalid={false}\n              isReadOnly={false}\n              isRequired={false}\n              labelId=\"field-276-label\"\n              nativeID=\"field-276-label\"\n              setHasFeedbackText={[Function]}\n              setHasHelpText={[Function]}\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"flex-start\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#737373\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Confirm Password\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              isFocused={false}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <TextInput\n                accessible={true}\n                allowFontScaling={true}\n                dataSet={Object {}}\n                disabled={false}\n                editable={true}\n                isRequired={false}\n                nativeID=\"field-276-input\"\n                onBlur={[Function]}\n                onFocus={[Function]}\n                onKeyPress={[Function]}\n                placeholderTextColor=\"#a3a3a3\"\n                readOnly={false}\n                rejectResponderTermination={true}\n                required={false}\n                secureTextEntry={true}\n                style={\n                  Object {\n                    \"backgroundColor\": \"transparent\",\n                    \"color\": \"#171717\",\n                    \"flex\": 1,\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 12,\n                    \"paddingRight\": 12,\n                    \"paddingTop\": 8,\n                    \"width\": \"100%\",\n                  }\n                }\n                underlineColorAndroid=\"transparent\"\n              />\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"indigo\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#4f46e5\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginTop\": 8,\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#fafafa\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Sign up\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Examples Todo App 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"maxWidth\": 300,\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 20,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 25,\n              \"marginBottom\": 8,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Wednesday\n        </Text>\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              isFocused={false}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flex\": 1,\n                  \"flexDirection\": \"row\",\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <TextInput\n                accessible={true}\n                allowFontScaling={true}\n                dataSet={Object {}}\n                editable={true}\n                onBlur={[Function]}\n                onChangeText={[Function]}\n                onFocus={[Function]}\n                onKeyPress={[Function]}\n                placeholder=\"Add Task\"\n                placeholderTextColor=\"#a3a3a3\"\n                rejectResponderTermination={true}\n                secureTextEntry={false}\n                style={\n                  Object {\n                    \"backgroundColor\": \"transparent\",\n                    \"color\": \"#171717\",\n                    \"flex\": 1,\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 12,\n                    \"paddingRight\": 12,\n                    \"paddingTop\": 8,\n                    \"width\": \"100%\",\n                  }\n                }\n                underlineColorAndroid=\"transparent\"\n                value=\"\"\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#0891b2\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 10,\n                  \"paddingRight\": 10,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <Text\n                allowFontScaling={false}\n                dataSet={Object {}}\n                style={\n                  Array [\n                    Object {\n                      \"color\": undefined,\n                      \"fontSize\": 12,\n                    },\n                    Object {\n                      \"color\": \"#fafaf9\",\n                      \"fontSize\": 16,\n                      \"height\": 16,\n                      \"lineHeight\": 16,\n                      \"width\": 16,\n                    },\n                    Object {\n                      \"fontFamily\": \"feather\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"normal\",\n                    },\n                    Object {},\n                  ]\n                }\n              >\n                \n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"space-between\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                accessibilityRole=\"checkbox\"\n                accessibilityState={\n                  Object {\n                    \"checked\": true,\n                    \"disabled\": undefined,\n                  }\n                }\n                accessible={true}\n                dataSet={Object {}}\n                focusable={true}\n                onBlur={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onHoverIn={[Function]}\n                onHoverOut={[Function]}\n                onResponderGrant={[Function]}\n                onResponderMove={[Function]}\n                onResponderRelease={[Function]}\n                onResponderTerminate={[Function]}\n                onResponderTerminationRequest={[Function]}\n                onStartShouldSetResponder={[Function]}\n                style={Object {}}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                      \"justifyContent\": \"flex-start\",\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"alignItems\": \"center\",\n                        \"display\": \"flex\",\n                        \"justifyContent\": \"center\",\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={Object {}}\n                    />\n                    <View\n                      checked={true}\n                      colorScheme=\"primary\"\n                      dataSet={Object {}}\n                      defaultIsChecked={false}\n                      disabled={false}\n                      isChecked={true}\n                      onChange={[Function]}\n                      style={\n                        Object {\n                          \"alignItems\": \"center\",\n                          \"backgroundColor\": \"#0891b2\",\n                          \"borderColor\": \"#0891b2\",\n                          \"borderRadius\": 4,\n                          \"borderWidth\": 2,\n                          \"display\": \"flex\",\n                          \"justifyContent\": \"center\",\n                          \"opacity\": 1,\n                          \"paddingBottom\": 2,\n                          \"paddingLeft\": 2,\n                          \"paddingRight\": 2,\n                          \"paddingTop\": 2,\n                        }\n                      }\n                      value=\"Code\"\n                    >\n                      <RNSVGSvgView\n                        accessibilityRole=\"image\"\n                        align=\"xMidYMid\"\n                        bbHeight={12}\n                        bbWidth={12}\n                        color={-328966}\n                        dataSet={Object {}}\n                        focusable={false}\n                        meetOrSlice={0}\n                        minX={0}\n                        minY={0}\n                        stroke=\"\"\n                        style={\n                          Array [\n                            Object {\n                              \"backgroundColor\": \"transparent\",\n                              \"borderWidth\": 0,\n                            },\n                            Object {\n                              \"color\": \"#fafafa\",\n                              \"height\": 12,\n                              \"width\": 12,\n                            },\n                            Object {\n                              \"flex\": 0,\n                              \"height\": 12,\n                              \"width\": 12,\n                            },\n                          ]\n                        }\n                        tintColor={-328966}\n                        vbHeight={24}\n                        vbWidth={24}\n                      >\n                        <RNSVGGroup\n                          propList={\n                            Array [\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        >\n                          <RNSVGGroup>\n                            <RNSVGPath\n                              d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                              fill={\n                                Array [\n                                  2,\n                                ]\n                              }\n                              propList={\n                                Array [\n                                  \"fill\",\n                                  \"stroke\",\n                                ]\n                              }\n                              stroke={null}\n                            />\n                          </RNSVGGroup>\n                        </RNSVGGroup>\n                      </RNSVGSvgView>\n                    </View>\n                  </View>\n                </View>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <Text\n                dataSet={Object {}}\n                onPress={[Function]}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#a1a1aa\",\n                    \"flexShrink\": 1,\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"textAlign\": \"left\",\n                    \"textDecorationLine\": \"line-through\",\n                    \"width\": \"100%\",\n                  }\n                }\n              >\n                Code\n              </Text>\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                accessibilityRole=\"button\"\n                accessible={true}\n                colorScheme=\"trueGray\"\n                dataSet={Object {}}\n                focusable={true}\n                onBlur={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onHoverIn={[Function]}\n                onHoverOut={[Function]}\n                onResponderGrant={[Function]}\n                onResponderMove={[Function]}\n                onResponderRelease={[Function]}\n                onResponderTerminate={[Function]}\n                onResponderTerminationRequest={[Function]}\n                onStartShouldSetResponder={[Function]}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"borderRadius\": 4,\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"center\",\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 8,\n                    \"paddingRight\": 8,\n                    \"paddingTop\": 8,\n                  }\n                }\n              >\n                <Text\n                  allowFontScaling={false}\n                  dataSet={Object {}}\n                  style={\n                    Array [\n                      Object {\n                        \"color\": undefined,\n                        \"fontSize\": 12,\n                      },\n                      Object {\n                        \"color\": \"#a3a3a3\",\n                        \"fontSize\": 12,\n                        \"height\": 12,\n                        \"lineHeight\": 12,\n                        \"width\": 12,\n                      },\n                      Object {\n                        \"fontFamily\": \"entypo\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"normal\",\n                      },\n                      Object {},\n                    ]\n                  }\n                >\n                  \n                </Text>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 8,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"space-between\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                accessibilityRole=\"checkbox\"\n                accessibilityState={\n                  Object {\n                    \"checked\": false,\n                    \"disabled\": undefined,\n                  }\n                }\n                accessible={true}\n                dataSet={Object {}}\n                focusable={true}\n                onBlur={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onHoverIn={[Function]}\n                onHoverOut={[Function]}\n                onResponderGrant={[Function]}\n                onResponderMove={[Function]}\n                onResponderRelease={[Function]}\n                onResponderTerminate={[Function]}\n                onResponderTerminationRequest={[Function]}\n                onStartShouldSetResponder={[Function]}\n                style={Object {}}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                      \"justifyContent\": \"flex-start\",\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"alignItems\": \"center\",\n                        \"display\": \"flex\",\n                        \"justifyContent\": \"center\",\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={Object {}}\n                    />\n                    <View\n                      checked={false}\n                      colorScheme=\"primary\"\n                      dataSet={Object {}}\n                      defaultIsChecked={false}\n                      disabled={false}\n                      isChecked={false}\n                      onChange={[Function]}\n                      style={\n                        Object {\n                          \"alignItems\": \"center\",\n                          \"backgroundColor\": \"#fafafa\",\n                          \"borderColor\": \"#a3a3a3\",\n                          \"borderRadius\": 4,\n                          \"borderWidth\": 2,\n                          \"display\": \"flex\",\n                          \"justifyContent\": \"center\",\n                          \"opacity\": 1,\n                          \"paddingBottom\": 2,\n                          \"paddingLeft\": 2,\n                          \"paddingRight\": 2,\n                          \"paddingTop\": 2,\n                        }\n                      }\n                      value=\"Meeting with team at 9\"\n                    >\n                      <View\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"color\": \"#fafafa\",\n                            \"height\": 12,\n                            \"width\": 12,\n                          }\n                        }\n                      />\n                    </View>\n                  </View>\n                </View>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <Text\n                dataSet={Object {}}\n                onPress={[Function]}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#1f2937\",\n                    \"flexShrink\": 1,\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"textAlign\": \"left\",\n                    \"textDecorationLine\": undefined,\n                    \"width\": \"100%\",\n                  }\n                }\n              >\n                Meeting with team at 9\n              </Text>\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                accessibilityRole=\"button\"\n                accessible={true}\n                colorScheme=\"trueGray\"\n                dataSet={Object {}}\n                focusable={true}\n                onBlur={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onHoverIn={[Function]}\n                onHoverOut={[Function]}\n                onResponderGrant={[Function]}\n                onResponderMove={[Function]}\n                onResponderRelease={[Function]}\n                onResponderTerminate={[Function]}\n                onResponderTerminationRequest={[Function]}\n                onStartShouldSetResponder={[Function]}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"borderRadius\": 4,\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"center\",\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 8,\n                    \"paddingRight\": 8,\n                    \"paddingTop\": 8,\n                  }\n                }\n              >\n                <Text\n                  allowFontScaling={false}\n                  dataSet={Object {}}\n                  style={\n                    Array [\n                      Object {\n                        \"color\": undefined,\n                        \"fontSize\": 12,\n                      },\n                      Object {\n                        \"color\": \"#a3a3a3\",\n                        \"fontSize\": 12,\n                        \"height\": 12,\n                        \"lineHeight\": 12,\n                        \"width\": 12,\n                      },\n                      Object {\n                        \"fontFamily\": \"entypo\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"normal\",\n                      },\n                      Object {},\n                    ]\n                  }\n                >\n                  \n                </Text>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 8,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"space-between\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                accessibilityRole=\"checkbox\"\n                accessibilityState={\n                  Object {\n                    \"checked\": false,\n                    \"disabled\": undefined,\n                  }\n                }\n                accessible={true}\n                dataSet={Object {}}\n                focusable={true}\n                onBlur={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onHoverIn={[Function]}\n                onHoverOut={[Function]}\n                onResponderGrant={[Function]}\n                onResponderMove={[Function]}\n                onResponderRelease={[Function]}\n                onResponderTerminate={[Function]}\n                onResponderTerminationRequest={[Function]}\n                onStartShouldSetResponder={[Function]}\n                style={Object {}}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                      \"justifyContent\": \"flex-start\",\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"alignItems\": \"center\",\n                        \"display\": \"flex\",\n                        \"justifyContent\": \"center\",\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={Object {}}\n                    />\n                    <View\n                      checked={false}\n                      colorScheme=\"primary\"\n                      dataSet={Object {}}\n                      defaultIsChecked={false}\n                      disabled={false}\n                      isChecked={false}\n                      onChange={[Function]}\n                      style={\n                        Object {\n                          \"alignItems\": \"center\",\n                          \"backgroundColor\": \"#fafafa\",\n                          \"borderColor\": \"#a3a3a3\",\n                          \"borderRadius\": 4,\n                          \"borderWidth\": 2,\n                          \"display\": \"flex\",\n                          \"justifyContent\": \"center\",\n                          \"opacity\": 1,\n                          \"paddingBottom\": 2,\n                          \"paddingLeft\": 2,\n                          \"paddingRight\": 2,\n                          \"paddingTop\": 2,\n                        }\n                      }\n                      value=\"Check Emails\"\n                    >\n                      <View\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"color\": \"#fafafa\",\n                            \"height\": 12,\n                            \"width\": 12,\n                          }\n                        }\n                      />\n                    </View>\n                  </View>\n                </View>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <Text\n                dataSet={Object {}}\n                onPress={[Function]}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#1f2937\",\n                    \"flexShrink\": 1,\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"textAlign\": \"left\",\n                    \"textDecorationLine\": undefined,\n                    \"width\": \"100%\",\n                  }\n                }\n              >\n                Check Emails\n              </Text>\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                accessibilityRole=\"button\"\n                accessible={true}\n                colorScheme=\"trueGray\"\n                dataSet={Object {}}\n                focusable={true}\n                onBlur={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onHoverIn={[Function]}\n                onHoverOut={[Function]}\n                onResponderGrant={[Function]}\n                onResponderMove={[Function]}\n                onResponderRelease={[Function]}\n                onResponderTerminate={[Function]}\n                onResponderTerminationRequest={[Function]}\n                onStartShouldSetResponder={[Function]}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"borderRadius\": 4,\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"center\",\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 8,\n                    \"paddingRight\": 8,\n                    \"paddingTop\": 8,\n                  }\n                }\n              >\n                <Text\n                  allowFontScaling={false}\n                  dataSet={Object {}}\n                  style={\n                    Array [\n                      Object {\n                        \"color\": undefined,\n                        \"fontSize\": 12,\n                      },\n                      Object {\n                        \"color\": \"#a3a3a3\",\n                        \"fontSize\": 12,\n                        \"height\": 12,\n                        \"lineHeight\": 12,\n                        \"width\": 12,\n                      },\n                      Object {\n                        \"fontFamily\": \"entypo\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"normal\",\n                      },\n                      Object {},\n                    ]\n                  }\n                >\n                  \n                </Text>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 8,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"space-between\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                accessibilityRole=\"checkbox\"\n                accessibilityState={\n                  Object {\n                    \"checked\": false,\n                    \"disabled\": undefined,\n                  }\n                }\n                accessible={true}\n                dataSet={Object {}}\n                focusable={true}\n                onBlur={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onHoverIn={[Function]}\n                onHoverOut={[Function]}\n                onResponderGrant={[Function]}\n                onResponderMove={[Function]}\n                onResponderRelease={[Function]}\n                onResponderTerminate={[Function]}\n                onResponderTerminationRequest={[Function]}\n                onStartShouldSetResponder={[Function]}\n                style={Object {}}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                      \"justifyContent\": \"flex-start\",\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"alignItems\": \"center\",\n                        \"display\": \"flex\",\n                        \"justifyContent\": \"center\",\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={Object {}}\n                    />\n                    <View\n                      checked={false}\n                      colorScheme=\"primary\"\n                      dataSet={Object {}}\n                      defaultIsChecked={false}\n                      disabled={false}\n                      isChecked={false}\n                      onChange={[Function]}\n                      style={\n                        Object {\n                          \"alignItems\": \"center\",\n                          \"backgroundColor\": \"#fafafa\",\n                          \"borderColor\": \"#a3a3a3\",\n                          \"borderRadius\": 4,\n                          \"borderWidth\": 2,\n                          \"display\": \"flex\",\n                          \"justifyContent\": \"center\",\n                          \"opacity\": 1,\n                          \"paddingBottom\": 2,\n                          \"paddingLeft\": 2,\n                          \"paddingRight\": 2,\n                          \"paddingTop\": 2,\n                        }\n                      }\n                      value=\"Write an article\"\n                    >\n                      <View\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"color\": \"#fafafa\",\n                            \"height\": 12,\n                            \"width\": 12,\n                          }\n                        }\n                      />\n                    </View>\n                  </View>\n                </View>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <Text\n                dataSet={Object {}}\n                onPress={[Function]}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#1f2937\",\n                    \"flexShrink\": 1,\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"textAlign\": \"left\",\n                    \"textDecorationLine\": undefined,\n                    \"width\": \"100%\",\n                  }\n                }\n              >\n                Write an article\n              </Text>\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                accessibilityRole=\"button\"\n                accessible={true}\n                colorScheme=\"trueGray\"\n                dataSet={Object {}}\n                focusable={true}\n                onBlur={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onHoverIn={[Function]}\n                onHoverOut={[Function]}\n                onResponderGrant={[Function]}\n                onResponderMove={[Function]}\n                onResponderRelease={[Function]}\n                onResponderTerminate={[Function]}\n                onResponderTerminationRequest={[Function]}\n                onStartShouldSetResponder={[Function]}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"borderRadius\": 4,\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"center\",\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 8,\n                    \"paddingRight\": 8,\n                    \"paddingTop\": 8,\n                  }\n                }\n              >\n                <Text\n                  allowFontScaling={false}\n                  dataSet={Object {}}\n                  style={\n                    Array [\n                      Object {\n                        \"color\": undefined,\n                        \"fontSize\": 12,\n                      },\n                      Object {\n                        \"color\": \"#a3a3a3\",\n                        \"fontSize\": 12,\n                        \"height\": 12,\n                        \"lineHeight\": 12,\n                        \"width\": 12,\n                      },\n                      Object {\n                        \"fontFamily\": \"entypo\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"normal\",\n                      },\n                      Object {},\n                    ]\n                  }\n                >\n                  \n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Fab Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"height\": 100,\n          \"position\": \"relative\",\n          \"width\": \"100%\",\n        }\n      }\n    />\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Fab CustomPosition 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"height\": 200,\n          \"position\": \"relative\",\n          \"width\": \"100%\",\n        }\n      }\n    />\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Fab Placement 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"height\": 400,\n          \"width\": \"100%\",\n        }\n      }\n    />\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots FlatList Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 20,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 25,\n            \"paddingBottom\": 12,\n            \"paddingLeft\": 16,\n            \"paddingRight\": 16,\n            \"paddingTop\": 16,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Inbox\n      </Text>\n      <RCTScrollView\n        contentContainerStyle={\n          Array [\n            Object {},\n            Object {\n              \"dataSet\": Object {},\n            },\n            Object {},\n          ]\n        }\n        data={\n          Array [\n            Object {\n              \"avatarUrl\": \"https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500\",\n              \"fullName\": \"Aafreen Khan\",\n              \"id\": \"bd7acbea-c1b1-46c2-aed5-3ad53abb28ba\",\n              \"recentText\": \"Good Day!\",\n              \"timeStamp\": \"12:47 PM\",\n            },\n            Object {\n              \"avatarUrl\": \"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyEaZqT3fHeNrPGcnjLLX1v_W4mvBlgpwxnA&usqp=CAU\",\n              \"fullName\": \"Sujitha Mathur\",\n              \"id\": \"3ac68afc-c605-48d3-a4f8-fbd91aa97f63\",\n              \"recentText\": \"Cheer up, there!\",\n              \"timeStamp\": \"11:11 PM\",\n            },\n            Object {\n              \"avatarUrl\": \"https://miro.medium.com/max/1400/0*0fClPmIScV5pTLoE.jpg\",\n              \"fullName\": \"Anci Barroco\",\n              \"id\": \"58694a0f-3da1-471f-bd96-145571e29d72\",\n              \"recentText\": \"Good Day!\",\n              \"timeStamp\": \"6:22 PM\",\n            },\n            Object {\n              \"avatarUrl\": \"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSr01zI37DYuR8bMV5exWQBSw28C1v_71CAh8d7GP1mplcmTgQA6Q66Oo--QedAN1B4E1k&usqp=CAU\",\n              \"fullName\": \"Aniket Kumar\",\n              \"id\": \"68694a0f-3da1-431f-bd56-142371e29d72\",\n              \"recentText\": \"All the best\",\n              \"timeStamp\": \"8:56 PM\",\n            },\n            Object {\n              \"avatarUrl\": \"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBwgu1A5zgPSvfE83nurkuzNEoXs9DMNr8Ww&usqp=CAU\",\n              \"fullName\": \"Kiara\",\n              \"id\": \"28694a0f-3da1-471f-bd96-142456e29d72\",\n              \"recentText\": \"I will call today.\",\n              \"timeStamp\": \"12:47 PM\",\n            },\n          ]\n        }\n        dataSet={Object {}}\n        disableVirtualization={false}\n        getItem={[Function]}\n        getItemCount={[Function]}\n        horizontal={false}\n        initialNumToRender={10}\n        keyExtractor={[Function]}\n        maxToRenderPerBatch={10}\n        onContentSizeChange={[Function]}\n        onEndReachedThreshold={2}\n        onLayout={[Function]}\n        onMomentumScrollEnd={[Function]}\n        onScroll={[Function]}\n        onScrollBeginDrag={[Function]}\n        onScrollEndDrag={[Function]}\n        removeClippedSubviews={true}\n        renderItem={[Function]}\n        scrollEventThrottle={50}\n        stickyHeaderIndices={Array []}\n        style={Object {}}\n        updateCellsBatchingPeriod={50}\n        viewabilityConfigCallbackPairs={Array []}\n        windowSize={21}\n      >\n        <View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"borderBottomWidth\": 1,\n                  \"borderColor\": \"#262626\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 16,\n                  \"paddingRight\": 20,\n                  \"paddingTop\": 8,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"space-between\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"#a1a1aa\",\n                      \"borderColor\": \"#27272a\",\n                      \"borderRadius\": 9999,\n                      \"height\": 48,\n                      \"justifyContent\": \"center\",\n                      \"position\": \"relative\",\n                      \"width\": 48,\n                    }\n                  }\n                >\n                  <Image\n                    accessibilityLabel=\"--\"\n                    alt=\"--\"\n                    dataSet={Object {}}\n                    onError={[Function]}\n                    source={\n                      Object {\n                        \"uri\": \"https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500\",\n                      }\n                    }\n                    style={\n                      Array [\n                        Object {\n                          \"borderRadius\": 9999,\n                          \"maxWidth\": \"100%\",\n                        },\n                        Object {\n                          \"height\": \"100%\",\n                          \"width\": \"100%\",\n                        },\n                      ]\n                    }\n                  />\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 12,\n                    }\n                  }\n                />\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#1f2937\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"700\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Aafreen Khan\n                  </Text>\n                  <View\n                    dataSet={Object {}}\n                    style={Object {}}\n                  />\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#4b5563\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Good Day!\n                  </Text>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 12,\n                    }\n                  }\n                />\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"flexGrow\": 1,\n                    }\n                  }\n                />\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 12,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignSelf\": \"flex-start\",\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 12,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 18,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  12:47 PM\n                </Text>\n              </View>\n            </View>\n          </View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"borderBottomWidth\": 1,\n                  \"borderColor\": \"#262626\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 16,\n                  \"paddingRight\": 20,\n                  \"paddingTop\": 8,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"space-between\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"#a1a1aa\",\n                      \"borderColor\": \"#27272a\",\n                      \"borderRadius\": 9999,\n                      \"height\": 48,\n                      \"justifyContent\": \"center\",\n                      \"position\": \"relative\",\n                      \"width\": 48,\n                    }\n                  }\n                >\n                  <Image\n                    accessibilityLabel=\"--\"\n                    alt=\"--\"\n                    dataSet={Object {}}\n                    onError={[Function]}\n                    source={\n                      Object {\n                        \"uri\": \"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyEaZqT3fHeNrPGcnjLLX1v_W4mvBlgpwxnA&usqp=CAU\",\n                      }\n                    }\n                    style={\n                      Array [\n                        Object {\n                          \"borderRadius\": 9999,\n                          \"maxWidth\": \"100%\",\n                        },\n                        Object {\n                          \"height\": \"100%\",\n                          \"width\": \"100%\",\n                        },\n                      ]\n                    }\n                  />\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 12,\n                    }\n                  }\n                />\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#1f2937\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"700\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Sujitha Mathur\n                  </Text>\n                  <View\n                    dataSet={Object {}}\n                    style={Object {}}\n                  />\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#4b5563\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Cheer up, there!\n                  </Text>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 12,\n                    }\n                  }\n                />\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"flexGrow\": 1,\n                    }\n                  }\n                />\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 12,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignSelf\": \"flex-start\",\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 12,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 18,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  11:11 PM\n                </Text>\n              </View>\n            </View>\n          </View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"borderBottomWidth\": 1,\n                  \"borderColor\": \"#262626\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 16,\n                  \"paddingRight\": 20,\n                  \"paddingTop\": 8,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"space-between\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"#a1a1aa\",\n                      \"borderColor\": \"#27272a\",\n                      \"borderRadius\": 9999,\n                      \"height\": 48,\n                      \"justifyContent\": \"center\",\n                      \"position\": \"relative\",\n                      \"width\": 48,\n                    }\n                  }\n                >\n                  <Image\n                    accessibilityLabel=\"--\"\n                    alt=\"--\"\n                    dataSet={Object {}}\n                    onError={[Function]}\n                    source={\n                      Object {\n                        \"uri\": \"https://miro.medium.com/max/1400/0*0fClPmIScV5pTLoE.jpg\",\n                      }\n                    }\n                    style={\n                      Array [\n                        Object {\n                          \"borderRadius\": 9999,\n                          \"maxWidth\": \"100%\",\n                        },\n                        Object {\n                          \"height\": \"100%\",\n                          \"width\": \"100%\",\n                        },\n                      ]\n                    }\n                  />\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 12,\n                    }\n                  }\n                />\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#1f2937\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"700\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Anci Barroco\n                  </Text>\n                  <View\n                    dataSet={Object {}}\n                    style={Object {}}\n                  />\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#4b5563\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Good Day!\n                  </Text>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 12,\n                    }\n                  }\n                />\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"flexGrow\": 1,\n                    }\n                  }\n                />\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 12,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignSelf\": \"flex-start\",\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 12,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 18,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  6:22 PM\n                </Text>\n              </View>\n            </View>\n          </View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"borderBottomWidth\": 1,\n                  \"borderColor\": \"#262626\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 16,\n                  \"paddingRight\": 20,\n                  \"paddingTop\": 8,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"space-between\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"#a1a1aa\",\n                      \"borderColor\": \"#27272a\",\n                      \"borderRadius\": 9999,\n                      \"height\": 48,\n                      \"justifyContent\": \"center\",\n                      \"position\": \"relative\",\n                      \"width\": 48,\n                    }\n                  }\n                >\n                  <Image\n                    accessibilityLabel=\"--\"\n                    alt=\"--\"\n                    dataSet={Object {}}\n                    onError={[Function]}\n                    source={\n                      Object {\n                        \"uri\": \"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSr01zI37DYuR8bMV5exWQBSw28C1v_71CAh8d7GP1mplcmTgQA6Q66Oo--QedAN1B4E1k&usqp=CAU\",\n                      }\n                    }\n                    style={\n                      Array [\n                        Object {\n                          \"borderRadius\": 9999,\n                          \"maxWidth\": \"100%\",\n                        },\n                        Object {\n                          \"height\": \"100%\",\n                          \"width\": \"100%\",\n                        },\n                      ]\n                    }\n                  />\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 12,\n                    }\n                  }\n                />\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#1f2937\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"700\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Aniket Kumar\n                  </Text>\n                  <View\n                    dataSet={Object {}}\n                    style={Object {}}\n                  />\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#4b5563\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    All the best\n                  </Text>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 12,\n                    }\n                  }\n                />\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"flexGrow\": 1,\n                    }\n                  }\n                />\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 12,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignSelf\": \"flex-start\",\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 12,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 18,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  8:56 PM\n                </Text>\n              </View>\n            </View>\n          </View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"borderBottomWidth\": 1,\n                  \"borderColor\": \"#262626\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 16,\n                  \"paddingRight\": 20,\n                  \"paddingTop\": 8,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"space-between\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"#a1a1aa\",\n                      \"borderColor\": \"#27272a\",\n                      \"borderRadius\": 9999,\n                      \"height\": 48,\n                      \"justifyContent\": \"center\",\n                      \"position\": \"relative\",\n                      \"width\": 48,\n                    }\n                  }\n                >\n                  <Image\n                    accessibilityLabel=\"--\"\n                    alt=\"--\"\n                    dataSet={Object {}}\n                    onError={[Function]}\n                    source={\n                      Object {\n                        \"uri\": \"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBwgu1A5zgPSvfE83nurkuzNEoXs9DMNr8Ww&usqp=CAU\",\n                      }\n                    }\n                    style={\n                      Array [\n                        Object {\n                          \"borderRadius\": 9999,\n                          \"maxWidth\": \"100%\",\n                        },\n                        Object {\n                          \"height\": \"100%\",\n                          \"width\": \"100%\",\n                        },\n                      ]\n                    }\n                  />\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 12,\n                    }\n                  }\n                />\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#1f2937\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"700\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Kiara\n                  </Text>\n                  <View\n                    dataSet={Object {}}\n                    style={Object {}}\n                  />\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#4b5563\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    I will call today.\n                  </Text>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 12,\n                    }\n                  }\n                />\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"flexGrow\": 1,\n                    }\n                  }\n                />\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 12,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignSelf\": \"flex-start\",\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 12,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 18,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  12:47 PM\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n      </RCTScrollView>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Flex Basic Usage 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"flex\": 1,\n        }\n      }\n    >\n      <RCTScrollView\n        contentContainerStyle={\n          Array [\n            Object {},\n            Object {\n              \"dataSet\": Object {},\n            },\n            Object {},\n          ]\n        }\n        dataSet={Object {}}\n        style={Object {}}\n      >\n        <View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 20,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 25,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              row\n            </Text>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 10,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"display\": \"flex\",\n                  \"flexDirection\": \"row\",\n                  \"marginBottom\": 10,\n                  \"marginTop\": 6,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#cffafe\",\n                    \"display\": \"flex\",\n                    \"height\": 64,\n                    \"justifyContent\": \"center\",\n                    \"width\": 64,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  100\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#a5f3fc\",\n                    \"display\": \"flex\",\n                    \"height\": 64,\n                    \"justifyContent\": \"center\",\n                    \"width\": 64,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  200\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#67e8f9\",\n                    \"display\": \"flex\",\n                    \"height\": 64,\n                    \"justifyContent\": \"center\",\n                    \"width\": 64,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  300\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#22d3ee\",\n                    \"display\": \"flex\",\n                    \"height\": 64,\n                    \"justifyContent\": \"center\",\n                    \"width\": 64,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  400\n                </Text>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 10,\n                }\n              }\n            />\n            <View\n              aria-orientation=\"horizontal\"\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": \"#d4d4d4\",\n                  \"height\": 1,\n                  \"width\": \"100%\",\n                }\n              }\n              thickness=\"1\"\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 10,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 20,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 25,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              column\n            </Text>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 10,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"display\": \"flex\",\n                  \"flexDirection\": \"column\",\n                  \"marginBottom\": 10,\n                  \"marginTop\": 6,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#cffafe\",\n                    \"display\": \"flex\",\n                    \"height\": 64,\n                    \"justifyContent\": \"center\",\n                    \"width\": 64,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  100\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#a5f3fc\",\n                    \"display\": \"flex\",\n                    \"height\": 64,\n                    \"justifyContent\": \"center\",\n                    \"width\": 64,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  200\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#67e8f9\",\n                    \"display\": \"flex\",\n                    \"height\": 64,\n                    \"justifyContent\": \"center\",\n                    \"width\": 64,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  300\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#22d3ee\",\n                    \"display\": \"flex\",\n                    \"height\": 64,\n                    \"justifyContent\": \"center\",\n                    \"width\": 64,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  400\n                </Text>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 10,\n                }\n              }\n            />\n            <View\n              aria-orientation=\"horizontal\"\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": \"#d4d4d4\",\n                  \"height\": 1,\n                  \"width\": \"100%\",\n                }\n              }\n              thickness=\"1\"\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 10,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 20,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 25,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              row-reverse\n            </Text>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 10,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"display\": \"flex\",\n                  \"flexDirection\": \"row-reverse\",\n                  \"marginBottom\": 10,\n                  \"marginTop\": 6,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#cffafe\",\n                    \"display\": \"flex\",\n                    \"height\": 64,\n                    \"justifyContent\": \"center\",\n                    \"width\": 64,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  100\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#a5f3fc\",\n                    \"display\": \"flex\",\n                    \"height\": 64,\n                    \"justifyContent\": \"center\",\n                    \"width\": 64,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  200\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#67e8f9\",\n                    \"display\": \"flex\",\n                    \"height\": 64,\n                    \"justifyContent\": \"center\",\n                    \"width\": 64,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  300\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#22d3ee\",\n                    \"display\": \"flex\",\n                    \"height\": 64,\n                    \"justifyContent\": \"center\",\n                    \"width\": 64,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  400\n                </Text>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 10,\n                }\n              }\n            />\n            <View\n              aria-orientation=\"horizontal\"\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": \"#d4d4d4\",\n                  \"height\": 1,\n                  \"width\": \"100%\",\n                }\n              }\n              thickness=\"1\"\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 10,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 20,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 25,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              column-reverse\n            </Text>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 10,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"display\": \"flex\",\n                  \"flexDirection\": \"column-reverse\",\n                  \"marginBottom\": 10,\n                  \"marginTop\": 6,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#cffafe\",\n                    \"display\": \"flex\",\n                    \"height\": 64,\n                    \"justifyContent\": \"center\",\n                    \"width\": 64,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  100\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#a5f3fc\",\n                    \"display\": \"flex\",\n                    \"height\": 64,\n                    \"justifyContent\": \"center\",\n                    \"width\": 64,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  200\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#67e8f9\",\n                    \"display\": \"flex\",\n                    \"height\": 64,\n                    \"justifyContent\": \"center\",\n                    \"width\": 64,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  300\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#22d3ee\",\n                    \"display\": \"flex\",\n                    \"height\": 64,\n                    \"justifyContent\": \"center\",\n                    \"width\": 64,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  400\n                </Text>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 10,\n                }\n              }\n            />\n            <View\n              aria-orientation=\"horizontal\"\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": \"#d4d4d4\",\n                  \"height\": 1,\n                  \"width\": \"100%\",\n                }\n              }\n              thickness=\"1\"\n            />\n          </View>\n        </View>\n      </RCTScrollView>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Flex Spacer Example 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"flexDirection\": \"column\",\n          \"height\": 160,\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#06b6d4\",\n            \"borderRadius\": 4,\n            \"display\": \"flex\",\n            \"height\": 64,\n            \"justifyContent\": \"center\",\n            \"width\": 64,\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#fafaf9\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"500\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Box 1\n        </Text>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"flexGrow\": 1,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#ec4899\",\n            \"borderRadius\": 4,\n            \"display\": \"flex\",\n            \"height\": 64,\n            \"justifyContent\": \"center\",\n            \"width\": 64,\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#fafaf9\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"500\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Box 2\n        </Text>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots FormControl CustomStyle 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <RCTScrollView\n      contentContainerStyle={\n        Array [\n          Object {},\n          Object {\n            \"dataSet\": Object {},\n          },\n          Object {},\n        ]\n      }\n      dataSet={Object {}}\n      style={\n        Object {\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignSelf\": \"center\",\n              \"marginTop\": 16,\n              \"paddingLeft\": 16,\n              \"paddingRight\": 16,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 20,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 30,\n                  \"marginBottom\": 16,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Default\n            </Text>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"marginBottom\": 20,\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                feedbackId=\"field-87-feedback\"\n                hasFeedbackText={false}\n                hasHelpText={false}\n                helpTextId=\"field-87-helptext\"\n                isDisabled={false}\n                isInvalid={false}\n                isReadOnly={false}\n                isRequired={false}\n                labelId=\"field-87-label\"\n                nativeID=\"field-87-label\"\n                setHasFeedbackText={[Function]}\n                setHasHelpText={[Function]}\n                style={\n                  Object {\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"flex-start\",\n                    \"marginBottom\": 4,\n                    \"marginTop\": 4,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#737373\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"500\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Project Title\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                isFocused={false}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"borderColor\": \"#d4d4d4\",\n                    \"borderRadius\": 4,\n                    \"borderWidth\": 1,\n                    \"flexDirection\": \"row\",\n                    \"overflow\": \"hidden\",\n                  }\n                }\n              >\n                <TextInput\n                  accessible={true}\n                  allowFontScaling={true}\n                  dataSet={Object {}}\n                  disabled={false}\n                  editable={true}\n                  isRequired={false}\n                  nativeID=\"field-87-input\"\n                  onBlur={[Function]}\n                  onFocus={[Function]}\n                  onKeyPress={[Function]}\n                  placeholderTextColor=\"#a3a3a3\"\n                  readOnly={false}\n                  rejectResponderTermination={true}\n                  required={false}\n                  secureTextEntry={false}\n                  style={\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"color\": \"#171717\",\n                      \"flex\": 1,\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 12,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"height\": \"100%\",\n                      \"paddingBottom\": 8,\n                      \"paddingLeft\": 12,\n                      \"paddingRight\": 12,\n                      \"paddingTop\": 8,\n                      \"width\": \"100%\",\n                    }\n                  }\n                  underlineColorAndroid=\"transparent\"\n                />\n              </View>\n              <View\n                dataSet={Object {}}\n                feedbackId=\"field-87-feedback\"\n                hasFeedbackText={false}\n                hasHelpText={false}\n                helpTextId=\"field-87-helptext\"\n                isDisabled={false}\n                isInvalid={false}\n                isReadOnly={false}\n                isRequired={false}\n                labelId=\"field-87-label\"\n                nativeID=\"field-87-feedback\"\n                setHasFeedbackText={[Function]}\n                setHasHelpText={[Function]}\n                style={\n                  Object {\n                    \"marginTop\": 8,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#737373\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 12,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 18,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Give your project a title.\n                </Text>\n              </View>\n            </View>\n            <View\n              aria-orientation=\"horizontal\"\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": \"#d4d4d4\",\n                  \"height\": 1,\n                  \"width\": \"100%\",\n                }\n              }\n              thickness=\"1\"\n            />\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 20,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 30,\n                  \"marginBottom\": 16,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Disabled\n            </Text>\n            <View\n              dataSet={Object {}}\n              isDisabled={true}\n              style={\n                Object {\n                  \"marginBottom\": 20,\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                feedbackId=\"field-88-feedback\"\n                hasFeedbackText={false}\n                hasHelpText={false}\n                helpTextId=\"field-88-helptext\"\n                isDisabled={true}\n                isInvalid={false}\n                isReadOnly={false}\n                isRequired={false}\n                labelId=\"field-88-label\"\n                nativeID=\"field-88-label\"\n                setHasFeedbackText={[Function]}\n                setHasHelpText={[Function]}\n                style={\n                  Object {\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"flex-start\",\n                    \"marginBottom\": 4,\n                    \"marginTop\": 4,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#a1a1aa\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"700\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Project Title\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                isFocused={false}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"borderColor\": \"#d4d4d4\",\n                    \"borderRadius\": 4,\n                    \"borderWidth\": 1,\n                    \"flexDirection\": \"row\",\n                    \"opacity\": 0.4,\n                    \"overflow\": \"hidden\",\n                  }\n                }\n              >\n                <TextInput\n                  accessible={true}\n                  allowFontScaling={true}\n                  dataSet={Object {}}\n                  disabled={true}\n                  editable={false}\n                  isRequired={false}\n                  nativeID=\"field-88-input\"\n                  onBlur={[Function]}\n                  onFocus={[Function]}\n                  onKeyPress={[Function]}\n                  placeholder=\"Title\"\n                  placeholderTextColor=\"#a3a3a3\"\n                  readOnly={false}\n                  rejectResponderTermination={true}\n                  required={false}\n                  secureTextEntry={false}\n                  style={\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"color\": \"#171717\",\n                      \"flex\": 1,\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 12,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"height\": \"100%\",\n                      \"paddingBottom\": 8,\n                      \"paddingLeft\": 12,\n                      \"paddingRight\": 12,\n                      \"paddingTop\": 8,\n                      \"width\": \"100%\",\n                    }\n                  }\n                  underlineColorAndroid=\"transparent\"\n                />\n              </View>\n              <View\n                dataSet={Object {}}\n                feedbackId=\"field-88-feedback\"\n                hasFeedbackText={false}\n                hasHelpText={false}\n                helpTextId=\"field-88-helptext\"\n                isDisabled={true}\n                isInvalid={false}\n                isReadOnly={false}\n                isRequired={false}\n                labelId=\"field-88-label\"\n                nativeID=\"field-88-feedback\"\n                setHasFeedbackText={[Function]}\n                setHasHelpText={[Function]}\n                style={\n                  Object {\n                    \"marginTop\": 8,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#737373\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 12,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 18,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Give your project a title.\n                </Text>\n              </View>\n            </View>\n            <View\n              aria-orientation=\"horizontal\"\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": \"#d4d4d4\",\n                  \"height\": 1,\n                  \"width\": \"100%\",\n                }\n              }\n              thickness=\"1\"\n            />\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 20,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 30,\n                  \"marginBottom\": 16,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Invalid\n            </Text>\n            <View\n              dataSet={Object {}}\n              isInvalid={true}\n              style={\n                Object {\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                feedbackId=\"field-89-feedback\"\n                hasFeedbackText={false}\n                hasHelpText={false}\n                helpTextId=\"field-89-helptext\"\n                isDisabled={false}\n                isInvalid={true}\n                isReadOnly={false}\n                isRequired={false}\n                labelId=\"field-89-label\"\n                nativeID=\"field-89-label\"\n                setHasFeedbackText={[Function]}\n                setHasHelpText={[Function]}\n                style={\n                  Object {\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"flex-start\",\n                    \"marginBottom\": 4,\n                    \"marginTop\": 4,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#737373\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"500\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Project Title\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                isFocused={false}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"borderColor\": \"#d4d4d4\",\n                    \"borderRadius\": 4,\n                    \"borderWidth\": 1,\n                    \"flexDirection\": \"row\",\n                    \"overflow\": \"hidden\",\n                  }\n                }\n              >\n                <TextInput\n                  accessibilityInvalid={true}\n                  accessible={true}\n                  allowFontScaling={true}\n                  dataSet={Object {}}\n                  disabled={false}\n                  editable={true}\n                  isInvalid={true}\n                  isRequired={false}\n                  nativeID=\"field-89-input\"\n                  onBlur={[Function]}\n                  onFocus={[Function]}\n                  onKeyPress={[Function]}\n                  placeholder=\"Title\"\n                  placeholderTextColor=\"#a3a3a3\"\n                  readOnly={false}\n                  rejectResponderTermination={true}\n                  required={false}\n                  secureTextEntry={false}\n                  style={\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"color\": \"#171717\",\n                      \"flex\": 1,\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 12,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"height\": \"100%\",\n                      \"paddingBottom\": 8,\n                      \"paddingLeft\": 12,\n                      \"paddingRight\": 12,\n                      \"paddingTop\": 8,\n                      \"width\": \"100%\",\n                    }\n                  }\n                  underlineColorAndroid=\"transparent\"\n                />\n              </View>\n              <View\n                dataSet={Object {}}\n                feedbackId=\"field-89-feedback\"\n                hasFeedbackText={false}\n                hasHelpText={false}\n                helpTextId=\"field-89-helptext\"\n                isDisabled={false}\n                isInvalid={true}\n                isReadOnly={false}\n                isRequired={false}\n                labelId=\"field-89-label\"\n                nativeID=\"field-89\"\n                setHasFeedbackText={[Function]}\n                setHasHelpText={[Function]}\n                style={\n                  Object {\n                    \"marginTop\": 8,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                    }\n                  }\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={12}\n                    bbWidth={12}\n                    color={-2349530}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#dc2626\",\n                          \"fontSize\": 12,\n                          \"height\": 12,\n                          \"width\": 12,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 12,\n                          \"width\": 12,\n                        },\n                      ]\n                    }\n                    tintColor={-2349530}\n                    vbHeight={16}\n                    vbWidth={16}\n                  >\n                    <RNSVGGroup\n                      font={\n                        Object {\n                          \"fontSize\": 12,\n                        }\n                      }\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M8 16C6.41775 16 4.87103 15.5308 3.55544 14.6518C2.23985 13.7727 1.21447 12.5233 0.608967 11.0615C0.00346627 9.59966 -0.15496 7.99113 0.153721 6.43928C0.462403 4.88743 1.22433 3.46197 2.34315 2.34315C3.46197 1.22433 4.88743 0.462403 6.43928 0.153721C7.99113 -0.15496 9.59966 0.00346627 11.0615 0.608967C12.5233 1.21447 13.7727 2.23985 14.6518 3.55544C15.5308 4.87103 16 6.41775 16 8C16 10.1217 15.1571 12.1566 13.6569 13.6569C12.1566 15.1571 10.1217 16 8 16ZM8 14.4C9.2658 14.4 10.5032 14.0246 11.5556 13.3214C12.6081 12.6182 13.4284 11.6186 13.9128 10.4492C14.3972 9.27973 14.524 7.9929 14.277 6.75142C14.0301 5.50995 13.4205 4.36958 12.5255 3.47452C11.6304 2.57946 10.4901 1.96992 9.24858 1.72298C8.0071 1.47603 6.72028 1.60277 5.55083 2.08717C4.38138 2.57158 3.38184 3.39188 2.6786 4.44435C1.97536 5.49683 1.6 6.7342 1.6 8C1.6 9.69739 2.27429 11.3253 3.47452 12.5255C4.67475 13.7257 6.30262 14.4 8 14.4ZM7.2 10.4H8.8V12H7.2V10.4ZM7.2 4H8.8V8.8H7.2V4Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"width\": 4,\n                      }\n                    }\n                  />\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#dc2626\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 12,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 18,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Something is wrong.\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n        </View>\n      </View>\n    </RCTScrollView>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots FormControl Playground 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      isDisabled={false}\n      isInvalid={false}\n      isReadOnly={false}\n      isRequired={true}\n      style={\n        Object {\n          \"width\": \"70%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"marginLeft\": 16,\n            \"marginRight\": 16,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          feedbackId=\"field-83-feedback\"\n          hasFeedbackText={false}\n          hasHelpText={false}\n          helpTextId=\"field-83-helptext\"\n          isDisabled={false}\n          isInvalid={false}\n          isReadOnly={false}\n          isRequired={true}\n          labelId=\"field-83-label\"\n          nativeID=\"field-83-label\"\n          setHasFeedbackText={[Function]}\n          setHasHelpText={[Function]}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"marginBottom\": 4,\n              \"marginTop\": 4,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#737373\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Favorite framework\n          </Text>\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#dc2626\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            *\n          </Text>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        />\n        <View\n          dataSet={Object {}}\n          isFocused={false}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#d4d4d4\",\n              \"borderRadius\": 4,\n              \"borderWidth\": 1,\n              \"flexDirection\": \"row\",\n              \"overflow\": \"hidden\",\n            }\n          }\n        >\n          <TextInput\n            accessibilityRequired={true}\n            accessible={true}\n            allowFontScaling={true}\n            dataSet={Object {}}\n            disabled={false}\n            editable={true}\n            isRequired={true}\n            nativeID=\"field-83-input\"\n            onBlur={[Function]}\n            onFocus={[Function]}\n            onKeyPress={[Function]}\n            placeholder=\"Is it react?\"\n            placeholderTextColor=\"#a3a3a3\"\n            readOnly={false}\n            rejectResponderTermination={true}\n            required={true}\n            secureTextEntry={false}\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"color\": \"#171717\",\n                \"flex\": 1,\n                \"fontFamily\": undefined,\n                \"fontSize\": 12,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"height\": \"100%\",\n                \"paddingBottom\": 8,\n                \"paddingLeft\": 8,\n                \"paddingRight\": 8,\n                \"paddingTop\": 8,\n                \"width\": \"100%\",\n              }\n            }\n            underlineColorAndroid=\"transparent\"\n          />\n        </View>\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        />\n        <View\n          dataSet={Object {}}\n          feedbackId=\"field-83-feedback\"\n          hasFeedbackText={false}\n          hasHelpText={false}\n          helpTextId=\"field-83-helptext\"\n          isDisabled={false}\n          isInvalid={false}\n          isReadOnly={false}\n          isRequired={true}\n          labelId=\"field-83-label\"\n          nativeID=\"field-83-feedback\"\n          setHasFeedbackText={[Function]}\n          setHasHelpText={[Function]}\n          style={\n            Object {\n              \"marginTop\": 8,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#737373\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 12,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 18,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            We'll keep this between us.\n          </Text>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        />\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots FormControl Usage 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"maxWidth\": 300,\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          isRequired={true}\n          style={\n            Object {\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"marginLeft\": 16,\n                \"marginRight\": 16,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              feedbackId=\"field-85-feedback\"\n              hasFeedbackText={false}\n              hasHelpText={false}\n              helpTextId=\"field-85-helptext\"\n              isDisabled={false}\n              isInvalid={false}\n              isReadOnly={false}\n              isRequired={true}\n              labelId=\"field-85-label\"\n              nativeID=\"field-85-label\"\n              setHasFeedbackText={[Function]}\n              setHasHelpText={[Function]}\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"flex-start\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#737373\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Password\n              </Text>\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#dc2626\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                *\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              dataSet={Object {}}\n              isFocused={false}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <TextInput\n                accessibilityRequired={true}\n                accessible={true}\n                allowFontScaling={true}\n                dataSet={Object {}}\n                defaultValue=\"12345\"\n                disabled={false}\n                editable={true}\n                isRequired={true}\n                nativeID=\"field-85-input\"\n                onBlur={[Function]}\n                onFocus={[Function]}\n                onKeyPress={[Function]}\n                placeholder=\"password\"\n                placeholderTextColor=\"#a3a3a3\"\n                readOnly={false}\n                rejectResponderTermination={true}\n                required={true}\n                secureTextEntry={true}\n                style={\n                  Object {\n                    \"backgroundColor\": \"transparent\",\n                    \"color\": \"#171717\",\n                    \"flex\": 1,\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 12,\n                    \"paddingRight\": 12,\n                    \"paddingTop\": 8,\n                    \"width\": \"100%\",\n                  }\n                }\n                underlineColorAndroid=\"transparent\"\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              dataSet={Object {}}\n              feedbackId=\"field-85-feedback\"\n              hasFeedbackText={false}\n              hasHelpText={false}\n              helpTextId=\"field-85-helptext\"\n              isDisabled={false}\n              isInvalid={false}\n              isReadOnly={false}\n              isRequired={true}\n              labelId=\"field-85-label\"\n              nativeID=\"field-85-feedback\"\n              setHasFeedbackText={[Function]}\n              setHasHelpText={[Function]}\n              style={\n                Object {\n                  \"marginTop\": 8,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#737373\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 18,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Must be atleast 6 characters.\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots HStack Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#67e8f9\",\n            \"borderRadius\": 6,\n            \"display\": \"flex\",\n            \"elevation\": 4,\n            \"height\": 160,\n            \"justifyContent\": \"center\",\n            \"shadowColor\": \"#000000\",\n            \"shadowOffset\": Object {\n              \"height\": 2,\n              \"width\": 0,\n            },\n            \"shadowOpacity\": 0.23,\n            \"shadowRadius\": 2.62,\n            \"width\": 80,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 12,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#06b6d4\",\n            \"borderRadius\": 6,\n            \"display\": \"flex\",\n            \"elevation\": 4,\n            \"height\": 160,\n            \"justifyContent\": \"center\",\n            \"shadowColor\": \"#000000\",\n            \"shadowOffset\": Object {\n              \"height\": 2,\n              \"width\": 0,\n            },\n            \"shadowOpacity\": 0.23,\n            \"shadowRadius\": 2.62,\n            \"width\": 80,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 12,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0e7490\",\n            \"borderRadius\": 6,\n            \"display\": \"flex\",\n            \"elevation\": 4,\n            \"height\": 160,\n            \"justifyContent\": \"center\",\n            \"shadowColor\": \"#000000\",\n            \"shadowOffset\": Object {\n              \"height\": 2,\n              \"width\": 0,\n            },\n            \"shadowOpacity\": 0.23,\n            \"shadowRadius\": 2.62,\n            \"width\": 80,\n          }\n        }\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Heading Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <Text\n      dataSet={Object {}}\n      style={\n        Object {\n          \"backgroundColor\": undefined,\n          \"color\": \"#171717\",\n          \"fontFamily\": undefined,\n          \"fontSize\": 24,\n          \"fontStyle\": \"normal\",\n          \"fontWeight\": \"700\",\n          \"letterSpacing\": 0,\n          \"lineHeight\": 30,\n          \"textDecorationLine\": undefined,\n        }\n      }\n    >\n      I'm a Heading\n    </Text>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Heading Composition 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 30,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 37.5,\n            \"marginBottom\": 16,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Heading\n      </Text>\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 20,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 30,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Headings are used for rendering headlines. Heading composes Text so you can use all the style props.\n      </Text>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Heading OverridenStyle 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <Text\n      dataSet={Object {}}\n      style={\n        Object {\n          \"backgroundColor\": undefined,\n          \"color\": \"#171717\",\n          \"fontFamily\": undefined,\n          \"fontSize\": 50,\n          \"fontStyle\": \"normal\",\n          \"fontWeight\": \"700\",\n          \"letterSpacing\": 0,\n          \"lineHeight\": 62.5,\n          \"textDecorationLine\": undefined,\n        }\n      }\n    >\n      How are you?\n    </Text>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Heading Sizes 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 14,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 17.5,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        xs\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 4,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 16,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 20,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        sm\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 4,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 20,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 25,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        md\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 4,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 24,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 30,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        lg\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 4,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 30,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 37.5,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        xl\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 4,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 36,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 45,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        2xl\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 4,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 48,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 2.4000000000000004,\n            \"lineHeight\": 60,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        3xl\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 4,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 60,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 3,\n            \"lineHeight\": 75,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        4xl\n      </Text>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Heading Truncate 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <Text\n      dataSet={Object {}}\n      numberOfLines={1}\n      style={\n        Object {\n          \"backgroundColor\": undefined,\n          \"color\": \"#171717\",\n          \"fontFamily\": undefined,\n          \"fontSize\": 24,\n          \"fontStyle\": \"normal\",\n          \"fontWeight\": \"700\",\n          \"letterSpacing\": 0,\n          \"lineHeight\": 30,\n          \"textDecorationLine\": undefined,\n        }\n      }\n    >\n      NativeBase is a simple, modular and accessible component library that gives you building blocks to build you React applications.\n    </Text>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Hidden Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": \"#fdba74\",\n            \"paddingBottom\": 8,\n            \"paddingLeft\": 8,\n            \"paddingRight\": 8,\n            \"paddingTop\": 8,\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          This text will be always visible.\n        </Text>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Hidden HiddenFromAndToBreakpoints 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": \"#fdba74\",\n            \"paddingBottom\": 8,\n            \"paddingLeft\": 8,\n            \"paddingRight\": 8,\n            \"paddingTop\": 8,\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          This text will be always visible.\n        </Text>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Hidden HiddenOnColorModes 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"coolGray\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#4b5563\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#FFFFFF\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Change mode\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"display\": \"flex\",\n            \"justifyContent\": \"center\",\n            \"marginTop\": 20,\n          }\n        }\n      >\n        <Image\n          accessibilityLabel=\"image\"\n          alt=\"image\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://images.unsplash.com/photo-1561566482-5fa7e82d88b7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1471&q=80\",\n            }\n          }\n          style={\n            Object {\n              \"height\": 150,\n              \"maxWidth\": \"100%\",\n              \"width\": 150,\n            }\n          }\n        />\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Hidden HiddenOnPlatforms 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": \"#fdba74\",\n            \"paddingBottom\": 8,\n            \"paddingLeft\": 8,\n            \"paddingRight\": 8,\n            \"paddingTop\": 8,\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          This text will be visible on every platform.\n        </Text>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Hidden HiddenOnlyOnBreakPoints 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": \"#fdba74\",\n            \"paddingBottom\": 8,\n            \"paddingLeft\": 8,\n            \"paddingRight\": 8,\n            \"paddingTop\": 8,\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          This text will be visible on every screen size.\n        </Text>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Icon All Icons 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <RCTScrollView\n        contentContainerStyle={\n          Array [\n            Object {},\n            Object {\n              \"dataSet\": Object {},\n            },\n            Object {},\n          ]\n        }\n        data={\n          Array [\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"add\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"arrow-back\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"arrow-forward\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"arrow-up\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"arrow-down\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"check\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"check-circle\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"chevron-down\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"chevron-left\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"chevron-right\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"chevron-up\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"circle\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"close\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"small-close\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"menu\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"info\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"info-outline\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"minus\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"moon\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"question\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"question-outline\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"search\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"sun\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"warning-1\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"warning-2\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"warning-outline\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"three-dots\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"share\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"play\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"favourite\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"delete\",\n            },\n          ]\n        }\n        dataSet={Object {}}\n        disableVirtualization={false}\n        getItem={[Function]}\n        getItemCount={[Function]}\n        horizontal={false}\n        initialNumToRender={10}\n        keyExtractor={[Function]}\n        maxToRenderPerBatch={10}\n        onContentSizeChange={[Function]}\n        onEndReachedThreshold={2}\n        onLayout={[Function]}\n        onMomentumScrollEnd={[Function]}\n        onScroll={[Function]}\n        onScrollBeginDrag={[Function]}\n        onScrollEndDrag={[Function]}\n        removeClippedSubviews={true}\n        renderItem={[Function]}\n        scrollEventThrottle={50}\n        stickyHeaderIndices={Array []}\n        style={Object {}}\n        updateCellsBatchingPeriod={50}\n        viewabilityConfigCallbackPairs={Array []}\n        windowSize={21}\n      >\n        <View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={-9211021}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={-9211021}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M13.25 10.75V2H10.75V10.75H2V13.25H10.75V22H13.25V13.25H22V10.75H13.25Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  add\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={-9211021}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={-9211021}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGGroup\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        >\n                          <RNSVGPath\n                            d=\"M13.0666 3.76375L6.43395 10.3964L5.58039 11.25H6.7875H21.5V12.75H6.7875H5.58192L6.43363 13.6032L13.0557 20.2372L12 21.2929L2.70711 12L12.0012 2.70586L13.0666 3.76375Z\"\n                            propList={\n                              Array [\n                                \"stroke\",\n                              ]\n                            }\n                            stroke={\n                              Array [\n                                2,\n                              ]\n                            }\n                          />\n                        </RNSVGGroup>\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  arrow-back\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={-9211021}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={-9211021}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGGroup\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        >\n                          <RNSVGPath\n                            d=\"M10.9334 3.76375L17.5661 10.3964L18.4196 11.25H17.2125H2.5V12.75H17.2125H18.4181L17.5664 13.6032L10.9443 20.2372L12 21.2929L21.2929 12L11.9988 2.70586L10.9334 3.76375Z\"\n                            propList={\n                              Array [\n                                \"stroke\",\n                              ]\n                            }\n                            stroke={\n                              Array [\n                                2,\n                              ]\n                            }\n                          />\n                        </RNSVGGroup>\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  arrow-forward\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={-9211021}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={-9211021}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGGroup\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        >\n                          <RNSVGPath\n                            d=\"M20.2362 13.0666L13.6036 6.43395L12.75 5.58039V6.7875L12.75 21.5H11.25L11.25 6.7875V5.58192L10.3968 6.43363L3.76282 13.0557L2.70711 12L12 2.70711L21.2941 12.0012L20.2362 13.0666Z\"\n                            propList={\n                              Array [\n                                \"stroke\",\n                              ]\n                            }\n                            stroke={\n                              Array [\n                                2,\n                              ]\n                            }\n                          />\n                        </RNSVGGroup>\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  arrow-up\n                </Text>\n              </View>\n            </View>\n          </View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={-9211021}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={-9211021}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGGroup\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        >\n                          <RNSVGPath\n                            d=\"M3.76375 10.9334L10.3964 17.5661L11.25 18.4196V17.2125L11.25 2.5H12.75L12.75 17.2125V18.4181L13.6032 17.5664L20.2372 10.9443L21.2929 12L12 21.2929L2.70586 11.9988L3.76375 10.9334Z\"\n                            propList={\n                              Array [\n                                \"stroke\",\n                              ]\n                            }\n                            stroke={\n                              Array [\n                                2,\n                              ]\n                            }\n                          />\n                        </RNSVGGroup>\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  arrow-down\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={-9211021}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={-9211021}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  check\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={-9211021}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={-9211021}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  check-circle\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={-9211021}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={-9211021}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M20.2286 6L11.9973 14.3785L3.76862 6.00268L2 7.80293L12 18L22 7.80293L20.2286 6Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  chevron-down\n                </Text>\n              </View>\n            </View>\n          </View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={-9211021}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={-9211021}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M18 3.77141L9.62148 12.0027L17.9973 20.2314L16.1971 22L6 12L16.1971 2L18 3.77141Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  chevron-left\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={-9211021}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={-9211021}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M6 3.77141L14.3785 12.0027L6.00268 20.2314L7.80293 22L18 12L7.80293 2L6 3.77141Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  chevron-right\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={-9211021}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={-9211021}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M20.2286 18L11.9973 9.62148L3.76862 17.9973L2 16.1971L12 6L22 16.1971L20.2286 18Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  chevron-up\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={-9211021}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={-9211021}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  circle\n                </Text>\n              </View>\n            </View>\n          </View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={-9211021}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={-9211021}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  close\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={-9211021}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={-9211021}\n                    vbHeight={16}\n                    vbWidth={16}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M9.41 8l2.29-2.29c.19-.18.3-.43.3-.71a1.003 1.003 0 0 0-1.71-.71L8 6.59l-2.29-2.3a1.003 1.003 0 0 0-1.42 1.42L6.59 8 4.3 10.29c-.19.18-.3.43-.3.71a1.003 1.003 0 0 0 1.71.71L8 9.41l2.29 2.29c.18.19.43.3.71.3a1.003 1.003 0 0 0 .71-1.71L9.41 8z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          fillRule={0}\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"fillRule\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  small-close\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={-9211021}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={-9211021}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M22 5H2V7.47961H22V5ZM22 10.4795H2V12.9591H22V10.4795ZM2 15.959H22V18.4386H2V15.959Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  menu\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={-9211021}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={-9211021}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M12 0C9.62663 0 7.30655 0.703788 5.33316 2.02236C3.35977 3.34094 1.8217 5.21509 0.913451 7.4078C0.00519948 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6689 1.83649 18.807 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0865C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6935 24 14.3734 24 12C23.9966 8.81846 22.7312 5.76821 20.4815 3.51852C18.2318 1.26883 15.1815 0.00344108 12 0ZM12.25 5C12.5467 5 12.8367 5.08797 13.0834 5.25279C13.33 5.41762 13.5223 5.65189 13.6358 5.92597C13.7494 6.20006 13.7791 6.50166 13.7212 6.79263C13.6633 7.08361 13.5204 7.35088 13.3107 7.56066C13.1009 7.77044 12.8336 7.9133 12.5426 7.97118C12.2517 8.02905 11.9501 7.99935 11.676 7.88582C11.4019 7.77229 11.1676 7.58003 11.0028 7.33335C10.838 7.08668 10.75 6.79667 10.75 6.5C10.75 6.10217 10.908 5.72064 11.1893 5.43934C11.4706 5.15803 11.8522 5 12.25 5ZM14.5 18.5H10.5C10.2348 18.5 9.98043 18.3946 9.7929 18.2071C9.60536 18.0196 9.5 17.7652 9.5 17.5C9.5 17.2348 9.60536 16.9804 9.7929 16.7929C9.98043 16.6054 10.2348 16.5 10.5 16.5H11.25C11.3163 16.5 11.3799 16.4737 11.4268 16.4268C11.4737 16.3799 11.5 16.3163 11.5 16.25V11.75C11.5 11.6837 11.4737 11.6201 11.4268 11.5732C11.3799 11.5263 11.3163 11.5 11.25 11.5H10.5C10.2348 11.5 9.98043 11.3946 9.7929 11.2071C9.60536 11.0196 9.5 10.7652 9.5 10.5C9.5 10.2348 9.60536 9.98043 9.7929 9.79289C9.98043 9.60536 10.2348 9.5 10.5 9.5H11.5C12.0304 9.5 12.5391 9.71071 12.9142 10.0858C13.2893 10.4609 13.5 10.9696 13.5 11.5V16.25C13.5 16.3163 13.5263 16.3799 13.5732 16.4268C13.6201 16.4737 13.6837 16.5 13.75 16.5H14.5C14.7652 16.5 15.0196 16.6054 15.2071 16.7929C15.3946 16.9804 15.5 17.2348 15.5 17.5C15.5 17.7652 15.3946 18.0196 15.2071 18.2071C15.0196 18.3946 14.7652 18.5 14.5 18.5Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  info\n                </Text>\n              </View>\n            </View>\n          </View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={-9211021}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={-9211021}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGGroup\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        >\n                          <RNSVGPath\n                            d=\"M11.9442 8.24C12.5628 8.24 13.0642 7.73856 13.0642 7.12C13.0642 6.50144 12.5628 6 11.9442 6C11.3257 6 10.8242 6.50144 10.8242 7.12C10.8242 7.73856 11.3257 8.24 11.9442 8.24Z\"\n                          />\n                          <RNSVGPath\n                            d=\"M14.4008 15.9996H12.8008V9.59961H10.4008C10.1886 9.59961 9.98513 9.68389 9.8351 9.83392C9.68507 9.98395 9.60078 10.1874 9.60078 10.3996C9.60078 10.6118 9.68507 10.8153 9.8351 10.9653C9.98513 11.1153 10.1886 11.1996 10.4008 11.1996H11.2008V15.9996H9.60078C9.38861 15.9996 9.18513 16.0839 9.0351 16.2339C8.88507 16.384 8.80078 16.5874 8.80078 16.7996C8.80078 17.0118 8.88507 17.2153 9.0351 17.3653C9.18513 17.5153 9.38861 17.5996 9.60078 17.5996H14.4008C14.613 17.5996 14.8164 17.5153 14.9665 17.3653C15.1165 17.2153 15.2008 17.0118 15.2008 16.7996C15.2008 16.5874 15.1165 16.384 14.9665 16.2339C14.8164 16.0839 14.613 15.9996 14.4008 15.9996Z\"\n                          />\n                          <RNSVGPath\n                            d=\"M12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17316C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8078C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 9.34783 20.9464 6.80429 19.0711 4.92893C17.1957 3.05357 14.6522 2 12 2ZM12 20.3333C10.3518 20.3333 8.74066 19.8446 7.37025 18.9289C5.99984 18.0132 4.93174 16.7117 4.30101 15.189C3.67028 13.6663 3.50525 11.9908 3.82679 10.3742C4.14834 8.75774 4.94201 7.27288 6.10745 6.10744C7.27288 4.942 8.75774 4.14833 10.3743 3.82679C11.9908 3.50525 13.6663 3.67027 15.189 4.301C16.7117 4.93173 18.0132 5.99984 18.9289 7.37025C19.8446 8.74066 20.3333 10.3518 20.3333 12C20.3333 13.0943 20.1178 14.178 19.699 15.189C19.2802 16.2001 18.6664 17.1187 17.8926 17.8926C17.1187 18.6664 16.2001 19.2802 15.189 19.699C14.178 20.1178 13.0944 20.3333 12 20.3333Z\"\n                          />\n                        </RNSVGGroup>\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  info-outline\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={-9211021}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={-9211021}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M22 10.5H2V13H22V10.5Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  minus\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={-9211021}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={-9211021}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  moon\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={-9211021}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={-9211021}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M12 0C9.62663 0 7.30655 0.703787 5.33316 2.02236C3.35977 3.34094 1.8217 5.21508 0.913451 7.4078C0.00519943 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6688 1.83649 18.807 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0865C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6934 24 14.3734 24 12C23.9966 8.81846 22.7312 5.76821 20.4815 3.51852C18.2318 1.26883 15.1815 0.00344108 12 0V0ZM12 19C11.7033 19 11.4133 18.912 11.1666 18.7472C10.92 18.5824 10.7277 18.3481 10.6142 18.074C10.5007 17.7999 10.4709 17.4983 10.5288 17.2074C10.5867 16.9164 10.7296 16.6491 10.9393 16.4393C11.1491 16.2296 11.4164 16.0867 11.7074 16.0288C11.9983 15.9709 12.2999 16.0006 12.574 16.1142C12.8481 16.2277 13.0824 16.42 13.2472 16.6666C13.412 16.9133 13.5 17.2033 13.5 17.5C13.5 17.8978 13.342 18.2794 13.0607 18.5607C12.7794 18.842 12.3978 19 12 19ZM13.6 12.92C13.4216 12.9979 13.2698 13.1261 13.1632 13.289C13.0566 13.4519 12.9999 13.6423 13 13.837C13 14.1022 12.8946 14.3566 12.7071 14.5441C12.5196 14.7316 12.2652 14.837 12 14.837C11.7348 14.837 11.4804 14.7316 11.2929 14.5441C11.1054 14.3566 11 14.1022 11 13.837C10.9999 13.2532 11.1702 12.682 11.4899 12.1936C11.8096 11.7051 12.2649 11.3205 12.8 11.087C13.1305 10.9427 13.4159 10.7118 13.6259 10.4186C13.8359 10.1255 13.9627 9.78099 13.993 9.42163C14.0232 9.06228 13.9557 8.70144 13.7976 8.37731C13.6396 8.05317 13.3968 7.77781 13.095 7.58037C12.7932 7.38292 12.4437 7.27074 12.0834 7.25571C11.7231 7.24067 11.3654 7.32333 11.0482 7.49495C10.7311 7.66656 10.4662 7.92074 10.2817 8.23057C10.0971 8.54041 9.99982 8.89437 10 9.255C10 9.52021 9.89465 9.77457 9.70711 9.9621C9.51957 10.1496 9.26522 10.255 9 10.255C8.73479 10.255 8.48043 10.1496 8.2929 9.9621C8.10536 9.77457 8 9.52021 8 9.255C7.99999 8.53384 8.19495 7.82608 8.56423 7.20665C8.93352 6.58721 9.4634 6.07913 10.0978 5.73618C10.7322 5.39324 11.4475 5.22817 12.168 5.25847C12.8886 5.28876 13.5875 5.51329 14.1909 5.90828C14.7942 6.30327 15.2796 6.85404 15.5956 7.50229C15.9116 8.15054 16.0464 8.87216 15.9859 9.59077C15.9253 10.3094 15.6716 10.9983 15.2516 11.5845C14.8316 12.1707 14.261 12.6325 13.6 12.921V12.92Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  question\n                </Text>\n              </View>\n            </View>\n          </View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={-9211021}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={-9211021}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGGroup\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        >\n                          <RNSVGPath\n                            d=\"M12 20.75C9.67936 20.75 7.45376 19.8281 5.81282 18.1872C4.17187 16.5462 3.25 14.3206 3.25 12C3.25 9.67936 4.17187 7.45376 5.81282 5.81282C7.45376 4.17187 9.67936 3.25 12 3.25C14.3206 3.25 16.5462 4.17187 18.1872 5.81282C19.8281 7.45376 20.75 9.67936 20.75 12C20.75 14.3206 19.8281 16.5462 18.1872 18.1872C16.5462 19.8281 14.3206 20.75 12 20.75ZM12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 9.34784 20.9464 6.8043 19.0711 4.92893C17.1957 3.05357 14.6522 2 12 2C9.34784 2 6.8043 3.05357 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C6.8043 20.9464 9.34784 22 12 22Z\"\n                          />\n                          <RNSVGPath\n                            d=\"M8.70533 9.34281C8.70369 9.38156 8.70999 9.42024 8.72385 9.45647C8.73771 9.4927 8.75883 9.52571 8.78592 9.55347C8.81301 9.58123 8.84549 9.60316 8.88136 9.6179C8.91724 9.63265 8.95575 9.6399 8.99453 9.63921H9.98453C10.1501 9.63921 10.2821 9.50361 10.3037 9.33921C10.4117 8.55201 10.9517 7.97841 11.9141 7.97841C12.7373 7.97841 13.4909 8.39001 13.4909 9.38001C13.4909 10.142 13.0421 10.4924 12.3329 11.0252C11.5253 11.612 10.8857 12.2972 10.9313 13.4096L10.9349 13.67C10.9362 13.7487 10.9684 13.8238 11.0245 13.879C11.0806 13.9343 11.1562 13.9652 11.2349 13.9652H12.2081C12.2877 13.9652 12.364 13.9336 12.4203 13.8773C12.4765 13.8211 12.5081 13.7448 12.5081 13.6652V13.5392C12.5081 12.6776 12.8357 12.4268 13.7201 11.756C14.4509 11.2004 15.2129 10.5836 15.2129 9.28881C15.2129 7.47561 13.6817 6.59961 12.0053 6.59961C10.4849 6.59961 8.81933 7.30761 8.70533 9.34281ZM10.5737 16.2584C10.5737 16.898 11.0837 17.3708 11.7857 17.3708C12.5165 17.3708 13.0193 16.898 13.0193 16.2584C13.0193 15.596 12.5153 15.1304 11.7845 15.1304C11.0837 15.1304 10.5737 15.596 10.5737 16.2584Z\"\n                          />\n                        </RNSVGGroup>\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  question-outline\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={-9211021}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={-9211021}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M21.9399 20.5624L15.4474 14.0699C16.4549 12.7675 16.9999 11.175 16.9999 9.49997C16.9999 7.49498 16.2174 5.61498 14.8024 4.19749C13.3874 2.78 11.5025 2 9.49997 2C7.49748 2 5.61248 2.7825 4.19749 4.19749C2.78 5.61248 2 7.49498 2 9.49997C2 11.5025 2.7825 13.3874 4.19749 14.8024C5.61248 16.2199 7.49498 16.9999 9.49997 16.9999C11.175 16.9999 12.765 16.4549 14.0674 15.4499L20.5599 21.9399C20.579 21.959 20.6016 21.9741 20.6264 21.9844C20.6513 21.9947 20.678 22 20.7049 22C20.7318 22 20.7585 21.9947 20.7834 21.9844C20.8083 21.9741 20.8309 21.959 20.8499 21.9399L21.9399 20.8524C21.959 20.8334 21.9741 20.8108 21.9844 20.7859C21.9947 20.761 22 20.7343 22 20.7074C22 20.6805 21.9947 20.6538 21.9844 20.6289C21.9741 20.6041 21.959 20.5815 21.9399 20.5624ZM13.46 13.46C12.4 14.5174 10.995 15.0999 9.49997 15.0999C8.00497 15.0999 6.59998 14.5174 5.53998 13.46C4.48249 12.4 3.89999 10.995 3.89999 9.49997C3.89999 8.00497 4.48249 6.59748 5.53998 5.53998C6.59998 4.48249 8.00497 3.89999 9.49997 3.89999C10.995 3.89999 12.4025 4.47999 13.46 5.53998C14.5174 6.59998 15.0999 8.00497 15.0999 9.49997C15.0999 10.995 14.5174 12.4025 13.46 13.46Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  search\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={-9211021}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={-9211021}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGGroup\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        >\n                          <RNSVGPath\n                            d=\"M11.9996 7.21094C9.36096 7.21094 7.22266 9.34924 7.22266 11.9879C7.22266 14.6265 9.36096 16.7648 11.9996 16.7648C14.6382 16.7648 16.7765 14.6265 16.7765 11.9879C16.7765 9.34924 14.6382 7.21094 11.9996 7.21094ZM11.9996 14.7715C10.462 14.7715 9.21437 13.5255 9.21437 11.9863C9.21437 10.4487 10.462 9.20265 11.9996 9.20265C13.5356 9.20265 14.7832 10.4487 14.7832 11.9863C14.7832 13.5255 13.5356 14.7715 11.9996 14.7715Z\"\n                          />\n                          <RNSVGPath\n                            d=\"M13.1236 2.46526C13.1236 2.20873 12.9149 2 12.6599 2H11.3422C11.0857 2 10.877 2.20873 10.877 2.46526V5.48789C10.877 5.74283 11.0857 5.95315 11.3422 5.95315H12.6599C12.9149 5.95315 13.1236 5.74283 13.1236 5.48789V2.46526Z\"\n                          />\n                          <RNSVGPath\n                            d=\"M6.05371 4.46121C5.87206 4.28116 5.5757 4.28116 5.39565 4.46121L4.46512 5.39174C4.28507 5.57338 4.28507 5.86975 4.46512 6.0498L6.60183 8.18651C6.78347 8.36816 7.07984 8.36816 7.25989 8.18651L8.19042 7.25598C8.37206 7.07434 8.37206 6.77797 8.19042 6.59792L6.05371 4.46121Z\"\n                          />\n                          <RNSVGPath\n                            d=\"M2.46526 10.875C2.342 10.8754 2.2239 10.9246 2.13674 11.0117C2.04957 11.0989 2.00042 11.217 2 11.3403V12.658C2 12.9145 2.21033 13.1232 2.46686 13.1232H5.48789C5.74442 13.1232 5.95475 12.9145 5.95475 12.658V11.3419C5.95475 11.0869 5.74602 10.8766 5.48948 10.8766H2.46526V10.875Z\"\n                          />\n                          <RNSVGPath\n                            d=\"M4.46316 17.9472C4.28311 18.1288 4.28311 18.4252 4.46316 18.6052L5.39369 19.5358C5.57374 19.7158 5.87011 19.7158 6.05175 19.5358L8.18847 17.3975C8.37011 17.2158 8.37011 16.9194 8.18847 16.7394L7.25794 15.8089C7.07629 15.6288 6.77993 15.6288 6.59987 15.8089L4.46316 17.9472Z\"\n                          />\n                          <RNSVGPath\n                            d=\"M10.877 21.5344C10.877 21.7909 11.0857 21.9997 11.3438 21.9997H12.6599C12.9149 21.9997 13.1236 21.7893 13.1236 21.5344V18.5102C13.1236 18.2552 12.9149 18.0449 12.6583 18.0449L11.3422 18.0465C11.0857 18.0465 10.877 18.2552 10.877 18.5118V21.5344Z\"\n                          />\n                          <RNSVGPath\n                            d=\"M17.9484 19.5342C18.13 19.7142 18.4264 19.7142 18.6064 19.5342L19.537 18.6036C19.6242 18.5164 19.6732 18.398 19.6732 18.2746C19.6732 18.1512 19.6242 18.0329 19.537 17.9456L17.3987 15.8089C17.2186 15.6288 16.9222 15.6288 16.7406 15.8089L15.8101 16.7394C15.6284 16.921 15.6284 17.2174 15.8101 17.3975L17.9484 19.5342Z\"\n                          />\n                          <RNSVGPath\n                            d=\"M21.5348 13.1236C21.658 13.1232 21.7761 13.074 21.8633 12.9869C21.9505 12.8997 21.9996 12.7816 22 12.6583V11.3422C21.9996 11.219 21.9505 11.1009 21.8633 11.0137C21.7761 10.9265 21.658 10.8774 21.5348 10.877H18.5121C18.3889 10.8774 18.2708 10.9265 18.1836 11.0137C18.0964 11.1009 18.0473 11.219 18.0469 11.3422V12.6599C18.0469 12.9149 18.2556 13.1252 18.5121 13.1252L21.5348 13.1236Z\"\n                          />\n                          <RNSVGPath\n                            d=\"M19.5358 6.05175C19.7174 5.87011 19.7174 5.57374 19.5358 5.39369L18.6036 4.46316C18.4236 4.28311 18.1256 4.28311 17.9472 4.46316L15.8089 6.60147C15.6288 6.78152 15.6288 7.07789 15.8089 7.25953L16.7394 8.19006C16.921 8.3717 17.2174 8.3717 17.3975 8.19006L19.5358 6.05175Z\"\n                          />\n                        </RNSVGGroup>\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  sun\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={-9211021}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={-9211021}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M11.9836 0.00267822C8.77744 0.0551662 5.72075 1.36728 3.47427 3.65538C2.35024 4.77447 1.46338 6.10869 0.866705 7.57831C0.270027 9.04793 -0.0242179 10.6228 0.00155827 12.2087C-0.000286057 13.7583 0.303697 15.2931 0.896087 16.7251C1.48848 18.1571 2.35763 19.458 3.45373 20.5535C4.54983 21.6489 5.85133 22.5173 7.28365 23.1089C8.71596 23.7004 10.2509 24.0035 11.8006 24.0007H12.0146C15.2217 23.9677 18.2847 22.6638 20.5316 20.3751C22.7785 18.0864 24.0257 14.9999 23.9996 11.7927C24.0033 10.2243 23.6933 8.6709 23.0879 7.22398C22.4825 5.77706 21.5939 4.4658 20.4744 3.36731C19.3548 2.26882 18.0269 1.40527 16.5688 0.827453C15.1106 0.249636 13.5517 -0.0307856 11.9836 0.00267822ZM10.5007 16.5433C10.4935 16.3473 10.5254 16.1517 10.5947 15.9682C10.6639 15.7846 10.7691 15.6167 10.904 15.4742C11.0389 15.3318 11.2009 15.2177 11.3804 15.1386C11.5599 15.0594 11.7534 15.0169 11.9496 15.0135H11.9766C12.3712 15.0142 12.7501 15.1677 13.034 15.4417C13.3179 15.7157 13.4847 16.089 13.4995 16.4833C13.5068 16.6794 13.4749 16.875 13.4057 17.0586C13.3365 17.2423 13.2314 17.4102 13.0965 17.5527C12.9615 17.6952 12.7995 17.8093 12.6199 17.8884C12.4403 17.9674 12.2468 18.0099 12.0506 18.0132H12.0236C11.6291 18.0119 11.2505 17.8583 10.9667 17.5844C10.6829 17.3105 10.5159 16.9375 10.5007 16.5433ZM11.0007 12.5017V6.50215C11.0007 6.23695 11.106 5.98262 11.2935 5.7951C11.481 5.60758 11.7354 5.50223 12.0006 5.50223C12.2658 5.50223 12.5201 5.60758 12.7076 5.7951C12.8951 5.98262 13.0005 6.23695 13.0005 6.50215V12.5017C13.0005 12.7669 12.8951 13.0212 12.7076 13.2087C12.5201 13.3962 12.2658 13.5016 12.0006 13.5016C11.7354 13.5016 11.481 13.3962 11.2935 13.2087C11.106 13.0212 11.0007 12.7669 11.0007 12.5017Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  warning-1\n                </Text>\n              </View>\n            </View>\n          </View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={-9211021}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={-9211021}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGGroup\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        >\n                          <RNSVGPath\n                            d=\"M13.9193 18.4271C13.8992 17.9392 13.6816 17.4813 13.3178 17.1478C12.9545 16.8148 12.4731 16.631 11.975 16.6304H11.9746H11.945V16.6304L11.9392 16.6305C11.6898 16.6348 11.4434 16.6864 11.2142 16.7827L11.333 17.0655L11.2142 16.7827C10.9851 16.879 10.7773 17.0183 10.6035 17.1931C10.4296 17.368 10.2932 17.5751 10.2031 17.8026C10.113 18.0302 10.0712 18.2732 10.0806 18.5171L10.0807 18.5176C10.1001 19.0055 10.3169 19.4638 10.6802 19.7979C11.043 20.1315 11.5241 20.3162 12.0222 20.3177H12.0233H12.0529V20.3178L12.058 20.3177C12.3081 20.3138 12.5552 20.2624 12.785 20.1661C13.0148 20.0698 13.2232 19.9303 13.3974 19.7549C13.5716 19.5795 13.7081 19.3718 13.7981 19.1436C13.8881 18.9153 13.9295 18.6716 13.9193 18.4271ZM13.9193 18.4271L13.5863 18.4408M13.9193 18.4271C13.9193 18.4271 13.9193 18.4271 13.9193 18.427L13.5863 18.4408M13.5863 18.4408C13.5945 18.6386 13.5611 18.836 13.488 19.0213C13.415 19.2066 13.3037 19.3762 13.1609 19.52C13.018 19.6638 12.8464 19.779 12.6561 19.8587C12.4658 19.9385 12.2607 19.9812 12.0529 19.9844H12.0233C11.6062 19.9831 11.2058 19.8284 10.9059 19.5525C10.6059 19.2767 10.4296 18.9011 10.4137 18.5043C10.4061 18.3069 10.4399 18.1101 10.513 17.9254C10.5862 17.7406 10.6973 17.5715 10.8399 17.4281C10.9824 17.2847 11.1536 17.1698 11.3434 17.09C11.5331 17.0103 11.7376 16.9674 11.945 16.9638H11.9746C12.3916 16.9642 12.7922 17.1182 13.0926 17.3936C13.393 17.6689 13.5699 18.0442 13.5863 18.4408ZM23.4665 20.2125L23.4665 20.2125C23.6068 20.4676 23.6751 20.7517 23.6658 21.0376C23.6566 21.3234 23.57 21.6033 23.4131 21.8501C23.2562 22.097 23.0337 22.3031 22.7658 22.4469C22.4978 22.5907 22.1942 22.6667 21.8847 22.6667H21.8846H2.11538H2.11533C1.80576 22.6667 1.50222 22.5907 1.23422 22.4469C0.96631 22.3031 0.743845 22.097 0.586879 21.8501L0.305565 22.0289L0.586879 21.8501C0.429998 21.6033 0.343434 21.3234 0.334166 21.0376C0.324898 20.7517 0.393165 20.4676 0.533517 20.2125L0.53353 20.2125L10.4192 2.23977C10.5681 1.96911 10.7933 1.74021 11.0721 1.5796C11.3511 1.41893 11.6722 1.33333 12.0005 1.33333C12.3289 1.33333 12.65 1.41893 12.9289 1.5796C13.2078 1.74021 13.4329 1.96911 13.5819 2.23977L23.4665 20.2125ZM11.0224 7.44182C10.7599 7.69176 10.6091 8.03434 10.6091 8.39521V14.4365C10.6091 14.7974 10.7599 15.1399 11.0224 15.3899C11.2843 15.6393 11.6363 15.7767 12 15.7767C12.3637 15.7767 12.7157 15.6393 12.9776 15.3899C13.2401 15.1399 13.3909 14.7974 13.3909 14.4365V8.39521C13.3909 8.03434 13.2401 7.69176 12.9776 7.44182C12.7157 7.19242 12.3637 7.05499 12 7.05499C11.6363 7.05499 11.2843 7.19242 11.0224 7.44182Z\"\n                            propList={\n                              Array [\n                                \"stroke\",\n                                \"strokeWidth\",\n                              ]\n                            }\n                            stroke={\n                              Array [\n                                2,\n                              ]\n                            }\n                            strokeWidth=\"0.666667\"\n                          />\n                        </RNSVGGroup>\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  warning-2\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={-9211021}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={-9211021}\n                    vbHeight={16}\n                    vbWidth={16}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M8 16C6.41775 16 4.87103 15.5308 3.55544 14.6518C2.23985 13.7727 1.21447 12.5233 0.608967 11.0615C0.00346627 9.59966 -0.15496 7.99113 0.153721 6.43928C0.462403 4.88743 1.22433 3.46197 2.34315 2.34315C3.46197 1.22433 4.88743 0.462403 6.43928 0.153721C7.99113 -0.15496 9.59966 0.00346627 11.0615 0.608967C12.5233 1.21447 13.7727 2.23985 14.6518 3.55544C15.5308 4.87103 16 6.41775 16 8C16 10.1217 15.1571 12.1566 13.6569 13.6569C12.1566 15.1571 10.1217 16 8 16ZM8 14.4C9.2658 14.4 10.5032 14.0246 11.5556 13.3214C12.6081 12.6182 13.4284 11.6186 13.9128 10.4492C14.3972 9.27973 14.524 7.9929 14.277 6.75142C14.0301 5.50995 13.4205 4.36958 12.5255 3.47452C11.6304 2.57946 10.4901 1.96992 9.24858 1.72298C8.0071 1.47603 6.72028 1.60277 5.55083 2.08717C4.38138 2.57158 3.38184 3.39188 2.6786 4.44435C1.97536 5.49683 1.6 6.7342 1.6 8C1.6 9.69739 2.27429 11.3253 3.47452 12.5255C4.67475 13.7257 6.30262 14.4 8 14.4ZM7.2 10.4H8.8V12H7.2V10.4ZM7.2 4H8.8V8.8H7.2V4Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  warning-outline\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={-9211021}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={-9211021}\n                    vbHeight={32.055}\n                    vbWidth={32.055}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGGroup\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        >\n                          <RNSVGPath\n                            d=\"M3.968,12.061C1.775,12.061,0,13.835,0,16.027c0,2.192,1.773,3.967,3.968,3.967c2.189,0,3.966-1.772,3.966-3.967   C7.934,13.835,6.157,12.061,3.968,12.061z M16.233,12.061c-2.188,0-3.968,1.773-3.968,3.965c0,2.192,1.778,3.967,3.968,3.967   s3.97-1.772,3.97-3.967C20.201,13.835,18.423,12.061,16.233,12.061z M28.09,12.061c-2.192,0-3.969,1.774-3.969,3.967   c0,2.19,1.774,3.965,3.969,3.965c2.188,0,3.965-1.772,3.965-3.965S30.278,12.061,28.09,12.061z\"\n                          />\n                        </RNSVGGroup>\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  three-dots\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={-9211021}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={-9211021}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M18.0621 16.1487C17.2993 16.1487 16.6113 16.4451 16.0895 16.9223L8.93445 12.7495C8.98988 12.523 9.02482 12.2868 9.02482 12.0458C9.02482 11.8048 8.98988 11.5698 8.93445 11.3433L16.0136 7.21147C16.5679 7.73368 17.3006 8.02461 18.0621 8.02482C19.7237 8.02482 21.0745 6.67406 21.0745 5.01241C21.0745 3.35076 19.7237 2 18.0621 2C16.4004 2 15.0496 3.35076 15.0496 5.01241C15.0496 5.2534 15.0846 5.48958 15.14 5.71491L8.06085 9.84673C7.50628 9.32504 6.7738 9.0342 6.01241 9.03338C4.35077 9.03338 3 10.3841 3 12.0458C3 13.7074 4.35077 15.0582 6.01241 15.0582C6.77392 15.058 7.50661 14.7671 8.06085 14.2449L15.2159 18.4176C15.1632 18.633 15.1361 18.8538 15.1352 19.0756C15.1354 19.6541 15.3072 20.2196 15.6288 20.7005C15.9503 21.1814 16.4073 21.5562 16.9418 21.7775C17.4764 21.9988 18.0645 22.0567 18.6319 21.9437C19.1993 21.8308 19.7205 21.5522 20.1296 21.1431C20.5387 20.734 20.8173 20.2128 20.9302 19.6454C21.0432 19.078 20.9853 18.4898 20.764 17.9553C20.5427 17.4208 20.1679 16.9638 19.687 16.6423C19.2061 16.3207 18.6406 16.1489 18.0621 16.1487Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  share\n                </Text>\n              </View>\n            </View>\n          </View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={-9211021}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={-9211021}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M12 0C5.376 0 0 5.376 0 12C0 18.624 5.376 24 12 24C18.624 24 24 18.624 24 12C24 5.376 18.624 0 12 0ZM9.6 17.4V6.6L16.8 12L9.6 17.4Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  play\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={-9211021}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={-9211021}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M1.75143 3.371C2.87321 2.22206 4.39447 1.57662 5.98067 1.57662C7.56686 1.57662 9.08812 2.22206 10.2099 3.371L11.9626 5.16516L13.7153 3.371C14.2671 2.78565 14.9272 2.31876 15.657 1.99756C16.3869 1.67637 17.1718 1.5073 17.9661 1.50023C18.7604 1.49316 19.5481 1.64823 20.2832 1.95638C21.0184 2.26453 21.6863 2.7196 22.2479 3.29504C22.8096 3.87047 23.2538 4.55474 23.5545 5.30793C23.8553 6.06112 24.0067 6.86813 23.9998 7.68189C23.9929 8.49564 23.8279 9.29984 23.5143 10.0476C23.2008 10.7953 22.7451 11.4715 22.1738 12.0369L11.9626 22.5L1.75143 12.0369C0.629991 10.8876 0 9.32904 0 7.70394C0 6.07885 0.629991 4.52029 1.75143 3.371Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  favourite\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={-9211021}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={-9211021}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M5.11111 19.7778C5.11111 21 6.11111 22 7.33333 22H16.2222C17.4444 22 18.4444 21 18.4444 19.7778V6.44444H5.11111V19.7778ZM19.5556 3.11111H15.6667L14.5556 2H9L7.88889 3.11111H4V5.33333H19.5556V3.11111Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  delete\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n      </RCTScrollView>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Icon Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"flexDirection\": \"row\",\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={20}\n        bbWidth={20}\n        color={-15681151}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#10b981\",\n              \"height\": 20,\n              \"marginTop\": 2,\n              \"width\": 20,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 20,\n              \"width\": 20,\n            },\n          ]\n        }\n        tintColor={-15681151}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 8,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#10b981\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 16,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 24,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Order Placed Successfully\n      </Text>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Icon CreateIcon 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <RNSVGSvgView\n      accessibilityRole=\"image\"\n      align=\"xMidYMid\"\n      bbHeight={48}\n      bbWidth={48}\n      color={-9211021}\n      dataSet={Object {}}\n      focusable={false}\n      meetOrSlice={0}\n      minX={0}\n      minY={0}\n      stroke=\"\"\n      style={\n        Array [\n          Object {\n            \"backgroundColor\": \"transparent\",\n            \"borderWidth\": 0,\n          },\n          Object {\n            \"color\": \"#737373\",\n            \"height\": 48,\n            \"width\": 48,\n          },\n          Object {\n            \"flex\": 0,\n            \"height\": 48,\n            \"width\": 48,\n          },\n        ]\n      }\n      tintColor={-9211021}\n      vbHeight={36}\n      vbWidth={36}\n    >\n      <RNSVGGroup\n        propList={\n          Array [\n            \"stroke\",\n          ]\n        }\n        stroke={null}\n      >\n        <RNSVGGroup>\n          <RNSVGCircle\n            cx=\"18\"\n            cy=\"18\"\n            fill={-16337196}\n            propList={\n              Array [\n                \"fill\",\n                \"stroke\",\n              ]\n            }\n            r=\"17.5\"\n            stroke={-15829872}\n          />\n          <RNSVGCircle\n            cx=\"18\"\n            cy=\"18\"\n            fill={-1}\n            propList={\n              Array [\n                \"fill\",\n                \"stroke\",\n              ]\n            }\n            r=\"13.5\"\n            stroke={-15829872}\n          />\n          <RNSVGCircle\n            cx=\"18\"\n            cy=\"18\"\n            fill={-16337196}\n            propList={\n              Array [\n                \"fill\",\n                \"stroke\",\n              ]\n            }\n            r=\"9.5\"\n            stroke={-15829872}\n          />\n          <RNSVGCircle\n            cx=\"18\"\n            cy=\"18\"\n            fill={-1}\n            propList={\n              Array [\n                \"fill\",\n                \"stroke\",\n              ]\n            }\n            r=\"5.5\"\n            stroke={-15829872}\n          />\n        </RNSVGGroup>\n      </RNSVGGroup>\n    </RNSVGSvgView>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Icon CustomIcon 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={40}\n        bbWidth={40}\n        color={-9211021}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#737373\",\n              \"height\": 40,\n              \"width\": 40,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 40,\n              \"width\": 40,\n            },\n          ]\n        }\n        tintColor={-9211021}\n        vbHeight={873}\n        vbWidth={870}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGGroup\n              fill={null}\n              fillRule={1}\n              propList={\n                Array [\n                  \"fill\",\n                  \"fillRule\",\n                  \"stroke\",\n                  \"strokeWidth\",\n                ]\n              }\n              stroke={null}\n              strokeWidth={1}\n            >\n              <RNSVGPath\n                d=\"M435 .1C194.8.1.1 194.8.1 435c0 187.3 118.4 346.9 284.4 408.1 3.3-29.9 15-57.2 32.7-79.6 12.1-15.4 26.9-28.5 43.9-38.4 2.1-5 4.6-10.6 7.1-16.6-50.3-26-84.7-78.1-84.7-138.6 0-51.7 25.3-97.7 64-125.9-10.9-20.6-21.3-40.2-31.8-58.2-18.1-31.5-46.7-59.7-68.4-78.9-21 11.9-47.8 4.7-59.7-16.3-11.9-21-4.7-47.8 16.3-59.7 21-11.9 47.4-4.7 59.7 15.9v.4c7.2 12.7 7.2 27.5 1.8 39.8 22.8 19.5 56.8 52.5 77.8 89 9.8 17 19.5 34.7 29.3 53.5 20.3-9.4 42.7-14.8 66.2-14.8 21.3 0 41.6 4.3 60.1 11.9 9.8-18.5 19.5-36.2 28.9-52.8 21-36.2 54.6-68.7 77.4-88.3-5.4-12.3-5.4-26.8 1.8-39.4v-.4c12.3-20.6 38.7-27.9 59.3-15.9 21 11.9 28.2 38.7 16.3 59.3-11.9 21-38.4 28.2-59.3 16.3-21.7 18.8-49.9 47.4-68 78.5-10.1 17.4-20.3 36.5-30.8 56.4 42 27.9 69.8 75.3 69.8 129.5 0 63-36.9 116.9-90.4 141.5.9 2.7 2 4.9 3 7.2 47 22.3 81.1 67.4 87.9 121.1C755.9 776 869.9 618.8 869.9 435 869.9 194.8 675.2.1 435 .1z\"\n                fill={-3538944}\n                propList={\n                  Array [\n                    \"fill\",\n                  ]\n                }\n              />\n              <RNSVGPath\n                d=\"M284.8 843.3h.1-.1zM284.8 843.3c-.1 0-.3-.1-.4-.1.2 0 .3 0 .4.1z\"\n                fill={-1}\n                propList={\n                  Array [\n                    \"fill\",\n                  ]\n                }\n              />\n              <RNSVGGroup\n                fill={-1}\n                propList={\n                  Array [\n                    \"fill\",\n                    \"stroke\",\n                    \"strokeWidth\",\n                  ]\n                }\n                stroke={-1}\n                strokeWidth={5}\n              >\n                <RNSVGPath\n                  d=\"M485.2 5.8c-20.6-11.9-47-4.7-59.3 15.9v.4c-7.2 12.7-7.2 27.1-1.8 39.4-22.8 19.5-56.4 52.1-77.4 88.3-9.4 16.6-19.2 34.4-28.9 52.8-18.5-7.6-38.7-11.9-60.1-11.9-23.5 0-45.9 5.4-66.2 14.8-9.8-18.8-19.5-36.5-29.3-53.5-21-36.5-55-69.5-77.8-89 5.4-12.3 5.4-27.1-1.8-39.8v-.4C70.3 2.2 43.9-5.1 22.9 6.9 1.9 18.8-5.3 45.6 6.6 66.6c11.9 21 38.7 28.2 59.7 16.3 21.7 19.2 50.3 47.4 68.4 78.9 10.5 18.1 21 37.6 31.8 58.2-38.7 28.2-64 74.2-64 125.9 0 60.4 34.4 112.5 84.7 138.6-2.5 6.2-5.1 11.9-7.2 17-41.6 24.4-70.8 67.4-76.4 117.6 46.9 17.3 97.6 26.8 150.6 26.8 56.2 0 109.9-10.7 159.2-30.1-7.1-52.8-40.5-97.3-86.8-119.8-1.1-2.9-2.5-5.4-3.6-8.7 53.5-24.6 90.4-78.5 90.4-141.5 0-54.3-27.9-101.7-69.8-129.5 10.5-19.9 20.6-39.1 30.8-56.4 18.1-31.1 46.3-59.7 68-78.5 21 11.9 47.4 4.7 59.3-16.3 11.7-20.5 4.5-47.3-16.5-59.3z\"\n                  matrix={\n                    Array [\n                      1,\n                      0,\n                      0,\n                      1,\n                      181,\n                      224,\n                    ]\n                  }\n                />\n              </RNSVGGroup>\n            </RNSVGGroup>\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Icon Integration with Third Party Icons 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"flexDirection\": \"row\",\n          }\n        }\n      >\n        <Text\n          allowFontScaling={false}\n          dataSet={Object {}}\n          style={\n            Array [\n              Object {\n                \"color\": undefined,\n                \"fontSize\": 12,\n              },\n              Object {\n                \"color\": \"#1f2937\",\n                \"fontSize\": 16,\n                \"height\": 16,\n                \"lineHeight\": 16,\n                \"width\": 16,\n              },\n              Object {\n                \"fontFamily\": \"anticon\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"normal\",\n              },\n              Object {},\n            ]\n          }\n        >\n          \n        </Text>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"width\": 12,\n            }\n          }\n        />\n        <Text />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"width\": 12,\n            }\n          }\n        />\n        <Text\n          allowFontScaling={false}\n          dataSet={Object {}}\n          style={\n            Array [\n              Object {\n                \"color\": undefined,\n                \"fontSize\": 12,\n              },\n              Object {\n                \"color\": \"#1f2937\",\n                \"fontSize\": 16,\n                \"height\": 16,\n                \"lineHeight\": 16,\n                \"width\": 16,\n              },\n              Object {\n                \"fontFamily\": \"material-community\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"normal\",\n              },\n              Object {},\n            ]\n          }\n        >\n          󰖟\n        </Text>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Icon Sizes 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 24,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 30,\n            \"marginBottom\": 40,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Sizes\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"justifyContent\": \"center\",\n          }\n        }\n      >\n        <Text\n          allowFontScaling={false}\n          dataSet={Object {}}\n          style={\n            Array [\n              Object {\n                \"color\": undefined,\n                \"fontSize\": 12,\n              },\n              Object {\n                \"alignSelf\": \"center\",\n                \"color\": \"#737373\",\n                \"fontSize\": 40,\n                \"height\": 40,\n                \"lineHeight\": 40,\n                \"width\": 40,\n              },\n              Object {\n                \"fontFamily\": \"ionicons\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"normal\",\n              },\n              Object {},\n            ]\n          }\n        >\n          \n        </Text>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <Text\n          allowFontScaling={false}\n          dataSet={Object {}}\n          style={\n            Array [\n              Object {\n                \"color\": undefined,\n                \"fontSize\": 12,\n              },\n              Object {\n                \"alignSelf\": \"center\",\n                \"color\": \"#737373\",\n                \"fontSize\": 50,\n                \"height\": 50,\n                \"lineHeight\": 50,\n                \"width\": 50,\n              },\n              Object {\n                \"fontFamily\": \"ionicons\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"normal\",\n              },\n              Object {},\n            ]\n          }\n        >\n          \n        </Text>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <Text\n          allowFontScaling={false}\n          dataSet={Object {}}\n          style={\n            Array [\n              Object {\n                \"color\": undefined,\n                \"fontSize\": 12,\n              },\n              Object {\n                \"alignSelf\": \"center\",\n                \"color\": \"#737373\",\n                \"fontSize\": 32,\n                \"height\": 32,\n                \"lineHeight\": 32,\n                \"width\": 32,\n              },\n              Object {\n                \"fontFamily\": \"ionicons\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"normal\",\n              },\n              Object {},\n            ]\n          }\n        >\n          \n        </Text>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots IconButton Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderRadius\": 9999,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 10,\n            \"paddingRight\": 10,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <Text\n          allowFontScaling={false}\n          dataSet={Object {}}\n          style={\n            Array [\n              Object {\n                \"color\": undefined,\n                \"fontSize\": 12,\n              },\n              Object {\n                \"color\": \"#f97316\",\n                \"fontSize\": 20,\n                \"height\": 20,\n                \"lineHeight\": 20,\n                \"width\": 20,\n              },\n              Object {\n                \"fontFamily\": \"entypo\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"normal\",\n              },\n              Object {},\n            ]\n          }\n        >\n          \n        </Text>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots IconButton SVGIcon 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 10,\n            \"paddingRight\": 10,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <RNSVGSvgView\n          accessibilityRole=\"image\"\n          align=\"xMidYMid\"\n          bbHeight={40}\n          bbWidth={40}\n          color={-328966}\n          dataSet={Object {}}\n          focusable={false}\n          meetOrSlice={0}\n          minX={0}\n          minY={0}\n          stroke=\"\"\n          strokeWidth=\"10\"\n          style={\n            Array [\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"borderWidth\": 0,\n              },\n              Object {\n                \"color\": \"#fafafa\",\n                \"height\": 40,\n                \"width\": 40,\n              },\n              Object {\n                \"flex\": 0,\n                \"height\": 40,\n                \"width\": 40,\n              },\n            ]\n          }\n          tintColor={-328966}\n          vbHeight={100}\n          vbWidth={100}\n        >\n          <RNSVGGroup\n            propList={\n              Array [\n                \"stroke\",\n                \"strokeWidth\",\n              ]\n            }\n            stroke={null}\n            strokeWidth=\"10\"\n          >\n            <RNSVGGroup>\n              <RNSVGPath\n                d=\"M46.667 90v-.008c-4.922 0-11.021-2.695-13.333-6.66V40c5.521 0 10-4.479 10-10V13.333A3.33 3.33 0 0 1 46.667 10C54.029 10 60 15.97 60 23.333v13.333A3.331 3.331 0 0 0 63.334 40H80c5.52 0 10 4.479 10 10v30h-.004c0 5.52-4.477 9.992-9.996 10H46.667zM10 40h16.666v43.333H10z\"\n                fill={\n                  Array [\n                    2,\n                  ]\n                }\n                propList={\n                  Array [\n                    \"fill\",\n                    \"stroke\",\n                  ]\n                }\n                stroke={null}\n              />\n            </RNSVGGroup>\n          </RNSVGGroup>\n        </RNSVGSvgView>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 10,\n            \"paddingRight\": 10,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <RNSVGSvgView\n          accessibilityRole=\"image\"\n          align=\"xMidYMid\"\n          bbHeight={40}\n          bbWidth={40}\n          color={-16612153}\n          dataSet={Object {}}\n          focusable={false}\n          meetOrSlice={0}\n          minX={0}\n          minY={0}\n          stroke=\"\"\n          strokeWidth=\"10\"\n          style={\n            Array [\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"borderWidth\": 0,\n              },\n              Object {\n                \"color\": \"#0284c7\",\n                \"height\": 40,\n                \"width\": 40,\n              },\n              Object {\n                \"flex\": 0,\n                \"height\": 40,\n                \"width\": 40,\n              },\n            ]\n          }\n          tintColor={-16612153}\n          vbHeight={100}\n          vbWidth={100}\n        >\n          <RNSVGGroup\n            propList={\n              Array [\n                \"stroke\",\n                \"strokeWidth\",\n              ]\n            }\n            stroke={null}\n            strokeWidth=\"10\"\n          >\n            <RNSVGGroup>\n              <RNSVGPath\n                d=\"M46.667 90v-.008c-4.922 0-11.021-2.695-13.333-6.66V40c5.521 0 10-4.479 10-10V13.333A3.33 3.33 0 0 1 46.667 10C54.029 10 60 15.97 60 23.333v13.333A3.331 3.331 0 0 0 63.334 40H80c5.52 0 10 4.479 10 10v30h-.004c0 5.52-4.477 9.992-9.996 10H46.667zM10 40h16.666v43.333H10z\"\n                fill={\n                  Array [\n                    2,\n                  ]\n                }\n                propList={\n                  Array [\n                    \"fill\",\n                    \"stroke\",\n                  ]\n                }\n                stroke={null}\n              />\n            </RNSVGGroup>\n          </RNSVGGroup>\n        </RNSVGSvgView>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots IconButton Sizes 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n          }\n        }\n      >\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 6,\n              \"paddingLeft\": 6,\n              \"paddingRight\": 6,\n              \"paddingTop\": 6,\n            }\n          }\n        >\n          <Text\n            allowFontScaling={false}\n            dataSet={Object {}}\n            style={\n              Array [\n                Object {\n                  \"color\": undefined,\n                  \"fontSize\": 12,\n                },\n                Object {\n                  \"color\": \"#fafafa\",\n                  \"fontSize\": 12,\n                  \"height\": 12,\n                  \"lineHeight\": 12,\n                  \"width\": 12,\n                },\n                Object {\n                  \"fontFamily\": \"material\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"normal\",\n                },\n                Object {},\n              ]\n            }\n          >\n            \n          </Text>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 8,\n              \"paddingRight\": 8,\n              \"paddingTop\": 8,\n            }\n          }\n        >\n          <Text\n            allowFontScaling={false}\n            dataSet={Object {}}\n            style={\n              Array [\n                Object {\n                  \"color\": undefined,\n                  \"fontSize\": 12,\n                },\n                Object {\n                  \"color\": \"#fafafa\",\n                  \"fontSize\": 16,\n                  \"height\": 16,\n                  \"lineHeight\": 16,\n                  \"width\": 16,\n                },\n                Object {\n                  \"fontFamily\": \"material\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"normal\",\n                },\n                Object {},\n              ]\n            }\n          >\n            \n          </Text>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 10,\n              \"paddingRight\": 10,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <Text\n            allowFontScaling={false}\n            dataSet={Object {}}\n            style={\n              Array [\n                Object {\n                  \"color\": undefined,\n                  \"fontSize\": 12,\n                },\n                Object {\n                  \"color\": \"#fafafa\",\n                  \"fontSize\": 20,\n                  \"height\": 20,\n                  \"lineHeight\": 20,\n                  \"width\": 20,\n                },\n                Object {\n                  \"fontFamily\": \"material\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"normal\",\n                },\n                Object {},\n              ]\n            }\n          >\n            \n          </Text>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 12,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 12,\n            }\n          }\n        >\n          <Text\n            allowFontScaling={false}\n            dataSet={Object {}}\n            style={\n              Array [\n                Object {\n                  \"color\": undefined,\n                  \"fontSize\": 12,\n                },\n                Object {\n                  \"color\": \"#fafafa\",\n                  \"fontSize\": 24,\n                  \"height\": 24,\n                  \"lineHeight\": 24,\n                  \"width\": 24,\n                },\n                Object {\n                  \"fontFamily\": \"material\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"normal\",\n                },\n                Object {},\n              ]\n            }\n          >\n            \n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots IconButton Variant 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n          }\n        }\n      >\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"indigo\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#4f46e5\",\n              \"borderRadius\": 4,\n              \"borderWidth\": 1,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 10,\n              \"paddingRight\": 10,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <Text\n            allowFontScaling={false}\n            dataSet={Object {}}\n            style={\n              Array [\n                Object {\n                  \"color\": undefined,\n                  \"fontSize\": 12,\n                },\n                Object {\n                  \"color\": \"#4f46e5\",\n                  \"fontSize\": 20,\n                  \"height\": 20,\n                  \"lineHeight\": 20,\n                  \"width\": 20,\n                },\n                Object {\n                  \"fontFamily\": \"anticon\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"normal\",\n                },\n                Object {},\n              ]\n            }\n          >\n            \n          </Text>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"indigo\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#4f46e5\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 10,\n              \"paddingRight\": 10,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <Text\n            allowFontScaling={false}\n            dataSet={Object {}}\n            style={\n              Array [\n                Object {\n                  \"color\": undefined,\n                  \"fontSize\": 12,\n                },\n                Object {\n                  \"color\": \"#fafafa\",\n                  \"fontSize\": 20,\n                  \"height\": 20,\n                  \"lineHeight\": 20,\n                  \"width\": 20,\n                },\n                Object {\n                  \"fontFamily\": \"anticon\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"normal\",\n                },\n                Object {},\n              ]\n            }\n          >\n            \n          </Text>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"indigo\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 10,\n              \"paddingRight\": 10,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <Text\n            allowFontScaling={false}\n            dataSet={Object {}}\n            style={\n              Array [\n                Object {\n                  \"color\": undefined,\n                  \"fontSize\": 12,\n                },\n                Object {\n                  \"color\": \"#4f46e5\",\n                  \"fontSize\": 20,\n                  \"height\": 20,\n                  \"lineHeight\": 20,\n                  \"width\": 20,\n                },\n                Object {\n                  \"fontFamily\": \"anticon\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"normal\",\n                },\n                Object {},\n              ]\n            }\n          >\n            \n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Image Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <Image\n        accessibilityLabel=\"Alternate Text\"\n        alt=\"Alternate Text\"\n        dataSet={Object {}}\n        onError={[Function]}\n        source={\n          Object {\n            \"uri\": \"https://wallpaperaccess.com/full/317501.jpg\",\n          }\n        }\n        style={\n          Object {\n            \"height\": 128,\n            \"maxWidth\": \"100%\",\n            \"width\": 128,\n          }\n        }\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Image BorderRadius 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <Image\n        accessibilityLabel=\"Alternate Text\"\n        alt=\"Alternate Text\"\n        dataSet={Object {}}\n        onError={[Function]}\n        source={\n          Object {\n            \"uri\": \"https://wallpaperaccess.com/full/317501.jpg\",\n          }\n        }\n        style={\n          Object {\n            \"borderRadius\": 100,\n            \"height\": 150,\n            \"maxWidth\": \"100%\",\n            \"width\": 150,\n          }\n        }\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Image FallbackElement 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <Image\n        accessibilityLabel=\"fallback text\"\n        alt=\"fallback text\"\n        dataSet={Object {}}\n        onError={[Function]}\n        source={\n          Object {\n            \"uri\": \"https://cdn.pixaba.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg\",\n          }\n        }\n        style={\n          Object {\n            \"borderRadius\": 2,\n            \"height\": 150,\n            \"maxWidth\": \"100%\",\n            \"width\": 150,\n          }\n        }\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Image FallbackSupport 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <Image\n        accessibilityLabel=\"fallback text\"\n        alt=\"fallback text\"\n        dataSet={Object {}}\n        onError={[Function]}\n        source={\n          Object {\n            \"uri\": \"https://-page-icon.png\",\n          }\n        }\n        style={\n          Object {\n            \"borderRadius\": 100,\n            \"height\": 150,\n            \"maxWidth\": \"100%\",\n            \"width\": 150,\n          }\n        }\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Image Sizes 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <Text\n      dataSet={Object {}}\n      style={\n        Object {\n          \"backgroundColor\": undefined,\n          \"color\": \"#171717\",\n          \"fontFamily\": undefined,\n          \"fontSize\": 24,\n          \"fontStyle\": \"normal\",\n          \"fontWeight\": \"700\",\n          \"letterSpacing\": 0,\n          \"lineHeight\": 30,\n          \"marginBottom\": 40,\n          \"marginTop\": 12,\n          \"textAlign\": \"center\",\n          \"textDecorationLine\": undefined,\n        }\n      }\n    >\n      Image Sizes\n    </Text>\n    <RCTScrollView\n      contentContainerStyle={\n        Array [\n          Object {},\n          Object {\n            \"dataSet\": Object {},\n          },\n          Object {},\n        ]\n      }\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"marginBottom\": 24,\n            }\n          }\n        >\n          <Image\n            accessibilityLabel=\"Alternate Text xs\"\n            alt=\"Alternate Text xs\"\n            dataSet={Object {}}\n            onError={[Function]}\n            resizeMode=\"cover\"\n            source={\n              Object {\n                \"uri\": \"https://wallpaperaccess.com/full/317501.jpg\",\n              }\n            }\n            style={\n              Object {\n                \"height\": 40,\n                \"maxWidth\": \"100%\",\n                \"width\": 40,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 8,\n              }\n            }\n          />\n          <Image\n            accessibilityLabel=\"Alternate Text sm\"\n            alt=\"Alternate Text sm\"\n            dataSet={Object {}}\n            onError={[Function]}\n            resizeMode=\"cover\"\n            source={\n              Object {\n                \"uri\": \"https://wallpaperaccess.com/full/317501.jpg\",\n              }\n            }\n            style={\n              Object {\n                \"height\": 64,\n                \"maxWidth\": \"100%\",\n                \"width\": 64,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 8,\n              }\n            }\n          />\n          <Image\n            accessibilityLabel=\"Alternate Text md\"\n            alt=\"Alternate Text md\"\n            dataSet={Object {}}\n            onError={[Function]}\n            resizeMode=\"cover\"\n            source={\n              Object {\n                \"uri\": \"https://wallpaperaccess.com/full/317501.jpg\",\n              }\n            }\n            style={\n              Object {\n                \"height\": 80,\n                \"maxWidth\": \"100%\",\n                \"width\": 80,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 8,\n              }\n            }\n          />\n          <Image\n            accessibilityLabel=\"Alternate Text lg\"\n            alt=\"Alternate Text lg\"\n            dataSet={Object {}}\n            onError={[Function]}\n            resizeMode=\"cover\"\n            source={\n              Object {\n                \"uri\": \"https://wallpaperaccess.com/full/317501.jpg\",\n              }\n            }\n            style={\n              Object {\n                \"height\": 96,\n                \"maxWidth\": \"100%\",\n                \"width\": 96,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 8,\n              }\n            }\n          />\n          <Image\n            accessibilityLabel=\"Alternate Text xl\"\n            alt=\"Alternate Text xl\"\n            dataSet={Object {}}\n            onError={[Function]}\n            resizeMode=\"cover\"\n            source={\n              Object {\n                \"uri\": \"https://wallpaperaccess.com/full/317501.jpg\",\n              }\n            }\n            style={\n              Object {\n                \"height\": 128,\n                \"maxWidth\": \"100%\",\n                \"width\": 128,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 8,\n              }\n            }\n          />\n          <Image\n            accessibilityLabel=\"Alternate Text 2xl\"\n            alt=\"Alternate Text 2xl\"\n            dataSet={Object {}}\n            onError={[Function]}\n            resizeMode=\"cover\"\n            source={\n              Object {\n                \"uri\": \"https://wallpaperaccess.com/full/317501.jpg\",\n              }\n            }\n            style={\n              Object {\n                \"height\": 256,\n                \"maxWidth\": \"100%\",\n                \"width\": 256,\n              }\n            }\n          />\n        </View>\n      </View>\n    </RCTScrollView>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Image WithRef 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <Image\n        accessibilityLabel=\"Alternate Text\"\n        alt=\"Alternate Text\"\n        dataSet={Object {}}\n        onError={[Function]}\n        source={\n          Object {\n            \"uri\": \"https://wallpaperaccess.com/full/317501.jpg\",\n          }\n        }\n        style={\n          Object {\n            \"height\": 128,\n            \"maxWidth\": \"100%\",\n            \"width\": 128,\n          }\n        }\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Input Addons 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"flexDirection\": \"row\",\n            \"width\": \"70%\",\n          }\n        }\n      >\n        <View\n          0=\"h\"\n          1=\"t\"\n          2=\"t\"\n          3=\"p\"\n          4=\"s\"\n          5=\":\"\n          6=\"/\"\n          7=\"/\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#fafafa\",\n              \"borderBottomLeftRadius\": 4,\n              \"borderBottomRightRadius\": 0,\n              \"borderColor\": \"#d4d4d4\",\n              \"borderRightWidth\": 0,\n              \"borderTopLeftRadius\": 4,\n              \"borderTopRightRadius\": 0,\n              \"borderWidth\": 1,\n              \"justifyContent\": \"center\",\n              \"marginRight\": 0,\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 8,\n              \"paddingRight\": 8,\n              \"paddingTop\": 8,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            https://\n          </Text>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        />\n        <View\n          dataSet={Object {}}\n          isFocused={false}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#d4d4d4\",\n              \"borderRadius\": 0,\n              \"borderWidth\": 1,\n              \"flexDirection\": \"row\",\n              \"marginLeft\": 0,\n              \"marginRight\": 0,\n              \"overflow\": \"hidden\",\n              \"width\": \"70%\",\n            }\n          }\n        >\n          <TextInput\n            accessible={true}\n            allowFontScaling={true}\n            dataSet={Object {}}\n            editable={true}\n            onBlur={[Function]}\n            onFocus={[Function]}\n            onKeyPress={[Function]}\n            placeholder=\"nativebase\"\n            placeholderTextColor=\"#a3a3a3\"\n            rejectResponderTermination={true}\n            secureTextEntry={false}\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"borderBottomLeftRadius\": 0,\n                \"borderBottomRightRadius\": 0,\n                \"borderTopLeftRadius\": 0,\n                \"borderTopRightRadius\": 0,\n                \"color\": \"#171717\",\n                \"flex\": 1,\n                \"fontFamily\": undefined,\n                \"fontSize\": 12,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"height\": \"100%\",\n                \"paddingBottom\": 8,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 8,\n                \"width\": \"100%\",\n              }\n            }\n            underlineColorAndroid=\"transparent\"\n          />\n        </View>\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        />\n        <View\n          0=\".\"\n          1=\"i\"\n          2=\"o\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#fafafa\",\n              \"borderBottomLeftRadius\": 0,\n              \"borderBottomRightRadius\": 4,\n              \"borderColor\": \"#d4d4d4\",\n              \"borderLeftWidth\": 0,\n              \"borderTopLeftRadius\": 0,\n              \"borderTopRightRadius\": 4,\n              \"borderWidth\": 1,\n              \"justifyContent\": \"center\",\n              \"marginLeft\": 0,\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 8,\n              \"paddingRight\": 8,\n              \"paddingTop\": 8,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            .io\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Input Elements 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        isFocused={false}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"overflow\": \"hidden\",\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <Text\n          allowFontScaling={false}\n          dataSet={Object {}}\n          style={\n            Array [\n              Object {\n                \"color\": undefined,\n                \"fontSize\": 12,\n              },\n              Object {\n                \"color\": \"#a3a3a3\",\n                \"fontSize\": 20,\n                \"height\": 20,\n                \"lineHeight\": 20,\n                \"marginLeft\": 8,\n                \"width\": 20,\n              },\n              Object {\n                \"fontFamily\": \"material\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"normal\",\n              },\n              Object {},\n            ]\n          }\n        >\n          \n        </Text>\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        />\n        <TextInput\n          accessible={true}\n          allowFontScaling={true}\n          dataSet={Object {}}\n          editable={true}\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyPress={[Function]}\n          placeholder=\"Name\"\n          placeholderTextColor=\"#a3a3a3\"\n          rejectResponderTermination={true}\n          secureTextEntry={false}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"color\": \"#171717\",\n              \"flex\": 1,\n              \"fontFamily\": undefined,\n              \"fontSize\": 12,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 8,\n              \"width\": \"100%\",\n            }\n          }\n          underlineColorAndroid=\"transparent\"\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        isFocused={false}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"overflow\": \"hidden\",\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <TextInput\n          accessible={true}\n          allowFontScaling={true}\n          dataSet={Object {}}\n          editable={true}\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyPress={[Function]}\n          placeholder=\"Password\"\n          placeholderTextColor=\"#a3a3a3\"\n          rejectResponderTermination={true}\n          secureTextEntry={true}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"color\": \"#171717\",\n              \"flex\": 1,\n              \"fontFamily\": undefined,\n              \"fontSize\": 12,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 8,\n              \"width\": \"100%\",\n            }\n          }\n          underlineColorAndroid=\"transparent\"\n        />\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        />\n        <View\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={Object {}}\n        >\n          <Text\n            allowFontScaling={false}\n            dataSet={Object {}}\n            style={\n              Array [\n                Object {\n                  \"color\": undefined,\n                  \"fontSize\": 12,\n                },\n                Object {\n                  \"color\": \"#a3a3a3\",\n                  \"fontSize\": 20,\n                  \"height\": 20,\n                  \"lineHeight\": 20,\n                  \"marginRight\": 8,\n                  \"width\": 20,\n                },\n                Object {\n                  \"fontFamily\": \"material\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"normal\",\n                },\n                Object {},\n              ]\n            }\n          >\n            \n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Input Form Controlled 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        isInvalid={true}\n        style={\n          Object {\n            \"maxWidth\": 300,\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          feedbackId=\"field-125-feedback\"\n          hasFeedbackText={false}\n          hasHelpText={false}\n          helpTextId=\"field-125-helptext\"\n          isDisabled={false}\n          isInvalid={true}\n          isReadOnly={false}\n          isRequired={false}\n          labelId=\"field-125-label\"\n          nativeID=\"field-125-label\"\n          setHasFeedbackText={[Function]}\n          setHasHelpText={[Function]}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"marginBottom\": 4,\n              \"marginTop\": 4,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#737373\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Password\n          </Text>\n        </View>\n        <View\n          dataSet={Object {}}\n          isFocused={false}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#d4d4d4\",\n              \"borderRadius\": 4,\n              \"borderWidth\": 1,\n              \"flexDirection\": \"row\",\n              \"overflow\": \"hidden\",\n            }\n          }\n        >\n          <TextInput\n            accessibilityInvalid={true}\n            accessible={true}\n            allowFontScaling={true}\n            dataSet={Object {}}\n            disabled={false}\n            editable={true}\n            isInvalid={true}\n            isRequired={false}\n            nativeID=\"field-125-input\"\n            onBlur={[Function]}\n            onFocus={[Function]}\n            onKeyPress={[Function]}\n            placeholder=\"Enter password\"\n            placeholderTextColor=\"#a3a3a3\"\n            readOnly={false}\n            rejectResponderTermination={true}\n            required={false}\n            secureTextEntry={false}\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"color\": \"#171717\",\n                \"flex\": 1,\n                \"fontFamily\": undefined,\n                \"fontSize\": 12,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"height\": \"100%\",\n                \"paddingBottom\": 8,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 8,\n                \"width\": \"100%\",\n              }\n            }\n            underlineColorAndroid=\"transparent\"\n          />\n        </View>\n        <View\n          dataSet={Object {}}\n          feedbackId=\"field-125-feedback\"\n          hasFeedbackText={false}\n          hasHelpText={false}\n          helpTextId=\"field-125-helptext\"\n          isDisabled={false}\n          isInvalid={true}\n          isReadOnly={false}\n          isRequired={false}\n          labelId=\"field-125-label\"\n          nativeID=\"field-125\"\n          setHasFeedbackText={[Function]}\n          setHasHelpText={[Function]}\n          style={\n            Object {\n              \"marginTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <RNSVGSvgView\n              accessibilityRole=\"image\"\n              align=\"xMidYMid\"\n              bbHeight={12}\n              bbWidth={12}\n              color={-2349530}\n              dataSet={Object {}}\n              focusable={false}\n              meetOrSlice={0}\n              minX={0}\n              minY={0}\n              stroke=\"\"\n              style={\n                Array [\n                  Object {\n                    \"backgroundColor\": \"transparent\",\n                    \"borderWidth\": 0,\n                  },\n                  Object {\n                    \"color\": \"#dc2626\",\n                    \"fontSize\": 12,\n                    \"height\": 12,\n                    \"width\": 12,\n                  },\n                  Object {\n                    \"flex\": 0,\n                    \"height\": 12,\n                    \"width\": 12,\n                  },\n                ]\n              }\n              tintColor={-2349530}\n              vbHeight={16}\n              vbWidth={16}\n            >\n              <RNSVGGroup\n                font={\n                  Object {\n                    \"fontSize\": 12,\n                  }\n                }\n                propList={\n                  Array [\n                    \"stroke\",\n                  ]\n                }\n                stroke={null}\n              >\n                <RNSVGGroup>\n                  <RNSVGPath\n                    d=\"M8 16C6.41775 16 4.87103 15.5308 3.55544 14.6518C2.23985 13.7727 1.21447 12.5233 0.608967 11.0615C0.00346627 9.59966 -0.15496 7.99113 0.153721 6.43928C0.462403 4.88743 1.22433 3.46197 2.34315 2.34315C3.46197 1.22433 4.88743 0.462403 6.43928 0.153721C7.99113 -0.15496 9.59966 0.00346627 11.0615 0.608967C12.5233 1.21447 13.7727 2.23985 14.6518 3.55544C15.5308 4.87103 16 6.41775 16 8C16 10.1217 15.1571 12.1566 13.6569 13.6569C12.1566 15.1571 10.1217 16 8 16ZM8 14.4C9.2658 14.4 10.5032 14.0246 11.5556 13.3214C12.6081 12.6182 13.4284 11.6186 13.9128 10.4492C14.3972 9.27973 14.524 7.9929 14.277 6.75142C14.0301 5.50995 13.4205 4.36958 12.5255 3.47452C11.6304 2.57946 10.4901 1.96992 9.24858 1.72298C8.0071 1.47603 6.72028 1.60277 5.55083 2.08717C4.38138 2.57158 3.38184 3.39188 2.6786 4.44435C1.97536 5.49683 1.6 6.7342 1.6 8C1.6 9.69739 2.27429 11.3253 3.47452 12.5255C4.67475 13.7257 6.30262 14.4 8 14.4ZM7.2 10.4H8.8V12H7.2V10.4ZM7.2 4H8.8V8.8H7.2V4Z\"\n                    fill={\n                      Array [\n                        2,\n                      ]\n                    }\n                    propList={\n                      Array [\n                        \"fill\",\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  />\n                </RNSVGGroup>\n              </RNSVGGroup>\n            </RNSVGSvgView>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 4,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#dc2626\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 18,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Try different from previous passwords.\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Input Password 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        isFocused={false}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"overflow\": \"hidden\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <TextInput\n          accessible={true}\n          allowFontScaling={true}\n          dataSet={Object {}}\n          editable={true}\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyPress={[Function]}\n          placeholder=\"Password\"\n          placeholderTextColor=\"#a3a3a3\"\n          rejectResponderTermination={true}\n          secureTextEntry={true}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"color\": \"#171717\",\n              \"flex\": 1,\n              \"fontFamily\": undefined,\n              \"fontSize\": 12,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"paddingBottom\": 0,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 0,\n              \"width\": \"100%\",\n            }\n          }\n          underlineColorAndroid=\"transparent\"\n        />\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 0,\n              \"flexDirection\": \"row\",\n              \"height\": \"100%\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 8,\n              \"width\": \"16.666%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 10,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 15,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Show\n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Input Primary 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        isFocused={false}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"marginLeft\": 12,\n            \"marginRight\": 12,\n            \"overflow\": \"hidden\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <TextInput\n          accessible={true}\n          allowFontScaling={true}\n          dataSet={Object {}}\n          editable={true}\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyPress={[Function]}\n          placeholder=\"Input\"\n          placeholderTextColor=\"#a3a3a3\"\n          rejectResponderTermination={true}\n          secureTextEntry={false}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"color\": \"#171717\",\n              \"flex\": 1,\n              \"fontFamily\": undefined,\n              \"fontSize\": 12,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 8,\n              \"width\": \"100%\",\n            }\n          }\n          underlineColorAndroid=\"transparent\"\n        />\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Input Size  1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"marginLeft\": \"auto\",\n          \"marginRight\": \"auto\",\n          \"maxWidth\": 300,\n          \"width\": \"75%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        isFocused={false}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"overflow\": \"hidden\",\n          }\n        }\n      >\n        <TextInput\n          accessible={true}\n          allowFontScaling={true}\n          dataSet={Object {}}\n          editable={true}\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyPress={[Function]}\n          placeholder=\"xs Input\"\n          placeholderTextColor=\"#a3a3a3\"\n          rejectResponderTermination={true}\n          secureTextEntry={false}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"color\": \"#171717\",\n              \"flex\": 1,\n              \"fontFamily\": undefined,\n              \"fontSize\": 10,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 8,\n              \"width\": \"100%\",\n            }\n          }\n          underlineColorAndroid=\"transparent\"\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        isFocused={false}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"overflow\": \"hidden\",\n          }\n        }\n      >\n        <TextInput\n          accessible={true}\n          allowFontScaling={true}\n          dataSet={Object {}}\n          editable={true}\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyPress={[Function]}\n          placeholder=\"sm Input\"\n          placeholderTextColor=\"#a3a3a3\"\n          rejectResponderTermination={true}\n          secureTextEntry={false}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"color\": \"#171717\",\n              \"flex\": 1,\n              \"fontFamily\": undefined,\n              \"fontSize\": 12,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 8,\n              \"width\": \"100%\",\n            }\n          }\n          underlineColorAndroid=\"transparent\"\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        isFocused={false}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"overflow\": \"hidden\",\n          }\n        }\n      >\n        <TextInput\n          accessible={true}\n          allowFontScaling={true}\n          dataSet={Object {}}\n          editable={true}\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyPress={[Function]}\n          placeholder=\"md Input\"\n          placeholderTextColor=\"#a3a3a3\"\n          rejectResponderTermination={true}\n          secureTextEntry={false}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"color\": \"#171717\",\n              \"flex\": 1,\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 8,\n              \"width\": \"100%\",\n            }\n          }\n          underlineColorAndroid=\"transparent\"\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        isFocused={false}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"overflow\": \"hidden\",\n          }\n        }\n      >\n        <TextInput\n          accessible={true}\n          allowFontScaling={true}\n          dataSet={Object {}}\n          editable={true}\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyPress={[Function]}\n          placeholder=\"lg Input\"\n          placeholderTextColor=\"#a3a3a3\"\n          rejectResponderTermination={true}\n          secureTextEntry={false}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"color\": \"#171717\",\n              \"flex\": 1,\n              \"fontFamily\": undefined,\n              \"fontSize\": 16,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 8,\n              \"width\": \"100%\",\n            }\n          }\n          underlineColorAndroid=\"transparent\"\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        isFocused={false}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"overflow\": \"hidden\",\n          }\n        }\n      >\n        <TextInput\n          accessible={true}\n          allowFontScaling={true}\n          dataSet={Object {}}\n          editable={true}\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyPress={[Function]}\n          placeholder=\"xl Input\"\n          placeholderTextColor=\"#a3a3a3\"\n          rejectResponderTermination={true}\n          secureTextEntry={false}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"color\": \"#171717\",\n              \"flex\": 1,\n              \"fontFamily\": undefined,\n              \"fontSize\": 18,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 8,\n              \"width\": \"100%\",\n            }\n          }\n          underlineColorAndroid=\"transparent\"\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        isFocused={false}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"overflow\": \"hidden\",\n          }\n        }\n      >\n        <TextInput\n          accessible={true}\n          allowFontScaling={true}\n          dataSet={Object {}}\n          editable={true}\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyPress={[Function]}\n          placeholder=\"2xl Input\"\n          placeholderTextColor=\"#a3a3a3\"\n          rejectResponderTermination={true}\n          secureTextEntry={false}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"color\": \"#171717\",\n              \"flex\": 1,\n              \"fontFamily\": undefined,\n              \"fontSize\": 20,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 8,\n              \"width\": \"100%\",\n            }\n          }\n          underlineColorAndroid=\"transparent\"\n        />\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Input Value Controlled 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        isFocused={false}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"overflow\": \"hidden\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <TextInput\n          accessible={true}\n          allowFontScaling={true}\n          dataSet={Object {}}\n          editable={true}\n          onBlur={[Function]}\n          onChangeText={[Function]}\n          onFocus={[Function]}\n          onKeyPress={[Function]}\n          placeholder=\"Value Controlled Input\"\n          placeholderTextColor=\"#a3a3a3\"\n          rejectResponderTermination={true}\n          secureTextEntry={false}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"color\": \"#171717\",\n              \"flex\": 1,\n              \"fontFamily\": undefined,\n              \"fontSize\": 12,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 8,\n              \"width\": \"100%\",\n            }\n          }\n          underlineColorAndroid=\"transparent\"\n          value=\"\"\n        />\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Input Variants 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"marginLeft\": \"auto\",\n          \"marginRight\": \"auto\",\n          \"maxWidth\": 300,\n          \"width\": \"75%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        isFocused={false}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"overflow\": \"hidden\",\n          }\n        }\n      >\n        <TextInput\n          accessible={true}\n          allowFontScaling={true}\n          dataSet={Object {}}\n          editable={true}\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyPress={[Function]}\n          placeholder=\"Outline\"\n          placeholderTextColor=\"#a3a3a3\"\n          rejectResponderTermination={true}\n          secureTextEntry={false}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"color\": \"#171717\",\n              \"flex\": 1,\n              \"fontFamily\": undefined,\n              \"fontSize\": 12,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 8,\n              \"width\": \"100%\",\n            }\n          }\n          underlineColorAndroid=\"transparent\"\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        isFocused={false}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#f5f5f5\",\n            \"borderColor\": \"#f5f5f5\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"overflow\": \"hidden\",\n          }\n        }\n      >\n        <TextInput\n          accessible={true}\n          allowFontScaling={true}\n          dataSet={Object {}}\n          editable={true}\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyPress={[Function]}\n          placeholder=\"Filled\"\n          placeholderTextColor=\"#a3a3a3\"\n          rejectResponderTermination={true}\n          secureTextEntry={false}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"color\": \"#171717\",\n              \"flex\": 1,\n              \"fontFamily\": undefined,\n              \"fontSize\": 12,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 8,\n              \"width\": \"100%\",\n            }\n          }\n          underlineColorAndroid=\"transparent\"\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        isFocused={false}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderBottomWidth\": 1,\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 0,\n            \"borderWidth\": 0,\n            \"flexDirection\": \"row\",\n            \"overflow\": \"hidden\",\n          }\n        }\n      >\n        <TextInput\n          accessible={true}\n          allowFontScaling={true}\n          dataSet={Object {}}\n          editable={true}\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyPress={[Function]}\n          placeholder=\"Underlined\"\n          placeholderTextColor=\"#a3a3a3\"\n          rejectResponderTermination={true}\n          secureTextEntry={false}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"color\": \"#171717\",\n              \"flex\": 1,\n              \"fontFamily\": undefined,\n              \"fontSize\": 12,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 0,\n              \"paddingRight\": 12,\n              \"paddingTop\": 8,\n              \"width\": \"100%\",\n            }\n          }\n          underlineColorAndroid=\"transparent\"\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        isFocused={false}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 0,\n            \"flexDirection\": \"row\",\n            \"overflow\": \"hidden\",\n          }\n        }\n      >\n        <TextInput\n          accessible={true}\n          allowFontScaling={true}\n          dataSet={Object {}}\n          editable={true}\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyPress={[Function]}\n          placeholder=\"Unstyled\"\n          placeholderTextColor=\"#a3a3a3\"\n          rejectResponderTermination={true}\n          secureTextEntry={false}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"color\": \"#171717\",\n              \"flex\": 1,\n              \"fontFamily\": undefined,\n              \"fontSize\": 12,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 8,\n              \"width\": \"100%\",\n            }\n          }\n          underlineColorAndroid=\"transparent\"\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        isFocused={false}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 9999,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"overflow\": \"hidden\",\n          }\n        }\n      >\n        <TextInput\n          accessible={true}\n          allowFontScaling={true}\n          dataSet={Object {}}\n          editable={true}\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyPress={[Function]}\n          placeholder=\"Round\"\n          placeholderTextColor=\"#a3a3a3\"\n          rejectResponderTermination={true}\n          secureTextEntry={false}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"color\": \"#171717\",\n              \"flex\": 1,\n              \"fontFamily\": undefined,\n              \"fontSize\": 12,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 8,\n              \"width\": \"100%\",\n            }\n          }\n          underlineColorAndroid=\"transparent\"\n        />\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots KeyboardAvoidingView Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      onLayout={[Function]}\n      style={\n        Object {\n          \"height\": 400,\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"display\": \"flex\",\n            \"justifyContent\": \"center\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flex\": 1,\n              \"justifyContent\": \"flex-end\",\n              \"maxWidth\": 300,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 24,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 30,\n                \"marginBottom\": 12,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Forgot Password\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#a3a3a3\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Not to worry! Enter email address associated with your account and we’ll send a link to reset your password.\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          />\n          <View\n            dataSet={Object {}}\n            isFocused={false}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"borderColor\": \"#d4d4d4\",\n                \"borderRadius\": 4,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"marginBottom\": 16,\n                \"marginTop\": 40,\n                \"overflow\": \"hidden\",\n              }\n            }\n          >\n            <TextInput\n              accessible={true}\n              allowFontScaling={true}\n              dataSet={Object {}}\n              editable={true}\n              onBlur={[Function]}\n              onFocus={[Function]}\n              onKeyPress={[Function]}\n              placeholder=\"Email Address\"\n              placeholderTextColor=\"#a3a3a3\"\n              rejectResponderTermination={true}\n              secureTextEntry={false}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"color\": \"#171717\",\n                  \"flex\": 1,\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"100%\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                  \"width\": \"100%\",\n                }\n              }\n              underlineColorAndroid=\"transparent\"\n            />\n          </View>\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          />\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"primary\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#0891b2\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": 16,\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#fafafa\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Proceed\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Link Composite Link Example 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"link\"\n        accessible={true}\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"flexDirection\": \"row\",\n            \"height\": \"auto\",\n            \"width\": \"auto\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": \"#f3f4f6\",\n              \"borderColor\": \"#d1d5db\",\n              \"borderRadius\": 8,\n              \"borderWidth\": 1,\n              \"elevation\": 4,\n              \"paddingBottom\": 20,\n              \"paddingLeft\": 20,\n              \"paddingRight\": 20,\n              \"paddingTop\": 20,\n              \"shadowColor\": \"#000000\",\n              \"shadowOffset\": Object {\n                \"height\": 2,\n                \"width\": 0,\n              },\n              \"shadowOpacity\": 0.23,\n              \"shadowRadius\": 2.62,\n              \"width\": 384,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <View\n              colorScheme=\"darkBlue\"\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#005db4\",\n                  \"borderColor\": \"transparent\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 2,\n                  \"paddingLeft\": 8,\n                  \"paddingRight\": 8,\n                  \"paddingTop\": 2,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#FFFFFF\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 12,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"500\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 18,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Open Source\n                </Text>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"flexGrow\": 1,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#1f2937\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 10,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 15,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              2020\n            </Text>\n          </View>\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#1f2937\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 30,\n                \"marginTop\": 12,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            NativeBase v3\n          </Text>\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#374151\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"marginTop\": 8,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            NativeBase is a component library that enables devs to build universal design systems.\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"display\": \"flex\",\n                \"flexDirection\": \"column\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#005db4\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"500\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 18,\n                  \"marginTop\": 8,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Read More\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Link Custom Function onPress Link 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": \"#6366f1\",\n            \"height\": 100,\n            \"width\": 100,\n          }\n        }\n      />\n      <View\n        accessibilityRole=\"link\"\n        accessible={true}\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"flexDirection\": \"row\",\n            \"height\": \"auto\",\n            \"marginTop\": 32,\n            \"width\": \"auto\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": \"#22d3ee\",\n              \"borderRadius\": 4,\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 8,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#FFFFFF\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Change Color\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Link Default Link 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"link\"\n        accessible={true}\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"flexDirection\": \"row\",\n            \"height\": \"auto\",\n            \"width\": \"auto\",\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"textDecorationLine\": \"underline\",\n            }\n          }\n        >\n          Click here to open documentation.\n        </Text>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Link External Link 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 14,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 21,\n            \"marginLeft\": 64,\n            \"marginRight\": 64,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        NativeBase is a component library that enables devs to build universal design systems. It is built on top of React Native, allowing you to develop apps for Android, iOS and the Web.\n         \n        <View\n          accessibilityRole=\"link\"\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n              \"height\": \"auto\",\n              \"marginTop\": -2,\n              \"width\": \"auto\",\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#60a5fa\",\n                \"fontFamily\": undefined,\n                \"fontSize\": undefined,\n                \"fontStyle\": undefined,\n                \"fontWeight\": undefined,\n                \"textDecorationLine\": \"underline\",\n              }\n            }\n          >\n            Read More\n          </Text>\n        </View>\n      </Text>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Link Underline Link 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"link\"\n        accessible={true}\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"flexDirection\": \"row\",\n            \"height\": \"auto\",\n            \"width\": \"auto\",\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#06b6d4\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 20,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 30,\n              \"textDecorationLine\": \"underline\",\n            }\n          }\n        >\n          Click me to open NativeBase website.\n        </Text>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots List Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"width\": \"80%\",\n        }\n      }\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 24,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 30,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Topics (Plain List)\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"borderColor\": \"#d4d4d8\",\n            \"borderWidth\": 1,\n            \"marginBottom\": 8,\n            \"marginTop\": 8,\n            \"paddingBottom\": 8,\n            \"paddingTop\": 8,\n          }\n        }\n      >\n        <View\n          accessibilityLabel=\"List-Item-1\"\n          accessibilityRole=\"text\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#d4d4d8\",\n              \"borderTopWidth\": 0,\n              \"flexDirection\": \"row\",\n              \"paddingBottom\": 8,\n              \"paddingTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"paddingLeft\": 8,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Education\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityLabel=\"List-Item-2\"\n          accessibilityRole=\"text\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#d4d4d8\",\n              \"flexDirection\": \"row\",\n              \"paddingBottom\": 8,\n              \"paddingTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"paddingLeft\": 8,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Health\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityLabel=\"List-Item-3\"\n          accessibilityRole=\"text\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#d4d4d8\",\n              \"flexDirection\": \"row\",\n              \"paddingBottom\": 8,\n              \"paddingTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"paddingLeft\": 8,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Office\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityLabel=\"List-Item-4\"\n          accessibilityRole=\"text\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#d4d4d8\",\n              \"flexDirection\": \"row\",\n              \"paddingBottom\": 8,\n              \"paddingTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"paddingLeft\": 8,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Sports\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots List List with Icon 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"borderColor\": \"#d4d4d8\",\n          \"borderWidth\": 1,\n          \"marginBottom\": 8,\n          \"marginTop\": 8,\n          \"paddingBottom\": 8,\n          \"paddingTop\": 8,\n          \"width\": 320,\n        }\n      }\n    >\n      <View\n        accessibilityLabel=\"List-Item-1\"\n        accessibilityRole=\"text\"\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d8\",\n            \"borderTopWidth\": 0,\n            \"flexDirection\": \"row\",\n            \"paddingBottom\": 8,\n            \"paddingTop\": 8,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"paddingLeft\": 8,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flex\": 1,\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Inbox\n          </Text>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n      <View\n        accessibilityLabel=\"List-Item-2\"\n        accessibilityRole=\"text\"\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d8\",\n            \"flexDirection\": \"row\",\n            \"paddingBottom\": 8,\n            \"paddingTop\": 8,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"paddingLeft\": 8,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flex\": 1,\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <Text />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Drafts\n          </Text>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n      <View\n        accessibilityLabel=\"List-Item-3\"\n        accessibilityRole=\"text\"\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d8\",\n            \"flexDirection\": \"row\",\n            \"paddingBottom\": 8,\n            \"paddingTop\": 8,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"paddingLeft\": 8,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flex\": 1,\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <Text\n            allowFontScaling={false}\n            dataSet={Object {}}\n            style={\n              Array [\n                Object {\n                  \"color\": undefined,\n                  \"fontSize\": 12,\n                },\n                Object {\n                  \"color\": \"#737373\",\n                  \"fontSize\": 20,\n                  \"height\": 20,\n                  \"lineHeight\": 20,\n                  \"marginRight\": 32,\n                  \"width\": 20,\n                },\n                Object {\n                  \"fontFamily\": \"ionicons\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"normal\",\n                },\n                Object {},\n              ]\n            }\n          >\n            \n          </Text>\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Graphs and stats\n          </Text>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n      <View\n        accessibilityLabel=\"List-Item-4\"\n        accessibilityRole=\"text\"\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d8\",\n            \"flexDirection\": \"row\",\n            \"paddingBottom\": 8,\n            \"paddingTop\": 8,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"paddingLeft\": 8,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flex\": 1,\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <Text\n            allowFontScaling={false}\n            dataSet={Object {}}\n            style={\n              Array [\n                Object {\n                  \"color\": undefined,\n                  \"fontSize\": 12,\n                },\n                Object {\n                  \"color\": \"#737373\",\n                  \"fontSize\": 20,\n                  \"height\": 20,\n                  \"lineHeight\": 20,\n                  \"marginRight\": 32,\n                  \"width\": 20,\n                },\n                Object {\n                  \"fontFamily\": \"ionicons\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"normal\",\n                },\n                Object {},\n              ]\n            }\n          >\n            \n          </Text>\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Attachments\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots List OrderedList 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"width\": \"80%\",\n        }\n      }\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 24,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 30,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Bill-#187 (Ordered List)\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"borderColor\": \"#d4d4d8\",\n            \"borderWidth\": 1,\n            \"marginBottom\": 8,\n            \"marginTop\": 8,\n            \"paddingBottom\": 8,\n            \"paddingTop\": 8,\n          }\n        }\n      >\n        <View\n          accessibilityLabel=\"List-Item-1\"\n          accessibilityRole=\"text\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#d4d4d8\",\n              \"borderTopWidth\": 0,\n              \"flexDirection\": \"row\",\n              \"paddingBottom\": 8,\n              \"paddingTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"paddingLeft\": 8,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"marginRight\": 8,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                1.\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Fruit Juice x 2\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityLabel=\"List-Item-2\"\n          accessibilityRole=\"text\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#d4d4d8\",\n              \"flexDirection\": \"row\",\n              \"paddingBottom\": 8,\n              \"paddingTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"paddingLeft\": 8,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"marginRight\": 8,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                2.\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Cheddar cheese - 200g\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityLabel=\"List-Item-3\"\n          accessibilityRole=\"text\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#d4d4d8\",\n              \"flexDirection\": \"row\",\n              \"paddingBottom\": 8,\n              \"paddingTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"paddingLeft\": 8,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"marginRight\": 8,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                3.\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Milk 1L x 2\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityLabel=\"List-Item-4\"\n          accessibilityRole=\"text\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#d4d4d8\",\n              \"flexDirection\": \"row\",\n              \"paddingBottom\": 8,\n              \"paddingTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"paddingLeft\": 8,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"marginRight\": 8,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                4.\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Brown Bread - 400g\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots List Pressable List Items 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"width\": \"80%\",\n        }\n      }\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": \"#22d3ee\",\n            \"color\": \"#FFFFFF\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 24,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 30,\n            \"paddingBottom\": 16,\n            \"paddingLeft\": 8,\n            \"paddingRight\": 8,\n            \"paddingTop\": 16,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Default Theme Color (Pressable List Items)\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"borderColor\": \"#d4d4d8\",\n            \"borderWidth\": 1,\n            \"marginBottom\": 8,\n            \"marginTop\": 8,\n            \"paddingBottom\": 0,\n            \"paddingTop\": 0,\n          }\n        }\n      >\n        <View\n          accessibilityLabel=\"List-Item-1\"\n          accessibilityRole=\"button\"\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#22d3ee\",\n              \"borderColor\": \"#d4d4d8\",\n              \"borderTopWidth\": 0,\n              \"flexDirection\": \"row\",\n              \"paddingBottom\": 16,\n              \"paddingTop\": 16,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"paddingLeft\": 8,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              primary.400\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        />\n        <View\n          accessibilityLabel=\"List-Item-2\"\n          accessibilityRole=\"button\"\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#f472b6\",\n              \"borderColor\": \"#d4d4d8\",\n              \"flexDirection\": \"row\",\n              \"paddingBottom\": 16,\n              \"paddingTop\": 16,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"paddingLeft\": 8,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              secondary.400\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        />\n        <View\n          accessibilityLabel=\"List-Item-3\"\n          accessibilityRole=\"button\"\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#34d399\",\n              \"borderColor\": \"#d4d4d8\",\n              \"flexDirection\": \"row\",\n              \"paddingBottom\": 16,\n              \"paddingTop\": 16,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"paddingLeft\": 8,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              emerald.400\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        />\n        <View\n          accessibilityLabel=\"List-Item-4\"\n          accessibilityRole=\"button\"\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#60a5fa\",\n              \"borderColor\": \"#d4d4d8\",\n              \"flexDirection\": \"row\",\n              \"paddingBottom\": 16,\n              \"paddingTop\": 16,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"paddingLeft\": 8,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              blue.400\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots List StylingList 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"width\": \"80%\",\n        }\n      }\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 24,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 30,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Styled List\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"borderColor\": \"#d4d4d8\",\n            \"borderWidth\": 1,\n            \"marginBottom\": 8,\n            \"marginTop\": 8,\n            \"paddingBottom\": 8,\n            \"paddingTop\": 8,\n          }\n        }\n      >\n        <View\n          accessibilityLabel=\"List-Item-11\"\n          accessibilityRole=\"text\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#d4d4d8\",\n              \"borderTopWidth\": 0,\n              \"flexDirection\": \"row\",\n              \"paddingBottom\": 8,\n              \"paddingTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"paddingLeft\": 8,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"marginRight\": 8,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#d97706\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                11.\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#d97706\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Ocean's \n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityLabel=\"List-Item-12\"\n          accessibilityRole=\"text\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#d4d4d8\",\n              \"flexDirection\": \"row\",\n              \"paddingBottom\": 8,\n              \"paddingTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"paddingLeft\": 8,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"marginRight\": 8,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fecaca\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                12.\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fecaca\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Ocean's \n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityLabel=\"List-Item-13\"\n          accessibilityRole=\"text\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#d4d4d8\",\n              \"flexDirection\": \"row\",\n              \"paddingBottom\": 8,\n              \"paddingTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"paddingLeft\": 8,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"marginRight\": 8,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#2dd4bf\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                13.\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#2dd4bf\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Ocean's\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots List UnorderedList 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"width\": \"80%\",\n        }\n      }\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 24,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 30,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        My Todos (Unordered List)\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"borderColor\": \"#d4d4d8\",\n            \"borderWidth\": 1,\n            \"marginBottom\": 8,\n            \"marginTop\": 8,\n            \"paddingBottom\": 8,\n            \"paddingTop\": 8,\n          }\n        }\n      >\n        <View\n          accessibilityLabel=\"List-Item-1\"\n          accessibilityRole=\"text\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#d4d4d8\",\n              \"borderTopWidth\": 0,\n              \"flexDirection\": \"row\",\n              \"paddingBottom\": 8,\n              \"paddingTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"paddingLeft\": 8,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Array [\n                  Object {\n                    \"marginRight\": 8,\n                  },\n                  Object {\n                    \"transform\": Array [\n                      Object {\n                        \"scale\": 1.5,\n                      },\n                    ],\n                  },\n                ]\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                •\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Get groceries by Tomorrow.\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityLabel=\"List-Item-2\"\n          accessibilityRole=\"text\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#d4d4d8\",\n              \"flexDirection\": \"row\",\n              \"paddingBottom\": 8,\n              \"paddingTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"paddingLeft\": 8,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Array [\n                  Object {\n                    \"marginRight\": 8,\n                  },\n                  Object {\n                    \"transform\": Array [\n                      Object {\n                        \"scale\": 1.5,\n                      },\n                    ],\n                  },\n                ]\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                •\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Book appointment with the Doc.\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityLabel=\"List-Item-3\"\n          accessibilityRole=\"text\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#d4d4d8\",\n              \"flexDirection\": \"row\",\n              \"paddingBottom\": 8,\n              \"paddingTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"paddingLeft\": 8,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Array [\n                  Object {\n                    \"marginRight\": 8,\n                  },\n                  Object {\n                    \"transform\": Array [\n                      Object {\n                        \"scale\": 1.5,\n                      },\n                    ],\n                  },\n                ]\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                •\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Bill payment - Electricity.\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityLabel=\"List-Item-4\"\n          accessibilityRole=\"text\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#d4d4d8\",\n              \"flexDirection\": \"row\",\n              \"paddingBottom\": 8,\n              \"paddingTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"paddingLeft\": 8,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Array [\n                  Object {\n                    \"marginRight\": 8,\n                  },\n                  Object {\n                    \"transform\": Array [\n                      Object {\n                        \"scale\": 1.5,\n                      },\n                    ],\n                  },\n                ]\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                •\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Pay Telephone Bill\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots List VirtualizedList  1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <RCTScrollView\n      data={Array []}\n      disableVirtualization={false}\n      getItem={[Function]}\n      getItemCount={[Function]}\n      horizontal={false}\n      initialNumToRender={4}\n      keyExtractor={[Function]}\n      maxToRenderPerBatch={10}\n      onContentSizeChange={[Function]}\n      onEndReachedThreshold={2}\n      onLayout={[Function]}\n      onMomentumScrollEnd={[Function]}\n      onScroll={[Function]}\n      onScrollBeginDrag={[Function]}\n      onScrollEndDrag={[Function]}\n      renderItem={[Function]}\n      scrollEventThrottle={50}\n      stickyHeaderIndices={Array []}\n      updateCellsBatchingPeriod={50}\n      windowSize={21}\n    >\n      <View>\n        <View\n          onLayout={[Function]}\n          style={null}\n        >\n          <View\n            accessibilityLabel=\"List-Item-NaN\"\n            accessibilityRole=\"text\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#a7f3d0\",\n                \"borderColor\": \"#d4d4d8\",\n                \"borderRadius\": 6,\n                \"borderTopWidth\": 0,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": 8,\n                \"marginTop\": 8,\n                \"paddingBottom\": 8,\n                \"paddingLeft\": 16,\n                \"paddingRight\": 16,\n                \"paddingTop\": 8,\n                \"width\": 128,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"paddingLeft\": 8,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flex\": 1,\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 24,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 36,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Item 1\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          onLayout={[Function]}\n          style={null}\n        >\n          <View\n            accessibilityLabel=\"List-Item-NaN\"\n            accessibilityRole=\"text\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#a7f3d0\",\n                \"borderColor\": \"#d4d4d8\",\n                \"borderRadius\": 6,\n                \"borderTopWidth\": 0,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": 8,\n                \"marginTop\": 8,\n                \"paddingBottom\": 8,\n                \"paddingLeft\": 16,\n                \"paddingRight\": 16,\n                \"paddingTop\": 8,\n                \"width\": 128,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"paddingLeft\": 8,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flex\": 1,\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 24,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 36,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Item 2\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          onLayout={[Function]}\n          style={null}\n        >\n          <View\n            accessibilityLabel=\"List-Item-NaN\"\n            accessibilityRole=\"text\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#a7f3d0\",\n                \"borderColor\": \"#d4d4d8\",\n                \"borderRadius\": 6,\n                \"borderTopWidth\": 0,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": 8,\n                \"marginTop\": 8,\n                \"paddingBottom\": 8,\n                \"paddingLeft\": 16,\n                \"paddingRight\": 16,\n                \"paddingTop\": 8,\n                \"width\": 128,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"paddingLeft\": 8,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flex\": 1,\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 24,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 36,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Item 3\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          onLayout={[Function]}\n          style={null}\n        >\n          <View\n            accessibilityLabel=\"List-Item-NaN\"\n            accessibilityRole=\"text\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#a7f3d0\",\n                \"borderColor\": \"#d4d4d8\",\n                \"borderRadius\": 6,\n                \"borderTopWidth\": 0,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": 8,\n                \"marginTop\": 8,\n                \"paddingBottom\": 8,\n                \"paddingLeft\": 16,\n                \"paddingRight\": 16,\n                \"paddingTop\": 8,\n                \"width\": 128,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"paddingLeft\": 8,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flex\": 1,\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 24,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 36,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Item 4\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          style={\n            Object {\n              \"height\": 0,\n            }\n          }\n        />\n      </View>\n    </RCTScrollView>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Menu Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"width\": \"90%\",\n        }\n      }\n    >\n      <View\n        accessibilityLabel=\"More options menu\"\n        accessible={true}\n        aria-haspopup=\"menu\"\n        dataSet={Object {}}\n        focusable={true}\n        nativeID=\"139\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onKeyDownCapture={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={Object {}}\n      >\n        <RNSVGSvgView\n          accessibilityRole=\"image\"\n          align=\"xMidYMid\"\n          bbHeight={16}\n          bbWidth={16}\n          color={-9211021}\n          dataSet={Object {}}\n          focusable={false}\n          meetOrSlice={0}\n          minX={0}\n          minY={0}\n          stroke=\"\"\n          style={\n            Array [\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"borderWidth\": 0,\n              },\n              Object {\n                \"color\": \"#737373\",\n                \"height\": 16,\n                \"width\": 16,\n              },\n              Object {\n                \"flex\": 0,\n                \"height\": 16,\n                \"width\": 16,\n              },\n            ]\n          }\n          tintColor={-9211021}\n          vbHeight={24}\n          vbWidth={24}\n        >\n          <RNSVGGroup\n            propList={\n              Array [\n                \"stroke\",\n              ]\n            }\n            stroke={null}\n          >\n            <RNSVGGroup>\n              <RNSVGPath\n                d=\"M22 5H2V7.47961H22V5ZM22 10.4795H2V12.9591H22V10.4795ZM2 15.959H22V18.4386H2V15.959Z\"\n                fill={\n                  Array [\n                    2,\n                  ]\n                }\n                propList={\n                  Array [\n                    \"fill\",\n                    \"stroke\",\n                  ]\n                }\n                stroke={null}\n              />\n            </RNSVGGroup>\n          </RNSVGGroup>\n        </RNSVGSvgView>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Menu Group 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"width\": \"90%\",\n        }\n      }\n    >\n      <View\n        accessible={true}\n        aria-haspopup=\"menu\"\n        dataSet={Object {}}\n        focusable={true}\n        nativeID=\"141\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onKeyDownCapture={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={Object {}}\n      >\n        <RNSVGSvgView\n          accessibilityRole=\"image\"\n          align=\"xMidYMid\"\n          bbHeight={16}\n          bbWidth={16}\n          color={-9211021}\n          dataSet={Object {}}\n          focusable={false}\n          meetOrSlice={0}\n          minX={0}\n          minY={0}\n          stroke=\"\"\n          style={\n            Array [\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"borderWidth\": 0,\n              },\n              Object {\n                \"color\": \"#737373\",\n                \"height\": 16,\n                \"width\": 16,\n              },\n              Object {\n                \"flex\": 0,\n                \"height\": 16,\n                \"width\": 16,\n              },\n            ]\n          }\n          tintColor={-9211021}\n          vbHeight={24}\n          vbWidth={24}\n        >\n          <RNSVGGroup\n            propList={\n              Array [\n                \"stroke\",\n              ]\n            }\n            stroke={null}\n          >\n            <RNSVGGroup>\n              <RNSVGPath\n                d=\"M22 5H2V7.47961H22V5ZM22 10.4795H2V12.9591H22V10.4795ZM2 15.959H22V18.4386H2V15.959Z\"\n                fill={\n                  Array [\n                    2,\n                  ]\n                }\n                propList={\n                  Array [\n                    \"fill\",\n                    \"stroke\",\n                  ]\n                }\n                stroke={null}\n              />\n            </RNSVGGroup>\n          </RNSVGGroup>\n        </RNSVGSvgView>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Menu Menu positions 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignSelf\": \"flex-start\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        aria-haspopup=\"menu\"\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        nativeID=\"145\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onKeyDownCapture={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"alignSelf\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Menu\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 24,\n          }\n        }\n      />\n      <View\n        accessibilityLabel=\"Select a position for Menu\"\n        accessibilityRole=\"button\"\n        accessible={true}\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"marginLeft\": 0,\n            \"marginRight\": 0,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          isFocused={false}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#d4d4d4\",\n              \"borderRadius\": 4,\n              \"borderWidth\": 1,\n              \"flexDirection\": \"row\",\n              \"overflow\": \"hidden\",\n            }\n          }\n        >\n          <TextInput\n            accessible={true}\n            allowFontScaling={true}\n            aria-hidden={true}\n            dataSet={Object {}}\n            editable={false}\n            focusable={false}\n            importantForAccessibility=\"no\"\n            onBlur={[Function]}\n            onFocus={[Function]}\n            onKeyPress={[Function]}\n            placeholderTextColor=\"#a3a3a3\"\n            pointerEvents=\"none\"\n            rejectResponderTermination={true}\n            secureTextEntry={false}\n            selection={\n              Object {\n                \"start\": 0,\n              }\n            }\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"color\": \"#171717\",\n                \"flex\": 1,\n                \"fontFamily\": undefined,\n                \"fontSize\": 12,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"height\": \"100%\",\n                \"paddingBottom\": 8,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 8,\n                \"width\": \"100%\",\n              }\n            }\n            underlineColorAndroid=\"transparent\"\n            value=\"auto\"\n          />\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          />\n          <RNSVGSvgView\n            accessibilityRole=\"image\"\n            align=\"xMidYMid\"\n            bbHeight={24}\n            bbWidth={24}\n            color={-9211021}\n            dataSet={Object {}}\n            focusable={false}\n            meetOrSlice={0}\n            minX={0}\n            minY={0}\n            stroke=\"\"\n            style={\n              Array [\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderWidth\": 0,\n                },\n                Object {\n                  \"color\": \"#737373\",\n                  \"height\": 24,\n                  \"marginRight\": 12,\n                  \"paddingBottom\": 4,\n                  \"paddingLeft\": 4,\n                  \"paddingRight\": 4,\n                  \"paddingTop\": 4,\n                  \"width\": 24,\n                },\n                Object {\n                  \"flex\": 0,\n                  \"height\": 24,\n                  \"width\": 24,\n                },\n              ]\n            }\n            tintColor={-9211021}\n            vbHeight={24}\n            vbWidth={24}\n          >\n            <RNSVGGroup\n              propList={\n                Array [\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            >\n              <RNSVGGroup>\n                <RNSVGPath\n                  d=\"M20.2286 6L11.9973 14.3785L3.76862 6.00268L2 7.80293L12 18L22 7.80293L20.2286 6Z\"\n                  fill={\n                    Array [\n                      2,\n                    ]\n                  }\n                  propList={\n                    Array [\n                      \"fill\",\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                />\n              </RNSVGGroup>\n            </RNSVGGroup>\n          </RNSVGSvgView>\n        </View>\n      </View>\n      <Modal\n        animationType=\"slide\"\n        hardwareAccelerated={false}\n        onRequestClose={[Function]}\n        statusBarTranslucent={true}\n        transparent={true}\n        visible={false}\n      >\n        <View\n          pointerEvents=\"none\"\n          style={\n            Object {\n              \"bottom\": 0,\n              \"left\": 0,\n              \"opacity\": 0,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"top\": 0,\n              \"transform\": Array [\n                Object {\n                  \"translateY\": 0,\n                },\n                Object {\n                  \"translateX\": 0,\n                },\n                Object {\n                  \"scale\": 1,\n                },\n                Object {\n                  \"scaleX\": 1,\n                },\n                Object {\n                  \"scaleY\": 1,\n                },\n                Object {\n                  \"rotate\": \"0deg\",\n                },\n              ],\n            }\n          }\n        >\n          <View\n            accessible={false}\n            dataSet={Object {}}\n            focusable={true}\n            importantForAccessibility=\"no\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"backgroundColor\": \"rgb(0, 0, 0)\",\n                \"bottom\": 0,\n                \"left\": 0,\n                \"opacity\": 0.3,\n                \"position\": \"absolute\",\n                \"right\": 0,\n                \"top\": 0,\n              }\n            }\n          />\n        </View>\n        <View\n          pointerEvents=\"none\"\n          style={\n            Object {\n              \"bottom\": 0,\n              \"height\": \"100%\",\n              \"left\": 0,\n              \"opacity\": 1,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"transform\": Array [\n                Object {\n                  \"translateY\": 0,\n                },\n                Object {\n                  \"translateX\": 0,\n                },\n                Object {\n                  \"scale\": 1,\n                },\n                Object {\n                  \"scaleX\": 1,\n                },\n                Object {\n                  \"scaleY\": 1,\n                },\n                Object {\n                  \"rotate\": \"0deg\",\n                },\n              ],\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            onLayout={[Function]}\n            pointerEvents=\"box-none\"\n            style={\n              Object {\n                \"height\": \"100%\",\n                \"opacity\": 0,\n              }\n            }\n          >\n            <View\n              closeOnOverlayClick={true}\n              dataSet={Object {}}\n              pointerEvents=\"box-none\"\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"height\": \"100%\",\n                  \"justifyContent\": \"flex-end\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                onLayout={[Function]}\n                pointerEvents=\"box-none\"\n                style={\n                  Object {\n                    \"transform\": Array [\n                      Object {\n                        \"translateY\": 0,\n                      },\n                    ],\n                    \"width\": \"100%\",\n                  }\n                }\n              >\n                <View\n                  collapsable={false}\n                  dataSet={Object {}}\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                      \"paddingBottom\": 8,\n                      \"paddingTop\": 8,\n                    }\n                  }\n                />\n                <View\n                  accessibilityViewIsModal={true}\n                  aria-modal=\"true\"\n                  dataSet={Object {}}\n                  onAccessibilityEscape={[Function]}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"#fafafa\",\n                      \"borderRadius\": 0,\n                      \"borderTopLeftRadius\": 20,\n                      \"borderTopRightRadius\": 20,\n                      \"elevation\": 2,\n                      \"maxHeight\": 1184,\n                      \"overflow\": \"hidden\",\n                      \"paddingBottom\": 8,\n                      \"paddingLeft\": 8,\n                      \"paddingRight\": 8,\n                      \"paddingTop\": 8,\n                      \"shadowColor\": \"#000000\",\n                      \"shadowOffset\": Object {\n                        \"height\": 1,\n                        \"width\": 0,\n                      },\n                      \"shadowOpacity\": 0.2,\n                      \"shadowRadius\": 1.41,\n                      \"width\": \"100%\",\n                    }\n                  }\n                >\n                  <View\n                    collapsable={false}\n                    dataSet={Object {}}\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                        \"alignItems\": \"center\",\n                        \"marginTop\": -8,\n                        \"paddingBottom\": 12,\n                        \"paddingTop\": 12,\n                        \"width\": \"100%\",\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"backgroundColor\": \"#737373\",\n                          \"borderRadius\": 2,\n                          \"height\": 4,\n                          \"width\": 40,\n                        }\n                      }\n                    />\n                  </View>\n                  <RCTScrollView\n                    contentContainerStyle={\n                      Array [\n                        Object {},\n                        Object {\n                          \"dataSet\": Object {},\n                        },\n                        Object {},\n                      ]\n                    }\n                    data={\n                      Array [\n                        Object {\n                          \"label\": \"auto\",\n                          \"value\": \"auto\",\n                        },\n                        Object {\n                          \"label\": \"Top Left\",\n                          \"value\": \"top left\",\n                        },\n                        Object {\n                          \"label\": \"Top\",\n                          \"value\": \"top\",\n                        },\n                        Object {\n                          \"label\": \"Top Right\",\n                          \"value\": \"top right\",\n                        },\n                        Object {\n                          \"label\": \"Right Top\",\n                          \"value\": \"right top\",\n                        },\n                        Object {\n                          \"label\": \"Right\",\n                          \"value\": \"right\",\n                        },\n                        Object {\n                          \"label\": \"Right Bottom\",\n                          \"value\": \"right bottom\",\n                        },\n                        Object {\n                          \"label\": \"Bottom Left\",\n                          \"value\": \"bottom left\",\n                        },\n                        Object {\n                          \"label\": \"Bottom\",\n                          \"value\": \"bottom\",\n                        },\n                        Object {\n                          \"label\": \"Bottom Right\",\n                          \"value\": \"bottom right\",\n                        },\n                        Object {\n                          \"label\": \"Left Top\",\n                          \"value\": \"left top\",\n                        },\n                        Object {\n                          \"label\": \"Left\",\n                          \"value\": \"left\",\n                        },\n                        Object {\n                          \"label\": \"Left Bottom\",\n                          \"value\": \"left bottom\",\n                        },\n                      ]\n                    }\n                    dataSet={Object {}}\n                    disableVirtualization={false}\n                    getItem={[Function]}\n                    getItemCount={[Function]}\n                    horizontal={false}\n                    initialNumToRender={10}\n                    keyExtractor={[Function]}\n                    maxToRenderPerBatch={10}\n                    onContentSizeChange={[Function]}\n                    onEndReachedThreshold={2}\n                    onLayout={[Function]}\n                    onMomentumScrollEnd={[Function]}\n                    onScroll={[Function]}\n                    onScrollBeginDrag={[Function]}\n                    onScrollEndDrag={[Function]}\n                    removeClippedSubviews={true}\n                    renderItem={[Function]}\n                    scrollEventThrottle={50}\n                    stickyHeaderIndices={Array []}\n                    style={\n                      Object {\n                        \"width\": \"100%\",\n                      }\n                    }\n                    updateCellsBatchingPeriod={50}\n                    viewabilityConfigCallbackPairs={Array []}\n                    windowSize={21}\n                  >\n                    <View>\n                      <View\n                        onLayout={[Function]}\n                        style={null}\n                      >\n                        <View\n                          accessibilityState={\n                            Object {\n                              \"selected\": true,\n                            }\n                          }\n                          accessible={true}\n                          dataSet={Object {}}\n                          focusable={true}\n                          label=\"auto\"\n                          onBlur={[Function]}\n                          onClick={[Function]}\n                          onFocus={[Function]}\n                          onHoverIn={[Function]}\n                          onHoverOut={[Function]}\n                          onResponderGrant={[Function]}\n                          onResponderMove={[Function]}\n                          onResponderRelease={[Function]}\n                          onResponderTerminate={[Function]}\n                          onResponderTerminationRequest={[Function]}\n                          onStartShouldSetResponder={[Function]}\n                          style={\n                            Object {\n                              \"backgroundColor\": \"#0891b2\",\n                              \"justifyContent\": \"flex-start\",\n                              \"paddingBottom\": 16,\n                              \"paddingLeft\": 16,\n                              \"paddingRight\": 16,\n                              \"paddingTop\": 16,\n                              \"width\": \"100%\",\n                            }\n                          }\n                          value=\"auto\"\n                        >\n                          <View\n                            dataSet={Object {}}\n                            style={\n                              Object {\n                                \"flexDirection\": \"row\",\n                              }\n                            }\n                            test={true}\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={Object {}}\n                            >\n                              <Text\n                                dataSet={Object {}}\n                                style={\n                                  Object {\n                                    \"backgroundColor\": undefined,\n                                    \"color\": \"#171717\",\n                                    \"fontFamily\": undefined,\n                                    \"fontSize\": 16,\n                                    \"fontStyle\": \"normal\",\n                                    \"fontWeight\": \"400\",\n                                    \"letterSpacing\": 0,\n                                    \"lineHeight\": 24,\n                                    \"textDecorationLine\": undefined,\n                                  }\n                                }\n                              >\n                                auto\n                              </Text>\n                            </View>\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"width\": 16,\n                                }\n                              }\n                            />\n                            <RNSVGSvgView\n                              accessibilityRole=\"image\"\n                              align=\"xMidYMid\"\n                              bbHeight={16}\n                              bbWidth={16}\n                              color={-9211021}\n                              dataSet={Object {}}\n                              focusable={false}\n                              meetOrSlice={0}\n                              minX={0}\n                              minY={0}\n                              stroke=\"\"\n                              style={\n                                Array [\n                                  Object {\n                                    \"backgroundColor\": \"transparent\",\n                                    \"borderWidth\": 0,\n                                  },\n                                  Object {\n                                    \"color\": \"#737373\",\n                                    \"height\": 16,\n                                    \"width\": 16,\n                                  },\n                                  Object {\n                                    \"flex\": 0,\n                                    \"height\": 16,\n                                    \"width\": 16,\n                                  },\n                                ]\n                              }\n                              tintColor={-9211021}\n                              vbHeight={24}\n                              vbWidth={24}\n                            >\n                              <RNSVGGroup\n                                propList={\n                                  Array [\n                                    \"stroke\",\n                                  ]\n                                }\n                                stroke={null}\n                              >\n                                <RNSVGGroup>\n                                  <RNSVGPath\n                                    d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                                    fill={\n                                      Array [\n                                        2,\n                                      ]\n                                    }\n                                    propList={\n                                      Array [\n                                        \"fill\",\n                                        \"stroke\",\n                                      ]\n                                    }\n                                    stroke={null}\n                                  />\n                                </RNSVGGroup>\n                              </RNSVGGroup>\n                            </RNSVGSvgView>\n                          </View>\n                        </View>\n                      </View>\n                      <View\n                        onLayout={[Function]}\n                        style={null}\n                      >\n                        <View\n                          accessibilityState={\n                            Object {\n                              \"selected\": false,\n                            }\n                          }\n                          accessible={true}\n                          dataSet={Object {}}\n                          focusable={true}\n                          label=\"Top Left\"\n                          onBlur={[Function]}\n                          onClick={[Function]}\n                          onFocus={[Function]}\n                          onHoverIn={[Function]}\n                          onHoverOut={[Function]}\n                          onResponderGrant={[Function]}\n                          onResponderMove={[Function]}\n                          onResponderRelease={[Function]}\n                          onResponderTerminate={[Function]}\n                          onResponderTerminationRequest={[Function]}\n                          onStartShouldSetResponder={[Function]}\n                          style={\n                            Object {\n                              \"backgroundColor\": \"#fafafa\",\n                              \"justifyContent\": \"flex-start\",\n                              \"paddingBottom\": 16,\n                              \"paddingLeft\": 16,\n                              \"paddingRight\": 16,\n                              \"paddingTop\": 16,\n                              \"width\": \"100%\",\n                            }\n                          }\n                          value=\"top left\"\n                        >\n                          <View\n                            dataSet={Object {}}\n                            style={\n                              Object {\n                                \"flexDirection\": \"row\",\n                              }\n                            }\n                            test={true}\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={Object {}}\n                            >\n                              <Text\n                                dataSet={Object {}}\n                                style={\n                                  Object {\n                                    \"backgroundColor\": undefined,\n                                    \"color\": \"#171717\",\n                                    \"fontFamily\": undefined,\n                                    \"fontSize\": 16,\n                                    \"fontStyle\": \"normal\",\n                                    \"fontWeight\": \"400\",\n                                    \"letterSpacing\": 0,\n                                    \"lineHeight\": 24,\n                                    \"textDecorationLine\": undefined,\n                                  }\n                                }\n                              >\n                                Top Left\n                              </Text>\n                            </View>\n                          </View>\n                        </View>\n                      </View>\n                      <View\n                        onLayout={[Function]}\n                        style={null}\n                      >\n                        <View\n                          accessibilityState={\n                            Object {\n                              \"selected\": false,\n                            }\n                          }\n                          accessible={true}\n                          dataSet={Object {}}\n                          focusable={true}\n                          label=\"Top\"\n                          onBlur={[Function]}\n                          onClick={[Function]}\n                          onFocus={[Function]}\n                          onHoverIn={[Function]}\n                          onHoverOut={[Function]}\n                          onResponderGrant={[Function]}\n                          onResponderMove={[Function]}\n                          onResponderRelease={[Function]}\n                          onResponderTerminate={[Function]}\n                          onResponderTerminationRequest={[Function]}\n                          onStartShouldSetResponder={[Function]}\n                          style={\n                            Object {\n                              \"backgroundColor\": \"#fafafa\",\n                              \"justifyContent\": \"flex-start\",\n                              \"paddingBottom\": 16,\n                              \"paddingLeft\": 16,\n                              \"paddingRight\": 16,\n                              \"paddingTop\": 16,\n                              \"width\": \"100%\",\n                            }\n                          }\n                          value=\"top\"\n                        >\n                          <View\n                            dataSet={Object {}}\n                            style={\n                              Object {\n                                \"flexDirection\": \"row\",\n                              }\n                            }\n                            test={true}\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={Object {}}\n                            >\n                              <Text\n                                dataSet={Object {}}\n                                style={\n                                  Object {\n                                    \"backgroundColor\": undefined,\n                                    \"color\": \"#171717\",\n                                    \"fontFamily\": undefined,\n                                    \"fontSize\": 16,\n                                    \"fontStyle\": \"normal\",\n                                    \"fontWeight\": \"400\",\n                                    \"letterSpacing\": 0,\n                                    \"lineHeight\": 24,\n                                    \"textDecorationLine\": undefined,\n                                  }\n                                }\n                              >\n                                Top\n                              </Text>\n                            </View>\n                          </View>\n                        </View>\n                      </View>\n                      <View\n                        onLayout={[Function]}\n                        style={null}\n                      >\n                        <View\n                          accessibilityState={\n                            Object {\n                              \"selected\": false,\n                            }\n                          }\n                          accessible={true}\n                          dataSet={Object {}}\n                          focusable={true}\n                          label=\"Top Right\"\n                          onBlur={[Function]}\n                          onClick={[Function]}\n                          onFocus={[Function]}\n                          onHoverIn={[Function]}\n                          onHoverOut={[Function]}\n                          onResponderGrant={[Function]}\n                          onResponderMove={[Function]}\n                          onResponderRelease={[Function]}\n                          onResponderTerminate={[Function]}\n                          onResponderTerminationRequest={[Function]}\n                          onStartShouldSetResponder={[Function]}\n                          style={\n                            Object {\n                              \"backgroundColor\": \"#fafafa\",\n                              \"justifyContent\": \"flex-start\",\n                              \"paddingBottom\": 16,\n                              \"paddingLeft\": 16,\n                              \"paddingRight\": 16,\n                              \"paddingTop\": 16,\n                              \"width\": \"100%\",\n                            }\n                          }\n                          value=\"top right\"\n                        >\n                          <View\n                            dataSet={Object {}}\n                            style={\n                              Object {\n                                \"flexDirection\": \"row\",\n                              }\n                            }\n                            test={true}\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={Object {}}\n                            >\n                              <Text\n                                dataSet={Object {}}\n                                style={\n                                  Object {\n                                    \"backgroundColor\": undefined,\n                                    \"color\": \"#171717\",\n                                    \"fontFamily\": undefined,\n                                    \"fontSize\": 16,\n                                    \"fontStyle\": \"normal\",\n                                    \"fontWeight\": \"400\",\n                                    \"letterSpacing\": 0,\n                                    \"lineHeight\": 24,\n                                    \"textDecorationLine\": undefined,\n                                  }\n                                }\n                              >\n                                Top Right\n                              </Text>\n                            </View>\n                          </View>\n                        </View>\n                      </View>\n                      <View\n                        onLayout={[Function]}\n                        style={null}\n                      >\n                        <View\n                          accessibilityState={\n                            Object {\n                              \"selected\": false,\n                            }\n                          }\n                          accessible={true}\n                          dataSet={Object {}}\n                          focusable={true}\n                          label=\"Right Top\"\n                          onBlur={[Function]}\n                          onClick={[Function]}\n                          onFocus={[Function]}\n                          onHoverIn={[Function]}\n                          onHoverOut={[Function]}\n                          onResponderGrant={[Function]}\n                          onResponderMove={[Function]}\n                          onResponderRelease={[Function]}\n                          onResponderTerminate={[Function]}\n                          onResponderTerminationRequest={[Function]}\n                          onStartShouldSetResponder={[Function]}\n                          style={\n                            Object {\n                              \"backgroundColor\": \"#fafafa\",\n                              \"justifyContent\": \"flex-start\",\n                              \"paddingBottom\": 16,\n                              \"paddingLeft\": 16,\n                              \"paddingRight\": 16,\n                              \"paddingTop\": 16,\n                              \"width\": \"100%\",\n                            }\n                          }\n                          value=\"right top\"\n                        >\n                          <View\n                            dataSet={Object {}}\n                            style={\n                              Object {\n                                \"flexDirection\": \"row\",\n                              }\n                            }\n                            test={true}\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={Object {}}\n                            >\n                              <Text\n                                dataSet={Object {}}\n                                style={\n                                  Object {\n                                    \"backgroundColor\": undefined,\n                                    \"color\": \"#171717\",\n                                    \"fontFamily\": undefined,\n                                    \"fontSize\": 16,\n                                    \"fontStyle\": \"normal\",\n                                    \"fontWeight\": \"400\",\n                                    \"letterSpacing\": 0,\n                                    \"lineHeight\": 24,\n                                    \"textDecorationLine\": undefined,\n                                  }\n                                }\n                              >\n                                Right Top\n                              </Text>\n                            </View>\n                          </View>\n                        </View>\n                      </View>\n                      <View\n                        onLayout={[Function]}\n                        style={null}\n                      >\n                        <View\n                          accessibilityState={\n                            Object {\n                              \"selected\": false,\n                            }\n                          }\n                          accessible={true}\n                          dataSet={Object {}}\n                          focusable={true}\n                          label=\"Right\"\n                          onBlur={[Function]}\n                          onClick={[Function]}\n                          onFocus={[Function]}\n                          onHoverIn={[Function]}\n                          onHoverOut={[Function]}\n                          onResponderGrant={[Function]}\n                          onResponderMove={[Function]}\n                          onResponderRelease={[Function]}\n                          onResponderTerminate={[Function]}\n                          onResponderTerminationRequest={[Function]}\n                          onStartShouldSetResponder={[Function]}\n                          style={\n                            Object {\n                              \"backgroundColor\": \"#fafafa\",\n                              \"justifyContent\": \"flex-start\",\n                              \"paddingBottom\": 16,\n                              \"paddingLeft\": 16,\n                              \"paddingRight\": 16,\n                              \"paddingTop\": 16,\n                              \"width\": \"100%\",\n                            }\n                          }\n                          value=\"right\"\n                        >\n                          <View\n                            dataSet={Object {}}\n                            style={\n                              Object {\n                                \"flexDirection\": \"row\",\n                              }\n                            }\n                            test={true}\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={Object {}}\n                            >\n                              <Text\n                                dataSet={Object {}}\n                                style={\n                                  Object {\n                                    \"backgroundColor\": undefined,\n                                    \"color\": \"#171717\",\n                                    \"fontFamily\": undefined,\n                                    \"fontSize\": 16,\n                                    \"fontStyle\": \"normal\",\n                                    \"fontWeight\": \"400\",\n                                    \"letterSpacing\": 0,\n                                    \"lineHeight\": 24,\n                                    \"textDecorationLine\": undefined,\n                                  }\n                                }\n                              >\n                                Right\n                              </Text>\n                            </View>\n                          </View>\n                        </View>\n                      </View>\n                      <View\n                        onLayout={[Function]}\n                        style={null}\n                      >\n                        <View\n                          accessibilityState={\n                            Object {\n                              \"selected\": false,\n                            }\n                          }\n                          accessible={true}\n                          dataSet={Object {}}\n                          focusable={true}\n                          label=\"Right Bottom\"\n                          onBlur={[Function]}\n                          onClick={[Function]}\n                          onFocus={[Function]}\n                          onHoverIn={[Function]}\n                          onHoverOut={[Function]}\n                          onResponderGrant={[Function]}\n                          onResponderMove={[Function]}\n                          onResponderRelease={[Function]}\n                          onResponderTerminate={[Function]}\n                          onResponderTerminationRequest={[Function]}\n                          onStartShouldSetResponder={[Function]}\n                          style={\n                            Object {\n                              \"backgroundColor\": \"#fafafa\",\n                              \"justifyContent\": \"flex-start\",\n                              \"paddingBottom\": 16,\n                              \"paddingLeft\": 16,\n                              \"paddingRight\": 16,\n                              \"paddingTop\": 16,\n                              \"width\": \"100%\",\n                            }\n                          }\n                          value=\"right bottom\"\n                        >\n                          <View\n                            dataSet={Object {}}\n                            style={\n                              Object {\n                                \"flexDirection\": \"row\",\n                              }\n                            }\n                            test={true}\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={Object {}}\n                            >\n                              <Text\n                                dataSet={Object {}}\n                                style={\n                                  Object {\n                                    \"backgroundColor\": undefined,\n                                    \"color\": \"#171717\",\n                                    \"fontFamily\": undefined,\n                                    \"fontSize\": 16,\n                                    \"fontStyle\": \"normal\",\n                                    \"fontWeight\": \"400\",\n                                    \"letterSpacing\": 0,\n                                    \"lineHeight\": 24,\n                                    \"textDecorationLine\": undefined,\n                                  }\n                                }\n                              >\n                                Right Bottom\n                              </Text>\n                            </View>\n                          </View>\n                        </View>\n                      </View>\n                      <View\n                        onLayout={[Function]}\n                        style={null}\n                      >\n                        <View\n                          accessibilityState={\n                            Object {\n                              \"selected\": false,\n                            }\n                          }\n                          accessible={true}\n                          dataSet={Object {}}\n                          focusable={true}\n                          label=\"Bottom Left\"\n                          onBlur={[Function]}\n                          onClick={[Function]}\n                          onFocus={[Function]}\n                          onHoverIn={[Function]}\n                          onHoverOut={[Function]}\n                          onResponderGrant={[Function]}\n                          onResponderMove={[Function]}\n                          onResponderRelease={[Function]}\n                          onResponderTerminate={[Function]}\n                          onResponderTerminationRequest={[Function]}\n                          onStartShouldSetResponder={[Function]}\n                          style={\n                            Object {\n                              \"backgroundColor\": \"#fafafa\",\n                              \"justifyContent\": \"flex-start\",\n                              \"paddingBottom\": 16,\n                              \"paddingLeft\": 16,\n                              \"paddingRight\": 16,\n                              \"paddingTop\": 16,\n                              \"width\": \"100%\",\n                            }\n                          }\n                          value=\"bottom left\"\n                        >\n                          <View\n                            dataSet={Object {}}\n                            style={\n                              Object {\n                                \"flexDirection\": \"row\",\n                              }\n                            }\n                            test={true}\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={Object {}}\n                            >\n                              <Text\n                                dataSet={Object {}}\n                                style={\n                                  Object {\n                                    \"backgroundColor\": undefined,\n                                    \"color\": \"#171717\",\n                                    \"fontFamily\": undefined,\n                                    \"fontSize\": 16,\n                                    \"fontStyle\": \"normal\",\n                                    \"fontWeight\": \"400\",\n                                    \"letterSpacing\": 0,\n                                    \"lineHeight\": 24,\n                                    \"textDecorationLine\": undefined,\n                                  }\n                                }\n                              >\n                                Bottom Left\n                              </Text>\n                            </View>\n                          </View>\n                        </View>\n                      </View>\n                      <View\n                        onLayout={[Function]}\n                        style={null}\n                      >\n                        <View\n                          accessibilityState={\n                            Object {\n                              \"selected\": false,\n                            }\n                          }\n                          accessible={true}\n                          dataSet={Object {}}\n                          focusable={true}\n                          label=\"Bottom\"\n                          onBlur={[Function]}\n                          onClick={[Function]}\n                          onFocus={[Function]}\n                          onHoverIn={[Function]}\n                          onHoverOut={[Function]}\n                          onResponderGrant={[Function]}\n                          onResponderMove={[Function]}\n                          onResponderRelease={[Function]}\n                          onResponderTerminate={[Function]}\n                          onResponderTerminationRequest={[Function]}\n                          onStartShouldSetResponder={[Function]}\n                          style={\n                            Object {\n                              \"backgroundColor\": \"#fafafa\",\n                              \"justifyContent\": \"flex-start\",\n                              \"paddingBottom\": 16,\n                              \"paddingLeft\": 16,\n                              \"paddingRight\": 16,\n                              \"paddingTop\": 16,\n                              \"width\": \"100%\",\n                            }\n                          }\n                          value=\"bottom\"\n                        >\n                          <View\n                            dataSet={Object {}}\n                            style={\n                              Object {\n                                \"flexDirection\": \"row\",\n                              }\n                            }\n                            test={true}\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={Object {}}\n                            >\n                              <Text\n                                dataSet={Object {}}\n                                style={\n                                  Object {\n                                    \"backgroundColor\": undefined,\n                                    \"color\": \"#171717\",\n                                    \"fontFamily\": undefined,\n                                    \"fontSize\": 16,\n                                    \"fontStyle\": \"normal\",\n                                    \"fontWeight\": \"400\",\n                                    \"letterSpacing\": 0,\n                                    \"lineHeight\": 24,\n                                    \"textDecorationLine\": undefined,\n                                  }\n                                }\n                              >\n                                Bottom\n                              </Text>\n                            </View>\n                          </View>\n                        </View>\n                      </View>\n                      <View\n                        onLayout={[Function]}\n                        style={null}\n                      >\n                        <View\n                          accessibilityState={\n                            Object {\n                              \"selected\": false,\n                            }\n                          }\n                          accessible={true}\n                          dataSet={Object {}}\n                          focusable={true}\n                          label=\"Bottom Right\"\n                          onBlur={[Function]}\n                          onClick={[Function]}\n                          onFocus={[Function]}\n                          onHoverIn={[Function]}\n                          onHoverOut={[Function]}\n                          onResponderGrant={[Function]}\n                          onResponderMove={[Function]}\n                          onResponderRelease={[Function]}\n                          onResponderTerminate={[Function]}\n                          onResponderTerminationRequest={[Function]}\n                          onStartShouldSetResponder={[Function]}\n                          style={\n                            Object {\n                              \"backgroundColor\": \"#fafafa\",\n                              \"justifyContent\": \"flex-start\",\n                              \"paddingBottom\": 16,\n                              \"paddingLeft\": 16,\n                              \"paddingRight\": 16,\n                              \"paddingTop\": 16,\n                              \"width\": \"100%\",\n                            }\n                          }\n                          value=\"bottom right\"\n                        >\n                          <View\n                            dataSet={Object {}}\n                            style={\n                              Object {\n                                \"flexDirection\": \"row\",\n                              }\n                            }\n                            test={true}\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={Object {}}\n                            >\n                              <Text\n                                dataSet={Object {}}\n                                style={\n                                  Object {\n                                    \"backgroundColor\": undefined,\n                                    \"color\": \"#171717\",\n                                    \"fontFamily\": undefined,\n                                    \"fontSize\": 16,\n                                    \"fontStyle\": \"normal\",\n                                    \"fontWeight\": \"400\",\n                                    \"letterSpacing\": 0,\n                                    \"lineHeight\": 24,\n                                    \"textDecorationLine\": undefined,\n                                  }\n                                }\n                              >\n                                Bottom Right\n                              </Text>\n                            </View>\n                          </View>\n                        </View>\n                      </View>\n                      <View\n                        style={\n                          Object {\n                            \"height\": 0,\n                          }\n                        }\n                      />\n                    </View>\n                  </RCTScrollView>\n                </View>\n              </View>\n            </View>\n          </View>\n        </View>\n      </Modal>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Menu MenuOptionsGroup 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"width\": \"90%\",\n        }\n      }\n    >\n      <View\n        accessible={true}\n        aria-haspopup=\"menu\"\n        dataSet={Object {}}\n        focusable={true}\n        nativeID=\"143\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onKeyDownCapture={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={Object {}}\n      >\n        <RNSVGSvgView\n          accessibilityRole=\"image\"\n          align=\"xMidYMid\"\n          bbHeight={16}\n          bbWidth={16}\n          color={-9211021}\n          dataSet={Object {}}\n          focusable={false}\n          meetOrSlice={0}\n          minX={0}\n          minY={0}\n          stroke=\"\"\n          style={\n            Array [\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"borderWidth\": 0,\n              },\n              Object {\n                \"color\": \"#737373\",\n                \"height\": 16,\n                \"width\": 16,\n              },\n              Object {\n                \"flex\": 0,\n                \"height\": 16,\n                \"width\": 16,\n              },\n            ]\n          }\n          tintColor={-9211021}\n          vbHeight={24}\n          vbWidth={24}\n        >\n          <RNSVGGroup\n            propList={\n              Array [\n                \"stroke\",\n              ]\n            }\n            stroke={null}\n          >\n            <RNSVGGroup>\n              <RNSVGPath\n                d=\"M22 5H2V7.47961H22V5ZM22 10.4795H2V12.9591H22V10.4795ZM2 15.959H22V18.4386H2V15.959Z\"\n                fill={\n                  Array [\n                    2,\n                  ]\n                }\n                propList={\n                  Array [\n                    \"fill\",\n                    \"stroke\",\n                  ]\n                }\n                stroke={null}\n              />\n            </RNSVGGroup>\n          </RNSVGGroup>\n        </RNSVGSvgView>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Modal Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Button\n            </Text>\n          </View>\n        </View>\n      </View>\n      <Modal\n        animationType=\"fade\"\n        hardwareAccelerated={false}\n        onRequestClose={[Function]}\n        statusBarTranslucent={true}\n        transparent={true}\n        visible={false}\n      >\n        <View\n          pointerEvents=\"none\"\n          style={\n            Object {\n              \"bottom\": 0,\n              \"left\": 0,\n              \"opacity\": 0,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"top\": 0,\n              \"transform\": Array [\n                Object {\n                  \"translateY\": 0,\n                },\n                Object {\n                  \"translateX\": 0,\n                },\n                Object {\n                  \"scale\": 1,\n                },\n                Object {\n                  \"scaleX\": 1,\n                },\n                Object {\n                  \"scaleY\": 1,\n                },\n                Object {\n                  \"rotate\": \"0deg\",\n                },\n              ],\n            }\n          }\n        >\n          <View\n            accessible={false}\n            dataSet={Object {}}\n            focusable={true}\n            importantForAccessibility=\"no\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"backgroundColor\": \"rgb(0, 0, 0)\",\n                \"bottom\": 0,\n                \"left\": 0,\n                \"opacity\": 0.3,\n                \"position\": \"absolute\",\n                \"right\": 0,\n                \"top\": 0,\n              }\n            }\n          />\n        </View>\n        <View\n          pointerEvents=\"none\"\n          style={\n            Object {\n              \"bottom\": 0,\n              \"left\": 0,\n              \"opacity\": 0,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"top\": 0,\n              \"transform\": Array [\n                Object {\n                  \"translateY\": 0,\n                },\n                Object {\n                  \"translateX\": 0,\n                },\n                Object {\n                  \"scale\": 1,\n                },\n                Object {\n                  \"scaleX\": 1,\n                },\n                Object {\n                  \"scaleY\": 1,\n                },\n                Object {\n                  \"rotate\": \"0deg\",\n                },\n              ],\n            }\n          }\n        >\n          <View\n            closeOnOverlayClick={true}\n            dataSet={Object {}}\n            pointerEvents=\"box-none\"\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"height\": \"100%\",\n                \"justifyContent\": \"center\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              accessibilityViewIsModal={true}\n              aria-modal=\"true\"\n              dataSet={Object {}}\n              onAccessibilityEscape={[Function]}\n              style={\n                Object {\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderRadius\": 8,\n                  \"elevation\": 2,\n                  \"maxHeight\": 1184,\n                  \"maxWidth\": 400,\n                  \"overflow\": \"hidden\",\n                  \"shadowColor\": \"#000000\",\n                  \"shadowOffset\": Object {\n                    \"height\": 1,\n                    \"width\": 0,\n                  },\n                  \"shadowOpacity\": 0.2,\n                  \"shadowRadius\": 1.41,\n                  \"width\": \"75%\",\n                }\n              }\n            >\n              <View\n                accessibilityRole=\"button\"\n                accessible={true}\n                colorScheme=\"coolGray\"\n                dataSet={Object {}}\n                focusable={true}\n                onBlur={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onHoverIn={[Function]}\n                onHoverOut={[Function]}\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                    \"borderRadius\": 4,\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 8,\n                    \"paddingRight\": 8,\n                    \"paddingTop\": 8,\n                    \"position\": \"absolute\",\n                    \"right\": 12,\n                    \"top\": 12,\n                    \"zIndex\": 1,\n                  }\n                }\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={16}\n                  bbWidth={16}\n                  color={-9211021}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#737373\",\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                    ]\n                  }\n                  tintColor={-9211021}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": \"#fafafa\",\n                    \"borderBottomWidth\": 1,\n                    \"borderColor\": \"#d4d4d4\",\n                    \"paddingBottom\": 16,\n                    \"paddingLeft\": 16,\n                    \"paddingRight\": 16,\n                    \"paddingTop\": 16,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 16,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"600\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 20,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Contact Us\n                </Text>\n              </View>\n              <RCTScrollView\n                contentContainerStyle={\n                  Array [\n                    Object {},\n                    Object {\n                      \"dataSet\": Object {},\n                    },\n                    Object {},\n                  ]\n                }\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <View>\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"paddingBottom\": 16,\n                        \"paddingLeft\": 16,\n                        \"paddingRight\": 16,\n                        \"paddingTop\": 16,\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"width\": \"100%\",\n                        }\n                      }\n                    >\n                      <View\n                        dataSet={Object {}}\n                        feedbackId=\"field-147-feedback\"\n                        hasFeedbackText={false}\n                        hasHelpText={false}\n                        helpTextId=\"field-147-helptext\"\n                        isDisabled={false}\n                        isInvalid={false}\n                        isReadOnly={false}\n                        isRequired={false}\n                        labelId=\"field-147-label\"\n                        nativeID=\"field-147-label\"\n                        setHasFeedbackText={[Function]}\n                        setHasHelpText={[Function]}\n                        style={\n                          Object {\n                            \"flexDirection\": \"row\",\n                            \"justifyContent\": \"flex-start\",\n                            \"marginBottom\": 4,\n                            \"marginTop\": 4,\n                          }\n                        }\n                      >\n                        <Text\n                          dataSet={Object {}}\n                          style={\n                            Object {\n                              \"backgroundColor\": undefined,\n                              \"color\": \"#737373\",\n                              \"fontFamily\": undefined,\n                              \"fontSize\": 14,\n                              \"fontStyle\": \"normal\",\n                              \"fontWeight\": \"500\",\n                              \"letterSpacing\": 0,\n                              \"lineHeight\": 21,\n                              \"textDecorationLine\": undefined,\n                            }\n                          }\n                        >\n                          Name\n                        </Text>\n                      </View>\n                      <View\n                        dataSet={Object {}}\n                        isFocused={false}\n                        style={\n                          Object {\n                            \"alignItems\": \"center\",\n                            \"borderColor\": \"#d4d4d4\",\n                            \"borderRadius\": 4,\n                            \"borderWidth\": 1,\n                            \"flexDirection\": \"row\",\n                            \"overflow\": \"hidden\",\n                          }\n                        }\n                      >\n                        <TextInput\n                          accessible={true}\n                          allowFontScaling={true}\n                          dataSet={Object {}}\n                          disabled={false}\n                          editable={true}\n                          isRequired={false}\n                          nativeID=\"field-147-input\"\n                          onBlur={[Function]}\n                          onFocus={[Function]}\n                          onKeyPress={[Function]}\n                          placeholderTextColor=\"#a3a3a3\"\n                          readOnly={false}\n                          rejectResponderTermination={true}\n                          required={false}\n                          secureTextEntry={false}\n                          style={\n                            Object {\n                              \"backgroundColor\": \"transparent\",\n                              \"color\": \"#171717\",\n                              \"flex\": 1,\n                              \"fontFamily\": undefined,\n                              \"fontSize\": 12,\n                              \"fontStyle\": \"normal\",\n                              \"fontWeight\": \"400\",\n                              \"height\": \"100%\",\n                              \"paddingBottom\": 8,\n                              \"paddingLeft\": 12,\n                              \"paddingRight\": 12,\n                              \"paddingTop\": 8,\n                              \"width\": \"100%\",\n                            }\n                          }\n                          underlineColorAndroid=\"transparent\"\n                        />\n                      </View>\n                    </View>\n                    <View\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"marginTop\": 12,\n                          \"width\": \"100%\",\n                        }\n                      }\n                    >\n                      <View\n                        dataSet={Object {}}\n                        feedbackId=\"field-148-feedback\"\n                        hasFeedbackText={false}\n                        hasHelpText={false}\n                        helpTextId=\"field-148-helptext\"\n                        isDisabled={false}\n                        isInvalid={false}\n                        isReadOnly={false}\n                        isRequired={false}\n                        labelId=\"field-148-label\"\n                        nativeID=\"field-148-label\"\n                        setHasFeedbackText={[Function]}\n                        setHasHelpText={[Function]}\n                        style={\n                          Object {\n                            \"flexDirection\": \"row\",\n                            \"justifyContent\": \"flex-start\",\n                            \"marginBottom\": 4,\n                            \"marginTop\": 4,\n                          }\n                        }\n                      >\n                        <Text\n                          dataSet={Object {}}\n                          style={\n                            Object {\n                              \"backgroundColor\": undefined,\n                              \"color\": \"#737373\",\n                              \"fontFamily\": undefined,\n                              \"fontSize\": 14,\n                              \"fontStyle\": \"normal\",\n                              \"fontWeight\": \"500\",\n                              \"letterSpacing\": 0,\n                              \"lineHeight\": 21,\n                              \"textDecorationLine\": undefined,\n                            }\n                          }\n                        >\n                          Email\n                        </Text>\n                      </View>\n                      <View\n                        dataSet={Object {}}\n                        isFocused={false}\n                        style={\n                          Object {\n                            \"alignItems\": \"center\",\n                            \"borderColor\": \"#d4d4d4\",\n                            \"borderRadius\": 4,\n                            \"borderWidth\": 1,\n                            \"flexDirection\": \"row\",\n                            \"overflow\": \"hidden\",\n                          }\n                        }\n                      >\n                        <TextInput\n                          accessible={true}\n                          allowFontScaling={true}\n                          dataSet={Object {}}\n                          disabled={false}\n                          editable={true}\n                          isRequired={false}\n                          nativeID=\"field-148-input\"\n                          onBlur={[Function]}\n                          onFocus={[Function]}\n                          onKeyPress={[Function]}\n                          placeholderTextColor=\"#a3a3a3\"\n                          readOnly={false}\n                          rejectResponderTermination={true}\n                          required={false}\n                          secureTextEntry={false}\n                          style={\n                            Object {\n                              \"backgroundColor\": \"transparent\",\n                              \"color\": \"#171717\",\n                              \"flex\": 1,\n                              \"fontFamily\": undefined,\n                              \"fontSize\": 12,\n                              \"fontStyle\": \"normal\",\n                              \"fontWeight\": \"400\",\n                              \"height\": \"100%\",\n                              \"paddingBottom\": 8,\n                              \"paddingLeft\": 12,\n                              \"paddingRight\": 12,\n                              \"paddingTop\": 8,\n                              \"width\": \"100%\",\n                            }\n                          }\n                          underlineColorAndroid=\"transparent\"\n                        />\n                      </View>\n                    </View>\n                  </View>\n                </View>\n              </RCTScrollView>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": \"#fafafa\",\n                    \"borderColor\": \"#d4d4d4\",\n                    \"borderTopWidth\": 1,\n                    \"flexDirection\": \"row\",\n                    \"flexWrap\": \"wrap\",\n                    \"justifyContent\": \"flex-end\",\n                    \"paddingBottom\": 16,\n                    \"paddingLeft\": 16,\n                    \"paddingRight\": 16,\n                    \"paddingTop\": 16,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"flexDirection\": \"row\",\n                    }\n                  }\n                >\n                  <View\n                    accessibilityRole=\"button\"\n                    accessible={true}\n                    colorScheme=\"blueGray\"\n                    dataSet={Object {}}\n                    focusable={true}\n                    onBlur={[Function]}\n                    onClick={[Function]}\n                    onFocus={[Function]}\n                    onHoverIn={[Function]}\n                    onHoverOut={[Function]}\n                    onResponderGrant={[Function]}\n                    onResponderMove={[Function]}\n                    onResponderRelease={[Function]}\n                    onResponderTerminate={[Function]}\n                    onResponderTerminationRequest={[Function]}\n                    onStartShouldSetResponder={[Function]}\n                    style={\n                      Object {\n                        \"alignItems\": \"center\",\n                        \"borderRadius\": 4,\n                        \"flexDirection\": \"row\",\n                        \"justifyContent\": \"center\",\n                        \"paddingBottom\": 10,\n                        \"paddingLeft\": 12,\n                        \"paddingRight\": 12,\n                        \"paddingTop\": 10,\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"alignItems\": \"center\",\n                          \"flexDirection\": \"row\",\n                        }\n                      }\n                      test={true}\n                    >\n                      <View\n                        dataSet={Object {}}\n                        style={Object {}}\n                      >\n                        <Text\n                          dataSet={Object {}}\n                          style={\n                            Object {\n                              \"backgroundColor\": undefined,\n                              \"color\": \"#475569\",\n                              \"fontFamily\": undefined,\n                              \"fontSize\": 14,\n                              \"fontStyle\": \"normal\",\n                              \"fontWeight\": \"400\",\n                              \"letterSpacing\": 0,\n                              \"lineHeight\": 21,\n                              \"textDecorationLine\": undefined,\n                            }\n                          }\n                        >\n                          Cancel\n                        </Text>\n                      </View>\n                    </View>\n                  </View>\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"width\": 8,\n                      }\n                    }\n                  />\n                  <View\n                    accessibilityRole=\"button\"\n                    accessible={true}\n                    colorScheme=\"primary\"\n                    dataSet={Object {}}\n                    focusable={true}\n                    onBlur={[Function]}\n                    onClick={[Function]}\n                    onFocus={[Function]}\n                    onHoverIn={[Function]}\n                    onHoverOut={[Function]}\n                    onResponderGrant={[Function]}\n                    onResponderMove={[Function]}\n                    onResponderRelease={[Function]}\n                    onResponderTerminate={[Function]}\n                    onResponderTerminationRequest={[Function]}\n                    onStartShouldSetResponder={[Function]}\n                    style={\n                      Object {\n                        \"alignItems\": \"center\",\n                        \"backgroundColor\": \"#0891b2\",\n                        \"borderRadius\": 4,\n                        \"flexDirection\": \"row\",\n                        \"justifyContent\": \"center\",\n                        \"paddingBottom\": 10,\n                        \"paddingLeft\": 12,\n                        \"paddingRight\": 12,\n                        \"paddingTop\": 10,\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"alignItems\": \"center\",\n                          \"flexDirection\": \"row\",\n                        }\n                      }\n                      test={true}\n                    >\n                      <View\n                        dataSet={Object {}}\n                        style={Object {}}\n                      >\n                        <Text\n                          dataSet={Object {}}\n                          style={\n                            Object {\n                              \"backgroundColor\": undefined,\n                              \"color\": \"#fafafa\",\n                              \"fontFamily\": undefined,\n                              \"fontSize\": 14,\n                              \"fontStyle\": \"normal\",\n                              \"fontWeight\": \"400\",\n                              \"letterSpacing\": 0,\n                              \"lineHeight\": 21,\n                              \"textDecorationLine\": undefined,\n                            }\n                          }\n                        >\n                          Save\n                        </Text>\n                      </View>\n                    </View>\n                  </View>\n                </View>\n              </View>\n            </View>\n          </View>\n        </View>\n      </Modal>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Modal Modal Custom Backdrop 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Button\n            </Text>\n          </View>\n        </View>\n      </View>\n      <Modal\n        animationType=\"fade\"\n        hardwareAccelerated={false}\n        onRequestClose={[Function]}\n        statusBarTranslucent={true}\n        transparent={true}\n        visible={false}\n      >\n        <View\n          pointerEvents=\"none\"\n          style={\n            Object {\n              \"bottom\": 0,\n              \"left\": 0,\n              \"opacity\": 0,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"top\": 0,\n              \"transform\": Array [\n                Object {\n                  \"translateY\": 0,\n                },\n                Object {\n                  \"translateX\": 0,\n                },\n                Object {\n                  \"scale\": 1,\n                },\n                Object {\n                  \"scaleX\": 1,\n                },\n                Object {\n                  \"scaleY\": 1,\n                },\n                Object {\n                  \"rotate\": \"0deg\",\n                },\n              ],\n            }\n          }\n        >\n          <View\n            accessible={false}\n            dataSet={Object {}}\n            focusable={true}\n            importantForAccessibility=\"no\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"backgroundColor\": \"#fafaf9\",\n                \"bottom\": 0,\n                \"left\": 0,\n                \"opacity\": 0.3,\n                \"position\": \"absolute\",\n                \"right\": 0,\n                \"top\": 0,\n              }\n            }\n          />\n        </View>\n        <View\n          pointerEvents=\"none\"\n          style={\n            Object {\n              \"bottom\": 0,\n              \"left\": 0,\n              \"opacity\": 0,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"top\": 0,\n              \"transform\": Array [\n                Object {\n                  \"translateY\": 0,\n                },\n                Object {\n                  \"translateX\": 0,\n                },\n                Object {\n                  \"scale\": 1,\n                },\n                Object {\n                  \"scaleX\": 1,\n                },\n                Object {\n                  \"scaleY\": 1,\n                },\n                Object {\n                  \"rotate\": \"0deg\",\n                },\n              ],\n            }\n          }\n        >\n          <View\n            closeOnOverlayClick={true}\n            dataSet={Object {}}\n            pointerEvents=\"box-none\"\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"height\": \"100%\",\n                \"justifyContent\": \"center\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              accessibilityViewIsModal={true}\n              aria-modal=\"true\"\n              dataSet={Object {}}\n              onAccessibilityEscape={[Function]}\n              style={\n                Object {\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderRadius\": 8,\n                  \"elevation\": 2,\n                  \"maxHeight\": 212,\n                  \"maxWidth\": 350,\n                  \"overflow\": \"hidden\",\n                  \"shadowColor\": \"#000000\",\n                  \"shadowOffset\": Object {\n                    \"height\": 1,\n                    \"width\": 0,\n                  },\n                  \"shadowOpacity\": 0.2,\n                  \"shadowRadius\": 1.41,\n                  \"width\": \"75%\",\n                }\n              }\n            >\n              <View\n                accessibilityRole=\"button\"\n                accessible={true}\n                colorScheme=\"coolGray\"\n                dataSet={Object {}}\n                focusable={true}\n                onBlur={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onHoverIn={[Function]}\n                onHoverOut={[Function]}\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                    \"borderRadius\": 4,\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 8,\n                    \"paddingRight\": 8,\n                    \"paddingTop\": 8,\n                    \"position\": \"absolute\",\n                    \"right\": 12,\n                    \"top\": 12,\n                    \"zIndex\": 1,\n                  }\n                }\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={16}\n                  bbWidth={16}\n                  color={-9211021}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#737373\",\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                    ]\n                  }\n                  tintColor={-9211021}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": \"#fafafa\",\n                    \"borderBottomWidth\": 1,\n                    \"borderColor\": \"#d4d4d4\",\n                    \"paddingBottom\": 16,\n                    \"paddingLeft\": 16,\n                    \"paddingRight\": 16,\n                    \"paddingTop\": 16,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 16,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"600\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 20,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Return Policy\n                </Text>\n              </View>\n              <RCTScrollView\n                contentContainerStyle={\n                  Array [\n                    Object {},\n                    Object {\n                      \"dataSet\": Object {},\n                    },\n                    Object {},\n                  ]\n                }\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <View>\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"paddingBottom\": 16,\n                        \"paddingLeft\": 16,\n                        \"paddingRight\": 16,\n                        \"paddingTop\": 16,\n                      }\n                    }\n                  >\n                    <Text\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"backgroundColor\": undefined,\n                          \"color\": \"#171717\",\n                          \"fontFamily\": undefined,\n                          \"fontSize\": 14,\n                          \"fontStyle\": \"normal\",\n                          \"fontWeight\": \"400\",\n                          \"letterSpacing\": 0,\n                          \"lineHeight\": 21,\n                          \"textDecorationLine\": undefined,\n                        }\n                      }\n                    >\n                      Create a 'Return Request' under “My Orders” section of App/Website. Follow the screens that come up after tapping on the 'Return’ button. Please make a note of the Return ID that we generate at the end of the process. Keep the item ready for pick up or ship it to us basis on the return mode.\n                    </Text>\n                  </View>\n                </View>\n              </RCTScrollView>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": \"#fafafa\",\n                    \"borderColor\": \"#d4d4d4\",\n                    \"borderTopWidth\": 1,\n                    \"flexDirection\": \"row\",\n                    \"flexWrap\": \"wrap\",\n                    \"justifyContent\": \"flex-end\",\n                    \"paddingBottom\": 16,\n                    \"paddingLeft\": 16,\n                    \"paddingRight\": 16,\n                    \"paddingTop\": 16,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"flexDirection\": \"row\",\n                    }\n                  }\n                >\n                  <View\n                    accessibilityRole=\"button\"\n                    accessible={true}\n                    colorScheme=\"blueGray\"\n                    dataSet={Object {}}\n                    focusable={true}\n                    onBlur={[Function]}\n                    onClick={[Function]}\n                    onFocus={[Function]}\n                    onHoverIn={[Function]}\n                    onHoverOut={[Function]}\n                    onResponderGrant={[Function]}\n                    onResponderMove={[Function]}\n                    onResponderRelease={[Function]}\n                    onResponderTerminate={[Function]}\n                    onResponderTerminationRequest={[Function]}\n                    onStartShouldSetResponder={[Function]}\n                    style={\n                      Object {\n                        \"alignItems\": \"center\",\n                        \"borderRadius\": 4,\n                        \"flexDirection\": \"row\",\n                        \"justifyContent\": \"center\",\n                        \"paddingBottom\": 10,\n                        \"paddingLeft\": 12,\n                        \"paddingRight\": 12,\n                        \"paddingTop\": 10,\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"alignItems\": \"center\",\n                          \"flexDirection\": \"row\",\n                        }\n                      }\n                      test={true}\n                    >\n                      <View\n                        dataSet={Object {}}\n                        style={Object {}}\n                      >\n                        <Text\n                          dataSet={Object {}}\n                          style={\n                            Object {\n                              \"backgroundColor\": undefined,\n                              \"color\": \"#475569\",\n                              \"fontFamily\": undefined,\n                              \"fontSize\": 14,\n                              \"fontStyle\": \"normal\",\n                              \"fontWeight\": \"400\",\n                              \"letterSpacing\": 0,\n                              \"lineHeight\": 21,\n                              \"textDecorationLine\": undefined,\n                            }\n                          }\n                        >\n                          Cancel\n                        </Text>\n                      </View>\n                    </View>\n                  </View>\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"width\": 8,\n                      }\n                    }\n                  />\n                  <View\n                    accessibilityRole=\"button\"\n                    accessible={true}\n                    colorScheme=\"primary\"\n                    dataSet={Object {}}\n                    focusable={true}\n                    onBlur={[Function]}\n                    onClick={[Function]}\n                    onFocus={[Function]}\n                    onHoverIn={[Function]}\n                    onHoverOut={[Function]}\n                    onResponderGrant={[Function]}\n                    onResponderMove={[Function]}\n                    onResponderRelease={[Function]}\n                    onResponderTerminate={[Function]}\n                    onResponderTerminationRequest={[Function]}\n                    onStartShouldSetResponder={[Function]}\n                    style={\n                      Object {\n                        \"alignItems\": \"center\",\n                        \"backgroundColor\": \"#0891b2\",\n                        \"borderRadius\": 4,\n                        \"flexDirection\": \"row\",\n                        \"justifyContent\": \"center\",\n                        \"paddingBottom\": 10,\n                        \"paddingLeft\": 12,\n                        \"paddingRight\": 12,\n                        \"paddingTop\": 10,\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"alignItems\": \"center\",\n                          \"flexDirection\": \"row\",\n                        }\n                      }\n                      test={true}\n                    >\n                      <View\n                        dataSet={Object {}}\n                        style={Object {}}\n                      >\n                        <Text\n                          dataSet={Object {}}\n                          style={\n                            Object {\n                              \"backgroundColor\": undefined,\n                              \"color\": \"#fafafa\",\n                              \"fontFamily\": undefined,\n                              \"fontSize\": 14,\n                              \"fontStyle\": \"normal\",\n                              \"fontWeight\": \"400\",\n                              \"letterSpacing\": 0,\n                              \"lineHeight\": 21,\n                              \"textDecorationLine\": undefined,\n                            }\n                          }\n                        >\n                          Save\n                        </Text>\n                      </View>\n                    </View>\n                  </View>\n                </View>\n              </View>\n            </View>\n          </View>\n        </View>\n      </Modal>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Modal Modal Placement 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"flexDirection\": \"column\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Top\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Bottom\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Center\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Left\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Right\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n    <Modal\n      animationType=\"fade\"\n      hardwareAccelerated={false}\n      onRequestClose={[Function]}\n      statusBarTranslucent={true}\n      transparent={true}\n      visible={false}\n    >\n      <View\n        pointerEvents=\"none\"\n        style={\n          Object {\n            \"bottom\": 0,\n            \"left\": 0,\n            \"opacity\": 0,\n            \"position\": \"absolute\",\n            \"right\": 0,\n            \"top\": 0,\n            \"transform\": Array [\n              Object {\n                \"translateY\": 0,\n              },\n              Object {\n                \"translateX\": 0,\n              },\n              Object {\n                \"scale\": 1,\n              },\n              Object {\n                \"scaleX\": 1,\n              },\n              Object {\n                \"scaleY\": 1,\n              },\n              Object {\n                \"rotate\": \"0deg\",\n              },\n            ],\n          }\n        }\n      >\n        <View\n          accessible={false}\n          dataSet={Object {}}\n          focusable={true}\n          importantForAccessibility=\"no\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"backgroundColor\": \"rgb(0, 0, 0)\",\n              \"bottom\": 0,\n              \"left\": 0,\n              \"opacity\": 0.3,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"top\": 0,\n            }\n          }\n        />\n      </View>\n      <View\n        pointerEvents=\"none\"\n        style={\n          Object {\n            \"bottom\": 0,\n            \"left\": 0,\n            \"opacity\": 0,\n            \"position\": \"absolute\",\n            \"right\": 0,\n            \"top\": 0,\n            \"transform\": Array [\n              Object {\n                \"translateY\": 0,\n              },\n              Object {\n                \"translateX\": 0,\n              },\n              Object {\n                \"scale\": 1,\n              },\n              Object {\n                \"scaleX\": 1,\n              },\n              Object {\n                \"scaleY\": 1,\n              },\n              Object {\n                \"rotate\": \"0deg\",\n              },\n            ],\n          }\n        }\n      >\n        <View\n          closeOnOverlayClick={true}\n          dataSet={Object {}}\n          pointerEvents=\"box-none\"\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"height\": \"100%\",\n              \"justifyContent\": \"center\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            accessibilityViewIsModal={true}\n            aria-modal=\"true\"\n            dataSet={Object {}}\n            onAccessibilityEscape={[Function]}\n            style={\n              Object {\n                \"backgroundColor\": \"#fafafa\",\n                \"borderRadius\": 8,\n                \"elevation\": 2,\n                \"maxHeight\": 1184,\n                \"maxWidth\": 350,\n                \"overflow\": \"hidden\",\n                \"shadowColor\": \"#000000\",\n                \"shadowOffset\": Object {\n                  \"height\": 1,\n                  \"width\": 0,\n                },\n                \"shadowOpacity\": 0.2,\n                \"shadowRadius\": 1.41,\n                \"width\": \"75%\",\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"coolGray\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\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                  \"borderRadius\": 4,\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 8,\n                  \"paddingRight\": 8,\n                  \"paddingTop\": 8,\n                  \"position\": \"absolute\",\n                  \"right\": 12,\n                  \"top\": 12,\n                  \"zIndex\": 1,\n                }\n              }\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={16}\n                bbWidth={16}\n                color={-9211021}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#737373\",\n                      \"height\": 16,\n                      \"width\": 16,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 16,\n                      \"width\": 16,\n                    },\n                  ]\n                }\n                tintColor={-9211021}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderBottomWidth\": 1,\n                  \"borderColor\": \"#d4d4d4\",\n                  \"paddingBottom\": 16,\n                  \"paddingLeft\": 16,\n                  \"paddingRight\": 16,\n                  \"paddingTop\": 16,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 16,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"600\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 20,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Contact Us\n              </Text>\n            </View>\n            <RCTScrollView\n              contentContainerStyle={\n                Array [\n                  Object {},\n                  Object {\n                    \"dataSet\": Object {},\n                  },\n                  Object {},\n                ]\n              }\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"paddingBottom\": 16,\n                      \"paddingLeft\": 16,\n                      \"paddingRight\": 16,\n                      \"paddingTop\": 16,\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"width\": \"100%\",\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      feedbackId=\"field-154-feedback\"\n                      hasFeedbackText={false}\n                      hasHelpText={false}\n                      helpTextId=\"field-154-helptext\"\n                      isDisabled={false}\n                      isInvalid={false}\n                      isReadOnly={false}\n                      isRequired={false}\n                      labelId=\"field-154-label\"\n                      nativeID=\"field-154-label\"\n                      setHasFeedbackText={[Function]}\n                      setHasHelpText={[Function]}\n                      style={\n                        Object {\n                          \"flexDirection\": \"row\",\n                          \"justifyContent\": \"flex-start\",\n                          \"marginBottom\": 4,\n                          \"marginTop\": 4,\n                        }\n                      }\n                    >\n                      <Text\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"backgroundColor\": undefined,\n                            \"color\": \"#737373\",\n                            \"fontFamily\": undefined,\n                            \"fontSize\": 14,\n                            \"fontStyle\": \"normal\",\n                            \"fontWeight\": \"500\",\n                            \"letterSpacing\": 0,\n                            \"lineHeight\": 21,\n                            \"textDecorationLine\": undefined,\n                          }\n                        }\n                      >\n                        Name\n                      </Text>\n                    </View>\n                    <View\n                      dataSet={Object {}}\n                      isFocused={false}\n                      style={\n                        Object {\n                          \"alignItems\": \"center\",\n                          \"borderColor\": \"#d4d4d4\",\n                          \"borderRadius\": 4,\n                          \"borderWidth\": 1,\n                          \"flexDirection\": \"row\",\n                          \"overflow\": \"hidden\",\n                        }\n                      }\n                    >\n                      <TextInput\n                        accessible={true}\n                        allowFontScaling={true}\n                        dataSet={Object {}}\n                        disabled={false}\n                        editable={true}\n                        isRequired={false}\n                        nativeID=\"field-154-input\"\n                        onBlur={[Function]}\n                        onFocus={[Function]}\n                        onKeyPress={[Function]}\n                        placeholderTextColor=\"#a3a3a3\"\n                        readOnly={false}\n                        rejectResponderTermination={true}\n                        required={false}\n                        secureTextEntry={false}\n                        style={\n                          Object {\n                            \"backgroundColor\": \"transparent\",\n                            \"color\": \"#171717\",\n                            \"flex\": 1,\n                            \"fontFamily\": undefined,\n                            \"fontSize\": 12,\n                            \"fontStyle\": \"normal\",\n                            \"fontWeight\": \"400\",\n                            \"height\": \"100%\",\n                            \"paddingBottom\": 8,\n                            \"paddingLeft\": 12,\n                            \"paddingRight\": 12,\n                            \"paddingTop\": 8,\n                            \"width\": \"100%\",\n                          }\n                        }\n                        underlineColorAndroid=\"transparent\"\n                      />\n                    </View>\n                  </View>\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"marginTop\": 12,\n                        \"width\": \"100%\",\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      feedbackId=\"field-155-feedback\"\n                      hasFeedbackText={false}\n                      hasHelpText={false}\n                      helpTextId=\"field-155-helptext\"\n                      isDisabled={false}\n                      isInvalid={false}\n                      isReadOnly={false}\n                      isRequired={false}\n                      labelId=\"field-155-label\"\n                      nativeID=\"field-155-label\"\n                      setHasFeedbackText={[Function]}\n                      setHasHelpText={[Function]}\n                      style={\n                        Object {\n                          \"flexDirection\": \"row\",\n                          \"justifyContent\": \"flex-start\",\n                          \"marginBottom\": 4,\n                          \"marginTop\": 4,\n                        }\n                      }\n                    >\n                      <Text\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"backgroundColor\": undefined,\n                            \"color\": \"#737373\",\n                            \"fontFamily\": undefined,\n                            \"fontSize\": 14,\n                            \"fontStyle\": \"normal\",\n                            \"fontWeight\": \"500\",\n                            \"letterSpacing\": 0,\n                            \"lineHeight\": 21,\n                            \"textDecorationLine\": undefined,\n                          }\n                        }\n                      >\n                        Email\n                      </Text>\n                    </View>\n                    <View\n                      dataSet={Object {}}\n                      isFocused={false}\n                      style={\n                        Object {\n                          \"alignItems\": \"center\",\n                          \"borderColor\": \"#d4d4d4\",\n                          \"borderRadius\": 4,\n                          \"borderWidth\": 1,\n                          \"flexDirection\": \"row\",\n                          \"overflow\": \"hidden\",\n                        }\n                      }\n                    >\n                      <TextInput\n                        accessible={true}\n                        allowFontScaling={true}\n                        dataSet={Object {}}\n                        disabled={false}\n                        editable={true}\n                        isRequired={false}\n                        nativeID=\"field-155-input\"\n                        onBlur={[Function]}\n                        onFocus={[Function]}\n                        onKeyPress={[Function]}\n                        placeholderTextColor=\"#a3a3a3\"\n                        readOnly={false}\n                        rejectResponderTermination={true}\n                        required={false}\n                        secureTextEntry={false}\n                        style={\n                          Object {\n                            \"backgroundColor\": \"transparent\",\n                            \"color\": \"#171717\",\n                            \"flex\": 1,\n                            \"fontFamily\": undefined,\n                            \"fontSize\": 12,\n                            \"fontStyle\": \"normal\",\n                            \"fontWeight\": \"400\",\n                            \"height\": \"100%\",\n                            \"paddingBottom\": 8,\n                            \"paddingLeft\": 12,\n                            \"paddingRight\": 12,\n                            \"paddingTop\": 8,\n                            \"width\": \"100%\",\n                          }\n                        }\n                        underlineColorAndroid=\"transparent\"\n                      />\n                    </View>\n                  </View>\n                </View>\n              </View>\n            </RCTScrollView>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderTopWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"flexWrap\": \"wrap\",\n                  \"justifyContent\": \"flex-end\",\n                  \"paddingBottom\": 16,\n                  \"paddingLeft\": 16,\n                  \"paddingRight\": 16,\n                  \"paddingTop\": 16,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"flexDirection\": \"row\",\n                  }\n                }\n              >\n                <View\n                  accessibilityRole=\"button\"\n                  accessible={true}\n                  colorScheme=\"blueGray\"\n                  dataSet={Object {}}\n                  focusable={true}\n                  onBlur={[Function]}\n                  onClick={[Function]}\n                  onFocus={[Function]}\n                  onHoverIn={[Function]}\n                  onHoverOut={[Function]}\n                  onResponderGrant={[Function]}\n                  onResponderMove={[Function]}\n                  onResponderRelease={[Function]}\n                  onResponderTerminate={[Function]}\n                  onResponderTerminationRequest={[Function]}\n                  onStartShouldSetResponder={[Function]}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"borderRadius\": 4,\n                      \"flexDirection\": \"row\",\n                      \"justifyContent\": \"center\",\n                      \"paddingBottom\": 10,\n                      \"paddingLeft\": 12,\n                      \"paddingRight\": 12,\n                      \"paddingTop\": 10,\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"alignItems\": \"center\",\n                        \"flexDirection\": \"row\",\n                      }\n                    }\n                    test={true}\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={Object {}}\n                    >\n                      <Text\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"backgroundColor\": undefined,\n                            \"color\": \"#475569\",\n                            \"fontFamily\": undefined,\n                            \"fontSize\": 14,\n                            \"fontStyle\": \"normal\",\n                            \"fontWeight\": \"400\",\n                            \"letterSpacing\": 0,\n                            \"lineHeight\": 21,\n                            \"textDecorationLine\": undefined,\n                          }\n                        }\n                      >\n                        Cancel\n                      </Text>\n                    </View>\n                  </View>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 8,\n                    }\n                  }\n                />\n                <View\n                  accessibilityRole=\"button\"\n                  accessible={true}\n                  colorScheme=\"primary\"\n                  dataSet={Object {}}\n                  focusable={true}\n                  onBlur={[Function]}\n                  onClick={[Function]}\n                  onFocus={[Function]}\n                  onHoverIn={[Function]}\n                  onHoverOut={[Function]}\n                  onResponderGrant={[Function]}\n                  onResponderMove={[Function]}\n                  onResponderRelease={[Function]}\n                  onResponderTerminate={[Function]}\n                  onResponderTerminationRequest={[Function]}\n                  onStartShouldSetResponder={[Function]}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"#0891b2\",\n                      \"borderRadius\": 4,\n                      \"flexDirection\": \"row\",\n                      \"justifyContent\": \"center\",\n                      \"paddingBottom\": 10,\n                      \"paddingLeft\": 12,\n                      \"paddingRight\": 12,\n                      \"paddingTop\": 10,\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"alignItems\": \"center\",\n                        \"flexDirection\": \"row\",\n                      }\n                    }\n                    test={true}\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={Object {}}\n                    >\n                      <Text\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"backgroundColor\": undefined,\n                            \"color\": \"#fafafa\",\n                            \"fontFamily\": undefined,\n                            \"fontSize\": 14,\n                            \"fontStyle\": \"normal\",\n                            \"fontWeight\": \"400\",\n                            \"letterSpacing\": 0,\n                            \"lineHeight\": 21,\n                            \"textDecorationLine\": undefined,\n                          }\n                        }\n                      >\n                        Save\n                      </Text>\n                    </View>\n                  </View>\n                </View>\n              </View>\n            </View>\n          </View>\n        </View>\n      </View>\n    </Modal>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Modal Modal Ref Examples 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <Modal\n      animationType=\"fade\"\n      hardwareAccelerated={false}\n      onRequestClose={[Function]}\n      statusBarTranslucent={true}\n      transparent={true}\n      visible={false}\n    >\n      <View\n        pointerEvents=\"none\"\n        style={\n          Object {\n            \"bottom\": 0,\n            \"left\": 0,\n            \"opacity\": 0,\n            \"position\": \"absolute\",\n            \"right\": 0,\n            \"top\": 0,\n            \"transform\": Array [\n              Object {\n                \"translateY\": 0,\n              },\n              Object {\n                \"translateX\": 0,\n              },\n              Object {\n                \"scale\": 1,\n              },\n              Object {\n                \"scaleX\": 1,\n              },\n              Object {\n                \"scaleY\": 1,\n              },\n              Object {\n                \"rotate\": \"0deg\",\n              },\n            ],\n          }\n        }\n      >\n        <View\n          accessible={false}\n          dataSet={Object {}}\n          focusable={true}\n          importantForAccessibility=\"no\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"backgroundColor\": \"rgb(0, 0, 0)\",\n              \"bottom\": 0,\n              \"left\": 0,\n              \"opacity\": 0.3,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"top\": 0,\n            }\n          }\n        />\n      </View>\n      <View\n        pointerEvents=\"none\"\n        style={\n          Object {\n            \"bottom\": 0,\n            \"left\": 0,\n            \"opacity\": 0,\n            \"position\": \"absolute\",\n            \"right\": 0,\n            \"top\": 0,\n            \"transform\": Array [\n              Object {\n                \"translateY\": 0,\n              },\n              Object {\n                \"translateX\": 0,\n              },\n              Object {\n                \"scale\": 1,\n              },\n              Object {\n                \"scaleX\": 1,\n              },\n              Object {\n                \"scaleY\": 1,\n              },\n              Object {\n                \"rotate\": \"0deg\",\n              },\n            ],\n          }\n        }\n      >\n        <View\n          closeOnOverlayClick={true}\n          dataSet={Object {}}\n          pointerEvents=\"box-none\"\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"height\": \"100%\",\n              \"justifyContent\": \"center\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            accessibilityViewIsModal={true}\n            aria-modal=\"true\"\n            dataSet={Object {}}\n            onAccessibilityEscape={[Function]}\n            style={\n              Object {\n                \"backgroundColor\": \"#fafafa\",\n                \"borderRadius\": 8,\n                \"elevation\": 2,\n                \"maxHeight\": 1184,\n                \"maxWidth\": 380,\n                \"overflow\": \"hidden\",\n                \"shadowColor\": \"#000000\",\n                \"shadowOffset\": Object {\n                  \"height\": 1,\n                  \"width\": 0,\n                },\n                \"shadowOpacity\": 0.2,\n                \"shadowRadius\": 1.41,\n                \"width\": \"75%\",\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"coolGray\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\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                  \"borderRadius\": 4,\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 8,\n                  \"paddingRight\": 8,\n                  \"paddingTop\": 8,\n                  \"position\": \"absolute\",\n                  \"right\": 12,\n                  \"top\": 12,\n                  \"zIndex\": 1,\n                }\n              }\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={16}\n                bbWidth={16}\n                color={-9211021}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#737373\",\n                      \"height\": 16,\n                      \"width\": 16,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 16,\n                      \"width\": 16,\n                    },\n                  ]\n                }\n                tintColor={-9211021}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderBottomWidth\": 1,\n                  \"borderColor\": \"#d4d4d4\",\n                  \"paddingBottom\": 16,\n                  \"paddingLeft\": 16,\n                  \"paddingRight\": 16,\n                  \"paddingTop\": 16,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 16,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"600\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 20,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Contact Us\n              </Text>\n            </View>\n            <RCTScrollView\n              contentContainerStyle={\n                Array [\n                  Object {},\n                  Object {\n                    \"dataSet\": Object {},\n                  },\n                  Object {},\n                ]\n              }\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"paddingBottom\": 16,\n                      \"paddingLeft\": 16,\n                      \"paddingRight\": 16,\n                      \"paddingTop\": 16,\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"width\": \"100%\",\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      feedbackId=\"field-151-feedback\"\n                      hasFeedbackText={false}\n                      hasHelpText={false}\n                      helpTextId=\"field-151-helptext\"\n                      isDisabled={false}\n                      isInvalid={false}\n                      isReadOnly={false}\n                      isRequired={false}\n                      labelId=\"field-151-label\"\n                      nativeID=\"field-151-label\"\n                      setHasFeedbackText={[Function]}\n                      setHasHelpText={[Function]}\n                      style={\n                        Object {\n                          \"flexDirection\": \"row\",\n                          \"justifyContent\": \"flex-start\",\n                          \"marginBottom\": 4,\n                          \"marginTop\": 4,\n                        }\n                      }\n                    >\n                      <Text\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"backgroundColor\": undefined,\n                            \"color\": \"#737373\",\n                            \"fontFamily\": undefined,\n                            \"fontSize\": 14,\n                            \"fontStyle\": \"normal\",\n                            \"fontWeight\": \"500\",\n                            \"letterSpacing\": 0,\n                            \"lineHeight\": 21,\n                            \"textDecorationLine\": undefined,\n                          }\n                        }\n                      >\n                        Name\n                      </Text>\n                    </View>\n                    <View\n                      dataSet={Object {}}\n                      isFocused={false}\n                      style={\n                        Object {\n                          \"alignItems\": \"center\",\n                          \"borderColor\": \"#d4d4d4\",\n                          \"borderRadius\": 4,\n                          \"borderWidth\": 1,\n                          \"flexDirection\": \"row\",\n                          \"overflow\": \"hidden\",\n                        }\n                      }\n                    >\n                      <TextInput\n                        accessible={true}\n                        allowFontScaling={true}\n                        dataSet={Object {}}\n                        disabled={false}\n                        editable={true}\n                        isRequired={false}\n                        nativeID=\"field-151-input\"\n                        onBlur={[Function]}\n                        onFocus={[Function]}\n                        onKeyPress={[Function]}\n                        placeholderTextColor=\"#a3a3a3\"\n                        readOnly={false}\n                        rejectResponderTermination={true}\n                        required={false}\n                        secureTextEntry={false}\n                        style={\n                          Object {\n                            \"backgroundColor\": \"transparent\",\n                            \"color\": \"#171717\",\n                            \"flex\": 1,\n                            \"fontFamily\": undefined,\n                            \"fontSize\": 12,\n                            \"fontStyle\": \"normal\",\n                            \"fontWeight\": \"400\",\n                            \"height\": \"100%\",\n                            \"paddingBottom\": 8,\n                            \"paddingLeft\": 12,\n                            \"paddingRight\": 12,\n                            \"paddingTop\": 8,\n                            \"width\": \"100%\",\n                          }\n                        }\n                        underlineColorAndroid=\"transparent\"\n                      />\n                    </View>\n                  </View>\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"marginTop\": 12,\n                        \"width\": \"100%\",\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      feedbackId=\"field-152-feedback\"\n                      hasFeedbackText={false}\n                      hasHelpText={false}\n                      helpTextId=\"field-152-helptext\"\n                      isDisabled={false}\n                      isInvalid={false}\n                      isReadOnly={false}\n                      isRequired={false}\n                      labelId=\"field-152-label\"\n                      nativeID=\"field-152-label\"\n                      setHasFeedbackText={[Function]}\n                      setHasHelpText={[Function]}\n                      style={\n                        Object {\n                          \"flexDirection\": \"row\",\n                          \"justifyContent\": \"flex-start\",\n                          \"marginBottom\": 4,\n                          \"marginTop\": 4,\n                        }\n                      }\n                    >\n                      <Text\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"backgroundColor\": undefined,\n                            \"color\": \"#737373\",\n                            \"fontFamily\": undefined,\n                            \"fontSize\": 14,\n                            \"fontStyle\": \"normal\",\n                            \"fontWeight\": \"500\",\n                            \"letterSpacing\": 0,\n                            \"lineHeight\": 21,\n                            \"textDecorationLine\": undefined,\n                          }\n                        }\n                      >\n                        Email\n                      </Text>\n                    </View>\n                    <View\n                      dataSet={Object {}}\n                      isFocused={false}\n                      style={\n                        Object {\n                          \"alignItems\": \"center\",\n                          \"borderColor\": \"#d4d4d4\",\n                          \"borderRadius\": 4,\n                          \"borderWidth\": 1,\n                          \"flexDirection\": \"row\",\n                          \"overflow\": \"hidden\",\n                        }\n                      }\n                    >\n                      <TextInput\n                        accessible={true}\n                        allowFontScaling={true}\n                        dataSet={Object {}}\n                        disabled={false}\n                        editable={true}\n                        isRequired={false}\n                        nativeID=\"field-152-input\"\n                        onBlur={[Function]}\n                        onFocus={[Function]}\n                        onKeyPress={[Function]}\n                        placeholderTextColor=\"#a3a3a3\"\n                        readOnly={false}\n                        rejectResponderTermination={true}\n                        required={false}\n                        secureTextEntry={false}\n                        style={\n                          Object {\n                            \"backgroundColor\": \"transparent\",\n                            \"color\": \"#171717\",\n                            \"flex\": 1,\n                            \"fontFamily\": undefined,\n                            \"fontSize\": 12,\n                            \"fontStyle\": \"normal\",\n                            \"fontWeight\": \"400\",\n                            \"height\": \"100%\",\n                            \"paddingBottom\": 8,\n                            \"paddingLeft\": 12,\n                            \"paddingRight\": 12,\n                            \"paddingTop\": 8,\n                            \"width\": \"100%\",\n                          }\n                        }\n                        underlineColorAndroid=\"transparent\"\n                      />\n                    </View>\n                  </View>\n                </View>\n              </View>\n            </RCTScrollView>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderTopWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"flexWrap\": \"wrap\",\n                  \"justifyContent\": \"flex-end\",\n                  \"paddingBottom\": 16,\n                  \"paddingLeft\": 16,\n                  \"paddingRight\": 16,\n                  \"paddingTop\": 16,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"flexDirection\": \"row\",\n                  }\n                }\n              >\n                <View\n                  accessibilityRole=\"button\"\n                  accessible={true}\n                  colorScheme=\"blueGray\"\n                  dataSet={Object {}}\n                  focusable={true}\n                  onBlur={[Function]}\n                  onClick={[Function]}\n                  onFocus={[Function]}\n                  onHoverIn={[Function]}\n                  onHoverOut={[Function]}\n                  onResponderGrant={[Function]}\n                  onResponderMove={[Function]}\n                  onResponderRelease={[Function]}\n                  onResponderTerminate={[Function]}\n                  onResponderTerminationRequest={[Function]}\n                  onStartShouldSetResponder={[Function]}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"borderRadius\": 4,\n                      \"flexDirection\": \"row\",\n                      \"justifyContent\": \"center\",\n                      \"paddingBottom\": 10,\n                      \"paddingLeft\": 12,\n                      \"paddingRight\": 12,\n                      \"paddingTop\": 10,\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"alignItems\": \"center\",\n                        \"flexDirection\": \"row\",\n                      }\n                    }\n                    test={true}\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={Object {}}\n                    >\n                      <Text\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"backgroundColor\": undefined,\n                            \"color\": \"#475569\",\n                            \"fontFamily\": undefined,\n                            \"fontSize\": 14,\n                            \"fontStyle\": \"normal\",\n                            \"fontWeight\": \"400\",\n                            \"letterSpacing\": 0,\n                            \"lineHeight\": 21,\n                            \"textDecorationLine\": undefined,\n                          }\n                        }\n                      >\n                        Cancel\n                      </Text>\n                    </View>\n                  </View>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 8,\n                    }\n                  }\n                />\n                <View\n                  accessibilityRole=\"button\"\n                  accessible={true}\n                  colorScheme=\"primary\"\n                  dataSet={Object {}}\n                  focusable={true}\n                  onBlur={[Function]}\n                  onClick={[Function]}\n                  onFocus={[Function]}\n                  onHoverIn={[Function]}\n                  onHoverOut={[Function]}\n                  onResponderGrant={[Function]}\n                  onResponderMove={[Function]}\n                  onResponderRelease={[Function]}\n                  onResponderTerminate={[Function]}\n                  onResponderTerminationRequest={[Function]}\n                  onStartShouldSetResponder={[Function]}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"#0891b2\",\n                      \"borderRadius\": 4,\n                      \"flexDirection\": \"row\",\n                      \"justifyContent\": \"center\",\n                      \"paddingBottom\": 10,\n                      \"paddingLeft\": 12,\n                      \"paddingRight\": 12,\n                      \"paddingTop\": 10,\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"alignItems\": \"center\",\n                        \"flexDirection\": \"row\",\n                      }\n                    }\n                    test={true}\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={Object {}}\n                    >\n                      <Text\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"backgroundColor\": undefined,\n                            \"color\": \"#fafafa\",\n                            \"fontFamily\": undefined,\n                            \"fontSize\": 14,\n                            \"fontStyle\": \"normal\",\n                            \"fontWeight\": \"400\",\n                            \"letterSpacing\": 0,\n                            \"lineHeight\": 21,\n                            \"textDecorationLine\": undefined,\n                          }\n                        }\n                      >\n                        Save\n                      </Text>\n                    </View>\n                  </View>\n                </View>\n              </View>\n            </View>\n          </View>\n        </View>\n      </View>\n    </Modal>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Open Modal\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 16,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        isFocused={false}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"overflow\": \"hidden\",\n            \"width\": 128,\n          }\n        }\n      >\n        <TextInput\n          accessible={true}\n          allowFontScaling={true}\n          dataSet={Object {}}\n          editable={true}\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyPress={[Function]}\n          placeholder=\"Enter the OTP\"\n          placeholderTextColor=\"#334155\"\n          rejectResponderTermination={true}\n          secureTextEntry={false}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"color\": \"#171717\",\n              \"flex\": 1,\n              \"fontFamily\": undefined,\n              \"fontSize\": 12,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 8,\n              \"width\": \"100%\",\n            }\n          }\n          underlineColorAndroid=\"transparent\"\n        />\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Modal Modal Size Examples 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <Modal\n      animationType=\"fade\"\n      hardwareAccelerated={false}\n      onRequestClose={[Function]}\n      statusBarTranslucent={true}\n      transparent={true}\n      visible={false}\n    >\n      <View\n        pointerEvents=\"none\"\n        style={\n          Object {\n            \"bottom\": 0,\n            \"left\": 0,\n            \"opacity\": 0,\n            \"position\": \"absolute\",\n            \"right\": 0,\n            \"top\": 0,\n            \"transform\": Array [\n              Object {\n                \"translateY\": 0,\n              },\n              Object {\n                \"translateX\": 0,\n              },\n              Object {\n                \"scale\": 1,\n              },\n              Object {\n                \"scaleX\": 1,\n              },\n              Object {\n                \"scaleY\": 1,\n              },\n              Object {\n                \"rotate\": \"0deg\",\n              },\n            ],\n          }\n        }\n      >\n        <View\n          accessible={false}\n          dataSet={Object {}}\n          focusable={true}\n          importantForAccessibility=\"no\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"backgroundColor\": \"rgb(0, 0, 0)\",\n              \"bottom\": 0,\n              \"left\": 0,\n              \"opacity\": 0.3,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"top\": 0,\n            }\n          }\n        />\n      </View>\n      <View\n        pointerEvents=\"none\"\n        style={\n          Object {\n            \"bottom\": 0,\n            \"left\": 0,\n            \"opacity\": 0,\n            \"position\": \"absolute\",\n            \"right\": 0,\n            \"top\": 0,\n            \"transform\": Array [\n              Object {\n                \"translateY\": 0,\n              },\n              Object {\n                \"translateX\": 0,\n              },\n              Object {\n                \"scale\": 1,\n              },\n              Object {\n                \"scaleX\": 1,\n              },\n              Object {\n                \"scaleY\": 1,\n              },\n              Object {\n                \"rotate\": \"0deg\",\n              },\n            ],\n          }\n        }\n      >\n        <View\n          closeOnOverlayClick={true}\n          dataSet={Object {}}\n          pointerEvents=\"box-none\"\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"height\": \"100%\",\n              \"justifyContent\": \"center\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            accessibilityViewIsModal={true}\n            aria-modal=\"true\"\n            dataSet={Object {}}\n            onAccessibilityEscape={[Function]}\n            style={\n              Object {\n                \"backgroundColor\": \"#fafafa\",\n                \"borderRadius\": 8,\n                \"elevation\": 2,\n                \"maxHeight\": 212,\n                \"maxWidth\": 380,\n                \"overflow\": \"hidden\",\n                \"shadowColor\": \"#000000\",\n                \"shadowOffset\": Object {\n                  \"height\": 1,\n                  \"width\": 0,\n                },\n                \"shadowOpacity\": 0.2,\n                \"shadowRadius\": 1.41,\n                \"width\": \"75%\",\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"coolGray\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\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                  \"borderRadius\": 4,\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 8,\n                  \"paddingRight\": 8,\n                  \"paddingTop\": 8,\n                  \"position\": \"absolute\",\n                  \"right\": 12,\n                  \"top\": 12,\n                  \"zIndex\": 1,\n                }\n              }\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={16}\n                bbWidth={16}\n                color={-9211021}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#737373\",\n                      \"height\": 16,\n                      \"width\": 16,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 16,\n                      \"width\": 16,\n                    },\n                  ]\n                }\n                tintColor={-9211021}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderBottomWidth\": 1,\n                  \"borderColor\": \"#d4d4d4\",\n                  \"paddingBottom\": 16,\n                  \"paddingLeft\": 16,\n                  \"paddingRight\": 16,\n                  \"paddingTop\": 16,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 16,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"600\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 20,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Return Policy\n              </Text>\n            </View>\n            <RCTScrollView\n              contentContainerStyle={\n                Array [\n                  Object {},\n                  Object {\n                    \"dataSet\": Object {},\n                  },\n                  Object {},\n                ]\n              }\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"paddingBottom\": 16,\n                      \"paddingLeft\": 16,\n                      \"paddingRight\": 16,\n                      \"paddingTop\": 16,\n                    }\n                  }\n                >\n                  <RCTScrollView\n                    contentContainerStyle={\n                      Array [\n                        Object {},\n                        Object {\n                          \"dataSet\": Object {},\n                        },\n                        Object {},\n                      ]\n                    }\n                    dataSet={Object {}}\n                    style={Object {}}\n                  >\n                    <View>\n                      <Text\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"backgroundColor\": undefined,\n                            \"color\": \"#171717\",\n                            \"fontFamily\": undefined,\n                            \"fontSize\": 14,\n                            \"fontStyle\": \"normal\",\n                            \"fontWeight\": \"400\",\n                            \"letterSpacing\": 0,\n                            \"lineHeight\": 21,\n                            \"textDecorationLine\": undefined,\n                          }\n                        }\n                      >\n                        Create a 'Return Request' under “My Orders” section of App/Website. Follow the screens that come up after tapping on the 'Return’ button. Please make a note of the Return ID that we generate at the end of the process. Keep the item ready for pick up or ship it to us basis on the return mode.\n                      </Text>\n                    </View>\n                  </RCTScrollView>\n                </View>\n              </View>\n            </RCTScrollView>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderTopWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"flexWrap\": \"wrap\",\n                  \"justifyContent\": \"flex-end\",\n                  \"paddingBottom\": 16,\n                  \"paddingLeft\": 16,\n                  \"paddingRight\": 16,\n                  \"paddingTop\": 16,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"flexDirection\": \"row\",\n                  }\n                }\n              >\n                <View\n                  accessibilityRole=\"button\"\n                  accessible={true}\n                  colorScheme=\"blueGray\"\n                  dataSet={Object {}}\n                  focusable={true}\n                  onBlur={[Function]}\n                  onClick={[Function]}\n                  onFocus={[Function]}\n                  onHoverIn={[Function]}\n                  onHoverOut={[Function]}\n                  onResponderGrant={[Function]}\n                  onResponderMove={[Function]}\n                  onResponderRelease={[Function]}\n                  onResponderTerminate={[Function]}\n                  onResponderTerminationRequest={[Function]}\n                  onStartShouldSetResponder={[Function]}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"borderRadius\": 4,\n                      \"flexDirection\": \"row\",\n                      \"justifyContent\": \"center\",\n                      \"paddingBottom\": 10,\n                      \"paddingLeft\": 12,\n                      \"paddingRight\": 12,\n                      \"paddingTop\": 10,\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"alignItems\": \"center\",\n                        \"flexDirection\": \"row\",\n                      }\n                    }\n                    test={true}\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={Object {}}\n                    >\n                      <Text\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"backgroundColor\": undefined,\n                            \"color\": \"#475569\",\n                            \"fontFamily\": undefined,\n                            \"fontSize\": 14,\n                            \"fontStyle\": \"normal\",\n                            \"fontWeight\": \"400\",\n                            \"letterSpacing\": 0,\n                            \"lineHeight\": 21,\n                            \"textDecorationLine\": undefined,\n                          }\n                        }\n                      >\n                        Cancel\n                      </Text>\n                    </View>\n                  </View>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 8,\n                    }\n                  }\n                />\n                <View\n                  accessibilityRole=\"button\"\n                  accessible={true}\n                  colorScheme=\"primary\"\n                  dataSet={Object {}}\n                  focusable={true}\n                  onBlur={[Function]}\n                  onClick={[Function]}\n                  onFocus={[Function]}\n                  onHoverIn={[Function]}\n                  onHoverOut={[Function]}\n                  onResponderGrant={[Function]}\n                  onResponderMove={[Function]}\n                  onResponderRelease={[Function]}\n                  onResponderTerminate={[Function]}\n                  onResponderTerminationRequest={[Function]}\n                  onStartShouldSetResponder={[Function]}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"#0891b2\",\n                      \"borderRadius\": 4,\n                      \"flexDirection\": \"row\",\n                      \"justifyContent\": \"center\",\n                      \"paddingBottom\": 10,\n                      \"paddingLeft\": 12,\n                      \"paddingRight\": 12,\n                      \"paddingTop\": 10,\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"alignItems\": \"center\",\n                        \"flexDirection\": \"row\",\n                      }\n                    }\n                    test={true}\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={Object {}}\n                    >\n                      <Text\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"backgroundColor\": undefined,\n                            \"color\": \"#fafafa\",\n                            \"fontFamily\": undefined,\n                            \"fontSize\": 14,\n                            \"fontStyle\": \"normal\",\n                            \"fontWeight\": \"400\",\n                            \"letterSpacing\": 0,\n                            \"lineHeight\": 21,\n                            \"textDecorationLine\": undefined,\n                          }\n                        }\n                      >\n                        Save\n                      </Text>\n                    </View>\n                  </View>\n                </View>\n              </View>\n            </View>\n          </View>\n        </View>\n      </View>\n    </Modal>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      >\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Open xs Modal\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Open sm Modal\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Open md Modal\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Open lg Modal\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Open xl Modal\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Open full Modal\n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Modal Modal with Keyboard Avoid view 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <Modal\n      animationType=\"fade\"\n      hardwareAccelerated={false}\n      onRequestClose={[Function]}\n      statusBarTranslucent={true}\n      transparent={true}\n      visible={false}\n    >\n      <View\n        pointerEvents=\"none\"\n        style={\n          Object {\n            \"bottom\": 0,\n            \"left\": 0,\n            \"opacity\": 0,\n            \"position\": \"absolute\",\n            \"right\": 0,\n            \"top\": 0,\n            \"transform\": Array [\n              Object {\n                \"translateY\": 0,\n              },\n              Object {\n                \"translateX\": 0,\n              },\n              Object {\n                \"scale\": 1,\n              },\n              Object {\n                \"scaleX\": 1,\n              },\n              Object {\n                \"scaleY\": 1,\n              },\n              Object {\n                \"rotate\": \"0deg\",\n              },\n            ],\n          }\n        }\n      >\n        <View\n          accessible={false}\n          dataSet={Object {}}\n          focusable={true}\n          importantForAccessibility=\"no\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"backgroundColor\": \"rgb(0, 0, 0)\",\n              \"bottom\": 0,\n              \"left\": 0,\n              \"opacity\": 0.3,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"top\": 0,\n            }\n          }\n        />\n      </View>\n      <View\n        pointerEvents=\"none\"\n        style={\n          Object {\n            \"bottom\": 0,\n            \"left\": 0,\n            \"opacity\": 0,\n            \"position\": \"absolute\",\n            \"right\": 0,\n            \"top\": 0,\n            \"transform\": Array [\n              Object {\n                \"translateY\": 0,\n              },\n              Object {\n                \"translateX\": 0,\n              },\n              Object {\n                \"scale\": 1,\n              },\n              Object {\n                \"scaleX\": 1,\n              },\n              Object {\n                \"scaleY\": 1,\n              },\n              Object {\n                \"rotate\": \"0deg\",\n              },\n            ],\n          }\n        }\n      >\n        <View\n          closeOnOverlayClick={true}\n          dataSet={Object {}}\n          pointerEvents=\"box-none\"\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"bottom\": 16,\n              \"height\": \"100%\",\n              \"justifyContent\": \"flex-end\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            accessibilityViewIsModal={true}\n            aria-modal=\"true\"\n            dataSet={Object {}}\n            onAccessibilityEscape={[Function]}\n            style={\n              Object {\n                \"backgroundColor\": \"#fafafa\",\n                \"borderRadius\": 8,\n                \"elevation\": 2,\n                \"maxHeight\": 1184,\n                \"maxWidth\": 520,\n                \"overflow\": \"hidden\",\n                \"shadowColor\": \"#000000\",\n                \"shadowOffset\": Object {\n                  \"height\": 1,\n                  \"width\": 0,\n                },\n                \"shadowOpacity\": 0.2,\n                \"shadowRadius\": 1.41,\n                \"width\": \"80%\",\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"coolGray\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\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                  \"borderRadius\": 4,\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 8,\n                  \"paddingRight\": 8,\n                  \"paddingTop\": 8,\n                  \"position\": \"absolute\",\n                  \"right\": 12,\n                  \"top\": 12,\n                  \"zIndex\": 1,\n                }\n              }\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={16}\n                bbWidth={16}\n                color={-9211021}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#737373\",\n                      \"height\": 16,\n                      \"width\": 16,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 16,\n                      \"width\": 16,\n                    },\n                  ]\n                }\n                tintColor={-9211021}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderBottomWidth\": 1,\n                  \"borderColor\": \"#d4d4d4\",\n                  \"paddingBottom\": 16,\n                  \"paddingLeft\": 16,\n                  \"paddingRight\": 16,\n                  \"paddingTop\": 16,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 16,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"600\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 20,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Forgot Password?\n              </Text>\n            </View>\n            <RCTScrollView\n              contentContainerStyle={\n                Array [\n                  Object {},\n                  Object {\n                    \"dataSet\": Object {},\n                  },\n                  Object {},\n                ]\n              }\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"paddingBottom\": 16,\n                      \"paddingLeft\": 16,\n                      \"paddingRight\": 16,\n                      \"paddingTop\": 16,\n                    }\n                  }\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#171717\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Enter email address and we'll send a link to reset your password.\n                  </Text>\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"marginTop\": 12,\n                        \"width\": \"100%\",\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      feedbackId=\"field-157-feedback\"\n                      hasFeedbackText={false}\n                      hasHelpText={false}\n                      helpTextId=\"field-157-helptext\"\n                      isDisabled={false}\n                      isInvalid={false}\n                      isReadOnly={false}\n                      isRequired={false}\n                      labelId=\"field-157-label\"\n                      nativeID=\"field-157-label\"\n                      setHasFeedbackText={[Function]}\n                      setHasHelpText={[Function]}\n                      style={\n                        Object {\n                          \"flexDirection\": \"row\",\n                          \"justifyContent\": \"flex-start\",\n                          \"marginBottom\": 4,\n                          \"marginTop\": 4,\n                        }\n                      }\n                    >\n                      <Text\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"backgroundColor\": undefined,\n                            \"color\": \"#737373\",\n                            \"fontFamily\": undefined,\n                            \"fontSize\": 14,\n                            \"fontStyle\": \"normal\",\n                            \"fontWeight\": \"500\",\n                            \"letterSpacing\": 0,\n                            \"lineHeight\": 21,\n                            \"textDecorationLine\": undefined,\n                          }\n                        }\n                      >\n                        Email\n                      </Text>\n                    </View>\n                    <View\n                      dataSet={Object {}}\n                      isFocused={false}\n                      style={\n                        Object {\n                          \"alignItems\": \"center\",\n                          \"borderColor\": \"#d4d4d4\",\n                          \"borderRadius\": 4,\n                          \"borderWidth\": 1,\n                          \"flexDirection\": \"row\",\n                          \"overflow\": \"hidden\",\n                        }\n                      }\n                    >\n                      <TextInput\n                        accessible={true}\n                        allowFontScaling={true}\n                        dataSet={Object {}}\n                        disabled={false}\n                        editable={true}\n                        isRequired={false}\n                        nativeID=\"field-157-input\"\n                        onBlur={[Function]}\n                        onFocus={[Function]}\n                        onKeyPress={[Function]}\n                        placeholderTextColor=\"#a3a3a3\"\n                        readOnly={false}\n                        rejectResponderTermination={true}\n                        required={false}\n                        secureTextEntry={false}\n                        style={\n                          Object {\n                            \"backgroundColor\": \"transparent\",\n                            \"color\": \"#171717\",\n                            \"flex\": 1,\n                            \"fontFamily\": undefined,\n                            \"fontSize\": 12,\n                            \"fontStyle\": \"normal\",\n                            \"fontWeight\": \"400\",\n                            \"height\": \"100%\",\n                            \"paddingBottom\": 8,\n                            \"paddingLeft\": 12,\n                            \"paddingRight\": 12,\n                            \"paddingTop\": 8,\n                            \"width\": \"100%\",\n                          }\n                        }\n                        underlineColorAndroid=\"transparent\"\n                      />\n                    </View>\n                  </View>\n                </View>\n              </View>\n            </RCTScrollView>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderTopWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"flexWrap\": \"wrap\",\n                  \"justifyContent\": \"flex-end\",\n                  \"paddingBottom\": 16,\n                  \"paddingLeft\": 16,\n                  \"paddingRight\": 16,\n                  \"paddingTop\": 16,\n                }\n              }\n            >\n              <View\n                accessibilityRole=\"button\"\n                accessible={true}\n                colorScheme=\"primary\"\n                dataSet={Object {}}\n                focusable={true}\n                onBlur={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onHoverIn={[Function]}\n                onHoverOut={[Function]}\n                onResponderGrant={[Function]}\n                onResponderMove={[Function]}\n                onResponderRelease={[Function]}\n                onResponderTerminate={[Function]}\n                onResponderTerminationRequest={[Function]}\n                onStartShouldSetResponder={[Function]}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#0891b2\",\n                    \"borderRadius\": 4,\n                    \"flex\": 1,\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"center\",\n                    \"paddingBottom\": 10,\n                    \"paddingLeft\": 12,\n                    \"paddingRight\": 12,\n                    \"paddingTop\": 10,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                    }\n                  }\n                  test={true}\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={Object {}}\n                  >\n                    <Text\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"backgroundColor\": undefined,\n                          \"color\": \"#fafafa\",\n                          \"fontFamily\": undefined,\n                          \"fontSize\": 14,\n                          \"fontStyle\": \"normal\",\n                          \"fontWeight\": \"400\",\n                          \"letterSpacing\": 0,\n                          \"lineHeight\": 21,\n                          \"textDecorationLine\": undefined,\n                        }\n                      }\n                    >\n                      Proceed\n                    </Text>\n                  </View>\n                </View>\n              </View>\n            </View>\n          </View>\n        </View>\n      </View>\n    </Modal>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n            \"width\": 104,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Open Modal\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 32,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 14,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 21,\n            \"textAlign\": \"center\",\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Open modal and focus on the input element to see the effect.\n      </Text>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Modal Multiple modal 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Button\n            </Text>\n          </View>\n        </View>\n      </View>\n      <Modal\n        animationType=\"fade\"\n        hardwareAccelerated={false}\n        onRequestClose={[Function]}\n        statusBarTranslucent={true}\n        transparent={true}\n        visible={false}\n      >\n        <View\n          pointerEvents=\"none\"\n          style={\n            Object {\n              \"bottom\": 0,\n              \"left\": 0,\n              \"opacity\": 0,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"top\": 0,\n              \"transform\": Array [\n                Object {\n                  \"translateY\": 0,\n                },\n                Object {\n                  \"translateX\": 0,\n                },\n                Object {\n                  \"scale\": 1,\n                },\n                Object {\n                  \"scaleX\": 1,\n                },\n                Object {\n                  \"scaleY\": 1,\n                },\n                Object {\n                  \"rotate\": \"0deg\",\n                },\n              ],\n            }\n          }\n        >\n          <View\n            accessible={false}\n            dataSet={Object {}}\n            focusable={true}\n            importantForAccessibility=\"no\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"backgroundColor\": \"rgb(0, 0, 0)\",\n                \"bottom\": 0,\n                \"left\": 0,\n                \"opacity\": 0.3,\n                \"position\": \"absolute\",\n                \"right\": 0,\n                \"top\": 0,\n              }\n            }\n          />\n        </View>\n        <View\n          pointerEvents=\"none\"\n          style={\n            Object {\n              \"bottom\": 0,\n              \"left\": 0,\n              \"opacity\": 0,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"top\": 0,\n              \"transform\": Array [\n                Object {\n                  \"translateY\": 0,\n                },\n                Object {\n                  \"translateX\": 0,\n                },\n                Object {\n                  \"scale\": 1,\n                },\n                Object {\n                  \"scaleX\": 1,\n                },\n                Object {\n                  \"scaleY\": 1,\n                },\n                Object {\n                  \"rotate\": \"0deg\",\n                },\n              ],\n            }\n          }\n        >\n          <View\n            closeOnOverlayClick={true}\n            dataSet={Object {}}\n            pointerEvents=\"box-none\"\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"height\": \"100%\",\n                \"justifyContent\": \"center\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              accessibilityViewIsModal={true}\n              aria-modal=\"true\"\n              dataSet={Object {}}\n              onAccessibilityEscape={[Function]}\n              style={\n                Object {\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderRadius\": 8,\n                  \"elevation\": 2,\n                  \"maxHeight\": 1184,\n                  \"maxWidth\": 350,\n                  \"overflow\": \"hidden\",\n                  \"shadowColor\": \"#000000\",\n                  \"shadowOffset\": Object {\n                    \"height\": 1,\n                    \"width\": 0,\n                  },\n                  \"shadowOpacity\": 0.2,\n                  \"shadowRadius\": 1.41,\n                  \"width\": \"80%\",\n                }\n              }\n            >\n              <View\n                accessibilityRole=\"button\"\n                accessible={true}\n                colorScheme=\"coolGray\"\n                dataSet={Object {}}\n                focusable={true}\n                onBlur={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onHoverIn={[Function]}\n                onHoverOut={[Function]}\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                    \"borderRadius\": 4,\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 8,\n                    \"paddingRight\": 8,\n                    \"paddingTop\": 8,\n                    \"position\": \"absolute\",\n                    \"right\": 12,\n                    \"top\": 12,\n                    \"zIndex\": 1,\n                  }\n                }\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={16}\n                  bbWidth={16}\n                  color={-9211021}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#737373\",\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                    ]\n                  }\n                  tintColor={-9211021}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": \"#fafafa\",\n                    \"borderBottomWidth\": 1,\n                    \"borderColor\": \"#d4d4d4\",\n                    \"paddingBottom\": 16,\n                    \"paddingLeft\": 16,\n                    \"paddingRight\": 16,\n                    \"paddingTop\": 16,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 16,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"600\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 20,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Order\n                </Text>\n              </View>\n              <RCTScrollView\n                contentContainerStyle={\n                  Array [\n                    Object {},\n                    Object {\n                      \"dataSet\": Object {},\n                    },\n                    Object {},\n                  ]\n                }\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <View>\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"paddingBottom\": 16,\n                        \"paddingLeft\": 16,\n                        \"paddingRight\": 16,\n                        \"paddingTop\": 16,\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={Object {}}\n                    >\n                      <View\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"alignItems\": \"center\",\n                            \"flexDirection\": \"row\",\n                            \"justifyContent\": \"space-between\",\n                          }\n                        }\n                      >\n                        <Text\n                          dataSet={Object {}}\n                          style={\n                            Object {\n                              \"backgroundColor\": undefined,\n                              \"color\": \"#171717\",\n                              \"fontFamily\": undefined,\n                              \"fontSize\": 14,\n                              \"fontStyle\": \"normal\",\n                              \"fontWeight\": \"500\",\n                              \"letterSpacing\": 0,\n                              \"lineHeight\": 21,\n                              \"textDecorationLine\": undefined,\n                            }\n                          }\n                        >\n                          Sub Total\n                        </Text>\n                        <View\n                          dataSet={Object {}}\n                          style={Object {}}\n                        />\n                        <Text\n                          dataSet={Object {}}\n                          style={\n                            Object {\n                              \"backgroundColor\": undefined,\n                              \"color\": \"#94a3b8\",\n                              \"fontFamily\": undefined,\n                              \"fontSize\": 14,\n                              \"fontStyle\": \"normal\",\n                              \"fontWeight\": \"400\",\n                              \"letterSpacing\": 0,\n                              \"lineHeight\": 21,\n                              \"textDecorationLine\": undefined,\n                            }\n                          }\n                        >\n                          $298.77\n                        </Text>\n                      </View>\n                      <View\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"height\": 12,\n                          }\n                        }\n                      />\n                      <View\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"alignItems\": \"center\",\n                            \"flexDirection\": \"row\",\n                            \"justifyContent\": \"space-between\",\n                          }\n                        }\n                      >\n                        <Text\n                          dataSet={Object {}}\n                          style={\n                            Object {\n                              \"backgroundColor\": undefined,\n                              \"color\": \"#171717\",\n                              \"fontFamily\": undefined,\n                              \"fontSize\": 14,\n                              \"fontStyle\": \"normal\",\n                              \"fontWeight\": \"500\",\n                              \"letterSpacing\": 0,\n                              \"lineHeight\": 21,\n                              \"textDecorationLine\": undefined,\n                            }\n                          }\n                        >\n                          Tax\n                        </Text>\n                        <View\n                          dataSet={Object {}}\n                          style={Object {}}\n                        />\n                        <Text\n                          dataSet={Object {}}\n                          style={\n                            Object {\n                              \"backgroundColor\": undefined,\n                              \"color\": \"#94a3b8\",\n                              \"fontFamily\": undefined,\n                              \"fontSize\": 14,\n                              \"fontStyle\": \"normal\",\n                              \"fontWeight\": \"400\",\n                              \"letterSpacing\": 0,\n                              \"lineHeight\": 21,\n                              \"textDecorationLine\": undefined,\n                            }\n                          }\n                        >\n                          $38.84\n                        </Text>\n                      </View>\n                      <View\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"height\": 12,\n                          }\n                        }\n                      />\n                      <View\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"alignItems\": \"center\",\n                            \"flexDirection\": \"row\",\n                            \"justifyContent\": \"space-between\",\n                          }\n                        }\n                      >\n                        <Text\n                          dataSet={Object {}}\n                          style={\n                            Object {\n                              \"backgroundColor\": undefined,\n                              \"color\": \"#171717\",\n                              \"fontFamily\": undefined,\n                              \"fontSize\": 14,\n                              \"fontStyle\": \"normal\",\n                              \"fontWeight\": \"500\",\n                              \"letterSpacing\": 0,\n                              \"lineHeight\": 21,\n                              \"textDecorationLine\": undefined,\n                            }\n                          }\n                        >\n                          Total Amount\n                        </Text>\n                        <View\n                          dataSet={Object {}}\n                          style={Object {}}\n                        />\n                        <Text\n                          dataSet={Object {}}\n                          style={\n                            Object {\n                              \"backgroundColor\": undefined,\n                              \"color\": \"#22c55e\",\n                              \"fontFamily\": undefined,\n                              \"fontSize\": 14,\n                              \"fontStyle\": \"normal\",\n                              \"fontWeight\": \"400\",\n                              \"letterSpacing\": 0,\n                              \"lineHeight\": 21,\n                              \"textDecorationLine\": undefined,\n                            }\n                          }\n                        >\n                          $337.61\n                        </Text>\n                      </View>\n                    </View>\n                  </View>\n                </View>\n              </RCTScrollView>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": \"#fafafa\",\n                    \"borderColor\": \"#d4d4d4\",\n                    \"borderTopWidth\": 1,\n                    \"flexDirection\": \"row\",\n                    \"flexWrap\": \"wrap\",\n                    \"justifyContent\": \"flex-end\",\n                    \"paddingBottom\": 16,\n                    \"paddingLeft\": 16,\n                    \"paddingRight\": 16,\n                    \"paddingTop\": 16,\n                  }\n                }\n              >\n                <View\n                  accessibilityRole=\"button\"\n                  accessible={true}\n                  colorScheme=\"primary\"\n                  dataSet={Object {}}\n                  focusable={true}\n                  onBlur={[Function]}\n                  onClick={[Function]}\n                  onFocus={[Function]}\n                  onHoverIn={[Function]}\n                  onHoverOut={[Function]}\n                  onResponderGrant={[Function]}\n                  onResponderMove={[Function]}\n                  onResponderRelease={[Function]}\n                  onResponderTerminate={[Function]}\n                  onResponderTerminationRequest={[Function]}\n                  onStartShouldSetResponder={[Function]}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"#0891b2\",\n                      \"borderRadius\": 4,\n                      \"flex\": 1,\n                      \"flexDirection\": \"row\",\n                      \"justifyContent\": \"center\",\n                      \"paddingBottom\": 10,\n                      \"paddingLeft\": 12,\n                      \"paddingRight\": 12,\n                      \"paddingTop\": 10,\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"alignItems\": \"center\",\n                        \"flexDirection\": \"row\",\n                      }\n                    }\n                    test={true}\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={Object {}}\n                    >\n                      <Text\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"backgroundColor\": undefined,\n                            \"color\": \"#fafafa\",\n                            \"fontFamily\": undefined,\n                            \"fontSize\": 14,\n                            \"fontStyle\": \"normal\",\n                            \"fontWeight\": \"400\",\n                            \"letterSpacing\": 0,\n                            \"lineHeight\": 21,\n                            \"textDecorationLine\": undefined,\n                          }\n                        }\n                      >\n                        Continue\n                      </Text>\n                    </View>\n                  </View>\n                </View>\n              </View>\n            </View>\n          </View>\n        </View>\n      </Modal>\n      <Modal\n        animationType=\"fade\"\n        hardwareAccelerated={false}\n        onRequestClose={[Function]}\n        statusBarTranslucent={true}\n        transparent={true}\n        visible={false}\n      >\n        <View\n          pointerEvents=\"none\"\n          style={\n            Object {\n              \"bottom\": 0,\n              \"left\": 0,\n              \"opacity\": 0,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"top\": 0,\n              \"transform\": Array [\n                Object {\n                  \"translateY\": 0,\n                },\n                Object {\n                  \"translateX\": 0,\n                },\n                Object {\n                  \"scale\": 1,\n                },\n                Object {\n                  \"scaleX\": 1,\n                },\n                Object {\n                  \"scaleY\": 1,\n                },\n                Object {\n                  \"rotate\": \"0deg\",\n                },\n              ],\n            }\n          }\n        >\n          <View\n            accessible={false}\n            dataSet={Object {}}\n            focusable={true}\n            importantForAccessibility=\"no\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"backgroundColor\": \"rgb(0, 0, 0)\",\n                \"bottom\": 0,\n                \"left\": 0,\n                \"opacity\": 0.3,\n                \"position\": \"absolute\",\n                \"right\": 0,\n                \"top\": 0,\n              }\n            }\n          />\n        </View>\n        <View\n          pointerEvents=\"none\"\n          style={\n            Object {\n              \"bottom\": 0,\n              \"left\": 0,\n              \"opacity\": 0,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"top\": 0,\n              \"transform\": Array [\n                Object {\n                  \"translateY\": 0,\n                },\n                Object {\n                  \"translateX\": 0,\n                },\n                Object {\n                  \"scale\": 1,\n                },\n                Object {\n                  \"scaleX\": 1,\n                },\n                Object {\n                  \"scaleY\": 1,\n                },\n                Object {\n                  \"rotate\": \"0deg\",\n                },\n              ],\n            }\n          }\n        >\n          <View\n            closeOnOverlayClick={true}\n            dataSet={Object {}}\n            pointerEvents=\"box-none\"\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"height\": \"100%\",\n                \"justifyContent\": \"center\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              accessibilityViewIsModal={true}\n              aria-modal=\"true\"\n              dataSet={Object {}}\n              onAccessibilityEscape={[Function]}\n              style={\n                Object {\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderRadius\": 8,\n                  \"elevation\": 2,\n                  \"maxHeight\": 1184,\n                  \"maxWidth\": 350,\n                  \"overflow\": \"hidden\",\n                  \"shadowColor\": \"#000000\",\n                  \"shadowOffset\": Object {\n                    \"height\": 1,\n                    \"width\": 0,\n                  },\n                  \"shadowOpacity\": 0.2,\n                  \"shadowRadius\": 1.41,\n                  \"width\": \"80%\",\n                }\n              }\n            >\n              <View\n                accessibilityRole=\"button\"\n                accessible={true}\n                colorScheme=\"coolGray\"\n                dataSet={Object {}}\n                focusable={true}\n                onBlur={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onHoverIn={[Function]}\n                onHoverOut={[Function]}\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                    \"borderRadius\": 4,\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 8,\n                    \"paddingRight\": 8,\n                    \"paddingTop\": 8,\n                    \"position\": \"absolute\",\n                    \"right\": 12,\n                    \"top\": 12,\n                    \"zIndex\": 1,\n                  }\n                }\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={16}\n                  bbWidth={16}\n                  color={-9211021}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#737373\",\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                    ]\n                  }\n                  tintColor={-9211021}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": \"#fafafa\",\n                    \"borderBottomWidth\": 1,\n                    \"borderColor\": \"#d4d4d4\",\n                    \"paddingBottom\": 16,\n                    \"paddingLeft\": 16,\n                    \"paddingRight\": 16,\n                    \"paddingTop\": 16,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 16,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"600\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 20,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Select Address\n                </Text>\n              </View>\n              <RCTScrollView\n                contentContainerStyle={\n                  Array [\n                    Object {},\n                    Object {\n                      \"dataSet\": Object {},\n                    },\n                    Object {},\n                  ]\n                }\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <View>\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"paddingBottom\": 16,\n                        \"paddingLeft\": 16,\n                        \"paddingRight\": 16,\n                        \"paddingTop\": 16,\n                      }\n                    }\n                  >\n                    <View\n                      accessibilityRole=\"radiogroup\"\n                      accessibilityState={\n                        Object {\n                          \"disabled\": undefined,\n                        }\n                      }\n                      dataSet={Object {}}\n                      defaultValue=\"address1\"\n                      name=\"address\"\n                      style={\n                        Object {\n                          \"alignItems\": \"flex-start\",\n                        }\n                      }\n                    >\n                      <View\n                        dataSet={Object {}}\n                        style={Object {}}\n                      >\n                        <View\n                          accessibilityRole=\"radio\"\n                          accessibilityState={\n                            Object {\n                              \"checked\": true,\n                              \"disabled\": false,\n                            }\n                          }\n                          accessible={true}\n                          checked={true}\n                          dataSet={Object {}}\n                          focusable={true}\n                          formControlContext={Object {}}\n                          onBlur={[Function]}\n                          onClick={[Function]}\n                          onFocus={[Function]}\n                          onHoverIn={[Function]}\n                          onHoverOut={[Function]}\n                          onResponderGrant={[Function]}\n                          onResponderMove={[Function]}\n                          onResponderRelease={[Function]}\n                          onResponderTerminate={[Function]}\n                          onResponderTerminationRequest={[Function]}\n                          onStartShouldSetResponder={[Function]}\n                          state={\n                            Object {\n                              \"lastFocusedValue\": null,\n                              \"name\": \"address\",\n                              \"selectedValue\": \"address1\",\n                              \"setLastFocusedValue\": [Function],\n                              \"setSelectedValue\": [Function],\n                            }\n                          }\n                          style={Object {}}\n                          value=\"address1\"\n                        >\n                          <View\n                            dataSet={Object {}}\n                            style={\n                              Object {\n                                \"alignItems\": \"center\",\n                                \"flexDirection\": \"row\",\n                              }\n                            }\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"alignItems\": \"center\",\n                                  \"display\": \"flex\",\n                                  \"justifyContent\": \"center\",\n                                }\n                              }\n                            >\n                              <View\n                                dataSet={Object {}}\n                                style={Object {}}\n                              />\n                              <View\n                                colorScheme=\"primary\"\n                                dataSet={Object {}}\n                                defaultIsChecked={false}\n                                formControlContext={Object {}}\n                                state={\n                                  Object {\n                                    \"lastFocusedValue\": null,\n                                    \"name\": \"address\",\n                                    \"selectedValue\": \"address1\",\n                                    \"setLastFocusedValue\": [Function],\n                                    \"setSelectedValue\": [Function],\n                                  }\n                                }\n                                style={\n                                  Object {\n                                    \"alignItems\": \"flex-start\",\n                                    \"backgroundColor\": \"#fafafa\",\n                                    \"borderColor\": \"#0891b2\",\n                                    \"borderRadius\": 9999,\n                                    \"borderWidth\": 2,\n                                    \"display\": \"flex\",\n                                    \"justifyContent\": \"center\",\n                                    \"paddingBottom\": 4,\n                                    \"paddingLeft\": 4,\n                                    \"paddingRight\": 4,\n                                    \"paddingTop\": 4,\n                                  }\n                                }\n                                value=\"address1\"\n                              >\n                                <RNSVGSvgView\n                                  accessibilityRole=\"image\"\n                                  align=\"xMidYMid\"\n                                  bbHeight={12}\n                                  bbWidth={12}\n                                  color={-16215630}\n                                  dataSet={Object {}}\n                                  focusable={false}\n                                  meetOrSlice={0}\n                                  minX={0}\n                                  minY={0}\n                                  stroke=\"\"\n                                  style={\n                                    Array [\n                                      Object {\n                                        \"backgroundColor\": \"transparent\",\n                                        \"borderWidth\": 0,\n                                      },\n                                      Object {\n                                        \"color\": \"#0891b2\",\n                                        \"height\": 12,\n                                        \"opacity\": 1,\n                                        \"width\": 12,\n                                      },\n                                      Object {\n                                        \"flex\": 0,\n                                        \"height\": 12,\n                                        \"width\": 12,\n                                      },\n                                    ]\n                                  }\n                                  tintColor={-16215630}\n                                  vbHeight={24}\n                                  vbWidth={24}\n                                >\n                                  <RNSVGGroup\n                                    opacity={1}\n                                    propList={\n                                      Array [\n                                        \"stroke\",\n                                      ]\n                                    }\n                                    stroke={null}\n                                  >\n                                    <RNSVGGroup>\n                                      <RNSVGPath\n                                        d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                                        fill={\n                                          Array [\n                                            2,\n                                          ]\n                                        }\n                                        propList={\n                                          Array [\n                                            \"fill\",\n                                            \"stroke\",\n                                          ]\n                                        }\n                                        stroke={null}\n                                      />\n                                    </RNSVGGroup>\n                                  </RNSVGGroup>\n                                </RNSVGSvgView>\n                              </View>\n                            </View>\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"width\": 8,\n                                }\n                              }\n                            />\n                            <Text\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"backgroundColor\": undefined,\n                                  \"color\": \"#171717\",\n                                  \"fontFamily\": undefined,\n                                  \"fontSize\": 14,\n                                  \"fontStyle\": \"normal\",\n                                  \"fontWeight\": \"400\",\n                                  \"letterSpacing\": 0,\n                                  \"lineHeight\": 21,\n                                  \"marginLeft\": 8,\n                                  \"marginTop\": -4,\n                                  \"textDecorationLine\": undefined,\n                                }\n                              }\n                            >\n                              4140 Parker Rd. Allentown, New Mexico 31134\n                            </Text>\n                          </View>\n                        </View>\n                        <View\n                          dataSet={Object {}}\n                          style={\n                            Object {\n                              \"height\": 12,\n                            }\n                          }\n                        />\n                        <View\n                          accessibilityRole=\"radio\"\n                          accessibilityState={\n                            Object {\n                              \"checked\": false,\n                              \"disabled\": false,\n                            }\n                          }\n                          accessible={true}\n                          checked={false}\n                          dataSet={Object {}}\n                          focusable={true}\n                          formControlContext={Object {}}\n                          onBlur={[Function]}\n                          onClick={[Function]}\n                          onFocus={[Function]}\n                          onHoverIn={[Function]}\n                          onHoverOut={[Function]}\n                          onResponderGrant={[Function]}\n                          onResponderMove={[Function]}\n                          onResponderRelease={[Function]}\n                          onResponderTerminate={[Function]}\n                          onResponderTerminationRequest={[Function]}\n                          onStartShouldSetResponder={[Function]}\n                          state={\n                            Object {\n                              \"lastFocusedValue\": null,\n                              \"name\": \"address\",\n                              \"selectedValue\": \"address1\",\n                              \"setLastFocusedValue\": [Function],\n                              \"setSelectedValue\": [Function],\n                            }\n                          }\n                          style={Object {}}\n                          value=\"address2\"\n                        >\n                          <View\n                            dataSet={Object {}}\n                            style={\n                              Object {\n                                \"alignItems\": \"center\",\n                                \"flexDirection\": \"row\",\n                              }\n                            }\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"alignItems\": \"center\",\n                                  \"display\": \"flex\",\n                                  \"justifyContent\": \"center\",\n                                }\n                              }\n                            >\n                              <View\n                                dataSet={Object {}}\n                                style={Object {}}\n                              />\n                              <View\n                                colorScheme=\"primary\"\n                                dataSet={Object {}}\n                                defaultIsChecked={false}\n                                formControlContext={Object {}}\n                                state={\n                                  Object {\n                                    \"lastFocusedValue\": null,\n                                    \"name\": \"address\",\n                                    \"selectedValue\": \"address1\",\n                                    \"setLastFocusedValue\": [Function],\n                                    \"setSelectedValue\": [Function],\n                                  }\n                                }\n                                style={\n                                  Object {\n                                    \"alignItems\": \"flex-start\",\n                                    \"backgroundColor\": \"#fafafa\",\n                                    \"borderColor\": \"#a3a3a3\",\n                                    \"borderRadius\": 9999,\n                                    \"borderWidth\": 2,\n                                    \"display\": \"flex\",\n                                    \"justifyContent\": \"center\",\n                                    \"paddingBottom\": 4,\n                                    \"paddingLeft\": 4,\n                                    \"paddingRight\": 4,\n                                    \"paddingTop\": 4,\n                                  }\n                                }\n                                value=\"address2\"\n                              >\n                                <RNSVGSvgView\n                                  accessibilityRole=\"image\"\n                                  align=\"xMidYMid\"\n                                  bbHeight={12}\n                                  bbWidth={12}\n                                  color={-9211021}\n                                  dataSet={Object {}}\n                                  focusable={false}\n                                  meetOrSlice={0}\n                                  minX={0}\n                                  minY={0}\n                                  stroke=\"\"\n                                  style={\n                                    Array [\n                                      Object {\n                                        \"backgroundColor\": \"transparent\",\n                                        \"borderWidth\": 0,\n                                      },\n                                      Object {\n                                        \"color\": \"#737373\",\n                                        \"height\": 12,\n                                        \"opacity\": 0,\n                                        \"width\": 12,\n                                      },\n                                      Object {\n                                        \"flex\": 0,\n                                        \"height\": 12,\n                                        \"width\": 12,\n                                      },\n                                    ]\n                                  }\n                                  tintColor={-9211021}\n                                  vbHeight={24}\n                                  vbWidth={24}\n                                >\n                                  <RNSVGGroup\n                                    opacity={0}\n                                    propList={\n                                      Array [\n                                        \"stroke\",\n                                      ]\n                                    }\n                                    stroke={null}\n                                  >\n                                    <RNSVGGroup>\n                                      <RNSVGPath\n                                        d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                                        fill={\n                                          Array [\n                                            2,\n                                          ]\n                                        }\n                                        propList={\n                                          Array [\n                                            \"fill\",\n                                            \"stroke\",\n                                          ]\n                                        }\n                                        stroke={null}\n                                      />\n                                    </RNSVGGroup>\n                                  </RNSVGGroup>\n                                </RNSVGSvgView>\n                              </View>\n                            </View>\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"width\": 8,\n                                }\n                              }\n                            />\n                            <Text\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"backgroundColor\": undefined,\n                                  \"color\": \"#171717\",\n                                  \"fontFamily\": undefined,\n                                  \"fontSize\": 14,\n                                  \"fontStyle\": \"normal\",\n                                  \"fontWeight\": \"400\",\n                                  \"letterSpacing\": 0,\n                                  \"lineHeight\": 21,\n                                  \"marginLeft\": 8,\n                                  \"marginTop\": -4,\n                                  \"textDecorationLine\": undefined,\n                                }\n                              }\n                            >\n                              6391 Elign St. Celina, Delaware 10299\n                            </Text>\n                          </View>\n                        </View>\n                      </View>\n                    </View>\n                  </View>\n                </View>\n              </RCTScrollView>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": \"#fafafa\",\n                    \"borderColor\": \"#d4d4d4\",\n                    \"borderTopWidth\": 1,\n                    \"flexDirection\": \"row\",\n                    \"flexWrap\": \"wrap\",\n                    \"justifyContent\": \"flex-end\",\n                    \"paddingBottom\": 16,\n                    \"paddingLeft\": 16,\n                    \"paddingRight\": 16,\n                    \"paddingTop\": 16,\n                  }\n                }\n              >\n                <View\n                  accessibilityRole=\"button\"\n                  accessible={true}\n                  colorScheme=\"primary\"\n                  dataSet={Object {}}\n                  focusable={true}\n                  onBlur={[Function]}\n                  onClick={[Function]}\n                  onFocus={[Function]}\n                  onHoverIn={[Function]}\n                  onHoverOut={[Function]}\n                  onResponderGrant={[Function]}\n                  onResponderMove={[Function]}\n                  onResponderRelease={[Function]}\n                  onResponderTerminate={[Function]}\n                  onResponderTerminationRequest={[Function]}\n                  onStartShouldSetResponder={[Function]}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"#0891b2\",\n                      \"borderRadius\": 4,\n                      \"flex\": 1,\n                      \"flexDirection\": \"row\",\n                      \"justifyContent\": \"center\",\n                      \"paddingBottom\": 10,\n                      \"paddingLeft\": 12,\n                      \"paddingRight\": 12,\n                      \"paddingTop\": 10,\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"alignItems\": \"center\",\n                        \"flexDirection\": \"row\",\n                      }\n                    }\n                    test={true}\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={Object {}}\n                    >\n                      <Text\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"backgroundColor\": undefined,\n                            \"color\": \"#fafafa\",\n                            \"fontFamily\": undefined,\n                            \"fontSize\": 14,\n                            \"fontStyle\": \"normal\",\n                            \"fontWeight\": \"400\",\n                            \"letterSpacing\": 0,\n                            \"lineHeight\": 21,\n                            \"textDecorationLine\": undefined,\n                          }\n                        }\n                      >\n                        Continue\n                      </Text>\n                    </View>\n                  </View>\n                </View>\n              </View>\n            </View>\n          </View>\n        </View>\n      </Modal>\n      <Modal\n        animationType=\"fade\"\n        hardwareAccelerated={false}\n        onRequestClose={[Function]}\n        statusBarTranslucent={true}\n        transparent={true}\n        visible={false}\n      >\n        <View\n          pointerEvents=\"none\"\n          style={\n            Object {\n              \"bottom\": 0,\n              \"left\": 0,\n              \"opacity\": 0,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"top\": 0,\n              \"transform\": Array [\n                Object {\n                  \"translateY\": 0,\n                },\n                Object {\n                  \"translateX\": 0,\n                },\n                Object {\n                  \"scale\": 1,\n                },\n                Object {\n                  \"scaleX\": 1,\n                },\n                Object {\n                  \"scaleY\": 1,\n                },\n                Object {\n                  \"rotate\": \"0deg\",\n                },\n              ],\n            }\n          }\n        >\n          <View\n            accessible={false}\n            dataSet={Object {}}\n            focusable={true}\n            importantForAccessibility=\"no\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"backgroundColor\": \"rgb(0, 0, 0)\",\n                \"bottom\": 0,\n                \"left\": 0,\n                \"opacity\": 0.3,\n                \"position\": \"absolute\",\n                \"right\": 0,\n                \"top\": 0,\n              }\n            }\n          />\n        </View>\n        <View\n          pointerEvents=\"none\"\n          style={\n            Object {\n              \"bottom\": 0,\n              \"left\": 0,\n              \"opacity\": 0,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"top\": 0,\n              \"transform\": Array [\n                Object {\n                  \"translateY\": 0,\n                },\n                Object {\n                  \"translateX\": 0,\n                },\n                Object {\n                  \"scale\": 1,\n                },\n                Object {\n                  \"scaleX\": 1,\n                },\n                Object {\n                  \"scaleY\": 1,\n                },\n                Object {\n                  \"rotate\": \"0deg\",\n                },\n              ],\n            }\n          }\n        >\n          <View\n            closeOnOverlayClick={true}\n            dataSet={Object {}}\n            pointerEvents=\"box-none\"\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"height\": \"100%\",\n                \"justifyContent\": \"center\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              accessibilityViewIsModal={true}\n              aria-modal=\"true\"\n              dataSet={Object {}}\n              onAccessibilityEscape={[Function]}\n              style={\n                Object {\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderRadius\": 8,\n                  \"elevation\": 2,\n                  \"maxHeight\": 1184,\n                  \"maxWidth\": 350,\n                  \"overflow\": \"hidden\",\n                  \"shadowColor\": \"#000000\",\n                  \"shadowOffset\": Object {\n                    \"height\": 1,\n                    \"width\": 0,\n                  },\n                  \"shadowOpacity\": 0.2,\n                  \"shadowRadius\": 1.41,\n                  \"width\": \"80%\",\n                }\n              }\n            >\n              <View\n                accessibilityRole=\"button\"\n                accessible={true}\n                colorScheme=\"coolGray\"\n                dataSet={Object {}}\n                focusable={true}\n                onBlur={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onHoverIn={[Function]}\n                onHoverOut={[Function]}\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                    \"borderRadius\": 4,\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 8,\n                    \"paddingRight\": 8,\n                    \"paddingTop\": 8,\n                    \"position\": \"absolute\",\n                    \"right\": 12,\n                    \"top\": 12,\n                    \"zIndex\": 1,\n                  }\n                }\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={16}\n                  bbWidth={16}\n                  color={-9211021}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#737373\",\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                    ]\n                  }\n                  tintColor={-9211021}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": \"#fafafa\",\n                    \"borderBottomWidth\": 1,\n                    \"borderColor\": \"#d4d4d4\",\n                    \"paddingBottom\": 16,\n                    \"paddingLeft\": 16,\n                    \"paddingRight\": 16,\n                    \"paddingTop\": 16,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 16,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"600\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 20,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Payment Options\n                </Text>\n              </View>\n              <RCTScrollView\n                contentContainerStyle={\n                  Array [\n                    Object {},\n                    Object {\n                      \"dataSet\": Object {},\n                    },\n                    Object {},\n                  ]\n                }\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <View>\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"paddingBottom\": 16,\n                        \"paddingLeft\": 16,\n                        \"paddingRight\": 16,\n                        \"paddingTop\": 16,\n                      }\n                    }\n                  >\n                    <View\n                      accessibilityRole=\"radiogroup\"\n                      accessibilityState={\n                        Object {\n                          \"disabled\": undefined,\n                        }\n                      }\n                      dataSet={Object {}}\n                      name=\"payment\"\n                      style={\n                        Object {\n                          \"alignItems\": \"flex-start\",\n                        }\n                      }\n                    >\n                      <View\n                        dataSet={Object {}}\n                        style={Object {}}\n                      >\n                        <View\n                          accessibilityRole=\"radio\"\n                          accessibilityState={\n                            Object {\n                              \"checked\": false,\n                              \"disabled\": false,\n                            }\n                          }\n                          accessible={true}\n                          checked={false}\n                          dataSet={Object {}}\n                          focusable={true}\n                          formControlContext={Object {}}\n                          onBlur={[Function]}\n                          onClick={[Function]}\n                          onFocus={[Function]}\n                          onHoverIn={[Function]}\n                          onHoverOut={[Function]}\n                          onResponderGrant={[Function]}\n                          onResponderMove={[Function]}\n                          onResponderRelease={[Function]}\n                          onResponderTerminate={[Function]}\n                          onResponderTerminationRequest={[Function]}\n                          onStartShouldSetResponder={[Function]}\n                          state={\n                            Object {\n                              \"lastFocusedValue\": null,\n                              \"name\": \"payment\",\n                              \"selectedValue\": undefined,\n                              \"setLastFocusedValue\": [Function],\n                              \"setSelectedValue\": [Function],\n                            }\n                          }\n                          style={Object {}}\n                          value=\"payment1\"\n                        >\n                          <View\n                            dataSet={Object {}}\n                            style={\n                              Object {\n                                \"alignItems\": \"center\",\n                                \"flexDirection\": \"row\",\n                              }\n                            }\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"alignItems\": \"center\",\n                                  \"display\": \"flex\",\n                                  \"justifyContent\": \"center\",\n                                }\n                              }\n                            >\n                              <View\n                                dataSet={Object {}}\n                                style={Object {}}\n                              />\n                              <View\n                                colorScheme=\"primary\"\n                                dataSet={Object {}}\n                                defaultIsChecked={false}\n                                formControlContext={Object {}}\n                                state={\n                                  Object {\n                                    \"lastFocusedValue\": null,\n                                    \"name\": \"payment\",\n                                    \"selectedValue\": undefined,\n                                    \"setLastFocusedValue\": [Function],\n                                    \"setSelectedValue\": [Function],\n                                  }\n                                }\n                                style={\n                                  Object {\n                                    \"alignItems\": \"flex-start\",\n                                    \"backgroundColor\": \"#fafafa\",\n                                    \"borderColor\": \"#a3a3a3\",\n                                    \"borderRadius\": 9999,\n                                    \"borderWidth\": 2,\n                                    \"display\": \"flex\",\n                                    \"justifyContent\": \"center\",\n                                    \"paddingBottom\": 4,\n                                    \"paddingLeft\": 4,\n                                    \"paddingRight\": 4,\n                                    \"paddingTop\": 4,\n                                  }\n                                }\n                                value=\"payment1\"\n                              >\n                                <RNSVGSvgView\n                                  accessibilityRole=\"image\"\n                                  align=\"xMidYMid\"\n                                  bbHeight={12}\n                                  bbWidth={12}\n                                  color={-9211021}\n                                  dataSet={Object {}}\n                                  focusable={false}\n                                  meetOrSlice={0}\n                                  minX={0}\n                                  minY={0}\n                                  stroke=\"\"\n                                  style={\n                                    Array [\n                                      Object {\n                                        \"backgroundColor\": \"transparent\",\n                                        \"borderWidth\": 0,\n                                      },\n                                      Object {\n                                        \"color\": \"#737373\",\n                                        \"height\": 12,\n                                        \"opacity\": 0,\n                                        \"width\": 12,\n                                      },\n                                      Object {\n                                        \"flex\": 0,\n                                        \"height\": 12,\n                                        \"width\": 12,\n                                      },\n                                    ]\n                                  }\n                                  tintColor={-9211021}\n                                  vbHeight={24}\n                                  vbWidth={24}\n                                >\n                                  <RNSVGGroup\n                                    opacity={0}\n                                    propList={\n                                      Array [\n                                        \"stroke\",\n                                      ]\n                                    }\n                                    stroke={null}\n                                  >\n                                    <RNSVGGroup>\n                                      <RNSVGPath\n                                        d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                                        fill={\n                                          Array [\n                                            2,\n                                          ]\n                                        }\n                                        propList={\n                                          Array [\n                                            \"fill\",\n                                            \"stroke\",\n                                          ]\n                                        }\n                                        stroke={null}\n                                      />\n                                    </RNSVGGroup>\n                                  </RNSVGGroup>\n                                </RNSVGSvgView>\n                              </View>\n                            </View>\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"width\": 8,\n                                }\n                              }\n                            />\n                            <Text\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"backgroundColor\": undefined,\n                                  \"color\": \"#171717\",\n                                  \"fontFamily\": undefined,\n                                  \"fontSize\": 14,\n                                  \"fontStyle\": \"normal\",\n                                  \"fontWeight\": \"400\",\n                                  \"letterSpacing\": 0,\n                                  \"lineHeight\": 21,\n                                  \"marginLeft\": 8,\n                                  \"marginTop\": -4,\n                                  \"textDecorationLine\": undefined,\n                                }\n                              }\n                            >\n                              Cash on delivery\n                            </Text>\n                          </View>\n                        </View>\n                        <View\n                          dataSet={Object {}}\n                          style={\n                            Object {\n                              \"height\": 12,\n                            }\n                          }\n                        />\n                        <View\n                          accessibilityRole=\"radio\"\n                          accessibilityState={\n                            Object {\n                              \"checked\": false,\n                              \"disabled\": false,\n                            }\n                          }\n                          accessible={true}\n                          checked={false}\n                          dataSet={Object {}}\n                          focusable={true}\n                          formControlContext={Object {}}\n                          onBlur={[Function]}\n                          onClick={[Function]}\n                          onFocus={[Function]}\n                          onHoverIn={[Function]}\n                          onHoverOut={[Function]}\n                          onResponderGrant={[Function]}\n                          onResponderMove={[Function]}\n                          onResponderRelease={[Function]}\n                          onResponderTerminate={[Function]}\n                          onResponderTerminationRequest={[Function]}\n                          onStartShouldSetResponder={[Function]}\n                          state={\n                            Object {\n                              \"lastFocusedValue\": null,\n                              \"name\": \"payment\",\n                              \"selectedValue\": undefined,\n                              \"setLastFocusedValue\": [Function],\n                              \"setSelectedValue\": [Function],\n                            }\n                          }\n                          style={Object {}}\n                          value=\"payment2\"\n                        >\n                          <View\n                            dataSet={Object {}}\n                            style={\n                              Object {\n                                \"alignItems\": \"center\",\n                                \"flexDirection\": \"row\",\n                              }\n                            }\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"alignItems\": \"center\",\n                                  \"display\": \"flex\",\n                                  \"justifyContent\": \"center\",\n                                }\n                              }\n                            >\n                              <View\n                                dataSet={Object {}}\n                                style={Object {}}\n                              />\n                              <View\n                                colorScheme=\"primary\"\n                                dataSet={Object {}}\n                                defaultIsChecked={false}\n                                formControlContext={Object {}}\n                                state={\n                                  Object {\n                                    \"lastFocusedValue\": null,\n                                    \"name\": \"payment\",\n                                    \"selectedValue\": undefined,\n                                    \"setLastFocusedValue\": [Function],\n                                    \"setSelectedValue\": [Function],\n                                  }\n                                }\n                                style={\n                                  Object {\n                                    \"alignItems\": \"flex-start\",\n                                    \"backgroundColor\": \"#fafafa\",\n                                    \"borderColor\": \"#a3a3a3\",\n                                    \"borderRadius\": 9999,\n                                    \"borderWidth\": 2,\n                                    \"display\": \"flex\",\n                                    \"justifyContent\": \"center\",\n                                    \"paddingBottom\": 4,\n                                    \"paddingLeft\": 4,\n                                    \"paddingRight\": 4,\n                                    \"paddingTop\": 4,\n                                  }\n                                }\n                                value=\"payment2\"\n                              >\n                                <RNSVGSvgView\n                                  accessibilityRole=\"image\"\n                                  align=\"xMidYMid\"\n                                  bbHeight={12}\n                                  bbWidth={12}\n                                  color={-9211021}\n                                  dataSet={Object {}}\n                                  focusable={false}\n                                  meetOrSlice={0}\n                                  minX={0}\n                                  minY={0}\n                                  stroke=\"\"\n                                  style={\n                                    Array [\n                                      Object {\n                                        \"backgroundColor\": \"transparent\",\n                                        \"borderWidth\": 0,\n                                      },\n                                      Object {\n                                        \"color\": \"#737373\",\n                                        \"height\": 12,\n                                        \"opacity\": 0,\n                                        \"width\": 12,\n                                      },\n                                      Object {\n                                        \"flex\": 0,\n                                        \"height\": 12,\n                                        \"width\": 12,\n                                      },\n                                    ]\n                                  }\n                                  tintColor={-9211021}\n                                  vbHeight={24}\n                                  vbWidth={24}\n                                >\n                                  <RNSVGGroup\n                                    opacity={0}\n                                    propList={\n                                      Array [\n                                        \"stroke\",\n                                      ]\n                                    }\n                                    stroke={null}\n                                  >\n                                    <RNSVGGroup>\n                                      <RNSVGPath\n                                        d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                                        fill={\n                                          Array [\n                                            2,\n                                          ]\n                                        }\n                                        propList={\n                                          Array [\n                                            \"fill\",\n                                            \"stroke\",\n                                          ]\n                                        }\n                                        stroke={null}\n                                      />\n                                    </RNSVGGroup>\n                                  </RNSVGGroup>\n                                </RNSVGSvgView>\n                              </View>\n                            </View>\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"width\": 8,\n                                }\n                              }\n                            />\n                            <Text\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"backgroundColor\": undefined,\n                                  \"color\": \"#171717\",\n                                  \"fontFamily\": undefined,\n                                  \"fontSize\": 14,\n                                  \"fontStyle\": \"normal\",\n                                  \"fontWeight\": \"400\",\n                                  \"letterSpacing\": 0,\n                                  \"lineHeight\": 21,\n                                  \"marginLeft\": 8,\n                                  \"marginTop\": -4,\n                                  \"textDecorationLine\": undefined,\n                                }\n                              }\n                            >\n                              Credit/ Debit/ ATM Card\n                            </Text>\n                          </View>\n                        </View>\n                        <View\n                          dataSet={Object {}}\n                          style={\n                            Object {\n                              \"height\": 12,\n                            }\n                          }\n                        />\n                        <View\n                          accessibilityRole=\"radio\"\n                          accessibilityState={\n                            Object {\n                              \"checked\": false,\n                              \"disabled\": false,\n                            }\n                          }\n                          accessible={true}\n                          checked={false}\n                          dataSet={Object {}}\n                          focusable={true}\n                          formControlContext={Object {}}\n                          onBlur={[Function]}\n                          onClick={[Function]}\n                          onFocus={[Function]}\n                          onHoverIn={[Function]}\n                          onHoverOut={[Function]}\n                          onResponderGrant={[Function]}\n                          onResponderMove={[Function]}\n                          onResponderRelease={[Function]}\n                          onResponderTerminate={[Function]}\n                          onResponderTerminationRequest={[Function]}\n                          onStartShouldSetResponder={[Function]}\n                          state={\n                            Object {\n                              \"lastFocusedValue\": null,\n                              \"name\": \"payment\",\n                              \"selectedValue\": undefined,\n                              \"setLastFocusedValue\": [Function],\n                              \"setSelectedValue\": [Function],\n                            }\n                          }\n                          style={Object {}}\n                          value=\"payment3\"\n                        >\n                          <View\n                            dataSet={Object {}}\n                            style={\n                              Object {\n                                \"alignItems\": \"center\",\n                                \"flexDirection\": \"row\",\n                              }\n                            }\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"alignItems\": \"center\",\n                                  \"display\": \"flex\",\n                                  \"justifyContent\": \"center\",\n                                }\n                              }\n                            >\n                              <View\n                                dataSet={Object {}}\n                                style={Object {}}\n                              />\n                              <View\n                                colorScheme=\"primary\"\n                                dataSet={Object {}}\n                                defaultIsChecked={false}\n                                formControlContext={Object {}}\n                                state={\n                                  Object {\n                                    \"lastFocusedValue\": null,\n                                    \"name\": \"payment\",\n                                    \"selectedValue\": undefined,\n                                    \"setLastFocusedValue\": [Function],\n                                    \"setSelectedValue\": [Function],\n                                  }\n                                }\n                                style={\n                                  Object {\n                                    \"alignItems\": \"flex-start\",\n                                    \"backgroundColor\": \"#fafafa\",\n                                    \"borderColor\": \"#a3a3a3\",\n                                    \"borderRadius\": 9999,\n                                    \"borderWidth\": 2,\n                                    \"display\": \"flex\",\n                                    \"justifyContent\": \"center\",\n                                    \"paddingBottom\": 4,\n                                    \"paddingLeft\": 4,\n                                    \"paddingRight\": 4,\n                                    \"paddingTop\": 4,\n                                  }\n                                }\n                                value=\"payment3\"\n                              >\n                                <RNSVGSvgView\n                                  accessibilityRole=\"image\"\n                                  align=\"xMidYMid\"\n                                  bbHeight={12}\n                                  bbWidth={12}\n                                  color={-9211021}\n                                  dataSet={Object {}}\n                                  focusable={false}\n                                  meetOrSlice={0}\n                                  minX={0}\n                                  minY={0}\n                                  stroke=\"\"\n                                  style={\n                                    Array [\n                                      Object {\n                                        \"backgroundColor\": \"transparent\",\n                                        \"borderWidth\": 0,\n                                      },\n                                      Object {\n                                        \"color\": \"#737373\",\n                                        \"height\": 12,\n                                        \"opacity\": 0,\n                                        \"width\": 12,\n                                      },\n                                      Object {\n                                        \"flex\": 0,\n                                        \"height\": 12,\n                                        \"width\": 12,\n                                      },\n                                    ]\n                                  }\n                                  tintColor={-9211021}\n                                  vbHeight={24}\n                                  vbWidth={24}\n                                >\n                                  <RNSVGGroup\n                                    opacity={0}\n                                    propList={\n                                      Array [\n                                        \"stroke\",\n                                      ]\n                                    }\n                                    stroke={null}\n                                  >\n                                    <RNSVGGroup>\n                                      <RNSVGPath\n                                        d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                                        fill={\n                                          Array [\n                                            2,\n                                          ]\n                                        }\n                                        propList={\n                                          Array [\n                                            \"fill\",\n                                            \"stroke\",\n                                          ]\n                                        }\n                                        stroke={null}\n                                      />\n                                    </RNSVGGroup>\n                                  </RNSVGGroup>\n                                </RNSVGSvgView>\n                              </View>\n                            </View>\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"width\": 8,\n                                }\n                              }\n                            />\n                            <Text\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"backgroundColor\": undefined,\n                                  \"color\": \"#171717\",\n                                  \"fontFamily\": undefined,\n                                  \"fontSize\": 14,\n                                  \"fontStyle\": \"normal\",\n                                  \"fontWeight\": \"400\",\n                                  \"letterSpacing\": 0,\n                                  \"lineHeight\": 21,\n                                  \"marginLeft\": 8,\n                                  \"marginTop\": -4,\n                                  \"textDecorationLine\": undefined,\n                                }\n                              }\n                            >\n                              UPI\n                            </Text>\n                          </View>\n                        </View>\n                      </View>\n                    </View>\n                  </View>\n                </View>\n              </RCTScrollView>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": \"#fafafa\",\n                    \"borderColor\": \"#d4d4d4\",\n                    \"borderTopWidth\": 1,\n                    \"flexDirection\": \"row\",\n                    \"flexWrap\": \"wrap\",\n                    \"justifyContent\": \"flex-end\",\n                    \"paddingBottom\": 16,\n                    \"paddingLeft\": 16,\n                    \"paddingRight\": 16,\n                    \"paddingTop\": 16,\n                  }\n                }\n              >\n                <View\n                  accessibilityRole=\"button\"\n                  accessible={true}\n                  colorScheme=\"primary\"\n                  dataSet={Object {}}\n                  focusable={true}\n                  onBlur={[Function]}\n                  onClick={[Function]}\n                  onFocus={[Function]}\n                  onHoverIn={[Function]}\n                  onHoverOut={[Function]}\n                  onResponderGrant={[Function]}\n                  onResponderMove={[Function]}\n                  onResponderRelease={[Function]}\n                  onResponderTerminate={[Function]}\n                  onResponderTerminationRequest={[Function]}\n                  onStartShouldSetResponder={[Function]}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"#0891b2\",\n                      \"borderRadius\": 4,\n                      \"flex\": 1,\n                      \"flexDirection\": \"row\",\n                      \"justifyContent\": \"center\",\n                      \"paddingBottom\": 10,\n                      \"paddingLeft\": 12,\n                      \"paddingRight\": 12,\n                      \"paddingTop\": 10,\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"alignItems\": \"center\",\n                        \"flexDirection\": \"row\",\n                      }\n                    }\n                    test={true}\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={Object {}}\n                    >\n                      <Text\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"backgroundColor\": undefined,\n                            \"color\": \"#fafafa\",\n                            \"fontFamily\": undefined,\n                            \"fontSize\": 14,\n                            \"fontStyle\": \"normal\",\n                            \"fontWeight\": \"400\",\n                            \"letterSpacing\": 0,\n                            \"lineHeight\": 21,\n                            \"textDecorationLine\": undefined,\n                          }\n                        }\n                      >\n                        Checkout\n                      </Text>\n                    </View>\n                  </View>\n                </View>\n              </View>\n            </View>\n          </View>\n        </View>\n      </Modal>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Mode Basic 1`] = `\n<View\n  style={\n    Object {\n      \"bottom\": 0,\n      \"left\": 0,\n      \"position\": \"absolute\",\n      \"right\": 0,\n      \"top\": 0,\n    }\n  }\n>\n  <RNCSafeAreaProvider\n    onInsetsChange={[Function]}\n    style={\n      Array [\n        Object {\n          \"flex\": 1,\n        },\n        undefined,\n      ]\n    }\n  />\n</View>\n`;\n\nexports[`Storyshots Mode DefaultMode 1`] = `\n<View\n  style={\n    Object {\n      \"bottom\": 0,\n      \"left\": 0,\n      \"position\": \"absolute\",\n      \"right\": 0,\n      \"top\": 0,\n    }\n  }\n>\n  <RNCSafeAreaProvider\n    onInsetsChange={[Function]}\n    style={\n      Array [\n        Object {\n          \"flex\": 1,\n        },\n        undefined,\n      ]\n    }\n  />\n</View>\n`;\n\nexports[`Storyshots Mode Persistence 1`] = `\n<View\n  style={\n    Object {\n      \"bottom\": 0,\n      \"left\": 0,\n      \"position\": \"absolute\",\n      \"right\": 0,\n      \"top\": 0,\n    }\n  }\n>\n  <RNCSafeAreaProvider\n    onInsetsChange={[Function]}\n    style={\n      Array [\n        Object {\n          \"flex\": 1,\n        },\n        undefined,\n      ]\n    }\n  />\n</View>\n`;\n\nexports[`Storyshots Popover Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      >\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          aria-expanded={false}\n          aria-haspopup={true}\n          colorScheme=\"danger\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#e11d48\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Delete Customer\n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Popover Focus on Open 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      >\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          aria-expanded={false}\n          aria-haspopup={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Edit Info\n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Popover Popover positions 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignSelf\": \"flex-start\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            aria-expanded={false}\n            aria-haspopup={true}\n            colorScheme=\"danger\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"#e11d48\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#fafafa\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Delete Customer\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 24,\n            }\n          }\n        />\n        <View\n          accessibilityLabel=\"Select a position for Popover\"\n          accessibilityRole=\"button\"\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"marginLeft\": 0,\n              \"marginRight\": 0,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            isFocused={false}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"borderColor\": \"#d4d4d4\",\n                \"borderRadius\": 4,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"overflow\": \"hidden\",\n              }\n            }\n          >\n            <TextInput\n              accessible={true}\n              allowFontScaling={true}\n              aria-hidden={true}\n              dataSet={Object {}}\n              editable={false}\n              focusable={false}\n              importantForAccessibility=\"no\"\n              onBlur={[Function]}\n              onFocus={[Function]}\n              onKeyPress={[Function]}\n              placeholderTextColor=\"#a3a3a3\"\n              pointerEvents=\"none\"\n              rejectResponderTermination={true}\n              secureTextEntry={false}\n              selection={\n                Object {\n                  \"start\": 0,\n                }\n              }\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"color\": \"#171717\",\n                  \"flex\": 1,\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"100%\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                  \"width\": \"100%\",\n                }\n              }\n              underlineColorAndroid=\"transparent\"\n              value=\"auto\"\n            />\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <RNSVGSvgView\n              accessibilityRole=\"image\"\n              align=\"xMidYMid\"\n              bbHeight={24}\n              bbWidth={24}\n              color={-9211021}\n              dataSet={Object {}}\n              focusable={false}\n              meetOrSlice={0}\n              minX={0}\n              minY={0}\n              stroke=\"\"\n              style={\n                Array [\n                  Object {\n                    \"backgroundColor\": \"transparent\",\n                    \"borderWidth\": 0,\n                  },\n                  Object {\n                    \"color\": \"#737373\",\n                    \"height\": 24,\n                    \"marginRight\": 12,\n                    \"paddingBottom\": 4,\n                    \"paddingLeft\": 4,\n                    \"paddingRight\": 4,\n                    \"paddingTop\": 4,\n                    \"width\": 24,\n                  },\n                  Object {\n                    \"flex\": 0,\n                    \"height\": 24,\n                    \"width\": 24,\n                  },\n                ]\n              }\n              tintColor={-9211021}\n              vbHeight={24}\n              vbWidth={24}\n            >\n              <RNSVGGroup\n                propList={\n                  Array [\n                    \"stroke\",\n                  ]\n                }\n                stroke={null}\n              >\n                <RNSVGGroup>\n                  <RNSVGPath\n                    d=\"M20.2286 6L11.9973 14.3785L3.76862 6.00268L2 7.80293L12 18L22 7.80293L20.2286 6Z\"\n                    fill={\n                      Array [\n                        2,\n                      ]\n                    }\n                    propList={\n                      Array [\n                        \"fill\",\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  />\n                </RNSVGGroup>\n              </RNSVGGroup>\n            </RNSVGSvgView>\n          </View>\n        </View>\n        <Modal\n          animationType=\"slide\"\n          hardwareAccelerated={false}\n          onRequestClose={[Function]}\n          statusBarTranslucent={true}\n          transparent={true}\n          visible={false}\n        >\n          <View\n            pointerEvents=\"none\"\n            style={\n              Object {\n                \"bottom\": 0,\n                \"left\": 0,\n                \"opacity\": 0,\n                \"position\": \"absolute\",\n                \"right\": 0,\n                \"top\": 0,\n                \"transform\": Array [\n                  Object {\n                    \"translateY\": 0,\n                  },\n                  Object {\n                    \"translateX\": 0,\n                  },\n                  Object {\n                    \"scale\": 1,\n                  },\n                  Object {\n                    \"scaleX\": 1,\n                  },\n                  Object {\n                    \"scaleY\": 1,\n                  },\n                  Object {\n                    \"rotate\": \"0deg\",\n                  },\n                ],\n              }\n            }\n          >\n            <View\n              accessible={false}\n              dataSet={Object {}}\n              focusable={true}\n              importantForAccessibility=\"no\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"backgroundColor\": \"rgb(0, 0, 0)\",\n                  \"bottom\": 0,\n                  \"left\": 0,\n                  \"opacity\": 0.3,\n                  \"position\": \"absolute\",\n                  \"right\": 0,\n                  \"top\": 0,\n                }\n              }\n            />\n          </View>\n          <View\n            pointerEvents=\"none\"\n            style={\n              Object {\n                \"bottom\": 0,\n                \"height\": \"100%\",\n                \"left\": 0,\n                \"opacity\": 1,\n                \"position\": \"absolute\",\n                \"right\": 0,\n                \"transform\": Array [\n                  Object {\n                    \"translateY\": 0,\n                  },\n                  Object {\n                    \"translateX\": 0,\n                  },\n                  Object {\n                    \"scale\": 1,\n                  },\n                  Object {\n                    \"scaleX\": 1,\n                  },\n                  Object {\n                    \"scaleY\": 1,\n                  },\n                  Object {\n                    \"rotate\": \"0deg\",\n                  },\n                ],\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              onLayout={[Function]}\n              pointerEvents=\"box-none\"\n              style={\n                Object {\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                }\n              }\n            >\n              <View\n                closeOnOverlayClick={true}\n                dataSet={Object {}}\n                pointerEvents=\"box-none\"\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"flex-end\",\n                    \"width\": \"100%\",\n                  }\n                }\n              >\n                <View\n                  onLayout={[Function]}\n                  pointerEvents=\"box-none\"\n                  style={\n                    Object {\n                      \"transform\": Array [\n                        Object {\n                          \"translateY\": 0,\n                        },\n                      ],\n                      \"width\": \"100%\",\n                    }\n                  }\n                >\n                  <View\n                    collapsable={false}\n                    dataSet={Object {}}\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                        \"paddingBottom\": 8,\n                        \"paddingTop\": 8,\n                      }\n                    }\n                  />\n                  <View\n                    accessibilityViewIsModal={true}\n                    aria-modal=\"true\"\n                    dataSet={Object {}}\n                    onAccessibilityEscape={[Function]}\n                    style={\n                      Object {\n                        \"alignItems\": \"center\",\n                        \"backgroundColor\": \"#fafafa\",\n                        \"borderRadius\": 0,\n                        \"borderTopLeftRadius\": 20,\n                        \"borderTopRightRadius\": 20,\n                        \"elevation\": 2,\n                        \"maxHeight\": 1184,\n                        \"overflow\": \"hidden\",\n                        \"paddingBottom\": 8,\n                        \"paddingLeft\": 8,\n                        \"paddingRight\": 8,\n                        \"paddingTop\": 8,\n                        \"shadowColor\": \"#000000\",\n                        \"shadowOffset\": Object {\n                          \"height\": 1,\n                          \"width\": 0,\n                        },\n                        \"shadowOpacity\": 0.2,\n                        \"shadowRadius\": 1.41,\n                        \"width\": \"100%\",\n                      }\n                    }\n                  >\n                    <View\n                      collapsable={false}\n                      dataSet={Object {}}\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                          \"alignItems\": \"center\",\n                          \"marginTop\": -8,\n                          \"paddingBottom\": 12,\n                          \"paddingTop\": 12,\n                          \"width\": \"100%\",\n                        }\n                      }\n                    >\n                      <View\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"backgroundColor\": \"#737373\",\n                            \"borderRadius\": 2,\n                            \"height\": 4,\n                            \"width\": 40,\n                          }\n                        }\n                      />\n                    </View>\n                    <RCTScrollView\n                      contentContainerStyle={\n                        Array [\n                          Object {},\n                          Object {\n                            \"dataSet\": Object {},\n                          },\n                          Object {},\n                        ]\n                      }\n                      data={\n                        Array [\n                          Object {\n                            \"label\": \"auto\",\n                            \"value\": \"auto\",\n                          },\n                          Object {\n                            \"label\": \"Top Left\",\n                            \"value\": \"top left\",\n                          },\n                          Object {\n                            \"label\": \"Top\",\n                            \"value\": \"top\",\n                          },\n                          Object {\n                            \"label\": \"Top Right\",\n                            \"value\": \"top right\",\n                          },\n                          Object {\n                            \"label\": \"Right Top\",\n                            \"value\": \"right top\",\n                          },\n                          Object {\n                            \"label\": \"Right\",\n                            \"value\": \"right\",\n                          },\n                          Object {\n                            \"label\": \"Right Bottom\",\n                            \"value\": \"right bottom\",\n                          },\n                          Object {\n                            \"label\": \"Bottom Left\",\n                            \"value\": \"bottom left\",\n                          },\n                          Object {\n                            \"label\": \"Bottom\",\n                            \"value\": \"bottom\",\n                          },\n                          Object {\n                            \"label\": \"Bottom Right\",\n                            \"value\": \"bottom right\",\n                          },\n                          Object {\n                            \"label\": \"Left Top\",\n                            \"value\": \"left top\",\n                          },\n                          Object {\n                            \"label\": \"Left\",\n                            \"value\": \"left\",\n                          },\n                          Object {\n                            \"label\": \"Left Bottom\",\n                            \"value\": \"left bottom\",\n                          },\n                        ]\n                      }\n                      dataSet={Object {}}\n                      disableVirtualization={false}\n                      getItem={[Function]}\n                      getItemCount={[Function]}\n                      horizontal={false}\n                      initialNumToRender={10}\n                      keyExtractor={[Function]}\n                      maxToRenderPerBatch={10}\n                      onContentSizeChange={[Function]}\n                      onEndReachedThreshold={2}\n                      onLayout={[Function]}\n                      onMomentumScrollEnd={[Function]}\n                      onScroll={[Function]}\n                      onScrollBeginDrag={[Function]}\n                      onScrollEndDrag={[Function]}\n                      removeClippedSubviews={true}\n                      renderItem={[Function]}\n                      scrollEventThrottle={50}\n                      stickyHeaderIndices={Array []}\n                      style={\n                        Object {\n                          \"width\": \"100%\",\n                        }\n                      }\n                      updateCellsBatchingPeriod={50}\n                      viewabilityConfigCallbackPairs={Array []}\n                      windowSize={21}\n                    >\n                      <View>\n                        <View\n                          onLayout={[Function]}\n                          style={null}\n                        >\n                          <View\n                            accessibilityState={\n                              Object {\n                                \"selected\": true,\n                              }\n                            }\n                            accessible={true}\n                            dataSet={Object {}}\n                            focusable={true}\n                            label=\"auto\"\n                            onBlur={[Function]}\n                            onClick={[Function]}\n                            onFocus={[Function]}\n                            onHoverIn={[Function]}\n                            onHoverOut={[Function]}\n                            onResponderGrant={[Function]}\n                            onResponderMove={[Function]}\n                            onResponderRelease={[Function]}\n                            onResponderTerminate={[Function]}\n                            onResponderTerminationRequest={[Function]}\n                            onStartShouldSetResponder={[Function]}\n                            style={\n                              Object {\n                                \"backgroundColor\": \"#0891b2\",\n                                \"justifyContent\": \"flex-start\",\n                                \"paddingBottom\": 16,\n                                \"paddingLeft\": 16,\n                                \"paddingRight\": 16,\n                                \"paddingTop\": 16,\n                                \"width\": \"100%\",\n                              }\n                            }\n                            value=\"auto\"\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"flexDirection\": \"row\",\n                                }\n                              }\n                              test={true}\n                            >\n                              <View\n                                dataSet={Object {}}\n                                style={Object {}}\n                              >\n                                <Text\n                                  dataSet={Object {}}\n                                  style={\n                                    Object {\n                                      \"backgroundColor\": undefined,\n                                      \"color\": \"#171717\",\n                                      \"fontFamily\": undefined,\n                                      \"fontSize\": 16,\n                                      \"fontStyle\": \"normal\",\n                                      \"fontWeight\": \"400\",\n                                      \"letterSpacing\": 0,\n                                      \"lineHeight\": 24,\n                                      \"textDecorationLine\": undefined,\n                                    }\n                                  }\n                                >\n                                  auto\n                                </Text>\n                              </View>\n                              <View\n                                dataSet={Object {}}\n                                style={\n                                  Object {\n                                    \"width\": 16,\n                                  }\n                                }\n                              />\n                              <RNSVGSvgView\n                                accessibilityRole=\"image\"\n                                align=\"xMidYMid\"\n                                bbHeight={16}\n                                bbWidth={16}\n                                color={-9211021}\n                                dataSet={Object {}}\n                                focusable={false}\n                                meetOrSlice={0}\n                                minX={0}\n                                minY={0}\n                                stroke=\"\"\n                                style={\n                                  Array [\n                                    Object {\n                                      \"backgroundColor\": \"transparent\",\n                                      \"borderWidth\": 0,\n                                    },\n                                    Object {\n                                      \"color\": \"#737373\",\n                                      \"height\": 16,\n                                      \"width\": 16,\n                                    },\n                                    Object {\n                                      \"flex\": 0,\n                                      \"height\": 16,\n                                      \"width\": 16,\n                                    },\n                                  ]\n                                }\n                                tintColor={-9211021}\n                                vbHeight={24}\n                                vbWidth={24}\n                              >\n                                <RNSVGGroup\n                                  propList={\n                                    Array [\n                                      \"stroke\",\n                                    ]\n                                  }\n                                  stroke={null}\n                                >\n                                  <RNSVGGroup>\n                                    <RNSVGPath\n                                      d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                                      fill={\n                                        Array [\n                                          2,\n                                        ]\n                                      }\n                                      propList={\n                                        Array [\n                                          \"fill\",\n                                          \"stroke\",\n                                        ]\n                                      }\n                                      stroke={null}\n                                    />\n                                  </RNSVGGroup>\n                                </RNSVGGroup>\n                              </RNSVGSvgView>\n                            </View>\n                          </View>\n                        </View>\n                        <View\n                          onLayout={[Function]}\n                          style={null}\n                        >\n                          <View\n                            accessibilityState={\n                              Object {\n                                \"selected\": false,\n                              }\n                            }\n                            accessible={true}\n                            dataSet={Object {}}\n                            focusable={true}\n                            label=\"Top Left\"\n                            onBlur={[Function]}\n                            onClick={[Function]}\n                            onFocus={[Function]}\n                            onHoverIn={[Function]}\n                            onHoverOut={[Function]}\n                            onResponderGrant={[Function]}\n                            onResponderMove={[Function]}\n                            onResponderRelease={[Function]}\n                            onResponderTerminate={[Function]}\n                            onResponderTerminationRequest={[Function]}\n                            onStartShouldSetResponder={[Function]}\n                            style={\n                              Object {\n                                \"backgroundColor\": \"#fafafa\",\n                                \"justifyContent\": \"flex-start\",\n                                \"paddingBottom\": 16,\n                                \"paddingLeft\": 16,\n                                \"paddingRight\": 16,\n                                \"paddingTop\": 16,\n                                \"width\": \"100%\",\n                              }\n                            }\n                            value=\"top left\"\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"flexDirection\": \"row\",\n                                }\n                              }\n                              test={true}\n                            >\n                              <View\n                                dataSet={Object {}}\n                                style={Object {}}\n                              >\n                                <Text\n                                  dataSet={Object {}}\n                                  style={\n                                    Object {\n                                      \"backgroundColor\": undefined,\n                                      \"color\": \"#171717\",\n                                      \"fontFamily\": undefined,\n                                      \"fontSize\": 16,\n                                      \"fontStyle\": \"normal\",\n                                      \"fontWeight\": \"400\",\n                                      \"letterSpacing\": 0,\n                                      \"lineHeight\": 24,\n                                      \"textDecorationLine\": undefined,\n                                    }\n                                  }\n                                >\n                                  Top Left\n                                </Text>\n                              </View>\n                            </View>\n                          </View>\n                        </View>\n                        <View\n                          onLayout={[Function]}\n                          style={null}\n                        >\n                          <View\n                            accessibilityState={\n                              Object {\n                                \"selected\": false,\n                              }\n                            }\n                            accessible={true}\n                            dataSet={Object {}}\n                            focusable={true}\n                            label=\"Top\"\n                            onBlur={[Function]}\n                            onClick={[Function]}\n                            onFocus={[Function]}\n                            onHoverIn={[Function]}\n                            onHoverOut={[Function]}\n                            onResponderGrant={[Function]}\n                            onResponderMove={[Function]}\n                            onResponderRelease={[Function]}\n                            onResponderTerminate={[Function]}\n                            onResponderTerminationRequest={[Function]}\n                            onStartShouldSetResponder={[Function]}\n                            style={\n                              Object {\n                                \"backgroundColor\": \"#fafafa\",\n                                \"justifyContent\": \"flex-start\",\n                                \"paddingBottom\": 16,\n                                \"paddingLeft\": 16,\n                                \"paddingRight\": 16,\n                                \"paddingTop\": 16,\n                                \"width\": \"100%\",\n                              }\n                            }\n                            value=\"top\"\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"flexDirection\": \"row\",\n                                }\n                              }\n                              test={true}\n                            >\n                              <View\n                                dataSet={Object {}}\n                                style={Object {}}\n                              >\n                                <Text\n                                  dataSet={Object {}}\n                                  style={\n                                    Object {\n                                      \"backgroundColor\": undefined,\n                                      \"color\": \"#171717\",\n                                      \"fontFamily\": undefined,\n                                      \"fontSize\": 16,\n                                      \"fontStyle\": \"normal\",\n                                      \"fontWeight\": \"400\",\n                                      \"letterSpacing\": 0,\n                                      \"lineHeight\": 24,\n                                      \"textDecorationLine\": undefined,\n                                    }\n                                  }\n                                >\n                                  Top\n                                </Text>\n                              </View>\n                            </View>\n                          </View>\n                        </View>\n                        <View\n                          onLayout={[Function]}\n                          style={null}\n                        >\n                          <View\n                            accessibilityState={\n                              Object {\n                                \"selected\": false,\n                              }\n                            }\n                            accessible={true}\n                            dataSet={Object {}}\n                            focusable={true}\n                            label=\"Top Right\"\n                            onBlur={[Function]}\n                            onClick={[Function]}\n                            onFocus={[Function]}\n                            onHoverIn={[Function]}\n                            onHoverOut={[Function]}\n                            onResponderGrant={[Function]}\n                            onResponderMove={[Function]}\n                            onResponderRelease={[Function]}\n                            onResponderTerminate={[Function]}\n                            onResponderTerminationRequest={[Function]}\n                            onStartShouldSetResponder={[Function]}\n                            style={\n                              Object {\n                                \"backgroundColor\": \"#fafafa\",\n                                \"justifyContent\": \"flex-start\",\n                                \"paddingBottom\": 16,\n                                \"paddingLeft\": 16,\n                                \"paddingRight\": 16,\n                                \"paddingTop\": 16,\n                                \"width\": \"100%\",\n                              }\n                            }\n                            value=\"top right\"\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"flexDirection\": \"row\",\n                                }\n                              }\n                              test={true}\n                            >\n                              <View\n                                dataSet={Object {}}\n                                style={Object {}}\n                              >\n                                <Text\n                                  dataSet={Object {}}\n                                  style={\n                                    Object {\n                                      \"backgroundColor\": undefined,\n                                      \"color\": \"#171717\",\n                                      \"fontFamily\": undefined,\n                                      \"fontSize\": 16,\n                                      \"fontStyle\": \"normal\",\n                                      \"fontWeight\": \"400\",\n                                      \"letterSpacing\": 0,\n                                      \"lineHeight\": 24,\n                                      \"textDecorationLine\": undefined,\n                                    }\n                                  }\n                                >\n                                  Top Right\n                                </Text>\n                              </View>\n                            </View>\n                          </View>\n                        </View>\n                        <View\n                          onLayout={[Function]}\n                          style={null}\n                        >\n                          <View\n                            accessibilityState={\n                              Object {\n                                \"selected\": false,\n                              }\n                            }\n                            accessible={true}\n                            dataSet={Object {}}\n                            focusable={true}\n                            label=\"Right Top\"\n                            onBlur={[Function]}\n                            onClick={[Function]}\n                            onFocus={[Function]}\n                            onHoverIn={[Function]}\n                            onHoverOut={[Function]}\n                            onResponderGrant={[Function]}\n                            onResponderMove={[Function]}\n                            onResponderRelease={[Function]}\n                            onResponderTerminate={[Function]}\n                            onResponderTerminationRequest={[Function]}\n                            onStartShouldSetResponder={[Function]}\n                            style={\n                              Object {\n                                \"backgroundColor\": \"#fafafa\",\n                                \"justifyContent\": \"flex-start\",\n                                \"paddingBottom\": 16,\n                                \"paddingLeft\": 16,\n                                \"paddingRight\": 16,\n                                \"paddingTop\": 16,\n                                \"width\": \"100%\",\n                              }\n                            }\n                            value=\"right top\"\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"flexDirection\": \"row\",\n                                }\n                              }\n                              test={true}\n                            >\n                              <View\n                                dataSet={Object {}}\n                                style={Object {}}\n                              >\n                                <Text\n                                  dataSet={Object {}}\n                                  style={\n                                    Object {\n                                      \"backgroundColor\": undefined,\n                                      \"color\": \"#171717\",\n                                      \"fontFamily\": undefined,\n                                      \"fontSize\": 16,\n                                      \"fontStyle\": \"normal\",\n                                      \"fontWeight\": \"400\",\n                                      \"letterSpacing\": 0,\n                                      \"lineHeight\": 24,\n                                      \"textDecorationLine\": undefined,\n                                    }\n                                  }\n                                >\n                                  Right Top\n                                </Text>\n                              </View>\n                            </View>\n                          </View>\n                        </View>\n                        <View\n                          onLayout={[Function]}\n                          style={null}\n                        >\n                          <View\n                            accessibilityState={\n                              Object {\n                                \"selected\": false,\n                              }\n                            }\n                            accessible={true}\n                            dataSet={Object {}}\n                            focusable={true}\n                            label=\"Right\"\n                            onBlur={[Function]}\n                            onClick={[Function]}\n                            onFocus={[Function]}\n                            onHoverIn={[Function]}\n                            onHoverOut={[Function]}\n                            onResponderGrant={[Function]}\n                            onResponderMove={[Function]}\n                            onResponderRelease={[Function]}\n                            onResponderTerminate={[Function]}\n                            onResponderTerminationRequest={[Function]}\n                            onStartShouldSetResponder={[Function]}\n                            style={\n                              Object {\n                                \"backgroundColor\": \"#fafafa\",\n                                \"justifyContent\": \"flex-start\",\n                                \"paddingBottom\": 16,\n                                \"paddingLeft\": 16,\n                                \"paddingRight\": 16,\n                                \"paddingTop\": 16,\n                                \"width\": \"100%\",\n                              }\n                            }\n                            value=\"right\"\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"flexDirection\": \"row\",\n                                }\n                              }\n                              test={true}\n                            >\n                              <View\n                                dataSet={Object {}}\n                                style={Object {}}\n                              >\n                                <Text\n                                  dataSet={Object {}}\n                                  style={\n                                    Object {\n                                      \"backgroundColor\": undefined,\n                                      \"color\": \"#171717\",\n                                      \"fontFamily\": undefined,\n                                      \"fontSize\": 16,\n                                      \"fontStyle\": \"normal\",\n                                      \"fontWeight\": \"400\",\n                                      \"letterSpacing\": 0,\n                                      \"lineHeight\": 24,\n                                      \"textDecorationLine\": undefined,\n                                    }\n                                  }\n                                >\n                                  Right\n                                </Text>\n                              </View>\n                            </View>\n                          </View>\n                        </View>\n                        <View\n                          onLayout={[Function]}\n                          style={null}\n                        >\n                          <View\n                            accessibilityState={\n                              Object {\n                                \"selected\": false,\n                              }\n                            }\n                            accessible={true}\n                            dataSet={Object {}}\n                            focusable={true}\n                            label=\"Right Bottom\"\n                            onBlur={[Function]}\n                            onClick={[Function]}\n                            onFocus={[Function]}\n                            onHoverIn={[Function]}\n                            onHoverOut={[Function]}\n                            onResponderGrant={[Function]}\n                            onResponderMove={[Function]}\n                            onResponderRelease={[Function]}\n                            onResponderTerminate={[Function]}\n                            onResponderTerminationRequest={[Function]}\n                            onStartShouldSetResponder={[Function]}\n                            style={\n                              Object {\n                                \"backgroundColor\": \"#fafafa\",\n                                \"justifyContent\": \"flex-start\",\n                                \"paddingBottom\": 16,\n                                \"paddingLeft\": 16,\n                                \"paddingRight\": 16,\n                                \"paddingTop\": 16,\n                                \"width\": \"100%\",\n                              }\n                            }\n                            value=\"right bottom\"\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"flexDirection\": \"row\",\n                                }\n                              }\n                              test={true}\n                            >\n                              <View\n                                dataSet={Object {}}\n                                style={Object {}}\n                              >\n                                <Text\n                                  dataSet={Object {}}\n                                  style={\n                                    Object {\n                                      \"backgroundColor\": undefined,\n                                      \"color\": \"#171717\",\n                                      \"fontFamily\": undefined,\n                                      \"fontSize\": 16,\n                                      \"fontStyle\": \"normal\",\n                                      \"fontWeight\": \"400\",\n                                      \"letterSpacing\": 0,\n                                      \"lineHeight\": 24,\n                                      \"textDecorationLine\": undefined,\n                                    }\n                                  }\n                                >\n                                  Right Bottom\n                                </Text>\n                              </View>\n                            </View>\n                          </View>\n                        </View>\n                        <View\n                          onLayout={[Function]}\n                          style={null}\n                        >\n                          <View\n                            accessibilityState={\n                              Object {\n                                \"selected\": false,\n                              }\n                            }\n                            accessible={true}\n                            dataSet={Object {}}\n                            focusable={true}\n                            label=\"Bottom Left\"\n                            onBlur={[Function]}\n                            onClick={[Function]}\n                            onFocus={[Function]}\n                            onHoverIn={[Function]}\n                            onHoverOut={[Function]}\n                            onResponderGrant={[Function]}\n                            onResponderMove={[Function]}\n                            onResponderRelease={[Function]}\n                            onResponderTerminate={[Function]}\n                            onResponderTerminationRequest={[Function]}\n                            onStartShouldSetResponder={[Function]}\n                            style={\n                              Object {\n                                \"backgroundColor\": \"#fafafa\",\n                                \"justifyContent\": \"flex-start\",\n                                \"paddingBottom\": 16,\n                                \"paddingLeft\": 16,\n                                \"paddingRight\": 16,\n                                \"paddingTop\": 16,\n                                \"width\": \"100%\",\n                              }\n                            }\n                            value=\"bottom left\"\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"flexDirection\": \"row\",\n                                }\n                              }\n                              test={true}\n                            >\n                              <View\n                                dataSet={Object {}}\n                                style={Object {}}\n                              >\n                                <Text\n                                  dataSet={Object {}}\n                                  style={\n                                    Object {\n                                      \"backgroundColor\": undefined,\n                                      \"color\": \"#171717\",\n                                      \"fontFamily\": undefined,\n                                      \"fontSize\": 16,\n                                      \"fontStyle\": \"normal\",\n                                      \"fontWeight\": \"400\",\n                                      \"letterSpacing\": 0,\n                                      \"lineHeight\": 24,\n                                      \"textDecorationLine\": undefined,\n                                    }\n                                  }\n                                >\n                                  Bottom Left\n                                </Text>\n                              </View>\n                            </View>\n                          </View>\n                        </View>\n                        <View\n                          onLayout={[Function]}\n                          style={null}\n                        >\n                          <View\n                            accessibilityState={\n                              Object {\n                                \"selected\": false,\n                              }\n                            }\n                            accessible={true}\n                            dataSet={Object {}}\n                            focusable={true}\n                            label=\"Bottom\"\n                            onBlur={[Function]}\n                            onClick={[Function]}\n                            onFocus={[Function]}\n                            onHoverIn={[Function]}\n                            onHoverOut={[Function]}\n                            onResponderGrant={[Function]}\n                            onResponderMove={[Function]}\n                            onResponderRelease={[Function]}\n                            onResponderTerminate={[Function]}\n                            onResponderTerminationRequest={[Function]}\n                            onStartShouldSetResponder={[Function]}\n                            style={\n                              Object {\n                                \"backgroundColor\": \"#fafafa\",\n                                \"justifyContent\": \"flex-start\",\n                                \"paddingBottom\": 16,\n                                \"paddingLeft\": 16,\n                                \"paddingRight\": 16,\n                                \"paddingTop\": 16,\n                                \"width\": \"100%\",\n                              }\n                            }\n                            value=\"bottom\"\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"flexDirection\": \"row\",\n                                }\n                              }\n                              test={true}\n                            >\n                              <View\n                                dataSet={Object {}}\n                                style={Object {}}\n                              >\n                                <Text\n                                  dataSet={Object {}}\n                                  style={\n                                    Object {\n                                      \"backgroundColor\": undefined,\n                                      \"color\": \"#171717\",\n                                      \"fontFamily\": undefined,\n                                      \"fontSize\": 16,\n                                      \"fontStyle\": \"normal\",\n                                      \"fontWeight\": \"400\",\n                                      \"letterSpacing\": 0,\n                                      \"lineHeight\": 24,\n                                      \"textDecorationLine\": undefined,\n                                    }\n                                  }\n                                >\n                                  Bottom\n                                </Text>\n                              </View>\n                            </View>\n                          </View>\n                        </View>\n                        <View\n                          onLayout={[Function]}\n                          style={null}\n                        >\n                          <View\n                            accessibilityState={\n                              Object {\n                                \"selected\": false,\n                              }\n                            }\n                            accessible={true}\n                            dataSet={Object {}}\n                            focusable={true}\n                            label=\"Bottom Right\"\n                            onBlur={[Function]}\n                            onClick={[Function]}\n                            onFocus={[Function]}\n                            onHoverIn={[Function]}\n                            onHoverOut={[Function]}\n                            onResponderGrant={[Function]}\n                            onResponderMove={[Function]}\n                            onResponderRelease={[Function]}\n                            onResponderTerminate={[Function]}\n                            onResponderTerminationRequest={[Function]}\n                            onStartShouldSetResponder={[Function]}\n                            style={\n                              Object {\n                                \"backgroundColor\": \"#fafafa\",\n                                \"justifyContent\": \"flex-start\",\n                                \"paddingBottom\": 16,\n                                \"paddingLeft\": 16,\n                                \"paddingRight\": 16,\n                                \"paddingTop\": 16,\n                                \"width\": \"100%\",\n                              }\n                            }\n                            value=\"bottom right\"\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"flexDirection\": \"row\",\n                                }\n                              }\n                              test={true}\n                            >\n                              <View\n                                dataSet={Object {}}\n                                style={Object {}}\n                              >\n                                <Text\n                                  dataSet={Object {}}\n                                  style={\n                                    Object {\n                                      \"backgroundColor\": undefined,\n                                      \"color\": \"#171717\",\n                                      \"fontFamily\": undefined,\n                                      \"fontSize\": 16,\n                                      \"fontStyle\": \"normal\",\n                                      \"fontWeight\": \"400\",\n                                      \"letterSpacing\": 0,\n                                      \"lineHeight\": 24,\n                                      \"textDecorationLine\": undefined,\n                                    }\n                                  }\n                                >\n                                  Bottom Right\n                                </Text>\n                              </View>\n                            </View>\n                          </View>\n                        </View>\n                        <View\n                          style={\n                            Object {\n                              \"height\": 0,\n                            }\n                          }\n                        />\n                      </View>\n                    </RCTScrollView>\n                  </View>\n                </View>\n              </View>\n            </View>\n          </View>\n        </Modal>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Pressable Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        accessible={true}\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"backgroundColor\": \"#f3f4f6\",\n            \"borderColor\": \"#d1d5db\",\n            \"borderRadius\": 8,\n            \"borderWidth\": 1,\n            \"elevation\": 4,\n            \"maxWidth\": 384,\n            \"overflow\": \"hidden\",\n            \"paddingBottom\": 20,\n            \"paddingLeft\": 20,\n            \"paddingRight\": 20,\n            \"paddingTop\": 20,\n            \"shadowColor\": \"#000000\",\n            \"shadowOffset\": Object {\n              \"height\": 2,\n              \"width\": 0,\n            },\n            \"shadowOpacity\": 0.23,\n            \"shadowRadius\": 2.62,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <View\n              colorScheme=\"darkBlue\"\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#005db4\",\n                  \"borderColor\": \"transparent\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 2,\n                  \"paddingLeft\": 8,\n                  \"paddingRight\": 8,\n                  \"paddingTop\": 2,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#FFFFFF\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 12,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"500\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 18,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Business\n                </Text>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"flexGrow\": 1,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#1f2937\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 10,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 15,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              1 month ago\n            </Text>\n          </View>\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#1f2937\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 30,\n                \"marginTop\": 12,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Marketing License\n          </Text>\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#374151\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"marginTop\": 8,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Unlock powerfull time-saving tools for creating email delivery and collecting marketing data\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"display\": \"flex\",\n                \"flexDirection\": \"column\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#005db4\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"500\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 18,\n                  \"marginTop\": 8,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Read More\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Pressable Events 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        accessible={true}\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"maxWidth\": 384,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Array [\n              Object {\n                \"backgroundColor\": \"#f3f4f6\",\n                \"borderColor\": \"#d1d5db\",\n                \"borderRadius\": 8,\n                \"borderWidth\": 1,\n                \"elevation\": 4,\n                \"paddingBottom\": 20,\n                \"paddingLeft\": 20,\n                \"paddingRight\": 20,\n                \"paddingTop\": 20,\n                \"shadowColor\": \"#000000\",\n                \"shadowOffset\": Object {\n                  \"height\": 2,\n                  \"width\": 0,\n                },\n                \"shadowOpacity\": 0.23,\n                \"shadowRadius\": 2.62,\n              },\n              Object {\n                \"transform\": Array [\n                  Object {\n                    \"scale\": 1,\n                  },\n                ],\n              },\n            ]\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <View\n              colorScheme=\"darkBlue\"\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#005db4\",\n                  \"borderColor\": \"transparent\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 2,\n                  \"paddingLeft\": 8,\n                  \"paddingRight\": 8,\n                  \"paddingTop\": 2,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#FFFFFF\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 12,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"500\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 18,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Business\n                </Text>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"flexGrow\": 1,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#1f2937\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 10,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 15,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              1 month ago\n            </Text>\n          </View>\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#1f2937\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 30,\n                \"marginTop\": 12,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Marketing License\n          </Text>\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#374151\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"marginTop\": 8,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Unlock powerfull time-saving tools for creating email delivery and collecting marketing data\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"display\": \"flex\",\n                \"flexDirection\": \"column\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#005db4\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"500\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 18,\n                  \"marginTop\": 8,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Read More\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Progress ColorSchemes 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"maxWidth\": 400,\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"marginLeft\": 16,\n                \"marginRight\": 16,\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"progressbar\"\n              accessibilityValue={\n                Object {\n                  \"max\": 100,\n                  \"min\": 0,\n                  \"now\": 35,\n                }\n              }\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              isIndeterminate={false}\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"borderRadius\": 9999,\n                  \"height\": 8,\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#0891b2\",\n                    \"borderRadius\": 9999,\n                    \"display\": \"flex\",\n                    \"elevation\": 1,\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"shadowColor\": \"#000000\",\n                    \"shadowOffset\": Object {\n                      \"height\": 1,\n                      \"width\": 0,\n                    },\n                    \"shadowOpacity\": 0.18,\n                    \"shadowRadius\": 1,\n                    \"width\": \"35%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 16,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"progressbar\"\n              accessibilityValue={\n                Object {\n                  \"max\": 100,\n                  \"min\": 0,\n                  \"now\": 45,\n                }\n              }\n              accessible={true}\n              colorScheme=\"secondary\"\n              dataSet={Object {}}\n              isIndeterminate={false}\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"borderRadius\": 9999,\n                  \"height\": 8,\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#db2777\",\n                    \"borderRadius\": 9999,\n                    \"display\": \"flex\",\n                    \"elevation\": 1,\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"shadowColor\": \"#000000\",\n                    \"shadowOffset\": Object {\n                      \"height\": 1,\n                      \"width\": 0,\n                    },\n                    \"shadowOpacity\": 0.18,\n                    \"shadowRadius\": 1,\n                    \"width\": \"45%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 16,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"progressbar\"\n              accessibilityValue={\n                Object {\n                  \"max\": 100,\n                  \"min\": 0,\n                  \"now\": 55.00000000000001,\n                }\n              }\n              accessible={true}\n              colorScheme=\"emerald\"\n              dataSet={Object {}}\n              isIndeterminate={false}\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"borderRadius\": 9999,\n                  \"height\": 8,\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#059669\",\n                    \"borderRadius\": 9999,\n                    \"display\": \"flex\",\n                    \"elevation\": 1,\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"shadowColor\": \"#000000\",\n                    \"shadowOffset\": Object {\n                      \"height\": 1,\n                      \"width\": 0,\n                    },\n                    \"shadowOpacity\": 0.18,\n                    \"shadowRadius\": 1,\n                    \"width\": \"55.00000000000001%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 16,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"progressbar\"\n              accessibilityValue={\n                Object {\n                  \"max\": 100,\n                  \"min\": 0,\n                  \"now\": 65,\n                }\n              }\n              accessible={true}\n              colorScheme=\"warning\"\n              dataSet={Object {}}\n              isIndeterminate={false}\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"borderRadius\": 9999,\n                  \"height\": 8,\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#ea580c\",\n                    \"borderRadius\": 9999,\n                    \"display\": \"flex\",\n                    \"elevation\": 1,\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"shadowColor\": \"#000000\",\n                    \"shadowOffset\": Object {\n                      \"height\": 1,\n                      \"width\": 0,\n                    },\n                    \"shadowOpacity\": 0.18,\n                    \"shadowRadius\": 1,\n                    \"width\": \"65%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 16,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"progressbar\"\n              accessibilityValue={\n                Object {\n                  \"max\": 100,\n                  \"min\": 0,\n                  \"now\": 75,\n                }\n              }\n              accessible={true}\n              colorScheme=\"light\"\n              dataSet={Object {}}\n              isIndeterminate={false}\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"borderRadius\": 9999,\n                  \"height\": 8,\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#57534e\",\n                    \"borderRadius\": 9999,\n                    \"display\": \"flex\",\n                    \"elevation\": 1,\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"shadowColor\": \"#000000\",\n                    \"shadowOffset\": Object {\n                      \"height\": 1,\n                      \"width\": 0,\n                    },\n                    \"shadowOpacity\": 0.18,\n                    \"shadowRadius\": 1,\n                    \"width\": \"75%\",\n                  }\n                }\n              />\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Progress Composition 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"width\": \"90%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"display\": \"flex\",\n            \"justifyContent\": \"center\",\n            \"marginBottom\": 40,\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 20,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 25,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Progress Composition\n        </Text>\n      </View>\n      <View\n        accessibilityRole=\"progressbar\"\n        accessibilityValue={\n          Object {\n            \"max\": 100,\n            \"min\": 0,\n            \"now\": 45,\n          }\n        }\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        isIndeterminate={false}\n        style={\n          Object {\n            \"backgroundColor\": \"#e5e5e5\",\n            \"borderRadius\": 9999,\n            \"height\": 20,\n            \"marginBottom\": 16,\n            \"overflow\": \"hidden\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 9999,\n              \"display\": \"flex\",\n              \"elevation\": 1,\n              \"height\": \"100%\",\n              \"justifyContent\": \"center\",\n              \"shadowColor\": \"#000000\",\n              \"shadowOffset\": Object {\n                \"height\": 1,\n                \"width\": 0,\n              },\n              \"shadowOpacity\": 0.18,\n              \"shadowRadius\": 1,\n              \"width\": \"45%\",\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#FFFFFF\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            45%\n          </Text>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"display\": \"flex\",\n            \"flexDirection\": \"row\",\n          }\n        }\n      >\n        <View\n          accessibilityRole=\"progressbar\"\n          accessibilityValue={\n            Object {\n              \"max\": 100,\n              \"min\": 0,\n              \"now\": 75,\n            }\n          }\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          isIndeterminate={false}\n          style={\n            Object {\n              \"backgroundColor\": \"#e5e5e5\",\n              \"borderRadius\": 9999,\n              \"flex\": 1,\n              \"height\": 20,\n              \"marginBottom\": 16,\n              \"overflow\": \"hidden\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#0891b2\",\n                \"borderRadius\": 9999,\n                \"display\": \"flex\",\n                \"elevation\": 1,\n                \"height\": \"100%\",\n                \"justifyContent\": \"center\",\n                \"shadowColor\": \"#000000\",\n                \"shadowOffset\": Object {\n                  \"height\": 1,\n                  \"width\": 0,\n                },\n                \"shadowOpacity\": 0.18,\n                \"shadowRadius\": 1,\n                \"width\": \"75%\",\n              }\n            }\n          />\n        </View>\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"marginLeft\": 8,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          75%\n        </Text>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Progress CustomBgColor 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"maxWidth\": 400,\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <View\n          accessibilityRole=\"progressbar\"\n          accessibilityValue={\n            Object {\n              \"max\": 100,\n              \"min\": 0,\n              \"now\": 75,\n            }\n          }\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          isIndeterminate={false}\n          style={\n            Object {\n              \"backgroundColor\": \"#f3f4f6\",\n              \"borderRadius\": 9999,\n              \"height\": 8,\n              \"marginLeft\": 16,\n              \"marginRight\": 16,\n              \"overflow\": \"hidden\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#84cc16\",\n                \"borderRadius\": 9999,\n                \"display\": \"flex\",\n                \"elevation\": 1,\n                \"height\": \"100%\",\n                \"justifyContent\": \"center\",\n                \"shadowColor\": \"#000000\",\n                \"shadowOffset\": Object {\n                  \"height\": 1,\n                  \"width\": 0,\n                },\n                \"shadowOpacity\": 0.18,\n                \"shadowRadius\": 1,\n                \"width\": \"75%\",\n              }\n            }\n          />\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Progress Default Progress Bar 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"maxWidth\": 400,\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <View\n          accessibilityRole=\"progressbar\"\n          accessibilityValue={\n            Object {\n              \"max\": 100,\n              \"min\": 0,\n              \"now\": 45,\n            }\n          }\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          isIndeterminate={false}\n          style={\n            Object {\n              \"backgroundColor\": \"#e5e5e5\",\n              \"borderRadius\": 9999,\n              \"height\": 8,\n              \"marginLeft\": 16,\n              \"marginRight\": 16,\n              \"overflow\": \"hidden\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#0891b2\",\n                \"borderRadius\": 9999,\n                \"display\": \"flex\",\n                \"elevation\": 1,\n                \"height\": \"100%\",\n                \"justifyContent\": \"center\",\n                \"shadowColor\": \"#000000\",\n                \"shadowOffset\": Object {\n                  \"height\": 1,\n                  \"width\": 0,\n                },\n                \"shadowOpacity\": 0.18,\n                \"shadowRadius\": 1,\n                \"width\": \"45%\",\n              }\n            }\n          />\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Progress Flat 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"maxWidth\": 400,\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <View\n          accessibilityRole=\"progressbar\"\n          accessibilityValue={\n            Object {\n              \"max\": 100,\n              \"min\": 0,\n              \"now\": 65,\n            }\n          }\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          isIndeterminate={false}\n          style={\n            Object {\n              \"backgroundColor\": \"#e5e5e5\",\n              \"borderRadius\": 0,\n              \"height\": 8,\n              \"marginLeft\": 16,\n              \"marginRight\": 16,\n              \"overflow\": \"hidden\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#0891b2\",\n                \"borderRadius\": 9999,\n                \"display\": \"flex\",\n                \"elevation\": 1,\n                \"height\": \"100%\",\n                \"justifyContent\": \"center\",\n                \"shadowColor\": \"#000000\",\n                \"shadowOffset\": Object {\n                  \"height\": 1,\n                  \"width\": 0,\n                },\n                \"shadowOpacity\": 0.18,\n                \"shadowRadius\": 1,\n                \"width\": \"65%\",\n              }\n            }\n          />\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Progress Sizes 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"maxWidth\": 400,\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"marginLeft\": 16,\n                \"marginRight\": 16,\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"progressbar\"\n              accessibilityValue={\n                Object {\n                  \"max\": 100,\n                  \"min\": 0,\n                  \"now\": 25,\n                }\n              }\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              isIndeterminate={false}\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"borderRadius\": 9999,\n                  \"height\": 4,\n                  \"marginBottom\": 16,\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#0891b2\",\n                    \"borderRadius\": 9999,\n                    \"display\": \"flex\",\n                    \"elevation\": 1,\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"shadowColor\": \"#000000\",\n                    \"shadowOffset\": Object {\n                      \"height\": 1,\n                      \"width\": 0,\n                    },\n                    \"shadowOpacity\": 0.18,\n                    \"shadowRadius\": 1,\n                    \"width\": \"25%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 16,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"progressbar\"\n              accessibilityValue={\n                Object {\n                  \"max\": 100,\n                  \"min\": 0,\n                  \"now\": 35,\n                }\n              }\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              isIndeterminate={false}\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"borderRadius\": 9999,\n                  \"height\": 8,\n                  \"marginBottom\": 16,\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#0891b2\",\n                    \"borderRadius\": 9999,\n                    \"display\": \"flex\",\n                    \"elevation\": 1,\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"shadowColor\": \"#000000\",\n                    \"shadowOffset\": Object {\n                      \"height\": 1,\n                      \"width\": 0,\n                    },\n                    \"shadowOpacity\": 0.18,\n                    \"shadowRadius\": 1,\n                    \"width\": \"35%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 16,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"progressbar\"\n              accessibilityValue={\n                Object {\n                  \"max\": 100,\n                  \"min\": 0,\n                  \"now\": 45,\n                }\n              }\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              isIndeterminate={false}\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"borderRadius\": 9999,\n                  \"height\": 12,\n                  \"marginBottom\": 16,\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#0891b2\",\n                    \"borderRadius\": 9999,\n                    \"display\": \"flex\",\n                    \"elevation\": 1,\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"shadowColor\": \"#000000\",\n                    \"shadowOffset\": Object {\n                      \"height\": 1,\n                      \"width\": 0,\n                    },\n                    \"shadowOpacity\": 0.18,\n                    \"shadowRadius\": 1,\n                    \"width\": \"45%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 16,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"progressbar\"\n              accessibilityValue={\n                Object {\n                  \"max\": 100,\n                  \"min\": 0,\n                  \"now\": 55.00000000000001,\n                }\n              }\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              isIndeterminate={false}\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"borderRadius\": 9999,\n                  \"height\": 16,\n                  \"marginBottom\": 16,\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#0891b2\",\n                    \"borderRadius\": 9999,\n                    \"display\": \"flex\",\n                    \"elevation\": 1,\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"shadowColor\": \"#000000\",\n                    \"shadowOffset\": Object {\n                      \"height\": 1,\n                      \"width\": 0,\n                    },\n                    \"shadowOpacity\": 0.18,\n                    \"shadowRadius\": 1,\n                    \"width\": \"55.00000000000001%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 16,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"progressbar\"\n              accessibilityValue={\n                Object {\n                  \"max\": 100,\n                  \"min\": 0,\n                  \"now\": 65,\n                }\n              }\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              isIndeterminate={false}\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"borderRadius\": 9999,\n                  \"height\": 20,\n                  \"marginBottom\": 16,\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#0891b2\",\n                    \"borderRadius\": 9999,\n                    \"display\": \"flex\",\n                    \"elevation\": 1,\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"shadowColor\": \"#000000\",\n                    \"shadowOffset\": Object {\n                      \"height\": 1,\n                      \"width\": 0,\n                    },\n                    \"shadowOpacity\": 0.18,\n                    \"shadowRadius\": 1,\n                    \"width\": \"65%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 16,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"progressbar\"\n              accessibilityValue={\n                Object {\n                  \"max\": 100,\n                  \"min\": 0,\n                  \"now\": 75,\n                }\n              }\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              isIndeterminate={false}\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"borderRadius\": 9999,\n                  \"height\": 24,\n                  \"marginBottom\": 16,\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#0891b2\",\n                    \"borderRadius\": 9999,\n                    \"display\": \"flex\",\n                    \"elevation\": 1,\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"shadowColor\": \"#000000\",\n                    \"shadowOffset\": Object {\n                      \"height\": 1,\n                      \"width\": 0,\n                    },\n                    \"shadowOpacity\": 0.18,\n                    \"shadowRadius\": 1,\n                    \"width\": \"75%\",\n                  }\n                }\n              />\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Radio Controlled Radio 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      accessibilityLabel=\"favorite number\"\n      accessibilityRole=\"radiogroup\"\n      accessibilityState={\n        Object {\n          \"disabled\": undefined,\n        }\n      }\n      dataSet={Object {}}\n      name=\"myRadioGroup\"\n      onChange={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"flex-start\",\n        }\n      }\n      value=\"one\"\n    >\n      <View\n        accessibilityRole=\"radio\"\n        accessibilityState={\n          Object {\n            \"checked\": true,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        checked={true}\n        dataSet={Object {}}\n        focusable={true}\n        formControlContext={Object {}}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        state={\n          Object {\n            \"lastFocusedValue\": null,\n            \"name\": \"myRadioGroup\",\n            \"selectedValue\": \"one\",\n            \"setLastFocusedValue\": [Function],\n            \"setSelectedValue\": [Function],\n          }\n        }\n        style={Object {}}\n        value=\"one\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              formControlContext={Object {}}\n              state={\n                Object {\n                  \"lastFocusedValue\": null,\n                  \"name\": \"myRadioGroup\",\n                  \"selectedValue\": \"one\",\n                  \"setLastFocusedValue\": [Function],\n                  \"setSelectedValue\": [Function],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#0891b2\",\n                  \"borderRadius\": 9999,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                  \"paddingBottom\": 4,\n                  \"paddingLeft\": 4,\n                  \"paddingRight\": 4,\n                  \"paddingTop\": 4,\n                }\n              }\n              value=\"one\"\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={-16215630}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#0891b2\",\n                      \"height\": 12,\n                      \"opacity\": 1,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={-16215630}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  opacity={1}\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            One\n          </Text>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n      <View\n        accessibilityRole=\"radio\"\n        accessibilityState={\n          Object {\n            \"checked\": false,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        checked={false}\n        dataSet={Object {}}\n        focusable={true}\n        formControlContext={Object {}}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        state={\n          Object {\n            \"lastFocusedValue\": null,\n            \"name\": \"myRadioGroup\",\n            \"selectedValue\": \"one\",\n            \"setLastFocusedValue\": [Function],\n            \"setSelectedValue\": [Function],\n          }\n        }\n        style={Object {}}\n        value=\"two\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              formControlContext={Object {}}\n              state={\n                Object {\n                  \"lastFocusedValue\": null,\n                  \"name\": \"myRadioGroup\",\n                  \"selectedValue\": \"one\",\n                  \"setLastFocusedValue\": [Function],\n                  \"setSelectedValue\": [Function],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#a3a3a3\",\n                  \"borderRadius\": 9999,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                  \"paddingBottom\": 4,\n                  \"paddingLeft\": 4,\n                  \"paddingRight\": 4,\n                  \"paddingTop\": 4,\n                }\n              }\n              value=\"two\"\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={-9211021}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#737373\",\n                      \"height\": 12,\n                      \"opacity\": 0,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={-9211021}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  opacity={0}\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Two\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Radio Custom Color 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      accessibilityLabel=\"favorite colorscheme\"\n      accessibilityRole=\"radiogroup\"\n      accessibilityState={\n        Object {\n          \"disabled\": undefined,\n        }\n      }\n      dataSet={Object {}}\n      defaultValue=\"1\"\n      name=\"exampleGroup\"\n      style={\n        Object {\n          \"alignItems\": \"flex-start\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"radio\"\n        accessibilityState={\n          Object {\n            \"checked\": true,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        checked={true}\n        colorScheme=\"emerald\"\n        dataSet={Object {}}\n        focusable={true}\n        formControlContext={Object {}}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        state={\n          Object {\n            \"lastFocusedValue\": null,\n            \"name\": \"exampleGroup\",\n            \"selectedValue\": \"1\",\n            \"setLastFocusedValue\": [Function],\n            \"setSelectedValue\": [Function],\n          }\n        }\n        style={Object {}}\n        value=\"1\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              colorScheme=\"emerald\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              formControlContext={Object {}}\n              state={\n                Object {\n                  \"lastFocusedValue\": null,\n                  \"name\": \"exampleGroup\",\n                  \"selectedValue\": \"1\",\n                  \"setLastFocusedValue\": [Function],\n                  \"setSelectedValue\": [Function],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#059669\",\n                  \"borderRadius\": 9999,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                  \"paddingBottom\": 4,\n                  \"paddingLeft\": 4,\n                  \"paddingRight\": 4,\n                  \"paddingTop\": 4,\n                }\n              }\n              value=\"1\"\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={-16411031}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#059669\",\n                      \"height\": 12,\n                      \"opacity\": 1,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={-16411031}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  opacity={1}\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            emerald\n          </Text>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n      <View\n        accessibilityRole=\"radio\"\n        accessibilityState={\n          Object {\n            \"checked\": false,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        checked={false}\n        colorScheme=\"secondary\"\n        dataSet={Object {}}\n        focusable={true}\n        formControlContext={Object {}}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        state={\n          Object {\n            \"lastFocusedValue\": null,\n            \"name\": \"exampleGroup\",\n            \"selectedValue\": \"1\",\n            \"setLastFocusedValue\": [Function],\n            \"setSelectedValue\": [Function],\n          }\n        }\n        style={Object {}}\n        value=\"2\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              colorScheme=\"secondary\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              formControlContext={Object {}}\n              state={\n                Object {\n                  \"lastFocusedValue\": null,\n                  \"name\": \"exampleGroup\",\n                  \"selectedValue\": \"1\",\n                  \"setLastFocusedValue\": [Function],\n                  \"setSelectedValue\": [Function],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#a3a3a3\",\n                  \"borderRadius\": 9999,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                  \"paddingBottom\": 4,\n                  \"paddingLeft\": 4,\n                  \"paddingRight\": 4,\n                  \"paddingTop\": 4,\n                }\n              }\n              value=\"2\"\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={-9211021}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#737373\",\n                      \"height\": 12,\n                      \"opacity\": 0,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={-9211021}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  opacity={0}\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            secondary\n          </Text>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n      <View\n        accessibilityRole=\"radio\"\n        accessibilityState={\n          Object {\n            \"checked\": false,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        checked={false}\n        colorScheme=\"warning\"\n        dataSet={Object {}}\n        focusable={true}\n        formControlContext={Object {}}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        state={\n          Object {\n            \"lastFocusedValue\": null,\n            \"name\": \"exampleGroup\",\n            \"selectedValue\": \"1\",\n            \"setLastFocusedValue\": [Function],\n            \"setSelectedValue\": [Function],\n          }\n        }\n        style={Object {}}\n        value=\"3\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              colorScheme=\"warning\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              formControlContext={Object {}}\n              state={\n                Object {\n                  \"lastFocusedValue\": null,\n                  \"name\": \"exampleGroup\",\n                  \"selectedValue\": \"1\",\n                  \"setLastFocusedValue\": [Function],\n                  \"setSelectedValue\": [Function],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#a3a3a3\",\n                  \"borderRadius\": 9999,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                  \"paddingBottom\": 4,\n                  \"paddingLeft\": 4,\n                  \"paddingRight\": 4,\n                  \"paddingTop\": 4,\n                }\n              }\n              value=\"3\"\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={-9211021}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#737373\",\n                      \"height\": 12,\n                      \"opacity\": 0,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={-9211021}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  opacity={0}\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            warning\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Radio Custom Icon 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      accessibilityLabel=\"pick a choice\"\n      accessibilityRole=\"radiogroup\"\n      accessibilityState={\n        Object {\n          \"disabled\": undefined,\n        }\n      }\n      dataSet={Object {}}\n      defaultValue=\"1\"\n      name=\"exampleGroup\"\n      style={\n        Object {\n          \"alignItems\": \"flex-start\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"radio\"\n        accessibilityState={\n          Object {\n            \"checked\": true,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        checked={true}\n        colorScheme=\"green\"\n        dataSet={Object {}}\n        focusable={true}\n        formControlContext={Object {}}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        state={\n          Object {\n            \"lastFocusedValue\": null,\n            \"name\": \"exampleGroup\",\n            \"selectedValue\": \"1\",\n            \"setLastFocusedValue\": [Function],\n            \"setSelectedValue\": [Function],\n          }\n        }\n        style={Object {}}\n        value=\"1\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              colorScheme=\"green\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              formControlContext={Object {}}\n              state={\n                Object {\n                  \"lastFocusedValue\": null,\n                  \"name\": \"exampleGroup\",\n                  \"selectedValue\": \"1\",\n                  \"setLastFocusedValue\": [Function],\n                  \"setSelectedValue\": [Function],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#16a34a\",\n                  \"borderRadius\": 9999,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                  \"paddingBottom\": 4,\n                  \"paddingLeft\": 4,\n                  \"paddingRight\": 4,\n                  \"paddingTop\": 4,\n                }\n              }\n              value=\"1\"\n            >\n              <Text\n                allowFontScaling={false}\n                dataSet={Object {}}\n                style={\n                  Array [\n                    Object {\n                      \"color\": undefined,\n                      \"fontSize\": 12,\n                    },\n                    Object {\n                      \"color\": \"#16a34a\",\n                      \"fontSize\": 12,\n                      \"height\": 12,\n                      \"lineHeight\": 12,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"fontFamily\": \"material-community\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"normal\",\n                    },\n                    Object {},\n                  ]\n                }\n              >\n                󰢚\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"marginLeft\": 8,\n                \"marginRight\": 8,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Alien\n          </Text>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n      <View\n        accessibilityRole=\"radio\"\n        accessibilityState={\n          Object {\n            \"checked\": false,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        checked={false}\n        colorScheme=\"red\"\n        dataSet={Object {}}\n        focusable={true}\n        formControlContext={Object {}}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        state={\n          Object {\n            \"lastFocusedValue\": null,\n            \"name\": \"exampleGroup\",\n            \"selectedValue\": \"1\",\n            \"setLastFocusedValue\": [Function],\n            \"setSelectedValue\": [Function],\n          }\n        }\n        style={Object {}}\n        value=\"2\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              colorScheme=\"red\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              formControlContext={Object {}}\n              state={\n                Object {\n                  \"lastFocusedValue\": null,\n                  \"name\": \"exampleGroup\",\n                  \"selectedValue\": \"1\",\n                  \"setLastFocusedValue\": [Function],\n                  \"setSelectedValue\": [Function],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#a3a3a3\",\n                  \"borderRadius\": 9999,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                  \"paddingBottom\": 4,\n                  \"paddingLeft\": 4,\n                  \"paddingRight\": 4,\n                  \"paddingTop\": 4,\n                }\n              }\n              value=\"2\"\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={-9211021}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#737373\",\n                      \"height\": 12,\n                      \"opacity\": 0,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={-9211021}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  opacity={0}\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"marginLeft\": 8,\n                \"marginRight\": 8,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Fire\n          </Text>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n      <View\n        accessibilityRole=\"radio\"\n        accessibilityState={\n          Object {\n            \"checked\": false,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        checked={false}\n        colorScheme=\"warning\"\n        dataSet={Object {}}\n        focusable={true}\n        formControlContext={Object {}}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        state={\n          Object {\n            \"lastFocusedValue\": null,\n            \"name\": \"exampleGroup\",\n            \"selectedValue\": \"1\",\n            \"setLastFocusedValue\": [Function],\n            \"setSelectedValue\": [Function],\n          }\n        }\n        style={Object {}}\n        value=\"3\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              colorScheme=\"warning\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              formControlContext={Object {}}\n              state={\n                Object {\n                  \"lastFocusedValue\": null,\n                  \"name\": \"exampleGroup\",\n                  \"selectedValue\": \"1\",\n                  \"setLastFocusedValue\": [Function],\n                  \"setSelectedValue\": [Function],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#a3a3a3\",\n                  \"borderRadius\": 9999,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                  \"paddingBottom\": 4,\n                  \"paddingLeft\": 4,\n                  \"paddingRight\": 4,\n                  \"paddingTop\": 4,\n                }\n              }\n              value=\"3\"\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={-9211021}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#737373\",\n                      \"height\": 12,\n                      \"opacity\": 0,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={-9211021}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  opacity={0}\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"marginLeft\": 8,\n                \"marginRight\": 8,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Warning\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Radio Disabled 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      accessibilityLabel=\"select prize\"\n      accessibilityRole=\"radiogroup\"\n      accessibilityState={\n        Object {\n          \"disabled\": undefined,\n        }\n      }\n      dataSet={Object {}}\n      defaultValue=\"2\"\n      name=\"exampleGroup\"\n      style={\n        Object {\n          \"alignItems\": \"flex-start\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"radio\"\n        accessibilityState={\n          Object {\n            \"checked\": false,\n            \"disabled\": true,\n          }\n        }\n        accessible={true}\n        checked={false}\n        dataSet={Object {}}\n        focusable={true}\n        formControlContext={Object {}}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        state={\n          Object {\n            \"lastFocusedValue\": null,\n            \"name\": \"exampleGroup\",\n            \"selectedValue\": \"2\",\n            \"setLastFocusedValue\": [Function],\n            \"setSelectedValue\": [Function],\n          }\n        }\n        style={Object {}}\n        value=\"1\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"opacity\": 0.6,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              formControlContext={Object {}}\n              isDisabled={true}\n              state={\n                Object {\n                  \"lastFocusedValue\": null,\n                  \"name\": \"exampleGroup\",\n                  \"selectedValue\": \"2\",\n                  \"setLastFocusedValue\": [Function],\n                  \"setSelectedValue\": [Function],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#a3a3a3\",\n                  \"borderRadius\": 9999,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                  \"opacity\": 0.6,\n                  \"paddingBottom\": 4,\n                  \"paddingLeft\": 4,\n                  \"paddingRight\": 4,\n                  \"paddingTop\": 4,\n                }\n              }\n              value=\"1\"\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={-9211021}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"color\": \"#737373\",\n                      \"height\": 12,\n                      \"opacity\": 0,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={-9211021}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  opacity={0}\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            First\n          </Text>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n      <View\n        accessibilityRole=\"radio\"\n        accessibilityState={\n          Object {\n            \"checked\": true,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        checked={true}\n        dataSet={Object {}}\n        focusable={true}\n        formControlContext={Object {}}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        state={\n          Object {\n            \"lastFocusedValue\": null,\n            \"name\": \"exampleGroup\",\n            \"selectedValue\": \"2\",\n            \"setLastFocusedValue\": [Function],\n            \"setSelectedValue\": [Function],\n          }\n        }\n        style={Object {}}\n        value=\"2\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              formControlContext={Object {}}\n              state={\n                Object {\n                  \"lastFocusedValue\": null,\n                  \"name\": \"exampleGroup\",\n                  \"selectedValue\": \"2\",\n                  \"setLastFocusedValue\": [Function],\n                  \"setSelectedValue\": [Function],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#0891b2\",\n                  \"borderRadius\": 9999,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                  \"paddingBottom\": 4,\n                  \"paddingLeft\": 4,\n                  \"paddingRight\": 4,\n                  \"paddingTop\": 4,\n                }\n              }\n              value=\"2\"\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={-16215630}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#0891b2\",\n                      \"height\": 12,\n                      \"opacity\": 1,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={-16215630}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  opacity={1}\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Second\n          </Text>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n      <View\n        accessibilityRole=\"radio\"\n        accessibilityState={\n          Object {\n            \"checked\": false,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        checked={false}\n        dataSet={Object {}}\n        focusable={true}\n        formControlContext={Object {}}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        state={\n          Object {\n            \"lastFocusedValue\": null,\n            \"name\": \"exampleGroup\",\n            \"selectedValue\": \"2\",\n            \"setLastFocusedValue\": [Function],\n            \"setSelectedValue\": [Function],\n          }\n        }\n        style={Object {}}\n        value=\"3\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              formControlContext={Object {}}\n              state={\n                Object {\n                  \"lastFocusedValue\": null,\n                  \"name\": \"exampleGroup\",\n                  \"selectedValue\": \"2\",\n                  \"setLastFocusedValue\": [Function],\n                  \"setSelectedValue\": [Function],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#a3a3a3\",\n                  \"borderRadius\": 9999,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                  \"paddingBottom\": 4,\n                  \"paddingLeft\": 4,\n                  \"paddingRight\": 4,\n                  \"paddingTop\": 4,\n                }\n              }\n              value=\"3\"\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={-9211021}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#737373\",\n                      \"height\": 12,\n                      \"opacity\": 0,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={-9211021}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  opacity={0}\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Third\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Radio Form Controlled 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"flex-start\",\n          \"maxWidth\": \"80%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        isInvalid={true}\n        style={\n          Object {\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          feedbackId=\"field-181-feedback\"\n          hasFeedbackText={false}\n          hasHelpText={false}\n          helpTextId=\"field-181-helptext\"\n          isDisabled={false}\n          isInvalid={true}\n          isReadOnly={false}\n          isRequired={false}\n          labelId=\"field-181-label\"\n          nativeID=\"field-181-label\"\n          setHasFeedbackText={[Function]}\n          setHasHelpText={[Function]}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"marginBottom\": 4,\n              \"marginTop\": 4,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#737373\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 18,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 27,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Select Prize\n          </Text>\n        </View>\n        <View\n          accessibilityLabel=\"select prize\"\n          accessibilityRole=\"radiogroup\"\n          accessibilityState={\n            Object {\n              \"disabled\": false,\n            }\n          }\n          dataSet={Object {}}\n          defaultValue=\"1\"\n          name=\"exampleGroup\"\n          onChange={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"flex-start\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"radio\"\n            accessibilityState={\n              Object {\n                \"checked\": true,\n                \"disabled\": false,\n              }\n            }\n            accessible={true}\n            checked={true}\n            dataSet={Object {}}\n            feedbackId=\"field-181-feedback\"\n            focusable={true}\n            formControlContext={\n              Object {\n                \"feedbackId\": \"field-181-feedback\",\n                \"hasFeedbackText\": false,\n                \"hasHelpText\": false,\n                \"helpTextId\": \"field-181-helptext\",\n                \"isDisabled\": false,\n                \"isInvalid\": true,\n                \"isReadOnly\": false,\n                \"isRequired\": false,\n                \"labelId\": \"field-181-label\",\n                \"nativeID\": \"field-181\",\n                \"setHasFeedbackText\": [Function],\n                \"setHasHelpText\": [Function],\n              }\n            }\n            hasFeedbackText={false}\n            hasHelpText={false}\n            helpTextId=\"field-181-helptext\"\n            isInvalid={true}\n            isReadOnly={false}\n            isRequired={false}\n            labelId=\"field-181-label\"\n            nativeID=\"field-181\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            setHasFeedbackText={[Function]}\n            setHasHelpText={[Function]}\n            state={\n              Object {\n                \"lastFocusedValue\": null,\n                \"name\": \"exampleGroup\",\n                \"selectedValue\": \"1\",\n                \"setLastFocusedValue\": [Function],\n                \"setSelectedValue\": [Function],\n              }\n            }\n            style={Object {}}\n            value=\"1\"\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                />\n                <View\n                  colorScheme=\"primary\"\n                  dataSet={Object {}}\n                  defaultIsChecked={false}\n                  feedbackId=\"field-181-feedback\"\n                  formControlContext={\n                    Object {\n                      \"feedbackId\": \"field-181-feedback\",\n                      \"hasFeedbackText\": false,\n                      \"hasHelpText\": false,\n                      \"helpTextId\": \"field-181-helptext\",\n                      \"isDisabled\": false,\n                      \"isInvalid\": true,\n                      \"isReadOnly\": false,\n                      \"isRequired\": false,\n                      \"labelId\": \"field-181-label\",\n                      \"nativeID\": \"field-181\",\n                      \"setHasFeedbackText\": [Function],\n                      \"setHasHelpText\": [Function],\n                    }\n                  }\n                  hasFeedbackText={false}\n                  hasHelpText={false}\n                  helpTextId=\"field-181-helptext\"\n                  isDisabled={false}\n                  isInvalid={true}\n                  isReadOnly={false}\n                  isRequired={false}\n                  labelId=\"field-181-label\"\n                  nativeID=\"field-181\"\n                  setHasFeedbackText={[Function]}\n                  setHasHelpText={[Function]}\n                  state={\n                    Object {\n                      \"lastFocusedValue\": null,\n                      \"name\": \"exampleGroup\",\n                      \"selectedValue\": \"1\",\n                      \"setLastFocusedValue\": [Function],\n                      \"setSelectedValue\": [Function],\n                    }\n                  }\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"#fafafa\",\n                      \"borderColor\": \"#dc2626\",\n                      \"borderRadius\": 9999,\n                      \"borderWidth\": 2,\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"marginBottom\": 4,\n                      \"marginTop\": 4,\n                      \"paddingBottom\": 4,\n                      \"paddingLeft\": 4,\n                      \"paddingRight\": 4,\n                      \"paddingTop\": 4,\n                    }\n                  }\n                  value=\"1\"\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={12}\n                    bbWidth={12}\n                    color={-16215630}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#0891b2\",\n                          \"height\": 12,\n                          \"opacity\": 1,\n                          \"width\": 12,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 12,\n                          \"width\": 12,\n                        },\n                      ]\n                    }\n                    tintColor={-16215630}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      opacity={1}\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 16,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 24,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                First\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          />\n          <View\n            accessibilityRole=\"radio\"\n            accessibilityState={\n              Object {\n                \"checked\": false,\n                \"disabled\": false,\n              }\n            }\n            accessible={true}\n            checked={false}\n            dataSet={Object {}}\n            feedbackId=\"field-181-feedback\"\n            focusable={true}\n            formControlContext={\n              Object {\n                \"feedbackId\": \"field-181-feedback\",\n                \"hasFeedbackText\": false,\n                \"hasHelpText\": false,\n                \"helpTextId\": \"field-181-helptext\",\n                \"isDisabled\": false,\n                \"isInvalid\": true,\n                \"isReadOnly\": false,\n                \"isRequired\": false,\n                \"labelId\": \"field-181-label\",\n                \"nativeID\": \"field-181\",\n                \"setHasFeedbackText\": [Function],\n                \"setHasHelpText\": [Function],\n              }\n            }\n            hasFeedbackText={false}\n            hasHelpText={false}\n            helpTextId=\"field-181-helptext\"\n            isInvalid={true}\n            isReadOnly={false}\n            isRequired={false}\n            labelId=\"field-181-label\"\n            nativeID=\"field-181\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            setHasFeedbackText={[Function]}\n            setHasHelpText={[Function]}\n            state={\n              Object {\n                \"lastFocusedValue\": null,\n                \"name\": \"exampleGroup\",\n                \"selectedValue\": \"1\",\n                \"setLastFocusedValue\": [Function],\n                \"setSelectedValue\": [Function],\n              }\n            }\n            style={Object {}}\n            value=\"2\"\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                />\n                <View\n                  colorScheme=\"primary\"\n                  dataSet={Object {}}\n                  defaultIsChecked={false}\n                  feedbackId=\"field-181-feedback\"\n                  formControlContext={\n                    Object {\n                      \"feedbackId\": \"field-181-feedback\",\n                      \"hasFeedbackText\": false,\n                      \"hasHelpText\": false,\n                      \"helpTextId\": \"field-181-helptext\",\n                      \"isDisabled\": false,\n                      \"isInvalid\": true,\n                      \"isReadOnly\": false,\n                      \"isRequired\": false,\n                      \"labelId\": \"field-181-label\",\n                      \"nativeID\": \"field-181\",\n                      \"setHasFeedbackText\": [Function],\n                      \"setHasHelpText\": [Function],\n                    }\n                  }\n                  hasFeedbackText={false}\n                  hasHelpText={false}\n                  helpTextId=\"field-181-helptext\"\n                  isDisabled={false}\n                  isInvalid={true}\n                  isReadOnly={false}\n                  isRequired={false}\n                  labelId=\"field-181-label\"\n                  nativeID=\"field-181\"\n                  setHasFeedbackText={[Function]}\n                  setHasHelpText={[Function]}\n                  state={\n                    Object {\n                      \"lastFocusedValue\": null,\n                      \"name\": \"exampleGroup\",\n                      \"selectedValue\": \"1\",\n                      \"setLastFocusedValue\": [Function],\n                      \"setSelectedValue\": [Function],\n                    }\n                  }\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"#fafafa\",\n                      \"borderColor\": \"#dc2626\",\n                      \"borderRadius\": 9999,\n                      \"borderWidth\": 2,\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"marginBottom\": 4,\n                      \"marginTop\": 4,\n                      \"paddingBottom\": 4,\n                      \"paddingLeft\": 4,\n                      \"paddingRight\": 4,\n                      \"paddingTop\": 4,\n                    }\n                  }\n                  value=\"2\"\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={12}\n                    bbWidth={12}\n                    color={-9211021}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 12,\n                          \"opacity\": 0,\n                          \"width\": 12,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 12,\n                          \"width\": 12,\n                        },\n                      ]\n                    }\n                    tintColor={-9211021}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      opacity={0}\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 16,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 24,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Second\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          />\n          <View\n            accessibilityRole=\"radio\"\n            accessibilityState={\n              Object {\n                \"checked\": false,\n                \"disabled\": false,\n              }\n            }\n            accessible={true}\n            checked={false}\n            dataSet={Object {}}\n            feedbackId=\"field-181-feedback\"\n            focusable={true}\n            formControlContext={\n              Object {\n                \"feedbackId\": \"field-181-feedback\",\n                \"hasFeedbackText\": false,\n                \"hasHelpText\": false,\n                \"helpTextId\": \"field-181-helptext\",\n                \"isDisabled\": false,\n                \"isInvalid\": true,\n                \"isReadOnly\": false,\n                \"isRequired\": false,\n                \"labelId\": \"field-181-label\",\n                \"nativeID\": \"field-181\",\n                \"setHasFeedbackText\": [Function],\n                \"setHasHelpText\": [Function],\n              }\n            }\n            hasFeedbackText={false}\n            hasHelpText={false}\n            helpTextId=\"field-181-helptext\"\n            isInvalid={true}\n            isReadOnly={false}\n            isRequired={false}\n            labelId=\"field-181-label\"\n            nativeID=\"field-181\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            setHasFeedbackText={[Function]}\n            setHasHelpText={[Function]}\n            state={\n              Object {\n                \"lastFocusedValue\": null,\n                \"name\": \"exampleGroup\",\n                \"selectedValue\": \"1\",\n                \"setLastFocusedValue\": [Function],\n                \"setSelectedValue\": [Function],\n              }\n            }\n            style={Object {}}\n            value=\"3\"\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                />\n                <View\n                  colorScheme=\"primary\"\n                  dataSet={Object {}}\n                  defaultIsChecked={false}\n                  feedbackId=\"field-181-feedback\"\n                  formControlContext={\n                    Object {\n                      \"feedbackId\": \"field-181-feedback\",\n                      \"hasFeedbackText\": false,\n                      \"hasHelpText\": false,\n                      \"helpTextId\": \"field-181-helptext\",\n                      \"isDisabled\": false,\n                      \"isInvalid\": true,\n                      \"isReadOnly\": false,\n                      \"isRequired\": false,\n                      \"labelId\": \"field-181-label\",\n                      \"nativeID\": \"field-181\",\n                      \"setHasFeedbackText\": [Function],\n                      \"setHasHelpText\": [Function],\n                    }\n                  }\n                  hasFeedbackText={false}\n                  hasHelpText={false}\n                  helpTextId=\"field-181-helptext\"\n                  isDisabled={false}\n                  isInvalid={true}\n                  isReadOnly={false}\n                  isRequired={false}\n                  labelId=\"field-181-label\"\n                  nativeID=\"field-181\"\n                  setHasFeedbackText={[Function]}\n                  setHasHelpText={[Function]}\n                  state={\n                    Object {\n                      \"lastFocusedValue\": null,\n                      \"name\": \"exampleGroup\",\n                      \"selectedValue\": \"1\",\n                      \"setLastFocusedValue\": [Function],\n                      \"setSelectedValue\": [Function],\n                    }\n                  }\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"#fafafa\",\n                      \"borderColor\": \"#dc2626\",\n                      \"borderRadius\": 9999,\n                      \"borderWidth\": 2,\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"marginBottom\": 4,\n                      \"marginTop\": 4,\n                      \"paddingBottom\": 4,\n                      \"paddingLeft\": 4,\n                      \"paddingRight\": 4,\n                      \"paddingTop\": 4,\n                    }\n                  }\n                  value=\"3\"\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={12}\n                    bbWidth={12}\n                    color={-9211021}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 12,\n                          \"opacity\": 0,\n                          \"width\": 12,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 12,\n                          \"width\": 12,\n                        },\n                      ]\n                    }\n                    tintColor={-9211021}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      opacity={0}\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 16,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 24,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Third\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          feedbackId=\"field-181-feedback\"\n          hasFeedbackText={false}\n          hasHelpText={false}\n          helpTextId=\"field-181-helptext\"\n          isDisabled={false}\n          isInvalid={true}\n          isReadOnly={false}\n          isRequired={false}\n          labelId=\"field-181-label\"\n          nativeID=\"field-181\"\n          setHasFeedbackText={[Function]}\n          setHasHelpText={[Function]}\n          style={\n            Object {\n              \"marginTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <RNSVGSvgView\n              accessibilityRole=\"image\"\n              align=\"xMidYMid\"\n              bbHeight={12}\n              bbWidth={12}\n              color={-2349530}\n              dataSet={Object {}}\n              focusable={false}\n              meetOrSlice={0}\n              minX={0}\n              minY={0}\n              stroke=\"\"\n              style={\n                Array [\n                  Object {\n                    \"backgroundColor\": \"transparent\",\n                    \"borderWidth\": 0,\n                  },\n                  Object {\n                    \"color\": \"#dc2626\",\n                    \"fontSize\": 12,\n                    \"height\": 12,\n                    \"width\": 12,\n                  },\n                  Object {\n                    \"flex\": 0,\n                    \"height\": 12,\n                    \"width\": 12,\n                  },\n                ]\n              }\n              tintColor={-2349530}\n              vbHeight={16}\n              vbWidth={16}\n            >\n              <RNSVGGroup\n                font={\n                  Object {\n                    \"fontSize\": 12,\n                  }\n                }\n                propList={\n                  Array [\n                    \"stroke\",\n                  ]\n                }\n                stroke={null}\n              >\n                <RNSVGGroup>\n                  <RNSVGPath\n                    d=\"M8 16C6.41775 16 4.87103 15.5308 3.55544 14.6518C2.23985 13.7727 1.21447 12.5233 0.608967 11.0615C0.00346627 9.59966 -0.15496 7.99113 0.153721 6.43928C0.462403 4.88743 1.22433 3.46197 2.34315 2.34315C3.46197 1.22433 4.88743 0.462403 6.43928 0.153721C7.99113 -0.15496 9.59966 0.00346627 11.0615 0.608967C12.5233 1.21447 13.7727 2.23985 14.6518 3.55544C15.5308 4.87103 16 6.41775 16 8C16 10.1217 15.1571 12.1566 13.6569 13.6569C12.1566 15.1571 10.1217 16 8 16ZM8 14.4C9.2658 14.4 10.5032 14.0246 11.5556 13.3214C12.6081 12.6182 13.4284 11.6186 13.9128 10.4492C14.3972 9.27973 14.524 7.9929 14.277 6.75142C14.0301 5.50995 13.4205 4.36958 12.5255 3.47452C11.6304 2.57946 10.4901 1.96992 9.24858 1.72298C8.0071 1.47603 6.72028 1.60277 5.55083 2.08717C4.38138 2.57158 3.38184 3.39188 2.6786 4.44435C1.97536 5.49683 1.6 6.7342 1.6 8C1.6 9.69739 2.27429 11.3253 3.47452 12.5255C4.67475 13.7257 6.30262 14.4 8 14.4ZM7.2 10.4H8.8V12H7.2V10.4ZM7.2 4H8.8V8.8H7.2V4Z\"\n                    fill={\n                      Array [\n                        2,\n                      ]\n                    }\n                    propList={\n                      Array [\n                        \"fill\",\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  />\n                </RNSVGGroup>\n              </RNSVGGroup>\n            </RNSVGSvgView>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 4,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#dc2626\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 18,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              You must select a Prize.\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Radio Invalid 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      accessibilityLabel=\"select an option\"\n      accessibilityRole=\"radiogroup\"\n      accessibilityState={\n        Object {\n          \"disabled\": undefined,\n        }\n      }\n      dataSet={Object {}}\n      name=\"exampleGroup\"\n      style={\n        Object {\n          \"alignItems\": \"flex-start\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"radio\"\n        accessibilityState={\n          Object {\n            \"checked\": false,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        checked={false}\n        dataSet={Object {}}\n        focusable={true}\n        formControlContext={Object {}}\n        isInvalid={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        state={\n          Object {\n            \"lastFocusedValue\": null,\n            \"name\": \"exampleGroup\",\n            \"selectedValue\": undefined,\n            \"setLastFocusedValue\": [Function],\n            \"setSelectedValue\": [Function],\n          }\n        }\n        style={Object {}}\n        value=\"test\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              formControlContext={Object {}}\n              isInvalid={true}\n              state={\n                Object {\n                  \"lastFocusedValue\": null,\n                  \"name\": \"exampleGroup\",\n                  \"selectedValue\": undefined,\n                  \"setLastFocusedValue\": [Function],\n                  \"setSelectedValue\": [Function],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#dc2626\",\n                  \"borderRadius\": 9999,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 4,\n                  \"paddingLeft\": 4,\n                  \"paddingRight\": 4,\n                  \"paddingTop\": 4,\n                }\n              }\n              value=\"test\"\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={-9211021}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#737373\",\n                      \"height\": 12,\n                      \"opacity\": 0,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={-9211021}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  opacity={0}\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Others\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Radio Playground 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"space-between\",\n        }\n      }\n    >\n      <View\n        accessibilityLabel=\"pick an option from below\"\n        accessibilityRole=\"radiogroup\"\n        accessibilityState={\n          Object {\n            \"disabled\": undefined,\n          }\n        }\n        dataSet={Object {}}\n        name=\"exampleGroup\"\n        onChange={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"flex-start\",\n          }\n        }\n        value=\"\"\n      >\n        <View\n          accessibilityRole=\"radio\"\n          accessibilityState={\n            Object {\n              \"checked\": false,\n              \"disabled\": false,\n            }\n          }\n          accessible={true}\n          checked={false}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          formControlContext={Object {}}\n          isInvalid={false}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          state={\n            Object {\n              \"lastFocusedValue\": null,\n              \"name\": \"exampleGroup\",\n              \"selectedValue\": \"\",\n              \"setLastFocusedValue\": [Function],\n              \"setSelectedValue\": [Function],\n            }\n          }\n          style={Object {}}\n          value=\"cool\"\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                colorScheme=\"primary\"\n                dataSet={Object {}}\n                defaultIsChecked={false}\n                formControlContext={Object {}}\n                isDisabled={false}\n                isInvalid={false}\n                state={\n                  Object {\n                    \"lastFocusedValue\": null,\n                    \"name\": \"exampleGroup\",\n                    \"selectedValue\": \"\",\n                    \"setLastFocusedValue\": [Function],\n                    \"setSelectedValue\": [Function],\n                  }\n                }\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#fafafa\",\n                    \"borderColor\": \"#a3a3a3\",\n                    \"borderRadius\": 9999,\n                    \"borderWidth\": 2,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": 4,\n                    \"marginTop\": 4,\n                    \"paddingBottom\": 4,\n                    \"paddingLeft\": 4,\n                    \"paddingRight\": 4,\n                    \"paddingTop\": 4,\n                  }\n                }\n                value=\"cool\"\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={12}\n                  bbWidth={12}\n                  color={-9211021}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#737373\",\n                        \"height\": 12,\n                        \"opacity\": 0,\n                        \"width\": 12,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 12,\n                        \"width\": 12,\n                      },\n                    ]\n                  }\n                  tintColor={-9211021}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    opacity={0}\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 16,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 24,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              UX Research\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        />\n        <View\n          accessibilityRole=\"radio\"\n          accessibilityState={\n            Object {\n              \"checked\": false,\n              \"disabled\": false,\n            }\n          }\n          accessible={true}\n          checked={false}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          formControlContext={Object {}}\n          isInvalid={false}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          state={\n            Object {\n              \"lastFocusedValue\": null,\n              \"name\": \"exampleGroup\",\n              \"selectedValue\": \"\",\n              \"setLastFocusedValue\": [Function],\n              \"setSelectedValue\": [Function],\n            }\n          }\n          style={Object {}}\n          value=\"awesome\"\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                colorScheme=\"primary\"\n                dataSet={Object {}}\n                defaultIsChecked={false}\n                formControlContext={Object {}}\n                isDisabled={false}\n                isInvalid={false}\n                state={\n                  Object {\n                    \"lastFocusedValue\": null,\n                    \"name\": \"exampleGroup\",\n                    \"selectedValue\": \"\",\n                    \"setLastFocusedValue\": [Function],\n                    \"setSelectedValue\": [Function],\n                  }\n                }\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#fafafa\",\n                    \"borderColor\": \"#a3a3a3\",\n                    \"borderRadius\": 9999,\n                    \"borderWidth\": 2,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": 4,\n                    \"marginTop\": 4,\n                    \"paddingBottom\": 4,\n                    \"paddingLeft\": 4,\n                    \"paddingRight\": 4,\n                    \"paddingTop\": 4,\n                  }\n                }\n                value=\"awesome\"\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={12}\n                  bbWidth={12}\n                  color={-9211021}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#737373\",\n                        \"height\": 12,\n                        \"opacity\": 0,\n                        \"width\": 12,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 12,\n                        \"width\": 12,\n                      },\n                    ]\n                  }\n                  tintColor={-9211021}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    opacity={0}\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 16,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 24,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Software Development\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Radio Size 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      accessibilityLabel=\"pick a size\"\n      accessibilityRole=\"radiogroup\"\n      accessibilityState={\n        Object {\n          \"disabled\": undefined,\n        }\n      }\n      dataSet={Object {}}\n      defaultValue=\"1\"\n      name=\"exampleGroup\"\n      style={\n        Object {\n          \"alignItems\": \"flex-start\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"flex-start\",\n            \"flexDirection\": \"column\",\n            \"maxWidth\": 300,\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <View\n          accessibilityRole=\"radio\"\n          accessibilityState={\n            Object {\n              \"checked\": true,\n              \"disabled\": false,\n            }\n          }\n          accessible={true}\n          checked={true}\n          colorScheme=\"red\"\n          dataSet={Object {}}\n          focusable={true}\n          formControlContext={Object {}}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          state={\n            Object {\n              \"lastFocusedValue\": null,\n              \"name\": \"exampleGroup\",\n              \"selectedValue\": \"1\",\n              \"setLastFocusedValue\": [Function],\n              \"setSelectedValue\": [Function],\n            }\n          }\n          style={Object {}}\n          value=\"1\"\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                colorScheme=\"red\"\n                dataSet={Object {}}\n                defaultIsChecked={false}\n                formControlContext={Object {}}\n                state={\n                  Object {\n                    \"lastFocusedValue\": null,\n                    \"name\": \"exampleGroup\",\n                    \"selectedValue\": \"1\",\n                    \"setLastFocusedValue\": [Function],\n                    \"setSelectedValue\": [Function],\n                  }\n                }\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#fafafa\",\n                    \"borderColor\": \"#dc2626\",\n                    \"borderRadius\": 9999,\n                    \"borderWidth\": 2,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": 4,\n                    \"marginTop\": 4,\n                    \"paddingBottom\": 4,\n                    \"paddingLeft\": 4,\n                    \"paddingRight\": 4,\n                    \"paddingTop\": 4,\n                  }\n                }\n                value=\"1\"\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={8}\n                  bbWidth={8}\n                  color={-2349530}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#dc2626\",\n                        \"height\": 8,\n                        \"opacity\": 1,\n                        \"width\": 8,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 8,\n                        \"width\": 8,\n                      },\n                    ]\n                  }\n                  tintColor={-2349530}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    opacity={1}\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Small\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"radio\"\n          accessibilityState={\n            Object {\n              \"checked\": false,\n              \"disabled\": false,\n            }\n          }\n          accessible={true}\n          checked={false}\n          colorScheme=\"green\"\n          dataSet={Object {}}\n          focusable={true}\n          formControlContext={Object {}}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          state={\n            Object {\n              \"lastFocusedValue\": null,\n              \"name\": \"exampleGroup\",\n              \"selectedValue\": \"1\",\n              \"setLastFocusedValue\": [Function],\n              \"setSelectedValue\": [Function],\n            }\n          }\n          style={Object {}}\n          value=\"2\"\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                colorScheme=\"green\"\n                dataSet={Object {}}\n                defaultIsChecked={false}\n                formControlContext={Object {}}\n                state={\n                  Object {\n                    \"lastFocusedValue\": null,\n                    \"name\": \"exampleGroup\",\n                    \"selectedValue\": \"1\",\n                    \"setLastFocusedValue\": [Function],\n                    \"setSelectedValue\": [Function],\n                  }\n                }\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#fafafa\",\n                    \"borderColor\": \"#a3a3a3\",\n                    \"borderRadius\": 9999,\n                    \"borderWidth\": 2,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": 4,\n                    \"marginTop\": 4,\n                    \"paddingBottom\": 4,\n                    \"paddingLeft\": 4,\n                    \"paddingRight\": 4,\n                    \"paddingTop\": 4,\n                  }\n                }\n                value=\"2\"\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={12}\n                  bbWidth={12}\n                  color={-9211021}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#737373\",\n                        \"height\": 12,\n                        \"opacity\": 0,\n                        \"width\": 12,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 12,\n                        \"width\": 12,\n                      },\n                    ]\n                  }\n                  tintColor={-9211021}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    opacity={0}\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 16,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 24,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Medium\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"radio\"\n          accessibilityState={\n            Object {\n              \"checked\": false,\n              \"disabled\": false,\n            }\n          }\n          accessible={true}\n          checked={false}\n          colorScheme=\"yellow\"\n          dataSet={Object {}}\n          focusable={true}\n          formControlContext={Object {}}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          state={\n            Object {\n              \"lastFocusedValue\": null,\n              \"name\": \"exampleGroup\",\n              \"selectedValue\": \"1\",\n              \"setLastFocusedValue\": [Function],\n              \"setSelectedValue\": [Function],\n            }\n          }\n          style={Object {}}\n          value=\"3\"\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                colorScheme=\"yellow\"\n                dataSet={Object {}}\n                defaultIsChecked={false}\n                formControlContext={Object {}}\n                state={\n                  Object {\n                    \"lastFocusedValue\": null,\n                    \"name\": \"exampleGroup\",\n                    \"selectedValue\": \"1\",\n                    \"setLastFocusedValue\": [Function],\n                    \"setSelectedValue\": [Function],\n                  }\n                }\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#fafafa\",\n                    \"borderColor\": \"#a3a3a3\",\n                    \"borderRadius\": 9999,\n                    \"borderWidth\": 2,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": 4,\n                    \"marginTop\": 4,\n                    \"paddingBottom\": 4,\n                    \"paddingLeft\": 4,\n                    \"paddingRight\": 4,\n                    \"paddingTop\": 4,\n                  }\n                }\n                value=\"3\"\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={16}\n                  bbWidth={16}\n                  color={-9211021}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#737373\",\n                        \"height\": 16,\n                        \"opacity\": 0,\n                        \"width\": 16,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                    ]\n                  }\n                  tintColor={-9211021}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    opacity={0}\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 18,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 27,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Large\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Radio Uncontrolled Radio 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      accessibilityLabel=\"Pick your favorite number\"\n      accessibilityRole=\"radiogroup\"\n      accessibilityState={\n        Object {\n          \"disabled\": undefined,\n        }\n      }\n      dataSet={Object {}}\n      defaultValue=\"1\"\n      name=\"myRadioGroup\"\n      style={\n        Object {\n          \"alignItems\": \"flex-start\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"radio\"\n        accessibilityState={\n          Object {\n            \"checked\": true,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        checked={true}\n        dataSet={Object {}}\n        focusable={true}\n        formControlContext={Object {}}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        state={\n          Object {\n            \"lastFocusedValue\": null,\n            \"name\": \"myRadioGroup\",\n            \"selectedValue\": \"1\",\n            \"setLastFocusedValue\": [Function],\n            \"setSelectedValue\": [Function],\n          }\n        }\n        style={Object {}}\n        value=\"1\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              formControlContext={Object {}}\n              state={\n                Object {\n                  \"lastFocusedValue\": null,\n                  \"name\": \"myRadioGroup\",\n                  \"selectedValue\": \"1\",\n                  \"setLastFocusedValue\": [Function],\n                  \"setSelectedValue\": [Function],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#0891b2\",\n                  \"borderRadius\": 9999,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                  \"paddingBottom\": 4,\n                  \"paddingLeft\": 4,\n                  \"paddingRight\": 4,\n                  \"paddingTop\": 4,\n                }\n              }\n              value=\"1\"\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={-16215630}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#0891b2\",\n                      \"height\": 12,\n                      \"opacity\": 1,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={-16215630}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  opacity={1}\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            First\n          </Text>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n      <View\n        accessibilityRole=\"radio\"\n        accessibilityState={\n          Object {\n            \"checked\": false,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        checked={false}\n        dataSet={Object {}}\n        focusable={true}\n        formControlContext={Object {}}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        state={\n          Object {\n            \"lastFocusedValue\": null,\n            \"name\": \"myRadioGroup\",\n            \"selectedValue\": \"1\",\n            \"setLastFocusedValue\": [Function],\n            \"setSelectedValue\": [Function],\n          }\n        }\n        style={Object {}}\n        value=\"2\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              formControlContext={Object {}}\n              state={\n                Object {\n                  \"lastFocusedValue\": null,\n                  \"name\": \"myRadioGroup\",\n                  \"selectedValue\": \"1\",\n                  \"setLastFocusedValue\": [Function],\n                  \"setSelectedValue\": [Function],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#a3a3a3\",\n                  \"borderRadius\": 9999,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                  \"paddingBottom\": 4,\n                  \"paddingLeft\": 4,\n                  \"paddingRight\": 4,\n                  \"paddingTop\": 4,\n                }\n              }\n              value=\"2\"\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={-9211021}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#737373\",\n                      \"height\": 12,\n                      \"opacity\": 0,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={-9211021}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  opacity={0}\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Second\n          </Text>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n      <View\n        accessibilityRole=\"radio\"\n        accessibilityState={\n          Object {\n            \"checked\": false,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        checked={false}\n        dataSet={Object {}}\n        focusable={true}\n        formControlContext={Object {}}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        state={\n          Object {\n            \"lastFocusedValue\": null,\n            \"name\": \"myRadioGroup\",\n            \"selectedValue\": \"1\",\n            \"setLastFocusedValue\": [Function],\n            \"setSelectedValue\": [Function],\n          }\n        }\n        style={Object {}}\n        value=\"3\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              formControlContext={Object {}}\n              state={\n                Object {\n                  \"lastFocusedValue\": null,\n                  \"name\": \"myRadioGroup\",\n                  \"selectedValue\": \"1\",\n                  \"setLastFocusedValue\": [Function],\n                  \"setSelectedValue\": [Function],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#a3a3a3\",\n                  \"borderRadius\": 9999,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                  \"paddingBottom\": 4,\n                  \"paddingLeft\": 4,\n                  \"paddingRight\": 4,\n                  \"paddingTop\": 4,\n                }\n              }\n              value=\"3\"\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={-9211021}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#737373\",\n                      \"height\": 12,\n                      \"opacity\": 0,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={-9211021}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  opacity={0}\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Third\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Radio With Ref 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      accessibilityLabel=\"pick an option\"\n      accessibilityRole=\"radiogroup\"\n      accessibilityState={\n        Object {\n          \"disabled\": undefined,\n        }\n      }\n      dataSet={Object {}}\n      name=\"exampleGroup\"\n      onChange={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"flex-start\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"radio\"\n        accessibilityState={\n          Object {\n            \"checked\": false,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        checked={false}\n        colorScheme=\"success\"\n        dataSet={Object {}}\n        focusable={true}\n        formControlContext={Object {}}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        state={\n          Object {\n            \"lastFocusedValue\": null,\n            \"name\": \"exampleGroup\",\n            \"selectedValue\": undefined,\n            \"setLastFocusedValue\": [Function],\n            \"setSelectedValue\": [Function],\n          }\n        }\n        style={Object {}}\n        value=\"1\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              colorScheme=\"success\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              formControlContext={Object {}}\n              state={\n                Object {\n                  \"lastFocusedValue\": null,\n                  \"name\": \"exampleGroup\",\n                  \"selectedValue\": undefined,\n                  \"setLastFocusedValue\": [Function],\n                  \"setSelectedValue\": [Function],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#a3a3a3\",\n                  \"borderRadius\": 9999,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                  \"paddingBottom\": 4,\n                  \"paddingLeft\": 4,\n                  \"paddingRight\": 4,\n                  \"paddingTop\": 4,\n                }\n              }\n              value=\"1\"\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={-9211021}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#737373\",\n                      \"height\": 12,\n                      \"opacity\": 0,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={-9211021}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  opacity={0}\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Wrong\n          </Text>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n      <View\n        accessibilityRole=\"radio\"\n        accessibilityState={\n          Object {\n            \"checked\": false,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        checked={false}\n        colorScheme=\"success\"\n        dataSet={Object {}}\n        focusable={true}\n        formControlContext={Object {}}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        state={\n          Object {\n            \"lastFocusedValue\": null,\n            \"name\": \"exampleGroup\",\n            \"selectedValue\": undefined,\n            \"setLastFocusedValue\": [Function],\n            \"setSelectedValue\": [Function],\n          }\n        }\n        style={Object {}}\n        value=\"2\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              colorScheme=\"success\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              formControlContext={Object {}}\n              state={\n                Object {\n                  \"lastFocusedValue\": null,\n                  \"name\": \"exampleGroup\",\n                  \"selectedValue\": undefined,\n                  \"setLastFocusedValue\": [Function],\n                  \"setSelectedValue\": [Function],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#a3a3a3\",\n                  \"borderRadius\": 9999,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                  \"paddingBottom\": 4,\n                  \"paddingLeft\": 4,\n                  \"paddingRight\": 4,\n                  \"paddingTop\": 4,\n                }\n              }\n              value=\"2\"\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={-9211021}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#737373\",\n                      \"height\": 12,\n                      \"opacity\": 0,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={-9211021}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  opacity={0}\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Right\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Responsive Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"backgroundColor\": \"#fecaca\",\n          \"width\": 400,\n        }\n      }\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 14,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 21,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        This is a box\n      </Text>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Responsive Demo 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"backgroundColor\": \"#fafafa\",\n          \"borderColor\": \"#e5e7eb\",\n          \"borderRadius\": 8,\n          \"borderWidth\": 1,\n          \"flexDirection\": \"column\",\n          \"overflow\": \"hidden\",\n          \"width\": 288,\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      >\n        <Image\n          accessibilityLabel=\"image\"\n          alt=\"image\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://www.holidify.com/images/cmsuploads/compressed/Bangalore_citycover_20190613234056.jpg\",\n            }\n          }\n          style={\n            Object {\n              \"height\": 160,\n              \"maxWidth\": \"100%\",\n              \"width\": \"100%\",\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#8b5cf6\",\n              \"bottom\": 0,\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 6,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 6,\n              \"position\": \"absolute\",\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#FFFFFF\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 12,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 18,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            PHOTOS\n          </Text>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"paddingBottom\": 16,\n            \"paddingLeft\": 16,\n            \"paddingRight\": 16,\n            \"paddingTop\": 16,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"marginLeft\": -4,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            The Garden City\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#8b5cf6\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 12,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 18,\n                \"marginLeft\": -2,\n                \"marginTop\": -4,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            The Silicon Valley of India.\n          </Text>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 12,\n            }\n          }\n        />\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Bengaluru (also called Bangalore) is the center of India's high-tech industry. The city is also known for its parks and nightlife.\n        </Text>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 12,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"space-between\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#4b5563\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              6 mins ago\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Responsive Direction 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"flexDirection\": \"column\",\n          \"justifyContent\": \"space-between\",\n          \"paddingBottom\": 16,\n          \"paddingLeft\": 16,\n          \"paddingRight\": 16,\n          \"paddingTop\": 16,\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#a1a1aa\",\n            \"borderColor\": \"#27272a\",\n            \"borderRadius\": 9999,\n            \"borderWidth\": 1,\n            \"height\": 96,\n            \"justifyContent\": \"center\",\n            \"marginBottom\": 8,\n            \"marginLeft\": 8,\n            \"marginRight\": 8,\n            \"marginTop\": 8,\n            \"position\": \"relative\",\n            \"width\": 96,\n          }\n        }\n      >\n        <Image\n          accessibilityLabel=\"--\"\n          alt=\"--\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://pbs.twimg.com/profile_images/1188747996843761665/8CiUdKZW_400x400.jpg\",\n            }\n          }\n          style={\n            Array [\n              Object {\n                \"borderRadius\": 9999,\n                \"maxWidth\": \"100%\",\n              },\n              Object {\n                \"height\": \"100%\",\n                \"width\": \"100%\",\n              },\n            ]\n          }\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#a1a1aa\",\n            \"borderColor\": \"#27272a\",\n            \"borderRadius\": 9999,\n            \"borderWidth\": 1,\n            \"height\": 96,\n            \"justifyContent\": \"center\",\n            \"marginBottom\": 8,\n            \"marginLeft\": 8,\n            \"marginRight\": 8,\n            \"marginTop\": 8,\n            \"position\": \"relative\",\n            \"width\": 96,\n          }\n        }\n      >\n        <Image\n          accessibilityLabel=\"--\"\n          alt=\"--\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://pbs.twimg.com/profile_images/1177303899243343872/B0sUJIH0_400x400.jpg\",\n            }\n          }\n          style={\n            Array [\n              Object {\n                \"borderRadius\": 9999,\n                \"maxWidth\": \"100%\",\n              },\n              Object {\n                \"height\": \"100%\",\n                \"width\": \"100%\",\n              },\n            ]\n          }\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#a1a1aa\",\n            \"borderColor\": \"#27272a\",\n            \"borderRadius\": 9999,\n            \"borderWidth\": 1,\n            \"height\": 96,\n            \"justifyContent\": \"center\",\n            \"marginBottom\": 8,\n            \"marginLeft\": 8,\n            \"marginRight\": 8,\n            \"marginTop\": 8,\n            \"position\": \"relative\",\n            \"width\": 96,\n          }\n        }\n      >\n        <Image\n          accessibilityLabel=\"--\"\n          alt=\"--\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://pbs.twimg.com/profile_images/1260766060401188864/ySJfMIbZ_400x400.jpg\",\n            }\n          }\n          style={\n            Array [\n              Object {\n                \"borderRadius\": 9999,\n                \"maxWidth\": \"100%\",\n              },\n              Object {\n                \"height\": \"100%\",\n                \"width\": \"100%\",\n              },\n            ]\n          }\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#a1a1aa\",\n            \"borderColor\": \"#27272a\",\n            \"borderRadius\": 9999,\n            \"borderWidth\": 1,\n            \"height\": 96,\n            \"justifyContent\": \"center\",\n            \"marginBottom\": 8,\n            \"marginLeft\": 8,\n            \"marginRight\": 8,\n            \"marginTop\": 8,\n            \"position\": \"relative\",\n            \"width\": 96,\n          }\n        }\n      >\n        <Image\n          accessibilityLabel=\"--\"\n          alt=\"--\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://pbs.twimg.com/profile_images/1309797238651060226/18cm6VhQ_400x400.jpg\",\n            }\n          }\n          style={\n            Array [\n              Object {\n                \"borderRadius\": 9999,\n                \"maxWidth\": \"100%\",\n              },\n              Object {\n                \"height\": \"100%\",\n                \"width\": \"100%\",\n              },\n            ]\n          }\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#a1a1aa\",\n            \"borderColor\": \"#27272a\",\n            \"borderRadius\": 9999,\n            \"borderWidth\": 1,\n            \"height\": 96,\n            \"justifyContent\": \"center\",\n            \"marginBottom\": 8,\n            \"marginLeft\": 8,\n            \"marginRight\": 8,\n            \"marginTop\": 8,\n            \"position\": \"relative\",\n            \"width\": 96,\n          }\n        }\n      >\n        <Image\n          accessibilityLabel=\"--\"\n          alt=\"--\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://pbs.twimg.com/profile_images/983582580372004864/h9ccP0Ea_400x400.jpg\",\n            }\n          }\n          style={\n            Array [\n              Object {\n                \"borderRadius\": 9999,\n                \"maxWidth\": \"100%\",\n              },\n              Object {\n                \"height\": \"100%\",\n                \"width\": \"100%\",\n              },\n            ]\n          }\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#a1a1aa\",\n            \"borderColor\": \"#27272a\",\n            \"borderRadius\": 9999,\n            \"borderWidth\": 1,\n            \"height\": 96,\n            \"justifyContent\": \"center\",\n            \"marginBottom\": 8,\n            \"marginLeft\": 8,\n            \"marginRight\": 8,\n            \"marginTop\": 8,\n            \"position\": \"relative\",\n            \"width\": 96,\n          }\n        }\n      >\n        <Image\n          accessibilityLabel=\"--\"\n          alt=\"--\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://pbs.twimg.com/profile_images/1320985200663293952/lE_Kg6vr_400x400.jpg\",\n            }\n          }\n          style={\n            Array [\n              Object {\n                \"borderRadius\": 9999,\n                \"maxWidth\": \"100%\",\n              },\n              Object {\n                \"height\": \"100%\",\n                \"width\": \"100%\",\n              },\n            ]\n          }\n        />\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Responsive FontSize 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <Text\n      dataSet={Object {}}\n      style={\n        Object {\n          \"backgroundColor\": undefined,\n          \"color\": \"#171717\",\n          \"fontFamily\": undefined,\n          \"fontSize\": 24,\n          \"fontStyle\": \"normal\",\n          \"fontWeight\": \"400\",\n          \"letterSpacing\": 0,\n          \"lineHeight\": 36,\n          \"textDecorationLine\": undefined,\n        }\n      }\n    >\n      This is responsive text\n    </Text>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Responsive More 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"backgroundColor\": \"#2dd4bf\",\n          \"height\": \"75%\",\n          \"width\": \"50%\",\n        }\n      }\n    />\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"fontSize\": 16,\n        }\n      }\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 14,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 21,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Font Size\n      </Text>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"backgroundColor\": \"#4ade80\",\n          \"height\": 24,\n          \"marginTop\": 16,\n          \"width\": \"100%\",\n        }\n      }\n    />\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"backgroundColor\": \"#fecaca\",\n          \"paddingBottom\": 16,\n          \"paddingLeft\": 16,\n          \"paddingRight\": 16,\n          \"paddingTop\": 16,\n        }\n      }\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 14,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 21,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Padding\n      </Text>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Row Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"flexDirection\": \"row\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#22d3ee\",\n            \"borderRadius\": 6,\n            \"display\": \"flex\",\n            \"elevation\": 4,\n            \"height\": 64,\n            \"justifyContent\": \"center\",\n            \"shadowColor\": \"#000000\",\n            \"shadowOffset\": Object {\n              \"height\": 2,\n              \"width\": 0,\n            },\n            \"shadowOpacity\": 0.23,\n            \"shadowRadius\": 2.62,\n            \"width\": 64,\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#FFFFFF\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Box 1\n        </Text>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 8,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#f472b6\",\n            \"borderRadius\": 6,\n            \"display\": \"flex\",\n            \"elevation\": 4,\n            \"height\": 64,\n            \"justifyContent\": \"center\",\n            \"shadowColor\": \"#000000\",\n            \"shadowOffset\": Object {\n              \"height\": 2,\n              \"width\": 0,\n            },\n            \"shadowOpacity\": 0.23,\n            \"shadowRadius\": 2.62,\n            \"width\": 64,\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#FFFFFF\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Box 2\n        </Text>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 8,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#34d399\",\n            \"borderRadius\": 6,\n            \"display\": \"flex\",\n            \"elevation\": 4,\n            \"height\": 64,\n            \"justifyContent\": \"center\",\n            \"shadowColor\": \"#000000\",\n            \"shadowOffset\": Object {\n              \"height\": 2,\n              \"width\": 0,\n            },\n            \"shadowOpacity\": 0.23,\n            \"shadowRadius\": 2.62,\n            \"width\": 64,\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#FFFFFF\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Box 3\n        </Text>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots ScrollView Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <RCTScrollView\n      contentContainerStyle={\n        Array [\n          Object {},\n          Object {\n            \"dataSet\": Object {},\n          },\n          Object {},\n        ]\n      }\n      dataSet={Object {}}\n      style={\n        Object {\n          \"height\": 320,\n          \"width\": 300,\n        }\n      }\n    >\n      <View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n              \"marginBottom\": 16,\n              \"marginTop\": 12,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Cyan\n          </Text>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flex\": 1,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#cffafe\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 16,\n                \"paddingTop\": 16,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              100\n            </Text>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#a5f3fc\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 16,\n                \"paddingTop\": 16,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              200\n            </Text>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#67e8f9\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 16,\n                \"paddingTop\": 16,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              300\n            </Text>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#22d3ee\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 16,\n                \"paddingTop\": 16,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              400\n            </Text>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#06b6d4\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 16,\n                \"paddingTop\": 16,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              500\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n              \"marginBottom\": 16,\n              \"marginTop\": 32,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Yellow\n          </Text>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flex\": 1,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#fef9c3\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 16,\n                \"paddingTop\": 16,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              100\n            </Text>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#fef08a\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 16,\n                \"paddingTop\": 16,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              200\n            </Text>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#fde047\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 16,\n                \"paddingTop\": 16,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              300\n            </Text>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#facc15\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 16,\n                \"paddingTop\": 16,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              400\n            </Text>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#eab308\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 16,\n                \"paddingTop\": 16,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              500\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n              \"marginBottom\": 16,\n              \"marginTop\": 32,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n             Violet\n          </Text>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flex\": 1,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#ede9fe\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 16,\n                \"paddingTop\": 16,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              100\n            </Text>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#ddd6fe\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 16,\n                \"paddingTop\": 16,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              200\n            </Text>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#c4b5fd\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 16,\n                \"paddingTop\": 16,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              300\n            </Text>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#a78bfa\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 16,\n                \"paddingTop\": 16,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              400\n            </Text>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#8b5cf6\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 16,\n                \"paddingTop\": 16,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              500\n            </Text>\n          </View>\n        </View>\n      </View>\n    </RCTScrollView>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots SectionList Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"height\": 320,\n          \"justifyContent\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <RCTScrollView\n        data={\n          Array [\n            Object {\n              \"data\": Array [\n                \"cyan.100\",\n                \"cyan.200\",\n                \"cyan.300\",\n                \"cyan.400\",\n                \"cyan.500\",\n              ],\n              \"title\": \"Cyan\",\n            },\n            Object {\n              \"data\": Array [\n                \"yellow.100\",\n                \"yellow.200\",\n                \"yellow.300\",\n                \"yellow.400\",\n                \"yellow.500\",\n              ],\n              \"title\": \"Yellow\",\n            },\n            Object {\n              \"data\": Array [\n                \"violet.100\",\n                \"violet.200\",\n                \"violet.300\",\n                \"violet.400\",\n                \"violet.500\",\n              ],\n              \"title\": \"Violet\",\n            },\n          ]\n        }\n        dataSet={Object {}}\n        disableVirtualization={false}\n        getItem={[Function]}\n        getItemCount={[Function]}\n        horizontal={false}\n        initialNumToRender={10}\n        keyExtractor={[Function]}\n        maxToRenderPerBatch={10}\n        onContentSizeChange={[Function]}\n        onEndReachedThreshold={2}\n        onLayout={[Function]}\n        onMomentumScrollEnd={[Function]}\n        onScroll={[Function]}\n        onScrollBeginDrag={[Function]}\n        onScrollEndDrag={[Function]}\n        renderItem={[Function]}\n        scrollEventThrottle={50}\n        stickyHeaderIndices={Array []}\n        style={\n          Object {\n            \"marginBottom\": 16,\n            \"maxWidth\": 300,\n            \"width\": \"100%\",\n          }\n        }\n        updateCellsBatchingPeriod={50}\n        windowSize={21}\n      >\n        <View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 20,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 25,\n                    \"marginTop\": 32,\n                    \"paddingBottom\": 16,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Cyan\n              </Text>\n            </View>\n          </View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#cffafe\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 16,\n                  \"paddingTop\": 16,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                100\n              </Text>\n            </View>\n          </View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#a5f3fc\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 16,\n                  \"paddingTop\": 16,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                200\n              </Text>\n            </View>\n          </View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#67e8f9\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 16,\n                  \"paddingTop\": 16,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                300\n              </Text>\n            </View>\n          </View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#22d3ee\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 16,\n                  \"paddingTop\": 16,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                400\n              </Text>\n            </View>\n          </View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#06b6d4\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 16,\n                  \"paddingTop\": 16,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                500\n              </Text>\n            </View>\n          </View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          />\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 20,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 25,\n                    \"marginTop\": 32,\n                    \"paddingBottom\": 16,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Yellow\n              </Text>\n            </View>\n          </View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fef9c3\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 16,\n                  \"paddingTop\": 16,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                100\n              </Text>\n            </View>\n          </View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fef08a\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 16,\n                  \"paddingTop\": 16,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                200\n              </Text>\n            </View>\n          </View>\n          <View\n            style={\n              Object {\n                \"height\": 0,\n              }\n            }\n          />\n        </View>\n      </RCTScrollView>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Select Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"maxWidth\": 300,\n          }\n        }\n      >\n        <View\n          accessibilityLabel=\"Choose Service\"\n          accessibilityRole=\"button\"\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"marginTop\": 4,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            isFocused={false}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"borderColor\": \"#d4d4d4\",\n                \"borderRadius\": 4,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"minWidth\": 200,\n                \"overflow\": \"hidden\",\n              }\n            }\n          >\n            <TextInput\n              accessible={true}\n              allowFontScaling={true}\n              aria-hidden={true}\n              dataSet={Object {}}\n              editable={false}\n              focusable={false}\n              importantForAccessibility=\"no\"\n              onBlur={[Function]}\n              onFocus={[Function]}\n              onKeyPress={[Function]}\n              placeholder=\"Choose Service\"\n              placeholderTextColor=\"#a3a3a3\"\n              pointerEvents=\"none\"\n              rejectResponderTermination={true}\n              secureTextEntry={false}\n              selection={\n                Object {\n                  \"start\": 0,\n                }\n              }\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"color\": \"#171717\",\n                  \"flex\": 1,\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"100%\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                  \"width\": \"100%\",\n                }\n              }\n              underlineColorAndroid=\"transparent\"\n              value=\"\"\n            />\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <RNSVGSvgView\n              accessibilityRole=\"image\"\n              align=\"xMidYMid\"\n              bbHeight={24}\n              bbWidth={24}\n              color={-9211021}\n              dataSet={Object {}}\n              focusable={false}\n              meetOrSlice={0}\n              minX={0}\n              minY={0}\n              stroke=\"\"\n              style={\n                Array [\n                  Object {\n                    \"backgroundColor\": \"transparent\",\n                    \"borderWidth\": 0,\n                  },\n                  Object {\n                    \"color\": \"#737373\",\n                    \"height\": 24,\n                    \"marginRight\": 12,\n                    \"paddingBottom\": 4,\n                    \"paddingLeft\": 4,\n                    \"paddingRight\": 4,\n                    \"paddingTop\": 4,\n                    \"width\": 24,\n                  },\n                  Object {\n                    \"flex\": 0,\n                    \"height\": 24,\n                    \"width\": 24,\n                  },\n                ]\n              }\n              tintColor={-9211021}\n              vbHeight={24}\n              vbWidth={24}\n            >\n              <RNSVGGroup\n                propList={\n                  Array [\n                    \"stroke\",\n                  ]\n                }\n                stroke={null}\n              >\n                <RNSVGGroup>\n                  <RNSVGPath\n                    d=\"M20.2286 6L11.9973 14.3785L3.76862 6.00268L2 7.80293L12 18L22 7.80293L20.2286 6Z\"\n                    fill={\n                      Array [\n                        2,\n                      ]\n                    }\n                    propList={\n                      Array [\n                        \"fill\",\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  />\n                </RNSVGGroup>\n              </RNSVGGroup>\n            </RNSVGSvgView>\n          </View>\n        </View>\n        <Modal\n          animationType=\"slide\"\n          hardwareAccelerated={false}\n          onRequestClose={[Function]}\n          statusBarTranslucent={true}\n          transparent={true}\n          visible={false}\n        >\n          <View\n            pointerEvents=\"none\"\n            style={\n              Object {\n                \"bottom\": 0,\n                \"left\": 0,\n                \"opacity\": 0,\n                \"position\": \"absolute\",\n                \"right\": 0,\n                \"top\": 0,\n                \"transform\": Array [\n                  Object {\n                    \"translateY\": 0,\n                  },\n                  Object {\n                    \"translateX\": 0,\n                  },\n                  Object {\n                    \"scale\": 1,\n                  },\n                  Object {\n                    \"scaleX\": 1,\n                  },\n                  Object {\n                    \"scaleY\": 1,\n                  },\n                  Object {\n                    \"rotate\": \"0deg\",\n                  },\n                ],\n              }\n            }\n          >\n            <View\n              accessible={false}\n              dataSet={Object {}}\n              focusable={true}\n              importantForAccessibility=\"no\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"backgroundColor\": \"rgb(0, 0, 0)\",\n                  \"bottom\": 0,\n                  \"left\": 0,\n                  \"opacity\": 0.3,\n                  \"position\": \"absolute\",\n                  \"right\": 0,\n                  \"top\": 0,\n                }\n              }\n            />\n          </View>\n          <View\n            pointerEvents=\"none\"\n            style={\n              Object {\n                \"bottom\": 0,\n                \"height\": \"100%\",\n                \"left\": 0,\n                \"opacity\": 1,\n                \"position\": \"absolute\",\n                \"right\": 0,\n                \"transform\": Array [\n                  Object {\n                    \"translateY\": 0,\n                  },\n                  Object {\n                    \"translateX\": 0,\n                  },\n                  Object {\n                    \"scale\": 1,\n                  },\n                  Object {\n                    \"scaleX\": 1,\n                  },\n                  Object {\n                    \"scaleY\": 1,\n                  },\n                  Object {\n                    \"rotate\": \"0deg\",\n                  },\n                ],\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              onLayout={[Function]}\n              pointerEvents=\"box-none\"\n              style={\n                Object {\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                }\n              }\n            >\n              <View\n                closeOnOverlayClick={true}\n                dataSet={Object {}}\n                pointerEvents=\"box-none\"\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"flex-end\",\n                    \"width\": \"100%\",\n                  }\n                }\n              >\n                <View\n                  onLayout={[Function]}\n                  pointerEvents=\"box-none\"\n                  style={\n                    Object {\n                      \"transform\": Array [\n                        Object {\n                          \"translateY\": 0,\n                        },\n                      ],\n                      \"width\": \"100%\",\n                    }\n                  }\n                >\n                  <View\n                    collapsable={false}\n                    dataSet={Object {}}\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                        \"paddingBottom\": 8,\n                        \"paddingTop\": 8,\n                      }\n                    }\n                  />\n                  <View\n                    accessibilityViewIsModal={true}\n                    aria-modal=\"true\"\n                    dataSet={Object {}}\n                    onAccessibilityEscape={[Function]}\n                    style={\n                      Object {\n                        \"alignItems\": \"center\",\n                        \"backgroundColor\": \"#fafafa\",\n                        \"borderRadius\": 0,\n                        \"borderTopLeftRadius\": 20,\n                        \"borderTopRightRadius\": 20,\n                        \"elevation\": 2,\n                        \"maxHeight\": 1184,\n                        \"overflow\": \"hidden\",\n                        \"paddingBottom\": 8,\n                        \"paddingLeft\": 8,\n                        \"paddingRight\": 8,\n                        \"paddingTop\": 8,\n                        \"shadowColor\": \"#000000\",\n                        \"shadowOffset\": Object {\n                          \"height\": 1,\n                          \"width\": 0,\n                        },\n                        \"shadowOpacity\": 0.2,\n                        \"shadowRadius\": 1.41,\n                        \"width\": \"100%\",\n                      }\n                    }\n                  >\n                    <View\n                      collapsable={false}\n                      dataSet={Object {}}\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                          \"alignItems\": \"center\",\n                          \"marginTop\": -8,\n                          \"paddingBottom\": 12,\n                          \"paddingTop\": 12,\n                          \"width\": \"100%\",\n                        }\n                      }\n                    >\n                      <View\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"backgroundColor\": \"#737373\",\n                            \"borderRadius\": 2,\n                            \"height\": 4,\n                            \"width\": 40,\n                          }\n                        }\n                      />\n                    </View>\n                    <RCTScrollView\n                      contentContainerStyle={\n                        Array [\n                          Object {},\n                          Object {\n                            \"dataSet\": Object {},\n                          },\n                          Object {},\n                        ]\n                      }\n                      data={\n                        Array [\n                          Object {\n                            \"label\": \"UX Research\",\n                            \"value\": \"ux\",\n                          },\n                          Object {\n                            \"label\": \"Web Development\",\n                            \"value\": \"web\",\n                          },\n                          Object {\n                            \"label\": \"Cross Platform Development\",\n                            \"value\": \"cross\",\n                          },\n                          Object {\n                            \"label\": \"UI Designing\",\n                            \"value\": \"ui\",\n                          },\n                          Object {\n                            \"label\": \"Backend Development\",\n                            \"value\": \"backend\",\n                          },\n                        ]\n                      }\n                      dataSet={Object {}}\n                      disableVirtualization={false}\n                      getItem={[Function]}\n                      getItemCount={[Function]}\n                      horizontal={false}\n                      initialNumToRender={10}\n                      keyExtractor={[Function]}\n                      maxToRenderPerBatch={10}\n                      onContentSizeChange={[Function]}\n                      onEndReachedThreshold={2}\n                      onLayout={[Function]}\n                      onMomentumScrollEnd={[Function]}\n                      onScroll={[Function]}\n                      onScrollBeginDrag={[Function]}\n                      onScrollEndDrag={[Function]}\n                      removeClippedSubviews={true}\n                      renderItem={[Function]}\n                      scrollEventThrottle={50}\n                      stickyHeaderIndices={Array []}\n                      style={\n                        Object {\n                          \"width\": \"100%\",\n                        }\n                      }\n                      updateCellsBatchingPeriod={50}\n                      viewabilityConfigCallbackPairs={Array []}\n                      windowSize={21}\n                    >\n                      <View>\n                        <View\n                          onLayout={[Function]}\n                          style={null}\n                        >\n                          <View\n                            accessibilityState={\n                              Object {\n                                \"selected\": false,\n                              }\n                            }\n                            accessible={true}\n                            dataSet={Object {}}\n                            focusable={true}\n                            label=\"UX Research\"\n                            onBlur={[Function]}\n                            onClick={[Function]}\n                            onFocus={[Function]}\n                            onHoverIn={[Function]}\n                            onHoverOut={[Function]}\n                            onResponderGrant={[Function]}\n                            onResponderMove={[Function]}\n                            onResponderRelease={[Function]}\n                            onResponderTerminate={[Function]}\n                            onResponderTerminationRequest={[Function]}\n                            onStartShouldSetResponder={[Function]}\n                            style={\n                              Object {\n                                \"backgroundColor\": \"#fafafa\",\n                                \"justifyContent\": \"flex-start\",\n                                \"paddingBottom\": 16,\n                                \"paddingLeft\": 16,\n                                \"paddingRight\": 16,\n                                \"paddingTop\": 16,\n                                \"width\": \"100%\",\n                              }\n                            }\n                            value=\"ux\"\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"flexDirection\": \"row\",\n                                }\n                              }\n                              test={true}\n                            >\n                              <View\n                                dataSet={Object {}}\n                                style={Object {}}\n                              >\n                                <Text\n                                  dataSet={Object {}}\n                                  style={\n                                    Object {\n                                      \"backgroundColor\": undefined,\n                                      \"color\": \"#171717\",\n                                      \"fontFamily\": undefined,\n                                      \"fontSize\": 16,\n                                      \"fontStyle\": \"normal\",\n                                      \"fontWeight\": \"400\",\n                                      \"letterSpacing\": 0,\n                                      \"lineHeight\": 24,\n                                      \"textDecorationLine\": undefined,\n                                    }\n                                  }\n                                >\n                                  UX Research\n                                </Text>\n                              </View>\n                            </View>\n                          </View>\n                        </View>\n                        <View\n                          onLayout={[Function]}\n                          style={null}\n                        >\n                          <View\n                            accessibilityState={\n                              Object {\n                                \"selected\": false,\n                              }\n                            }\n                            accessible={true}\n                            dataSet={Object {}}\n                            focusable={true}\n                            label=\"Web Development\"\n                            onBlur={[Function]}\n                            onClick={[Function]}\n                            onFocus={[Function]}\n                            onHoverIn={[Function]}\n                            onHoverOut={[Function]}\n                            onResponderGrant={[Function]}\n                            onResponderMove={[Function]}\n                            onResponderRelease={[Function]}\n                            onResponderTerminate={[Function]}\n                            onResponderTerminationRequest={[Function]}\n                            onStartShouldSetResponder={[Function]}\n                            style={\n                              Object {\n                                \"backgroundColor\": \"#fafafa\",\n                                \"justifyContent\": \"flex-start\",\n                                \"paddingBottom\": 16,\n                                \"paddingLeft\": 16,\n                                \"paddingRight\": 16,\n                                \"paddingTop\": 16,\n                                \"width\": \"100%\",\n                              }\n                            }\n                            value=\"web\"\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"flexDirection\": \"row\",\n                                }\n                              }\n                              test={true}\n                            >\n                              <View\n                                dataSet={Object {}}\n                                style={Object {}}\n                              >\n                                <Text\n                                  dataSet={Object {}}\n                                  style={\n                                    Object {\n                                      \"backgroundColor\": undefined,\n                                      \"color\": \"#171717\",\n                                      \"fontFamily\": undefined,\n                                      \"fontSize\": 16,\n                                      \"fontStyle\": \"normal\",\n                                      \"fontWeight\": \"400\",\n                                      \"letterSpacing\": 0,\n                                      \"lineHeight\": 24,\n                                      \"textDecorationLine\": undefined,\n                                    }\n                                  }\n                                >\n                                  Web Development\n                                </Text>\n                              </View>\n                            </View>\n                          </View>\n                        </View>\n                        <View\n                          onLayout={[Function]}\n                          style={null}\n                        >\n                          <View\n                            accessibilityState={\n                              Object {\n                                \"selected\": false,\n                              }\n                            }\n                            accessible={true}\n                            dataSet={Object {}}\n                            focusable={true}\n                            label=\"Cross Platform Development\"\n                            onBlur={[Function]}\n                            onClick={[Function]}\n                            onFocus={[Function]}\n                            onHoverIn={[Function]}\n                            onHoverOut={[Function]}\n                            onResponderGrant={[Function]}\n                            onResponderMove={[Function]}\n                            onResponderRelease={[Function]}\n                            onResponderTerminate={[Function]}\n                            onResponderTerminationRequest={[Function]}\n                            onStartShouldSetResponder={[Function]}\n                            style={\n                              Object {\n                                \"backgroundColor\": \"#fafafa\",\n                                \"justifyContent\": \"flex-start\",\n                                \"paddingBottom\": 16,\n                                \"paddingLeft\": 16,\n                                \"paddingRight\": 16,\n                                \"paddingTop\": 16,\n                                \"width\": \"100%\",\n                              }\n                            }\n                            value=\"cross\"\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"flexDirection\": \"row\",\n                                }\n                              }\n                              test={true}\n                            >\n                              <View\n                                dataSet={Object {}}\n                                style={Object {}}\n                              >\n                                <Text\n                                  dataSet={Object {}}\n                                  style={\n                                    Object {\n                                      \"backgroundColor\": undefined,\n                                      \"color\": \"#171717\",\n                                      \"fontFamily\": undefined,\n                                      \"fontSize\": 16,\n                                      \"fontStyle\": \"normal\",\n                                      \"fontWeight\": \"400\",\n                                      \"letterSpacing\": 0,\n                                      \"lineHeight\": 24,\n                                      \"textDecorationLine\": undefined,\n                                    }\n                                  }\n                                >\n                                  Cross Platform Development\n                                </Text>\n                              </View>\n                            </View>\n                          </View>\n                        </View>\n                        <View\n                          onLayout={[Function]}\n                          style={null}\n                        >\n                          <View\n                            accessibilityState={\n                              Object {\n                                \"selected\": false,\n                              }\n                            }\n                            accessible={true}\n                            dataSet={Object {}}\n                            focusable={true}\n                            label=\"UI Designing\"\n                            onBlur={[Function]}\n                            onClick={[Function]}\n                            onFocus={[Function]}\n                            onHoverIn={[Function]}\n                            onHoverOut={[Function]}\n                            onResponderGrant={[Function]}\n                            onResponderMove={[Function]}\n                            onResponderRelease={[Function]}\n                            onResponderTerminate={[Function]}\n                            onResponderTerminationRequest={[Function]}\n                            onStartShouldSetResponder={[Function]}\n                            style={\n                              Object {\n                                \"backgroundColor\": \"#fafafa\",\n                                \"justifyContent\": \"flex-start\",\n                                \"paddingBottom\": 16,\n                                \"paddingLeft\": 16,\n                                \"paddingRight\": 16,\n                                \"paddingTop\": 16,\n                                \"width\": \"100%\",\n                              }\n                            }\n                            value=\"ui\"\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"flexDirection\": \"row\",\n                                }\n                              }\n                              test={true}\n                            >\n                              <View\n                                dataSet={Object {}}\n                                style={Object {}}\n                              >\n                                <Text\n                                  dataSet={Object {}}\n                                  style={\n                                    Object {\n                                      \"backgroundColor\": undefined,\n                                      \"color\": \"#171717\",\n                                      \"fontFamily\": undefined,\n                                      \"fontSize\": 16,\n                                      \"fontStyle\": \"normal\",\n                                      \"fontWeight\": \"400\",\n                                      \"letterSpacing\": 0,\n                                      \"lineHeight\": 24,\n                                      \"textDecorationLine\": undefined,\n                                    }\n                                  }\n                                >\n                                  UI Designing\n                                </Text>\n                              </View>\n                            </View>\n                          </View>\n                        </View>\n                        <View\n                          onLayout={[Function]}\n                          style={null}\n                        >\n                          <View\n                            accessibilityState={\n                              Object {\n                                \"selected\": false,\n                              }\n                            }\n                            accessible={true}\n                            dataSet={Object {}}\n                            focusable={true}\n                            label=\"Backend Development\"\n                            onBlur={[Function]}\n                            onClick={[Function]}\n                            onFocus={[Function]}\n                            onHoverIn={[Function]}\n                            onHoverOut={[Function]}\n                            onResponderGrant={[Function]}\n                            onResponderMove={[Function]}\n                            onResponderRelease={[Function]}\n                            onResponderTerminate={[Function]}\n                            onResponderTerminationRequest={[Function]}\n                            onStartShouldSetResponder={[Function]}\n                            style={\n                              Object {\n                                \"backgroundColor\": \"#fafafa\",\n                                \"justifyContent\": \"flex-start\",\n                                \"paddingBottom\": 16,\n                                \"paddingLeft\": 16,\n                                \"paddingRight\": 16,\n                                \"paddingTop\": 16,\n                                \"width\": \"100%\",\n                              }\n                            }\n                            value=\"backend\"\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"flexDirection\": \"row\",\n                                }\n                              }\n                              test={true}\n                            >\n                              <View\n                                dataSet={Object {}}\n                                style={Object {}}\n                              >\n                                <Text\n                                  dataSet={Object {}}\n                                  style={\n                                    Object {\n                                      \"backgroundColor\": undefined,\n                                      \"color\": \"#171717\",\n                                      \"fontFamily\": undefined,\n                                      \"fontSize\": 16,\n                                      \"fontStyle\": \"normal\",\n                                      \"fontWeight\": \"400\",\n                                      \"letterSpacing\": 0,\n                                      \"lineHeight\": 24,\n                                      \"textDecorationLine\": undefined,\n                                    }\n                                  }\n                                >\n                                  Backend Development\n                                </Text>\n                              </View>\n                            </View>\n                          </View>\n                        </View>\n                      </View>\n                    </RCTScrollView>\n                  </View>\n                </View>\n              </View>\n            </View>\n          </View>\n        </Modal>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Select FormControlled 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        isInvalid={true}\n        isRequired={true}\n        style={\n          Object {\n            \"maxWidth\": 300,\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          feedbackId=\"field-186-feedback\"\n          hasFeedbackText={false}\n          hasHelpText={false}\n          helpTextId=\"field-186-helptext\"\n          isDisabled={false}\n          isInvalid={true}\n          isReadOnly={false}\n          isRequired={true}\n          labelId=\"field-186-label\"\n          nativeID=\"field-186-label\"\n          setHasFeedbackText={[Function]}\n          setHasHelpText={[Function]}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"marginBottom\": 4,\n              \"marginTop\": 4,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#737373\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Choose service\n          </Text>\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#dc2626\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            *\n          </Text>\n        </View>\n        <View\n          accessibilityLabel=\"Choose Service\"\n          accessibilityRole=\"button\"\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"marginTop\": 4,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            isFocused={false}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"borderColor\": \"#d4d4d4\",\n                \"borderRadius\": 4,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"minWidth\": 200,\n                \"overflow\": \"hidden\",\n              }\n            }\n          >\n            <TextInput\n              accessibilityInvalid={true}\n              accessibilityRequired={true}\n              accessible={true}\n              allowFontScaling={true}\n              aria-hidden={true}\n              dataSet={Object {}}\n              disabled={false}\n              editable={false}\n              focusable={false}\n              importantForAccessibility=\"no\"\n              isInvalid={true}\n              isRequired={true}\n              nativeID=\"field-186-input\"\n              onBlur={[Function]}\n              onFocus={[Function]}\n              onKeyPress={[Function]}\n              placeholder=\"Choose Service\"\n              placeholderTextColor=\"#a3a3a3\"\n              pointerEvents=\"none\"\n              readOnly={false}\n              rejectResponderTermination={true}\n              required={true}\n              secureTextEntry={false}\n              selection={\n                Object {\n                  \"start\": 0,\n                }\n              }\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"color\": \"#171717\",\n                  \"flex\": 1,\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"100%\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                  \"width\": \"100%\",\n                }\n              }\n              underlineColorAndroid=\"transparent\"\n              value=\"\"\n            />\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <RNSVGSvgView\n              accessibilityRole=\"image\"\n              align=\"xMidYMid\"\n              bbHeight={24}\n              bbWidth={24}\n              color={-9211021}\n              dataSet={Object {}}\n              focusable={false}\n              meetOrSlice={0}\n              minX={0}\n              minY={0}\n              stroke=\"\"\n              style={\n                Array [\n                  Object {\n                    \"backgroundColor\": \"transparent\",\n                    \"borderWidth\": 0,\n                  },\n                  Object {\n                    \"color\": \"#737373\",\n                    \"height\": 24,\n                    \"marginRight\": 12,\n                    \"paddingBottom\": 4,\n                    \"paddingLeft\": 4,\n                    \"paddingRight\": 4,\n                    \"paddingTop\": 4,\n                    \"width\": 24,\n                  },\n                  Object {\n                    \"flex\": 0,\n                    \"height\": 24,\n                    \"width\": 24,\n                  },\n                ]\n              }\n              tintColor={-9211021}\n              vbHeight={24}\n              vbWidth={24}\n            >\n              <RNSVGGroup\n                propList={\n                  Array [\n                    \"stroke\",\n                  ]\n                }\n                stroke={null}\n              >\n                <RNSVGGroup>\n                  <RNSVGPath\n                    d=\"M20.2286 6L11.9973 14.3785L3.76862 6.00268L2 7.80293L12 18L22 7.80293L20.2286 6Z\"\n                    fill={\n                      Array [\n                        2,\n                      ]\n                    }\n                    propList={\n                      Array [\n                        \"fill\",\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  />\n                </RNSVGGroup>\n              </RNSVGGroup>\n            </RNSVGSvgView>\n          </View>\n        </View>\n        <Modal\n          animationType=\"slide\"\n          hardwareAccelerated={false}\n          onRequestClose={[Function]}\n          statusBarTranslucent={true}\n          transparent={true}\n          visible={false}\n        >\n          <View\n            pointerEvents=\"none\"\n            style={\n              Object {\n                \"bottom\": 0,\n                \"left\": 0,\n                \"opacity\": 0,\n                \"position\": \"absolute\",\n                \"right\": 0,\n                \"top\": 0,\n                \"transform\": Array [\n                  Object {\n                    \"translateY\": 0,\n                  },\n                  Object {\n                    \"translateX\": 0,\n                  },\n                  Object {\n                    \"scale\": 1,\n                  },\n                  Object {\n                    \"scaleX\": 1,\n                  },\n                  Object {\n                    \"scaleY\": 1,\n                  },\n                  Object {\n                    \"rotate\": \"0deg\",\n                  },\n                ],\n              }\n            }\n          >\n            <View\n              accessible={false}\n              dataSet={Object {}}\n              focusable={true}\n              importantForAccessibility=\"no\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"backgroundColor\": \"rgb(0, 0, 0)\",\n                  \"bottom\": 0,\n                  \"left\": 0,\n                  \"opacity\": 0.3,\n                  \"position\": \"absolute\",\n                  \"right\": 0,\n                  \"top\": 0,\n                }\n              }\n            />\n          </View>\n          <View\n            pointerEvents=\"none\"\n            style={\n              Object {\n                \"bottom\": 0,\n                \"height\": \"100%\",\n                \"left\": 0,\n                \"opacity\": 1,\n                \"position\": \"absolute\",\n                \"right\": 0,\n                \"transform\": Array [\n                  Object {\n                    \"translateY\": 0,\n                  },\n                  Object {\n                    \"translateX\": 0,\n                  },\n                  Object {\n                    \"scale\": 1,\n                  },\n                  Object {\n                    \"scaleX\": 1,\n                  },\n                  Object {\n                    \"scaleY\": 1,\n                  },\n                  Object {\n                    \"rotate\": \"0deg\",\n                  },\n                ],\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              onLayout={[Function]}\n              pointerEvents=\"box-none\"\n              style={\n                Object {\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                }\n              }\n            >\n              <View\n                closeOnOverlayClick={true}\n                dataSet={Object {}}\n                pointerEvents=\"box-none\"\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"flex-end\",\n                    \"width\": \"100%\",\n                  }\n                }\n              >\n                <View\n                  onLayout={[Function]}\n                  pointerEvents=\"box-none\"\n                  style={\n                    Object {\n                      \"transform\": Array [\n                        Object {\n                          \"translateY\": 0,\n                        },\n                      ],\n                      \"width\": \"100%\",\n                    }\n                  }\n                >\n                  <View\n                    collapsable={false}\n                    dataSet={Object {}}\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                        \"paddingBottom\": 8,\n                        \"paddingTop\": 8,\n                      }\n                    }\n                  />\n                  <View\n                    accessibilityViewIsModal={true}\n                    aria-modal=\"true\"\n                    dataSet={Object {}}\n                    onAccessibilityEscape={[Function]}\n                    style={\n                      Object {\n                        \"alignItems\": \"center\",\n                        \"backgroundColor\": \"#fafafa\",\n                        \"borderRadius\": 0,\n                        \"borderTopLeftRadius\": 20,\n                        \"borderTopRightRadius\": 20,\n                        \"elevation\": 2,\n                        \"maxHeight\": 1184,\n                        \"overflow\": \"hidden\",\n                        \"paddingBottom\": 8,\n                        \"paddingLeft\": 8,\n                        \"paddingRight\": 8,\n                        \"paddingTop\": 8,\n                        \"shadowColor\": \"#000000\",\n                        \"shadowOffset\": Object {\n                          \"height\": 1,\n                          \"width\": 0,\n                        },\n                        \"shadowOpacity\": 0.2,\n                        \"shadowRadius\": 1.41,\n                        \"width\": \"100%\",\n                      }\n                    }\n                  >\n                    <View\n                      collapsable={false}\n                      dataSet={Object {}}\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                          \"alignItems\": \"center\",\n                          \"marginTop\": -8,\n                          \"paddingBottom\": 12,\n                          \"paddingTop\": 12,\n                          \"width\": \"100%\",\n                        }\n                      }\n                    >\n                      <View\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"backgroundColor\": \"#737373\",\n                            \"borderRadius\": 2,\n                            \"height\": 4,\n                            \"width\": 40,\n                          }\n                        }\n                      />\n                    </View>\n                    <RCTScrollView\n                      contentContainerStyle={\n                        Array [\n                          Object {},\n                          Object {\n                            \"dataSet\": Object {},\n                          },\n                          Object {},\n                        ]\n                      }\n                      data={\n                        Array [\n                          Object {\n                            \"label\": \"UX Research\",\n                            \"value\": \"ux\",\n                          },\n                          Object {\n                            \"label\": \"Web Development\",\n                            \"value\": \"web\",\n                          },\n                          Object {\n                            \"label\": \"Cross Platform Development\",\n                            \"value\": \"cross\",\n                          },\n                          Object {\n                            \"label\": \"UI Designing\",\n                            \"value\": \"ui\",\n                          },\n                          Object {\n                            \"label\": \"Backend Development\",\n                            \"value\": \"backend\",\n                          },\n                        ]\n                      }\n                      dataSet={Object {}}\n                      disableVirtualization={false}\n                      getItem={[Function]}\n                      getItemCount={[Function]}\n                      horizontal={false}\n                      initialNumToRender={10}\n                      keyExtractor={[Function]}\n                      maxToRenderPerBatch={10}\n                      onContentSizeChange={[Function]}\n                      onEndReachedThreshold={2}\n                      onLayout={[Function]}\n                      onMomentumScrollEnd={[Function]}\n                      onScroll={[Function]}\n                      onScrollBeginDrag={[Function]}\n                      onScrollEndDrag={[Function]}\n                      removeClippedSubviews={true}\n                      renderItem={[Function]}\n                      scrollEventThrottle={50}\n                      stickyHeaderIndices={Array []}\n                      style={\n                        Object {\n                          \"width\": \"100%\",\n                        }\n                      }\n                      updateCellsBatchingPeriod={50}\n                      viewabilityConfigCallbackPairs={Array []}\n                      windowSize={21}\n                    >\n                      <View>\n                        <View\n                          onLayout={[Function]}\n                          style={null}\n                        >\n                          <View\n                            accessibilityState={\n                              Object {\n                                \"selected\": false,\n                              }\n                            }\n                            accessible={true}\n                            dataSet={Object {}}\n                            focusable={true}\n                            label=\"UX Research\"\n                            onBlur={[Function]}\n                            onClick={[Function]}\n                            onFocus={[Function]}\n                            onHoverIn={[Function]}\n                            onHoverOut={[Function]}\n                            onResponderGrant={[Function]}\n                            onResponderMove={[Function]}\n                            onResponderRelease={[Function]}\n                            onResponderTerminate={[Function]}\n                            onResponderTerminationRequest={[Function]}\n                            onStartShouldSetResponder={[Function]}\n                            style={\n                              Object {\n                                \"backgroundColor\": \"#fafafa\",\n                                \"justifyContent\": \"flex-start\",\n                                \"paddingBottom\": 16,\n                                \"paddingLeft\": 16,\n                                \"paddingRight\": 16,\n                                \"paddingTop\": 16,\n                                \"width\": \"100%\",\n                              }\n                            }\n                            value=\"ux\"\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"flexDirection\": \"row\",\n                                }\n                              }\n                              test={true}\n                            >\n                              <View\n                                dataSet={Object {}}\n                                style={Object {}}\n                              >\n                                <Text\n                                  dataSet={Object {}}\n                                  style={\n                                    Object {\n                                      \"backgroundColor\": undefined,\n                                      \"color\": \"#171717\",\n                                      \"fontFamily\": undefined,\n                                      \"fontSize\": 16,\n                                      \"fontStyle\": \"normal\",\n                                      \"fontWeight\": \"400\",\n                                      \"letterSpacing\": 0,\n                                      \"lineHeight\": 24,\n                                      \"textDecorationLine\": undefined,\n                                    }\n                                  }\n                                >\n                                  UX Research\n                                </Text>\n                              </View>\n                            </View>\n                          </View>\n                        </View>\n                        <View\n                          onLayout={[Function]}\n                          style={null}\n                        >\n                          <View\n                            accessibilityState={\n                              Object {\n                                \"selected\": false,\n                              }\n                            }\n                            accessible={true}\n                            dataSet={Object {}}\n                            focusable={true}\n                            label=\"Web Development\"\n                            onBlur={[Function]}\n                            onClick={[Function]}\n                            onFocus={[Function]}\n                            onHoverIn={[Function]}\n                            onHoverOut={[Function]}\n                            onResponderGrant={[Function]}\n                            onResponderMove={[Function]}\n                            onResponderRelease={[Function]}\n                            onResponderTerminate={[Function]}\n                            onResponderTerminationRequest={[Function]}\n                            onStartShouldSetResponder={[Function]}\n                            style={\n                              Object {\n                                \"backgroundColor\": \"#fafafa\",\n                                \"justifyContent\": \"flex-start\",\n                                \"paddingBottom\": 16,\n                                \"paddingLeft\": 16,\n                                \"paddingRight\": 16,\n                                \"paddingTop\": 16,\n                                \"width\": \"100%\",\n                              }\n                            }\n                            value=\"web\"\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"flexDirection\": \"row\",\n                                }\n                              }\n                              test={true}\n                            >\n                              <View\n                                dataSet={Object {}}\n                                style={Object {}}\n                              >\n                                <Text\n                                  dataSet={Object {}}\n                                  style={\n                                    Object {\n                                      \"backgroundColor\": undefined,\n                                      \"color\": \"#171717\",\n                                      \"fontFamily\": undefined,\n                                      \"fontSize\": 16,\n                                      \"fontStyle\": \"normal\",\n                                      \"fontWeight\": \"400\",\n                                      \"letterSpacing\": 0,\n                                      \"lineHeight\": 24,\n                                      \"textDecorationLine\": undefined,\n                                    }\n                                  }\n                                >\n                                  Web Development\n                                </Text>\n                              </View>\n                            </View>\n                          </View>\n                        </View>\n                        <View\n                          onLayout={[Function]}\n                          style={null}\n                        >\n                          <View\n                            accessibilityState={\n                              Object {\n                                \"selected\": false,\n                              }\n                            }\n                            accessible={true}\n                            dataSet={Object {}}\n                            focusable={true}\n                            label=\"Cross Platform Development\"\n                            onBlur={[Function]}\n                            onClick={[Function]}\n                            onFocus={[Function]}\n                            onHoverIn={[Function]}\n                            onHoverOut={[Function]}\n                            onResponderGrant={[Function]}\n                            onResponderMove={[Function]}\n                            onResponderRelease={[Function]}\n                            onResponderTerminate={[Function]}\n                            onResponderTerminationRequest={[Function]}\n                            onStartShouldSetResponder={[Function]}\n                            style={\n                              Object {\n                                \"backgroundColor\": \"#fafafa\",\n                                \"justifyContent\": \"flex-start\",\n                                \"paddingBottom\": 16,\n                                \"paddingLeft\": 16,\n                                \"paddingRight\": 16,\n                                \"paddingTop\": 16,\n                                \"width\": \"100%\",\n                              }\n                            }\n                            value=\"cross\"\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"flexDirection\": \"row\",\n                                }\n                              }\n                              test={true}\n                            >\n                              <View\n                                dataSet={Object {}}\n                                style={Object {}}\n                              >\n                                <Text\n                                  dataSet={Object {}}\n                                  style={\n                                    Object {\n                                      \"backgroundColor\": undefined,\n                                      \"color\": \"#171717\",\n                                      \"fontFamily\": undefined,\n                                      \"fontSize\": 16,\n                                      \"fontStyle\": \"normal\",\n                                      \"fontWeight\": \"400\",\n                                      \"letterSpacing\": 0,\n                                      \"lineHeight\": 24,\n                                      \"textDecorationLine\": undefined,\n                                    }\n                                  }\n                                >\n                                  Cross Platform Development\n                                </Text>\n                              </View>\n                            </View>\n                          </View>\n                        </View>\n                        <View\n                          onLayout={[Function]}\n                          style={null}\n                        >\n                          <View\n                            accessibilityState={\n                              Object {\n                                \"selected\": false,\n                              }\n                            }\n                            accessible={true}\n                            dataSet={Object {}}\n                            focusable={true}\n                            label=\"UI Designing\"\n                            onBlur={[Function]}\n                            onClick={[Function]}\n                            onFocus={[Function]}\n                            onHoverIn={[Function]}\n                            onHoverOut={[Function]}\n                            onResponderGrant={[Function]}\n                            onResponderMove={[Function]}\n                            onResponderRelease={[Function]}\n                            onResponderTerminate={[Function]}\n                            onResponderTerminationRequest={[Function]}\n                            onStartShouldSetResponder={[Function]}\n                            style={\n                              Object {\n                                \"backgroundColor\": \"#fafafa\",\n                                \"justifyContent\": \"flex-start\",\n                                \"paddingBottom\": 16,\n                                \"paddingLeft\": 16,\n                                \"paddingRight\": 16,\n                                \"paddingTop\": 16,\n                                \"width\": \"100%\",\n                              }\n                            }\n                            value=\"ui\"\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"flexDirection\": \"row\",\n                                }\n                              }\n                              test={true}\n                            >\n                              <View\n                                dataSet={Object {}}\n                                style={Object {}}\n                              >\n                                <Text\n                                  dataSet={Object {}}\n                                  style={\n                                    Object {\n                                      \"backgroundColor\": undefined,\n                                      \"color\": \"#171717\",\n                                      \"fontFamily\": undefined,\n                                      \"fontSize\": 16,\n                                      \"fontStyle\": \"normal\",\n                                      \"fontWeight\": \"400\",\n                                      \"letterSpacing\": 0,\n                                      \"lineHeight\": 24,\n                                      \"textDecorationLine\": undefined,\n                                    }\n                                  }\n                                >\n                                  UI Designing\n                                </Text>\n                              </View>\n                            </View>\n                          </View>\n                        </View>\n                        <View\n                          onLayout={[Function]}\n                          style={null}\n                        >\n                          <View\n                            accessibilityState={\n                              Object {\n                                \"selected\": false,\n                              }\n                            }\n                            accessible={true}\n                            dataSet={Object {}}\n                            focusable={true}\n                            label=\"Backend Development\"\n                            onBlur={[Function]}\n                            onClick={[Function]}\n                            onFocus={[Function]}\n                            onHoverIn={[Function]}\n                            onHoverOut={[Function]}\n                            onResponderGrant={[Function]}\n                            onResponderMove={[Function]}\n                            onResponderRelease={[Function]}\n                            onResponderTerminate={[Function]}\n                            onResponderTerminationRequest={[Function]}\n                            onStartShouldSetResponder={[Function]}\n                            style={\n                              Object {\n                                \"backgroundColor\": \"#fafafa\",\n                                \"justifyContent\": \"flex-start\",\n                                \"paddingBottom\": 16,\n                                \"paddingLeft\": 16,\n                                \"paddingRight\": 16,\n                                \"paddingTop\": 16,\n                                \"width\": \"100%\",\n                              }\n                            }\n                            value=\"backend\"\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"flexDirection\": \"row\",\n                                }\n                              }\n                              test={true}\n                            >\n                              <View\n                                dataSet={Object {}}\n                                style={Object {}}\n                              >\n                                <Text\n                                  dataSet={Object {}}\n                                  style={\n                                    Object {\n                                      \"backgroundColor\": undefined,\n                                      \"color\": \"#171717\",\n                                      \"fontFamily\": undefined,\n                                      \"fontSize\": 16,\n                                      \"fontStyle\": \"normal\",\n                                      \"fontWeight\": \"400\",\n                                      \"letterSpacing\": 0,\n                                      \"lineHeight\": 24,\n                                      \"textDecorationLine\": undefined,\n                                    }\n                                  }\n                                >\n                                  Backend Development\n                                </Text>\n                              </View>\n                            </View>\n                          </View>\n                        </View>\n                      </View>\n                    </RCTScrollView>\n                  </View>\n                </View>\n              </View>\n            </View>\n          </View>\n        </Modal>\n        <View\n          dataSet={Object {}}\n          feedbackId=\"field-186-feedback\"\n          hasFeedbackText={false}\n          hasHelpText={false}\n          helpTextId=\"field-186-helptext\"\n          isDisabled={false}\n          isInvalid={true}\n          isReadOnly={false}\n          isRequired={true}\n          labelId=\"field-186-label\"\n          nativeID=\"field-186\"\n          setHasFeedbackText={[Function]}\n          setHasHelpText={[Function]}\n          style={\n            Object {\n              \"marginTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <RNSVGSvgView\n              accessibilityRole=\"image\"\n              align=\"xMidYMid\"\n              bbHeight={12}\n              bbWidth={12}\n              color={-2349530}\n              dataSet={Object {}}\n              focusable={false}\n              meetOrSlice={0}\n              minX={0}\n              minY={0}\n              stroke=\"\"\n              style={\n                Array [\n                  Object {\n                    \"backgroundColor\": \"transparent\",\n                    \"borderWidth\": 0,\n                  },\n                  Object {\n                    \"color\": \"#dc2626\",\n                    \"fontSize\": 12,\n                    \"height\": 12,\n                    \"width\": 12,\n                  },\n                  Object {\n                    \"flex\": 0,\n                    \"height\": 12,\n                    \"width\": 12,\n                  },\n                ]\n              }\n              tintColor={-2349530}\n              vbHeight={16}\n              vbWidth={16}\n            >\n              <RNSVGGroup\n                font={\n                  Object {\n                    \"fontSize\": 12,\n                  }\n                }\n                propList={\n                  Array [\n                    \"stroke\",\n                  ]\n                }\n                stroke={null}\n              >\n                <RNSVGGroup>\n                  <RNSVGPath\n                    d=\"M8 16C6.41775 16 4.87103 15.5308 3.55544 14.6518C2.23985 13.7727 1.21447 12.5233 0.608967 11.0615C0.00346627 9.59966 -0.15496 7.99113 0.153721 6.43928C0.462403 4.88743 1.22433 3.46197 2.34315 2.34315C3.46197 1.22433 4.88743 0.462403 6.43928 0.153721C7.99113 -0.15496 9.59966 0.00346627 11.0615 0.608967C12.5233 1.21447 13.7727 2.23985 14.6518 3.55544C15.5308 4.87103 16 6.41775 16 8C16 10.1217 15.1571 12.1566 13.6569 13.6569C12.1566 15.1571 10.1217 16 8 16ZM8 14.4C9.2658 14.4 10.5032 14.0246 11.5556 13.3214C12.6081 12.6182 13.4284 11.6186 13.9128 10.4492C14.3972 9.27973 14.524 7.9929 14.277 6.75142C14.0301 5.50995 13.4205 4.36958 12.5255 3.47452C11.6304 2.57946 10.4901 1.96992 9.24858 1.72298C8.0071 1.47603 6.72028 1.60277 5.55083 2.08717C4.38138 2.57158 3.38184 3.39188 2.6786 4.44435C1.97536 5.49683 1.6 6.7342 1.6 8C1.6 9.69739 2.27429 11.3253 3.47452 12.5255C4.67475 13.7257 6.30262 14.4 8 14.4ZM7.2 10.4H8.8V12H7.2V10.4ZM7.2 4H8.8V8.8H7.2V4Z\"\n                    fill={\n                      Array [\n                        2,\n                      ]\n                    }\n                    propList={\n                      Array [\n                        \"fill\",\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  />\n                </RNSVGGroup>\n              </RNSVGGroup>\n            </RNSVGSvgView>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 4,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#dc2626\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 18,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Please make a selection!\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Select Select Long list 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"flex-start\",\n          \"maxWidth\": \"80%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          feedbackId=\"field-188-feedback\"\n          hasFeedbackText={false}\n          hasHelpText={false}\n          helpTextId=\"field-188-helptext\"\n          isDisabled={false}\n          isInvalid={false}\n          isReadOnly={false}\n          isRequired={false}\n          labelId=\"field-188-label\"\n          nativeID=\"field-188-label\"\n          setHasFeedbackText={[Function]}\n          setHasHelpText={[Function]}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"marginBottom\": 4,\n              \"marginTop\": 4,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#737373\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Select Color\n          </Text>\n        </View>\n        <View\n          accessibilityLabel=\"Select a Color\"\n          accessibilityRole=\"button\"\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"marginTop\": 4,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            isFocused={false}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"borderColor\": \"#d4d4d4\",\n                \"borderRadius\": 4,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"minWidth\": 100,\n                \"overflow\": \"hidden\",\n              }\n            }\n          >\n            <TextInput\n              accessible={true}\n              allowFontScaling={true}\n              aria-hidden={true}\n              dataSet={Object {}}\n              disabled={false}\n              editable={false}\n              focusable={false}\n              importantForAccessibility=\"no\"\n              isRequired={false}\n              nativeID=\"field-188-input\"\n              onBlur={[Function]}\n              onFocus={[Function]}\n              onKeyPress={[Function]}\n              placeholder=\"Select a Color\"\n              placeholderTextColor=\"#a3a3a3\"\n              pointerEvents=\"none\"\n              readOnly={false}\n              rejectResponderTermination={true}\n              required={false}\n              secureTextEntry={false}\n              selection={\n                Object {\n                  \"start\": 0,\n                }\n              }\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"color\": \"#171717\",\n                  \"flex\": 1,\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"100%\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                  \"width\": \"100%\",\n                }\n              }\n              underlineColorAndroid=\"transparent\"\n              value=\"\"\n            />\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <RNSVGSvgView\n              accessibilityRole=\"image\"\n              align=\"xMidYMid\"\n              bbHeight={24}\n              bbWidth={24}\n              color={-9211021}\n              dataSet={Object {}}\n              focusable={false}\n              meetOrSlice={0}\n              minX={0}\n              minY={0}\n              stroke=\"\"\n              style={\n                Array [\n                  Object {\n                    \"backgroundColor\": \"transparent\",\n                    \"borderWidth\": 0,\n                  },\n                  Object {\n                    \"color\": \"#737373\",\n                    \"height\": 24,\n                    \"marginRight\": 12,\n                    \"paddingBottom\": 4,\n                    \"paddingLeft\": 4,\n                    \"paddingRight\": 4,\n                    \"paddingTop\": 4,\n                    \"width\": 24,\n                  },\n                  Object {\n                    \"flex\": 0,\n                    \"height\": 24,\n                    \"width\": 24,\n                  },\n                ]\n              }\n              tintColor={-9211021}\n              vbHeight={24}\n              vbWidth={24}\n            >\n              <RNSVGGroup\n                propList={\n                  Array [\n                    \"stroke\",\n                  ]\n                }\n                stroke={null}\n              >\n                <RNSVGGroup>\n                  <RNSVGPath\n                    d=\"M20.2286 6L11.9973 14.3785L3.76862 6.00268L2 7.80293L12 18L22 7.80293L20.2286 6Z\"\n                    fill={\n                      Array [\n                        2,\n                      ]\n                    }\n                    propList={\n                      Array [\n                        \"fill\",\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  />\n                </RNSVGGroup>\n              </RNSVGGroup>\n            </RNSVGSvgView>\n          </View>\n        </View>\n        <Modal\n          animationType=\"slide\"\n          hardwareAccelerated={false}\n          onRequestClose={[Function]}\n          statusBarTranslucent={true}\n          transparent={true}\n          visible={false}\n        >\n          <View\n            pointerEvents=\"none\"\n            style={\n              Object {\n                \"bottom\": 0,\n                \"left\": 0,\n                \"opacity\": 0,\n                \"position\": \"absolute\",\n                \"right\": 0,\n                \"top\": 0,\n                \"transform\": Array [\n                  Object {\n                    \"translateY\": 0,\n                  },\n                  Object {\n                    \"translateX\": 0,\n                  },\n                  Object {\n                    \"scale\": 1,\n                  },\n                  Object {\n                    \"scaleX\": 1,\n                  },\n                  Object {\n                    \"scaleY\": 1,\n                  },\n                  Object {\n                    \"rotate\": \"0deg\",\n                  },\n                ],\n              }\n            }\n          >\n            <View\n              accessible={false}\n              dataSet={Object {}}\n              focusable={true}\n              importantForAccessibility=\"no\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"backgroundColor\": \"rgb(0, 0, 0)\",\n                  \"bottom\": 0,\n                  \"left\": 0,\n                  \"opacity\": 0.3,\n                  \"position\": \"absolute\",\n                  \"right\": 0,\n                  \"top\": 0,\n                }\n              }\n            />\n          </View>\n          <View\n            pointerEvents=\"none\"\n            style={\n              Object {\n                \"bottom\": 0,\n                \"height\": \"100%\",\n                \"left\": 0,\n                \"opacity\": 1,\n                \"position\": \"absolute\",\n                \"right\": 0,\n                \"transform\": Array [\n                  Object {\n                    \"translateY\": 0,\n                  },\n                  Object {\n                    \"translateX\": 0,\n                  },\n                  Object {\n                    \"scale\": 1,\n                  },\n                  Object {\n                    \"scaleX\": 1,\n                  },\n                  Object {\n                    \"scaleY\": 1,\n                  },\n                  Object {\n                    \"rotate\": \"0deg\",\n                  },\n                ],\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              onLayout={[Function]}\n              pointerEvents=\"box-none\"\n              style={\n                Object {\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                }\n              }\n            >\n              <View\n                closeOnOverlayClick={true}\n                dataSet={Object {}}\n                pointerEvents=\"box-none\"\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"flex-end\",\n                    \"width\": \"100%\",\n                  }\n                }\n              >\n                <View\n                  onLayout={[Function]}\n                  pointerEvents=\"box-none\"\n                  style={\n                    Object {\n                      \"transform\": Array [\n                        Object {\n                          \"translateY\": 0,\n                        },\n                      ],\n                      \"width\": \"100%\",\n                    }\n                  }\n                >\n                  <View\n                    collapsable={false}\n                    dataSet={Object {}}\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                        \"paddingBottom\": 8,\n                        \"paddingTop\": 8,\n                      }\n                    }\n                  />\n                  <View\n                    accessibilityViewIsModal={true}\n                    aria-modal=\"true\"\n                    dataSet={Object {}}\n                    onAccessibilityEscape={[Function]}\n                    style={\n                      Object {\n                        \"alignItems\": \"center\",\n                        \"backgroundColor\": \"#fafafa\",\n                        \"borderRadius\": 0,\n                        \"borderTopLeftRadius\": 20,\n                        \"borderTopRightRadius\": 20,\n                        \"elevation\": 2,\n                        \"maxHeight\": 1184,\n                        \"overflow\": \"hidden\",\n                        \"paddingBottom\": 8,\n                        \"paddingLeft\": 8,\n                        \"paddingRight\": 8,\n                        \"paddingTop\": 8,\n                        \"shadowColor\": \"#000000\",\n                        \"shadowOffset\": Object {\n                          \"height\": 1,\n                          \"width\": 0,\n                        },\n                        \"shadowOpacity\": 0.2,\n                        \"shadowRadius\": 1.41,\n                        \"width\": \"100%\",\n                      }\n                    }\n                  >\n                    <View\n                      collapsable={false}\n                      dataSet={Object {}}\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                          \"alignItems\": \"center\",\n                          \"marginTop\": -8,\n                          \"paddingBottom\": 12,\n                          \"paddingTop\": 12,\n                          \"width\": \"100%\",\n                        }\n                      }\n                    >\n                      <View\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"backgroundColor\": \"#737373\",\n                            \"borderRadius\": 2,\n                            \"height\": 4,\n                            \"width\": 40,\n                          }\n                        }\n                      />\n                    </View>\n                    <RCTScrollView\n                      contentContainerStyle={\n                        Array [\n                          Object {},\n                          Object {\n                            \"dataSet\": Object {},\n                          },\n                          Object {},\n                        ]\n                      }\n                      data={\n                        Array [\n                          Object {\n                            \"label\": \"Pink\",\n                            \"value\": \"0\",\n                          },\n                          Object {\n                            \"label\": \"Crimson\",\n                            \"value\": \"1\",\n                          },\n                          Object {\n                            \"label\": \"Red\",\n                            \"value\": \"2\",\n                          },\n                          Object {\n                            \"label\": \"Maroon\",\n                            \"value\": \"3\",\n                          },\n                          Object {\n                            \"label\": \"Brown\",\n                            \"value\": \"4\",\n                          },\n                          Object {\n                            \"label\": \"Misty-Rose\",\n                            \"value\": \"5\",\n                          },\n                          Object {\n                            \"label\": \"Salmon\",\n                            \"value\": \"6\",\n                          },\n                          Object {\n                            \"label\": \"Coral\",\n                            \"value\": \"7\",\n                          },\n                          Object {\n                            \"label\": \"Orange-Red\",\n                            \"value\": \"8\",\n                          },\n                          Object {\n                            \"label\": \"Chocolate\",\n                            \"value\": \"9\",\n                          },\n                          Object {\n                            \"label\": \"Orange\",\n                            \"value\": \"10\",\n                          },\n                          Object {\n                            \"label\": \"Gold\",\n                            \"value\": \"11\",\n                          },\n                          Object {\n                            \"label\": \"Ivory\",\n                            \"value\": \"12\",\n                          },\n                          Object {\n                            \"label\": \"Yellow\",\n                            \"value\": \"13\",\n                          },\n                          Object {\n                            \"label\": \"Olive\",\n                            \"value\": \"14\",\n                          },\n                          Object {\n                            \"label\": \"Yellow-Green\",\n                            \"value\": \"15\",\n                          },\n                          Object {\n                            \"label\": \"Lawngreen\",\n                            \"value\": \"16\",\n                          },\n                          Object {\n                            \"label\": \"Chartreuse\",\n                            \"value\": \"17\",\n                          },\n                          Object {\n                            \"label\": \"Lime\",\n                            \"value\": \"18\",\n                          },\n                          Object {\n                            \"label\": \"Green\",\n                            \"value\": \"19\",\n                          },\n                          Object {\n                            \"label\": \"Spring-green\",\n                            \"value\": \"20\",\n                          },\n                          Object {\n                            \"label\": \"Aquamarine\",\n                            \"value\": \"21\",\n                          },\n                          Object {\n                            \"label\": \"Turquoise\",\n                            \"value\": \"22\",\n                          },\n                          Object {\n                            \"label\": \"Azure\",\n                            \"value\": \"23\",\n                          },\n                          Object {\n                            \"label\": \"Aqua/Cyan\",\n                            \"value\": \"24\",\n                          },\n                          Object {\n                            \"label\": \"Teal\",\n                            \"value\": \"25\",\n                          },\n                          Object {\n                            \"label\": \"Lavender\",\n                            \"value\": \"26\",\n                          },\n                          Object {\n                            \"label\": \"Blue\",\n                            \"value\": \"27\",\n                          },\n                          Object {\n                            \"label\": \"Navy\",\n                            \"value\": \"28\",\n                          },\n                          Object {\n                            \"label\": \"Blue-Violet\",\n                            \"value\": \"29\",\n                          },\n                          Object {\n                            \"label\": \"Indigo\",\n                            \"value\": \"30\",\n                          },\n                          Object {\n                            \"label\": \"Dark-Violet\",\n                            \"value\": \"31\",\n                          },\n                          Object {\n                            \"label\": \"Plum\",\n                            \"value\": \"32\",\n                          },\n                          Object {\n                            \"label\": \"Magenta\",\n                            \"value\": \"33\",\n                          },\n                          Object {\n                            \"label\": \"Purple\",\n                            \"value\": \"34\",\n                          },\n                          Object {\n                            \"label\": \"Red-Violet\",\n                            \"value\": \"35\",\n                          },\n                          Object {\n                            \"label\": \"Tan\",\n                            \"value\": \"36\",\n                          },\n                          Object {\n                            \"label\": \"Beige\",\n                            \"value\": \"37\",\n                          },\n                          Object {\n                            \"label\": \"Slate-gray\",\n                            \"value\": \"38\",\n                          },\n                          Object {\n                            \"label\": \"White\",\n                            \"value\": \"39\",\n                          },\n                          Object {\n                            \"label\": \"White-Smoke\",\n                            \"value\": \"40\",\n                          },\n                          Object {\n                            \"label\": \"Light-Gray\",\n                            \"value\": \"41\",\n                          },\n                          Object {\n                            \"label\": \"Silver\",\n                            \"value\": \"42\",\n                          },\n                          Object {\n                            \"label\": \"Dark-Gray\",\n                            \"value\": \"43\",\n                          },\n                          Object {\n                            \"label\": \"Gray\",\n                            \"value\": \"44\",\n                          },\n                          Object {\n                            \"label\": \"Dim-Gray\",\n                            \"value\": \"45\",\n                          },\n                          Object {\n                            \"label\": \"Black\",\n                            \"value\": \"46\",\n                          },\n                        ]\n                      }\n                      dataSet={Object {}}\n                      disableVirtualization={false}\n                      getItem={[Function]}\n                      getItemCount={[Function]}\n                      horizontal={false}\n                      initialNumToRender={10}\n                      keyExtractor={[Function]}\n                      maxToRenderPerBatch={10}\n                      onContentSizeChange={[Function]}\n                      onEndReachedThreshold={2}\n                      onLayout={[Function]}\n                      onMomentumScrollEnd={[Function]}\n                      onScroll={[Function]}\n                      onScrollBeginDrag={[Function]}\n                      onScrollEndDrag={[Function]}\n                      removeClippedSubviews={true}\n                      renderItem={[Function]}\n                      scrollEventThrottle={50}\n                      stickyHeaderIndices={Array []}\n                      style={\n                        Object {\n                          \"width\": \"100%\",\n                        }\n                      }\n                      updateCellsBatchingPeriod={50}\n                      viewabilityConfigCallbackPairs={Array []}\n                      windowSize={21}\n                    >\n                      <View>\n                        <View\n                          onLayout={[Function]}\n                          style={null}\n                        >\n                          <View\n                            accessibilityState={\n                              Object {\n                                \"selected\": false,\n                              }\n                            }\n                            accessible={true}\n                            dataSet={Object {}}\n                            focusable={true}\n                            label=\"Pink\"\n                            onBlur={[Function]}\n                            onClick={[Function]}\n                            onFocus={[Function]}\n                            onHoverIn={[Function]}\n                            onHoverOut={[Function]}\n                            onResponderGrant={[Function]}\n                            onResponderMove={[Function]}\n                            onResponderRelease={[Function]}\n                            onResponderTerminate={[Function]}\n                            onResponderTerminationRequest={[Function]}\n                            onStartShouldSetResponder={[Function]}\n                            style={\n                              Object {\n                                \"backgroundColor\": \"#fafafa\",\n                                \"justifyContent\": \"flex-start\",\n                                \"paddingBottom\": 16,\n                                \"paddingLeft\": 16,\n                                \"paddingRight\": 16,\n                                \"paddingTop\": 16,\n                                \"width\": \"100%\",\n                              }\n                            }\n                            value=\"0\"\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"flexDirection\": \"row\",\n                                }\n                              }\n                              test={true}\n                            >\n                              <View\n                                dataSet={Object {}}\n                                style={Object {}}\n                              >\n                                <Text\n                                  dataSet={Object {}}\n                                  style={\n                                    Object {\n                                      \"backgroundColor\": undefined,\n                                      \"color\": \"#171717\",\n                                      \"fontFamily\": undefined,\n                                      \"fontSize\": 16,\n                                      \"fontStyle\": \"normal\",\n                                      \"fontWeight\": \"400\",\n                                      \"letterSpacing\": 0,\n                                      \"lineHeight\": 24,\n                                      \"textDecorationLine\": undefined,\n                                    }\n                                  }\n                                >\n                                  Pink\n                                </Text>\n                              </View>\n                            </View>\n                          </View>\n                        </View>\n                        <View\n                          onLayout={[Function]}\n                          style={null}\n                        >\n                          <View\n                            accessibilityState={\n                              Object {\n                                \"selected\": false,\n                              }\n                            }\n                            accessible={true}\n                            dataSet={Object {}}\n                            focusable={true}\n                            label=\"Crimson\"\n                            onBlur={[Function]}\n                            onClick={[Function]}\n                            onFocus={[Function]}\n                            onHoverIn={[Function]}\n                            onHoverOut={[Function]}\n                            onResponderGrant={[Function]}\n                            onResponderMove={[Function]}\n                            onResponderRelease={[Function]}\n                            onResponderTerminate={[Function]}\n                            onResponderTerminationRequest={[Function]}\n                            onStartShouldSetResponder={[Function]}\n                            style={\n                              Object {\n                                \"backgroundColor\": \"#fafafa\",\n                                \"justifyContent\": \"flex-start\",\n                                \"paddingBottom\": 16,\n                                \"paddingLeft\": 16,\n                                \"paddingRight\": 16,\n                                \"paddingTop\": 16,\n                                \"width\": \"100%\",\n                              }\n                            }\n                            value=\"1\"\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"flexDirection\": \"row\",\n                                }\n                              }\n                              test={true}\n                            >\n                              <View\n                                dataSet={Object {}}\n                                style={Object {}}\n                              >\n                                <Text\n                                  dataSet={Object {}}\n                                  style={\n                                    Object {\n                                      \"backgroundColor\": undefined,\n                                      \"color\": \"#171717\",\n                                      \"fontFamily\": undefined,\n                                      \"fontSize\": 16,\n                                      \"fontStyle\": \"normal\",\n                                      \"fontWeight\": \"400\",\n                                      \"letterSpacing\": 0,\n                                      \"lineHeight\": 24,\n                                      \"textDecorationLine\": undefined,\n                                    }\n                                  }\n                                >\n                                  Crimson\n                                </Text>\n                              </View>\n                            </View>\n                          </View>\n                        </View>\n                        <View\n                          onLayout={[Function]}\n                          style={null}\n                        >\n                          <View\n                            accessibilityState={\n                              Object {\n                                \"selected\": false,\n                              }\n                            }\n                            accessible={true}\n                            dataSet={Object {}}\n                            focusable={true}\n                            label=\"Red\"\n                            onBlur={[Function]}\n                            onClick={[Function]}\n                            onFocus={[Function]}\n                            onHoverIn={[Function]}\n                            onHoverOut={[Function]}\n                            onResponderGrant={[Function]}\n                            onResponderMove={[Function]}\n                            onResponderRelease={[Function]}\n                            onResponderTerminate={[Function]}\n                            onResponderTerminationRequest={[Function]}\n                            onStartShouldSetResponder={[Function]}\n                            style={\n                              Object {\n                                \"backgroundColor\": \"#fafafa\",\n                                \"justifyContent\": \"flex-start\",\n                                \"paddingBottom\": 16,\n                                \"paddingLeft\": 16,\n                                \"paddingRight\": 16,\n                                \"paddingTop\": 16,\n                                \"width\": \"100%\",\n                              }\n                            }\n                            value=\"2\"\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"flexDirection\": \"row\",\n                                }\n                              }\n                              test={true}\n                            >\n                              <View\n                                dataSet={Object {}}\n                                style={Object {}}\n                              >\n                                <Text\n                                  dataSet={Object {}}\n                                  style={\n                                    Object {\n                                      \"backgroundColor\": undefined,\n                                      \"color\": \"#171717\",\n                                      \"fontFamily\": undefined,\n                                      \"fontSize\": 16,\n                                      \"fontStyle\": \"normal\",\n                                      \"fontWeight\": \"400\",\n                                      \"letterSpacing\": 0,\n                                      \"lineHeight\": 24,\n                                      \"textDecorationLine\": undefined,\n                                    }\n                                  }\n                                >\n                                  Red\n                                </Text>\n                              </View>\n                            </View>\n                          </View>\n                        </View>\n                        <View\n                          onLayout={[Function]}\n                          style={null}\n                        >\n                          <View\n                            accessibilityState={\n                              Object {\n                                \"selected\": false,\n                              }\n                            }\n                            accessible={true}\n                            dataSet={Object {}}\n                            focusable={true}\n                            label=\"Maroon\"\n                            onBlur={[Function]}\n                            onClick={[Function]}\n                            onFocus={[Function]}\n                            onHoverIn={[Function]}\n                            onHoverOut={[Function]}\n                            onResponderGrant={[Function]}\n                            onResponderMove={[Function]}\n                            onResponderRelease={[Function]}\n                            onResponderTerminate={[Function]}\n                            onResponderTerminationRequest={[Function]}\n                            onStartShouldSetResponder={[Function]}\n                            style={\n                              Object {\n                                \"backgroundColor\": \"#fafafa\",\n                                \"justifyContent\": \"flex-start\",\n                                \"paddingBottom\": 16,\n                                \"paddingLeft\": 16,\n                                \"paddingRight\": 16,\n                                \"paddingTop\": 16,\n                                \"width\": \"100%\",\n                              }\n                            }\n                            value=\"3\"\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"flexDirection\": \"row\",\n                                }\n                              }\n                              test={true}\n                            >\n                              <View\n                                dataSet={Object {}}\n                                style={Object {}}\n                              >\n                                <Text\n                                  dataSet={Object {}}\n                                  style={\n                                    Object {\n                                      \"backgroundColor\": undefined,\n                                      \"color\": \"#171717\",\n                                      \"fontFamily\": undefined,\n                                      \"fontSize\": 16,\n                                      \"fontStyle\": \"normal\",\n                                      \"fontWeight\": \"400\",\n                                      \"letterSpacing\": 0,\n                                      \"lineHeight\": 24,\n                                      \"textDecorationLine\": undefined,\n                                    }\n                                  }\n                                >\n                                  Maroon\n                                </Text>\n                              </View>\n                            </View>\n                          </View>\n                        </View>\n                        <View\n                          onLayout={[Function]}\n                          style={null}\n                        >\n                          <View\n                            accessibilityState={\n                              Object {\n                                \"selected\": false,\n                              }\n                            }\n                            accessible={true}\n                            dataSet={Object {}}\n                            focusable={true}\n                            label=\"Brown\"\n                            onBlur={[Function]}\n                            onClick={[Function]}\n                            onFocus={[Function]}\n                            onHoverIn={[Function]}\n                            onHoverOut={[Function]}\n                            onResponderGrant={[Function]}\n                            onResponderMove={[Function]}\n                            onResponderRelease={[Function]}\n                            onResponderTerminate={[Function]}\n                            onResponderTerminationRequest={[Function]}\n                            onStartShouldSetResponder={[Function]}\n                            style={\n                              Object {\n                                \"backgroundColor\": \"#fafafa\",\n                                \"justifyContent\": \"flex-start\",\n                                \"paddingBottom\": 16,\n                                \"paddingLeft\": 16,\n                                \"paddingRight\": 16,\n                                \"paddingTop\": 16,\n                                \"width\": \"100%\",\n                              }\n                            }\n                            value=\"4\"\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"flexDirection\": \"row\",\n                                }\n                              }\n                              test={true}\n                            >\n                              <View\n                                dataSet={Object {}}\n                                style={Object {}}\n                              >\n                                <Text\n                                  dataSet={Object {}}\n                                  style={\n                                    Object {\n                                      \"backgroundColor\": undefined,\n                                      \"color\": \"#171717\",\n                                      \"fontFamily\": undefined,\n                                      \"fontSize\": 16,\n                                      \"fontStyle\": \"normal\",\n                                      \"fontWeight\": \"400\",\n                                      \"letterSpacing\": 0,\n                                      \"lineHeight\": 24,\n                                      \"textDecorationLine\": undefined,\n                                    }\n                                  }\n                                >\n                                  Brown\n                                </Text>\n                              </View>\n                            </View>\n                          </View>\n                        </View>\n                        <View\n                          onLayout={[Function]}\n                          style={null}\n                        >\n                          <View\n                            accessibilityState={\n                              Object {\n                                \"selected\": false,\n                              }\n                            }\n                            accessible={true}\n                            dataSet={Object {}}\n                            focusable={true}\n                            label=\"Misty-Rose\"\n                            onBlur={[Function]}\n                            onClick={[Function]}\n                            onFocus={[Function]}\n                            onHoverIn={[Function]}\n                            onHoverOut={[Function]}\n                            onResponderGrant={[Function]}\n                            onResponderMove={[Function]}\n                            onResponderRelease={[Function]}\n                            onResponderTerminate={[Function]}\n                            onResponderTerminationRequest={[Function]}\n                            onStartShouldSetResponder={[Function]}\n                            style={\n                              Object {\n                                \"backgroundColor\": \"#fafafa\",\n                                \"justifyContent\": \"flex-start\",\n                                \"paddingBottom\": 16,\n                                \"paddingLeft\": 16,\n                                \"paddingRight\": 16,\n                                \"paddingTop\": 16,\n                                \"width\": \"100%\",\n                              }\n                            }\n                            value=\"5\"\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"flexDirection\": \"row\",\n                                }\n                              }\n                              test={true}\n                            >\n                              <View\n                                dataSet={Object {}}\n                                style={Object {}}\n                              >\n                                <Text\n                                  dataSet={Object {}}\n                                  style={\n                                    Object {\n                                      \"backgroundColor\": undefined,\n                                      \"color\": \"#171717\",\n                                      \"fontFamily\": undefined,\n                                      \"fontSize\": 16,\n                                      \"fontStyle\": \"normal\",\n                                      \"fontWeight\": \"400\",\n                                      \"letterSpacing\": 0,\n                                      \"lineHeight\": 24,\n                                      \"textDecorationLine\": undefined,\n                                    }\n                                  }\n                                >\n                                  Misty-Rose\n                                </Text>\n                              </View>\n                            </View>\n                          </View>\n                        </View>\n                        <View\n                          onLayout={[Function]}\n                          style={null}\n                        >\n                          <View\n                            accessibilityState={\n                              Object {\n                                \"selected\": false,\n                              }\n                            }\n                            accessible={true}\n                            dataSet={Object {}}\n                            focusable={true}\n                            label=\"Salmon\"\n                            onBlur={[Function]}\n                            onClick={[Function]}\n                            onFocus={[Function]}\n                            onHoverIn={[Function]}\n                            onHoverOut={[Function]}\n                            onResponderGrant={[Function]}\n                            onResponderMove={[Function]}\n                            onResponderRelease={[Function]}\n                            onResponderTerminate={[Function]}\n                            onResponderTerminationRequest={[Function]}\n                            onStartShouldSetResponder={[Function]}\n                            style={\n                              Object {\n                                \"backgroundColor\": \"#fafafa\",\n                                \"justifyContent\": \"flex-start\",\n                                \"paddingBottom\": 16,\n                                \"paddingLeft\": 16,\n                                \"paddingRight\": 16,\n                                \"paddingTop\": 16,\n                                \"width\": \"100%\",\n                              }\n                            }\n                            value=\"6\"\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"flexDirection\": \"row\",\n                                }\n                              }\n                              test={true}\n                            >\n                              <View\n                                dataSet={Object {}}\n                                style={Object {}}\n                              >\n                                <Text\n                                  dataSet={Object {}}\n                                  style={\n                                    Object {\n                                      \"backgroundColor\": undefined,\n                                      \"color\": \"#171717\",\n                                      \"fontFamily\": undefined,\n                                      \"fontSize\": 16,\n                                      \"fontStyle\": \"normal\",\n                                      \"fontWeight\": \"400\",\n                                      \"letterSpacing\": 0,\n                                      \"lineHeight\": 24,\n                                      \"textDecorationLine\": undefined,\n                                    }\n                                  }\n                                >\n                                  Salmon\n                                </Text>\n                              </View>\n                            </View>\n                          </View>\n                        </View>\n                        <View\n                          onLayout={[Function]}\n                          style={null}\n                        >\n                          <View\n                            accessibilityState={\n                              Object {\n                                \"selected\": false,\n                              }\n                            }\n                            accessible={true}\n                            dataSet={Object {}}\n                            focusable={true}\n                            label=\"Coral\"\n                            onBlur={[Function]}\n                            onClick={[Function]}\n                            onFocus={[Function]}\n                            onHoverIn={[Function]}\n                            onHoverOut={[Function]}\n                            onResponderGrant={[Function]}\n                            onResponderMove={[Function]}\n                            onResponderRelease={[Function]}\n                            onResponderTerminate={[Function]}\n                            onResponderTerminationRequest={[Function]}\n                            onStartShouldSetResponder={[Function]}\n                            style={\n                              Object {\n                                \"backgroundColor\": \"#fafafa\",\n                                \"justifyContent\": \"flex-start\",\n                                \"paddingBottom\": 16,\n                                \"paddingLeft\": 16,\n                                \"paddingRight\": 16,\n                                \"paddingTop\": 16,\n                                \"width\": \"100%\",\n                              }\n                            }\n                            value=\"7\"\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"flexDirection\": \"row\",\n                                }\n                              }\n                              test={true}\n                            >\n                              <View\n                                dataSet={Object {}}\n                                style={Object {}}\n                              >\n                                <Text\n                                  dataSet={Object {}}\n                                  style={\n                                    Object {\n                                      \"backgroundColor\": undefined,\n                                      \"color\": \"#171717\",\n                                      \"fontFamily\": undefined,\n                                      \"fontSize\": 16,\n                                      \"fontStyle\": \"normal\",\n                                      \"fontWeight\": \"400\",\n                                      \"letterSpacing\": 0,\n                                      \"lineHeight\": 24,\n                                      \"textDecorationLine\": undefined,\n                                    }\n                                  }\n                                >\n                                  Coral\n                                </Text>\n                              </View>\n                            </View>\n                          </View>\n                        </View>\n                        <View\n                          onLayout={[Function]}\n                          style={null}\n                        >\n                          <View\n                            accessibilityState={\n                              Object {\n                                \"selected\": false,\n                              }\n                            }\n                            accessible={true}\n                            dataSet={Object {}}\n                            focusable={true}\n                            label=\"Orange-Red\"\n                            onBlur={[Function]}\n                            onClick={[Function]}\n                            onFocus={[Function]}\n                            onHoverIn={[Function]}\n                            onHoverOut={[Function]}\n                            onResponderGrant={[Function]}\n                            onResponderMove={[Function]}\n                            onResponderRelease={[Function]}\n                            onResponderTerminate={[Function]}\n                            onResponderTerminationRequest={[Function]}\n                            onStartShouldSetResponder={[Function]}\n                            style={\n                              Object {\n                                \"backgroundColor\": \"#fafafa\",\n                                \"justifyContent\": \"flex-start\",\n                                \"paddingBottom\": 16,\n                                \"paddingLeft\": 16,\n                                \"paddingRight\": 16,\n                                \"paddingTop\": 16,\n                                \"width\": \"100%\",\n                              }\n                            }\n                            value=\"8\"\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"flexDirection\": \"row\",\n                                }\n                              }\n                              test={true}\n                            >\n                              <View\n                                dataSet={Object {}}\n                                style={Object {}}\n                              >\n                                <Text\n                                  dataSet={Object {}}\n                                  style={\n                                    Object {\n                                      \"backgroundColor\": undefined,\n                                      \"color\": \"#171717\",\n                                      \"fontFamily\": undefined,\n                                      \"fontSize\": 16,\n                                      \"fontStyle\": \"normal\",\n                                      \"fontWeight\": \"400\",\n                                      \"letterSpacing\": 0,\n                                      \"lineHeight\": 24,\n                                      \"textDecorationLine\": undefined,\n                                    }\n                                  }\n                                >\n                                  Orange-Red\n                                </Text>\n                              </View>\n                            </View>\n                          </View>\n                        </View>\n                        <View\n                          onLayout={[Function]}\n                          style={null}\n                        >\n                          <View\n                            accessibilityState={\n                              Object {\n                                \"selected\": false,\n                              }\n                            }\n                            accessible={true}\n                            dataSet={Object {}}\n                            focusable={true}\n                            label=\"Chocolate\"\n                            onBlur={[Function]}\n                            onClick={[Function]}\n                            onFocus={[Function]}\n                            onHoverIn={[Function]}\n                            onHoverOut={[Function]}\n                            onResponderGrant={[Function]}\n                            onResponderMove={[Function]}\n                            onResponderRelease={[Function]}\n                            onResponderTerminate={[Function]}\n                            onResponderTerminationRequest={[Function]}\n                            onStartShouldSetResponder={[Function]}\n                            style={\n                              Object {\n                                \"backgroundColor\": \"#fafafa\",\n                                \"justifyContent\": \"flex-start\",\n                                \"paddingBottom\": 16,\n                                \"paddingLeft\": 16,\n                                \"paddingRight\": 16,\n                                \"paddingTop\": 16,\n                                \"width\": \"100%\",\n                              }\n                            }\n                            value=\"9\"\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"flexDirection\": \"row\",\n                                }\n                              }\n                              test={true}\n                            >\n                              <View\n                                dataSet={Object {}}\n                                style={Object {}}\n                              >\n                                <Text\n                                  dataSet={Object {}}\n                                  style={\n                                    Object {\n                                      \"backgroundColor\": undefined,\n                                      \"color\": \"#171717\",\n                                      \"fontFamily\": undefined,\n                                      \"fontSize\": 16,\n                                      \"fontStyle\": \"normal\",\n                                      \"fontWeight\": \"400\",\n                                      \"letterSpacing\": 0,\n                                      \"lineHeight\": 24,\n                                      \"textDecorationLine\": undefined,\n                                    }\n                                  }\n                                >\n                                  Chocolate\n                                </Text>\n                              </View>\n                            </View>\n                          </View>\n                        </View>\n                        <View\n                          style={\n                            Object {\n                              \"height\": 0,\n                            }\n                          }\n                        />\n                      </View>\n                    </RCTScrollView>\n                  </View>\n                </View>\n              </View>\n            </View>\n          </View>\n        </Modal>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Skeleton Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"borderColor\": \"#e5e7eb\",\n            \"borderRadius\": 6,\n            \"borderWidth\": 1,\n            \"maxWidth\": 400,\n            \"overflow\": \"hidden\",\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          fadeDuration={0.1}\n          speed={1}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"height\": 160,\n              \"overflow\": \"hidden\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            style={\n              Object {\n                \"backgroundColor\": \"#e5e5e5\",\n                \"height\": \"100%\",\n                \"opacity\": 0,\n                \"width\": \"100%\",\n              }\n            }\n          />\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 32,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          fadeDuration={0.1}\n          speed={1}\n          style={\n            Object {\n              \"flexDirection\": \"column\",\n              \"paddingLeft\": 16,\n              \"paddingRight\": 16,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            speed={1}\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"borderRadius\": 9999,\n                \"height\": 12,\n                \"overflow\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            speed={1}\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"borderRadius\": 9999,\n                \"height\": 12,\n                \"overflow\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            speed={1}\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"borderRadius\": 9999,\n                \"height\": 12,\n                \"overflow\": \"hidden\",\n                \"width\": \"75%\",\n              }\n            }\n          >\n            <View\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 32,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          fadeDuration={0.1}\n          speed={1}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderRadius\": 6,\n              \"height\": 40,\n              \"marginBottom\": 16,\n              \"marginTop\": 16,\n              \"overflow\": \"hidden\",\n              \"paddingLeft\": 16,\n              \"paddingRight\": 16,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            style={\n              Object {\n                \"backgroundColor\": \"#cffafe\",\n                \"height\": \"100%\",\n                \"opacity\": 0,\n                \"width\": \"100%\",\n              }\n            }\n          />\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Skeleton Color 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"borderColor\": \"#e5e7eb\",\n            \"borderRadius\": 6,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"maxWidth\": 400,\n            \"paddingBottom\": 16,\n            \"paddingLeft\": 16,\n            \"paddingRight\": 16,\n            \"paddingTop\": 16,\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          fadeDuration={0.1}\n          speed={1}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderRadius\": 6,\n              \"flex\": 1,\n              \"height\": 150,\n              \"overflow\": \"hidden\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            style={\n              Object {\n                \"backgroundColor\": \"#f3f4f6\",\n                \"height\": \"100%\",\n                \"opacity\": 0,\n                \"width\": \"100%\",\n              }\n            }\n          />\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"width\": 32,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flex\": 3,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            speed={1}\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"height\": 40,\n                \"overflow\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              style={\n                Object {\n                  \"backgroundColor\": \"#fcd34d\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            speed={1}\n            style={\n              Object {\n                \"flexDirection\": \"column\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"75%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"height\": 20,\n                  \"overflow\": \"hidden\",\n                  \"width\": 20,\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"flex\": 2,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"flex\": 1,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#a5b4fc\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Skeleton Composition 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#e5e7eb\",\n            \"borderRadius\": 6,\n            \"borderWidth\": 1,\n            \"maxWidth\": 400,\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          fadeDuration={0.1}\n          speed={1}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"height\": 160,\n              \"overflow\": \"hidden\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            style={\n              Object {\n                \"backgroundColor\": \"#e5e5e5\",\n                \"height\": \"100%\",\n                \"opacity\": 0,\n                \"width\": \"100%\",\n              }\n            }\n          />\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 24,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          fadeDuration={0.1}\n          speed={1}\n          style={\n            Object {\n              \"backgroundColor\": \"#fafaf9\",\n              \"borderColor\": \"#e5e7eb\",\n              \"borderRadius\": 9999,\n              \"borderWidth\": 1,\n              \"height\": 80,\n              \"marginTop\": -70,\n              \"overflow\": \"hidden\",\n              \"width\": 80,\n            }\n          }\n        >\n          <View\n            style={\n              Object {\n                \"backgroundColor\": \"#e5e5e5\",\n                \"height\": \"100%\",\n                \"opacity\": 0,\n                \"width\": \"100%\",\n              }\n            }\n          />\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 24,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            speed={1}\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"borderRadius\": 9999,\n                \"height\": 20,\n                \"overflow\": \"hidden\",\n                \"width\": 20,\n              }\n            }\n          >\n            <View\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            speed={1}\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"borderRadius\": 9999,\n                \"height\": 20,\n                \"overflow\": \"hidden\",\n                \"width\": 20,\n              }\n            }\n          >\n            <View\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            speed={1}\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"borderRadius\": 9999,\n                \"height\": 20,\n                \"overflow\": \"hidden\",\n                \"width\": 20,\n              }\n            }\n          >\n            <View\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            speed={1}\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"borderRadius\": 9999,\n                \"height\": 20,\n                \"overflow\": \"hidden\",\n                \"width\": 20,\n              }\n            }\n          >\n            <View\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            speed={1}\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"borderRadius\": 9999,\n                \"height\": 20,\n                \"overflow\": \"hidden\",\n                \"width\": 20,\n              }\n            }\n          >\n            <View\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 24,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          fadeDuration={0.1}\n          speed={1}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"column\",\n              \"paddingLeft\": 48,\n              \"paddingRight\": 48,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            speed={1}\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"borderRadius\": 9999,\n                \"height\": 12,\n                \"overflow\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            speed={1}\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"borderRadius\": 9999,\n                \"height\": 12,\n                \"overflow\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            speed={1}\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"borderRadius\": 9999,\n                \"height\": 12,\n                \"overflow\": \"hidden\",\n                \"width\": \"75%\",\n              }\n            }\n          >\n            <View\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 24,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          fadeDuration={0.1}\n          speed={1}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderRadius\": 20,\n              \"height\": 40,\n              \"marginBottom\": 12,\n              \"overflow\": \"hidden\",\n              \"width\": 160,\n            }\n          }\n        >\n          <View\n            style={\n              Object {\n                \"backgroundColor\": \"#e5e5e5\",\n                \"height\": \"100%\",\n                \"opacity\": 0,\n                \"width\": \"100%\",\n              }\n            }\n          />\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Skeleton FadeDuration 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"width\": \"50%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        fadeDuration={0.9}\n        speed={10}\n        style={\n          Object {\n            \"backgroundColor\": \"#22c55e\",\n            \"height\": 80,\n            \"overflow\": \"hidden\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <View\n          style={\n            Object {\n              \"backgroundColor\": \"#db2777\",\n              \"height\": \"100%\",\n              \"opacity\": 0,\n              \"width\": \"100%\",\n            }\n          }\n        />\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Skeleton isLoaded 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"maxWidth\": 400,\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"borderColor\": \"#e5e7eb\",\n              \"borderRadius\": 6,\n              \"borderWidth\": 1,\n              \"maxWidth\": 400,\n              \"overflow\": \"hidden\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            isLoaded={false}\n            speed={1}\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"height\": 160,\n                \"overflow\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 32,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            speed={1}\n            style={\n              Object {\n                \"flexDirection\": \"column\",\n                \"paddingLeft\": 16,\n                \"paddingRight\": 16,\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"75%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 32,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            isLoaded={false}\n            speed={1}\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"borderRadius\": 6,\n                \"height\": 40,\n                \"marginBottom\": 16,\n                \"overflow\": \"hidden\",\n                \"paddingLeft\": 16,\n                \"paddingRight\": 16,\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              style={\n                Object {\n                  \"backgroundColor\": \"#cffafe\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Slider Color 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"maxWidth\": 300,\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <View\n          _interactionBox={\n            Object {\n              \"p\": \"2\",\n            }\n          }\n          aria-label=\"Slider\"\n          colorScheme=\"orange\"\n          dataSet={Object {}}\n          defaultValue={\n            Array [\n              70,\n            ]\n          }\n          sliderTrackHeight={4}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"width\": \"100%\",\n            }\n          }\n          thumbSize={4}\n        >\n          <View\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onLayout={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"height\": 16,\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 12,\n                \"paddingTop\": 12,\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              colorScheme=\"orange\"\n              dataSet={Object {}}\n              isVertical={false}\n              style={\n                Array [\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"borderRadius\": 8,\n                    \"height\": 16,\n                    \"overflow\": \"hidden\",\n                    \"width\": 16,\n                  },\n                  Object {\n                    \"height\": 4,\n                    \"width\": \"100%\",\n                  },\n                ]\n              }\n            >\n              <View\n                colorScheme=\"orange\"\n                dataSet={Object {}}\n                sliderTrackPosition=\"70%\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"#ea580c\",\n                      \"height\": 16,\n                      \"left\": 0,\n                      \"position\": \"absolute\",\n                      \"width\": 16,\n                    },\n                    Object {\n                      \"height\": 4,\n                      \"width\": \"70%\",\n                    },\n                  ]\n                }\n              />\n            </View>\n          </View>\n          <View\n            colorScheme=\"orange\"\n            dataSet={Object {}}\n            onBlur={[Function]}\n            onFocus={[Function]}\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            scaleOnPressed={1}\n            style={\n              Array [\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#ea580c\",\n                  \"borderRadius\": 9999,\n                  \"height\": 16,\n                  \"justifyContent\": \"center\",\n                  \"position\": \"absolute\",\n                  \"width\": 16,\n                  \"zIndex\": 999,\n                },\n                Array [\n                  Object {\n                    \"bottom\": undefined,\n                    \"left\": \"70%\",\n                    \"transform\": Array [\n                      Object {\n                        \"translateX\": -8,\n                      },\n                      Object {\n                        \"scale\": 1,\n                      },\n                    ],\n                  },\n                  undefined,\n                ],\n              ]\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"borderRadius\": 9999,\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 8,\n                    \"paddingRight\": 8,\n                    \"paddingTop\": 8,\n                    \"position\": \"absolute\",\n                    \"zIndex\": -1,\n                  }\n                }\n              />\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <View\n                colorScheme=\"orange\"\n                dataSet={Object {}}\n                scaleOnPressed={1}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#ea580c\",\n                    \"borderRadius\": 9999,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                  }\n                }\n              />\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <View\n          _interactionBox={\n            Object {\n              \"p\": \"2\",\n            }\n          }\n          aria-label=\"Slider\"\n          colorScheme=\"emerald\"\n          dataSet={Object {}}\n          defaultValue={\n            Array [\n              70,\n            ]\n          }\n          sliderTrackHeight={4}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"width\": \"100%\",\n            }\n          }\n          thumbSize={4}\n        >\n          <View\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onLayout={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"height\": 16,\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 12,\n                \"paddingTop\": 12,\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              colorScheme=\"emerald\"\n              dataSet={Object {}}\n              isVertical={false}\n              style={\n                Array [\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"borderRadius\": 8,\n                    \"height\": 16,\n                    \"overflow\": \"hidden\",\n                    \"width\": 16,\n                  },\n                  Object {\n                    \"height\": 4,\n                    \"width\": \"100%\",\n                  },\n                ]\n              }\n            >\n              <View\n                colorScheme=\"emerald\"\n                dataSet={Object {}}\n                sliderTrackPosition=\"70%\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"#059669\",\n                      \"height\": 16,\n                      \"left\": 0,\n                      \"position\": \"absolute\",\n                      \"width\": 16,\n                    },\n                    Object {\n                      \"height\": 4,\n                      \"width\": \"70%\",\n                    },\n                  ]\n                }\n              />\n            </View>\n          </View>\n          <View\n            colorScheme=\"emerald\"\n            dataSet={Object {}}\n            onBlur={[Function]}\n            onFocus={[Function]}\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            scaleOnPressed={1}\n            style={\n              Array [\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#059669\",\n                  \"borderRadius\": 9999,\n                  \"height\": 16,\n                  \"justifyContent\": \"center\",\n                  \"position\": \"absolute\",\n                  \"width\": 16,\n                  \"zIndex\": 999,\n                },\n                Array [\n                  Object {\n                    \"bottom\": undefined,\n                    \"left\": \"70%\",\n                    \"transform\": Array [\n                      Object {\n                        \"translateX\": -8,\n                      },\n                      Object {\n                        \"scale\": 1,\n                      },\n                    ],\n                  },\n                  undefined,\n                ],\n              ]\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"borderRadius\": 9999,\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 8,\n                    \"paddingRight\": 8,\n                    \"paddingTop\": 8,\n                    \"position\": \"absolute\",\n                    \"zIndex\": -1,\n                  }\n                }\n              />\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <View\n                colorScheme=\"emerald\"\n                dataSet={Object {}}\n                scaleOnPressed={1}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#059669\",\n                    \"borderRadius\": 9999,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                  }\n                }\n              />\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <View\n          _interactionBox={\n            Object {\n              \"p\": \"2\",\n            }\n          }\n          aria-label=\"Slider\"\n          colorScheme=\"indigo\"\n          dataSet={Object {}}\n          defaultValue={\n            Array [\n              70,\n            ]\n          }\n          sliderTrackHeight={4}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"width\": \"100%\",\n            }\n          }\n          thumbSize={4}\n        >\n          <View\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onLayout={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"height\": 16,\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 12,\n                \"paddingTop\": 12,\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              colorScheme=\"indigo\"\n              dataSet={Object {}}\n              isVertical={false}\n              style={\n                Array [\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"borderRadius\": 8,\n                    \"height\": 16,\n                    \"overflow\": \"hidden\",\n                    \"width\": 16,\n                  },\n                  Object {\n                    \"height\": 4,\n                    \"width\": \"100%\",\n                  },\n                ]\n              }\n            >\n              <View\n                colorScheme=\"indigo\"\n                dataSet={Object {}}\n                sliderTrackPosition=\"70%\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"#4f46e5\",\n                      \"height\": 16,\n                      \"left\": 0,\n                      \"position\": \"absolute\",\n                      \"width\": 16,\n                    },\n                    Object {\n                      \"height\": 4,\n                      \"width\": \"70%\",\n                    },\n                  ]\n                }\n              />\n            </View>\n          </View>\n          <View\n            colorScheme=\"indigo\"\n            dataSet={Object {}}\n            onBlur={[Function]}\n            onFocus={[Function]}\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            scaleOnPressed={1}\n            style={\n              Array [\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#4f46e5\",\n                  \"borderRadius\": 9999,\n                  \"height\": 16,\n                  \"justifyContent\": \"center\",\n                  \"position\": \"absolute\",\n                  \"width\": 16,\n                  \"zIndex\": 999,\n                },\n                Array [\n                  Object {\n                    \"bottom\": undefined,\n                    \"left\": \"70%\",\n                    \"transform\": Array [\n                      Object {\n                        \"translateX\": -8,\n                      },\n                      Object {\n                        \"scale\": 1,\n                      },\n                    ],\n                  },\n                  undefined,\n                ],\n              ]\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"borderRadius\": 9999,\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 8,\n                    \"paddingRight\": 8,\n                    \"paddingTop\": 8,\n                    \"position\": \"absolute\",\n                    \"zIndex\": -1,\n                  }\n                }\n              />\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <View\n                colorScheme=\"indigo\"\n                dataSet={Object {}}\n                scaleOnPressed={1}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#4f46e5\",\n                    \"borderRadius\": 9999,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                  }\n                }\n              />\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Slider Customized 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        _interactionBox={\n          Object {\n            \"p\": \"2\",\n          }\n        }\n        aria-label=\"Slider\"\n        colorScheme=\"green\"\n        dataSet={Object {}}\n        defaultValue={\n          Array [\n            70,\n          ]\n        }\n        sliderTrackHeight={4}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"justifyContent\": \"center\",\n            \"maxWidth\": 300,\n            \"width\": \"75%\",\n          }\n        }\n        thumbSize={4}\n      >\n        <View\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onLayout={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"height\": 16,\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 12,\n              \"paddingTop\": 12,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            colorScheme=\"green\"\n            dataSet={Object {}}\n            isVertical={false}\n            style={\n              Array [\n                Object {\n                  \"backgroundColor\": \"#dcfce7\",\n                  \"borderRadius\": 8,\n                  \"height\": 16,\n                  \"overflow\": \"hidden\",\n                  \"width\": 16,\n                },\n                Object {\n                  \"height\": 4,\n                  \"width\": \"100%\",\n                },\n              ]\n            }\n          >\n            <View\n              colorScheme=\"green\"\n              dataSet={Object {}}\n              sliderTrackPosition=\"70%\"\n              style={\n                Array [\n                  Object {\n                    \"backgroundColor\": \"#16a34a\",\n                    \"height\": 16,\n                    \"left\": 0,\n                    \"position\": \"absolute\",\n                    \"width\": 16,\n                  },\n                  Object {\n                    \"height\": 4,\n                    \"width\": \"70%\",\n                  },\n                ]\n              }\n            />\n          </View>\n        </View>\n        <View\n          colorScheme=\"green\"\n          dataSet={Object {}}\n          onBlur={[Function]}\n          onFocus={[Function]}\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          scaleOnPressed={1}\n          style={\n            Array [\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"transparent\",\n                \"borderRadius\": 9999,\n                \"borderWidth\": 0,\n                \"height\": 16,\n                \"justifyContent\": \"center\",\n                \"position\": \"absolute\",\n                \"width\": 16,\n                \"zIndex\": 999,\n              },\n              Array [\n                Object {\n                  \"bottom\": undefined,\n                  \"left\": \"70%\",\n                  \"transform\": Array [\n                    Object {\n                      \"translateX\": -8,\n                    },\n                    Object {\n                      \"scale\": 1,\n                    },\n                  ],\n                },\n                undefined,\n              ],\n            ]\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"borderRadius\": 9999,\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 8,\n                  \"paddingRight\": 8,\n                  \"paddingTop\": 8,\n                  \"position\": \"absolute\",\n                  \"zIndex\": -1,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              colorScheme=\"green\"\n              dataSet={Object {}}\n              scaleOnPressed={1}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"borderWidth\": 0,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <Text\n                allowFontScaling={false}\n                dataSet={Object {}}\n                style={\n                  Array [\n                    Object {\n                      \"color\": undefined,\n                      \"fontSize\": 12,\n                    },\n                    Object {\n                      \"color\": \"#16a34a\",\n                      \"fontSize\": 16,\n                      \"height\": 16,\n                      \"lineHeight\": 16,\n                      \"width\": 16,\n                    },\n                    Object {\n                      \"fontFamily\": \"material\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"normal\",\n                    },\n                    Object {},\n                  ]\n                }\n              >\n                \n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Slider Disabled 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"marginLeft\": 20,\n          \"marginRight\": 20,\n          \"width\": \"80%\",\n        }\n      }\n    >\n      <View\n        _interactionBox={\n          Object {\n            \"p\": \"2\",\n          }\n        }\n        aria-label=\"Slider\"\n        colorScheme=\"indigo\"\n        dataSet={Object {}}\n        defaultValue={\n          Array [\n            50,\n          ]\n        }\n        maxValue={100}\n        minValue={0}\n        sliderTrackHeight={4}\n        step={1}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"justifyContent\": \"center\",\n            \"opacity\": 0.6,\n            \"width\": \"100%\",\n          }\n        }\n        thumbSize={4}\n      >\n        <View\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onLayout={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"height\": 16,\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 12,\n              \"paddingTop\": 12,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            colorScheme=\"indigo\"\n            dataSet={Object {}}\n            isVertical={false}\n            style={\n              Array [\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"borderRadius\": 8,\n                  \"height\": 16,\n                  \"overflow\": \"hidden\",\n                  \"width\": 16,\n                },\n                Object {\n                  \"height\": 4,\n                  \"width\": \"100%\",\n                },\n              ]\n            }\n          >\n            <View\n              colorScheme=\"indigo\"\n              dataSet={Object {}}\n              sliderTrackPosition=\"50%\"\n              style={\n                Array [\n                  Object {\n                    \"backgroundColor\": \"#4f46e5\",\n                    \"height\": 16,\n                    \"left\": 0,\n                    \"position\": \"absolute\",\n                    \"width\": 16,\n                  },\n                  Object {\n                    \"height\": 4,\n                    \"width\": \"50%\",\n                  },\n                ]\n              }\n            />\n          </View>\n        </View>\n        <View\n          colorScheme=\"indigo\"\n          dataSet={Object {}}\n          onBlur={[Function]}\n          onFocus={[Function]}\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          scaleOnPressed={1}\n          style={\n            Array [\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#4f46e5\",\n                \"borderRadius\": 9999,\n                \"height\": 16,\n                \"justifyContent\": \"center\",\n                \"position\": \"absolute\",\n                \"width\": 16,\n                \"zIndex\": 999,\n              },\n              Array [\n                Object {\n                  \"bottom\": undefined,\n                  \"left\": \"50%\",\n                  \"transform\": Array [\n                    Object {\n                      \"translateX\": -8,\n                    },\n                    Object {\n                      \"scale\": 1,\n                    },\n                  ],\n                },\n                undefined,\n              ],\n            ]\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"borderRadius\": 9999,\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 8,\n                  \"paddingRight\": 8,\n                  \"paddingTop\": 8,\n                  \"position\": \"absolute\",\n                  \"zIndex\": -1,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              colorScheme=\"indigo\"\n              dataSet={Object {}}\n              scaleOnPressed={1}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#4f46e5\",\n                  \"borderRadius\": 9999,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            />\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Slider Form Controlled 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"maxWidth\": 300,\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          isInvalid={true}\n          style={\n            Object {\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            feedbackId=\"field-204-feedback\"\n            hasFeedbackText={false}\n            hasHelpText={false}\n            helpTextId=\"field-204-helptext\"\n            isDisabled={false}\n            isInvalid={true}\n            isReadOnly={false}\n            isRequired={false}\n            labelId=\"field-204-label\"\n            nativeID=\"field-204-label\"\n            setHasFeedbackText={[Function]}\n            setHasHelpText={[Function]}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n                \"marginBottom\": 4,\n                \"marginTop\": 4,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#737373\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"500\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Set your budget\n            </Text>\n          </View>\n          <View\n            _interactionBox={\n              Object {\n                \"p\": \"2\",\n              }\n            }\n            aria-label=\"Slider\"\n            dataSet={Object {}}\n            defaultValue={\n              Array [\n                50,\n              ]\n            }\n            sliderTrackHeight={4}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"justifyContent\": \"center\",\n                \"width\": \"100%\",\n              }\n            }\n            thumbSize={4}\n          >\n            <View\n              accessible={true}\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onLayout={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"height\": 16,\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 12,\n                  \"paddingTop\": 12,\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                isVertical={false}\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"#e5e5e5\",\n                      \"borderRadius\": 8,\n                      \"height\": 16,\n                      \"overflow\": \"hidden\",\n                      \"width\": 16,\n                    },\n                    Object {\n                      \"height\": 4,\n                      \"width\": \"100%\",\n                    },\n                  ]\n                }\n              >\n                <View\n                  colorScheme=\"primary\"\n                  dataSet={Object {}}\n                  sliderTrackPosition=\"50%\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"#0891b2\",\n                        \"height\": 16,\n                        \"left\": 0,\n                        \"position\": \"absolute\",\n                        \"width\": 16,\n                      },\n                      Object {\n                        \"height\": 4,\n                        \"width\": \"50%\",\n                      },\n                    ]\n                  }\n                />\n              </View>\n            </View>\n            <View\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              onBlur={[Function]}\n              onFocus={[Function]}\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              scaleOnPressed={1}\n              style={\n                Array [\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#0891b2\",\n                    \"borderRadius\": 9999,\n                    \"height\": 16,\n                    \"justifyContent\": \"center\",\n                    \"position\": \"absolute\",\n                    \"width\": 16,\n                    \"zIndex\": 999,\n                  },\n                  Array [\n                    Object {\n                      \"bottom\": undefined,\n                      \"left\": \"50%\",\n                      \"transform\": Array [\n                        Object {\n                          \"translateX\": -8,\n                        },\n                        Object {\n                          \"scale\": 1,\n                        },\n                      ],\n                    },\n                    undefined,\n                  ],\n                ]\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"center\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"borderRadius\": 9999,\n                      \"paddingBottom\": 8,\n                      \"paddingLeft\": 8,\n                      \"paddingRight\": 8,\n                      \"paddingTop\": 8,\n                      \"position\": \"absolute\",\n                      \"zIndex\": -1,\n                    }\n                  }\n                />\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 8,\n                    }\n                  }\n                />\n                <View\n                  colorScheme=\"primary\"\n                  dataSet={Object {}}\n                  scaleOnPressed={1}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"#0891b2\",\n                      \"borderRadius\": 9999,\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                    }\n                  }\n                />\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            feedbackId=\"field-204-feedback\"\n            hasFeedbackText={false}\n            hasHelpText={false}\n            helpTextId=\"field-204-helptext\"\n            isDisabled={false}\n            isInvalid={true}\n            isReadOnly={false}\n            isRequired={false}\n            labelId=\"field-204-label\"\n            nativeID=\"field-204\"\n            setHasFeedbackText={[Function]}\n            setHasHelpText={[Function]}\n            style={\n              Object {\n                \"marginTop\": 8,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={-2349530}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#dc2626\",\n                      \"fontSize\": 12,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={-2349530}\n                vbHeight={16}\n                vbWidth={16}\n              >\n                <RNSVGGroup\n                  font={\n                    Object {\n                      \"fontSize\": 12,\n                    }\n                  }\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M8 16C6.41775 16 4.87103 15.5308 3.55544 14.6518C2.23985 13.7727 1.21447 12.5233 0.608967 11.0615C0.00346627 9.59966 -0.15496 7.99113 0.153721 6.43928C0.462403 4.88743 1.22433 3.46197 2.34315 2.34315C3.46197 1.22433 4.88743 0.462403 6.43928 0.153721C7.99113 -0.15496 9.59966 0.00346627 11.0615 0.608967C12.5233 1.21447 13.7727 2.23985 14.6518 3.55544C15.5308 4.87103 16 6.41775 16 8C16 10.1217 15.1571 12.1566 13.6569 13.6569C12.1566 15.1571 10.1217 16 8 16ZM8 14.4C9.2658 14.4 10.5032 14.0246 11.5556 13.3214C12.6081 12.6182 13.4284 11.6186 13.9128 10.4492C14.3972 9.27973 14.524 7.9929 14.277 6.75142C14.0301 5.50995 13.4205 4.36958 12.5255 3.47452C11.6304 2.57946 10.4901 1.96992 9.24858 1.72298C8.0071 1.47603 6.72028 1.60277 5.55083 2.08717C4.38138 2.57158 3.38184 3.39188 2.6786 4.44435C1.97536 5.49683 1.6 6.7342 1.6 8C1.6 9.69739 2.27429 11.3253 3.47452 12.5255C4.67475 13.7257 6.30262 14.4 8 14.4ZM7.2 10.4H8.8V12H7.2V10.4ZM7.2 4H8.8V8.8H7.2V4Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 4,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#dc2626\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 18,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Something is wrong.\n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Slider Playground 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"marginLeft\": 20,\n          \"marginRight\": 20,\n          \"width\": \"80%\",\n        }\n      }\n    >\n      <View\n        _interactionBox={\n          Object {\n            \"p\": \"2\",\n          }\n        }\n        aria-label=\"Slider\"\n        dataSet={Object {}}\n        defaultValue={\n          Array [\n            50,\n          ]\n        }\n        maxValue={100}\n        minValue={0}\n        sliderTrackHeight={4}\n        step={1}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"justifyContent\": \"center\",\n            \"width\": \"100%\",\n          }\n        }\n        thumbSize={4}\n      >\n        <View\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onLayout={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"height\": 16,\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 12,\n              \"paddingTop\": 12,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            isVertical={false}\n            style={\n              Array [\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"borderRadius\": 8,\n                  \"height\": 16,\n                  \"overflow\": \"hidden\",\n                  \"width\": 16,\n                },\n                Object {\n                  \"height\": 4,\n                  \"width\": \"100%\",\n                },\n              ]\n            }\n          >\n            <View\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              sliderTrackPosition=\"50%\"\n              style={\n                Array [\n                  Object {\n                    \"backgroundColor\": \"#0891b2\",\n                    \"height\": 16,\n                    \"left\": 0,\n                    \"position\": \"absolute\",\n                    \"width\": 16,\n                  },\n                  Object {\n                    \"height\": 4,\n                    \"width\": \"50%\",\n                  },\n                ]\n              }\n            />\n          </View>\n        </View>\n        <View\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          onBlur={[Function]}\n          onFocus={[Function]}\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          scaleOnPressed={1}\n          style={\n            Array [\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#0891b2\",\n                \"borderRadius\": 9999,\n                \"height\": 16,\n                \"justifyContent\": \"center\",\n                \"position\": \"absolute\",\n                \"width\": 16,\n                \"zIndex\": 999,\n              },\n              Array [\n                Object {\n                  \"bottom\": undefined,\n                  \"left\": \"50%\",\n                  \"transform\": Array [\n                    Object {\n                      \"translateX\": -8,\n                    },\n                    Object {\n                      \"scale\": 1,\n                    },\n                  ],\n                },\n                undefined,\n              ],\n            ]\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"borderRadius\": 9999,\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 8,\n                  \"paddingRight\": 8,\n                  \"paddingTop\": 8,\n                  \"position\": \"absolute\",\n                  \"zIndex\": -1,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              scaleOnPressed={1}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#0891b2\",\n                  \"borderRadius\": 9999,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            />\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Slider ReadOnly 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"marginLeft\": 20,\n          \"marginRight\": 20,\n          \"width\": \"80%\",\n        }\n      }\n    >\n      <View\n        _interactionBox={\n          Object {\n            \"p\": \"2\",\n          }\n        }\n        aria-label=\"Slider\"\n        dataSet={Object {}}\n        defaultValue={\n          Array [\n            50,\n          ]\n        }\n        maxValue={100}\n        minValue={0}\n        sliderTrackHeight={4}\n        step={1}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"justifyContent\": \"center\",\n            \"width\": \"100%\",\n          }\n        }\n        thumbSize={4}\n      >\n        <View\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onLayout={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"height\": 16,\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 12,\n              \"paddingTop\": 12,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            isVertical={false}\n            style={\n              Array [\n                Object {\n                  \"backgroundColor\": \"#e0e7ff\",\n                  \"borderRadius\": 8,\n                  \"height\": 16,\n                  \"overflow\": \"hidden\",\n                  \"width\": 16,\n                },\n                Object {\n                  \"height\": 4,\n                  \"width\": \"100%\",\n                },\n              ]\n            }\n          >\n            <View\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              sliderTrackPosition=\"50%\"\n              style={\n                Array [\n                  Object {\n                    \"backgroundColor\": \"#4f46e5\",\n                    \"height\": 16,\n                    \"left\": 0,\n                    \"position\": \"absolute\",\n                    \"width\": 16,\n                  },\n                  Object {\n                    \"height\": 4,\n                    \"width\": \"50%\",\n                  },\n                ]\n              }\n            />\n          </View>\n        </View>\n        <View\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          onBlur={[Function]}\n          onFocus={[Function]}\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          scaleOnPressed={1}\n          style={\n            Array [\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#4f46e5\",\n                \"borderRadius\": 9999,\n                \"height\": 16,\n                \"justifyContent\": \"center\",\n                \"position\": \"absolute\",\n                \"width\": 16,\n                \"zIndex\": 999,\n              },\n              Array [\n                Object {\n                  \"bottom\": undefined,\n                  \"left\": \"50%\",\n                  \"transform\": Array [\n                    Object {\n                      \"translateX\": -8,\n                    },\n                    Object {\n                      \"scale\": 1,\n                    },\n                  ],\n                },\n                undefined,\n              ],\n            ]\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"borderRadius\": 9999,\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 8,\n                  \"paddingRight\": 8,\n                  \"paddingTop\": 8,\n                  \"position\": \"absolute\",\n                  \"zIndex\": -1,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              scaleOnPressed={1}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#4f46e5\",\n                  \"borderRadius\": 9999,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            />\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Slider Size 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"maxWidth\": 300,\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <View\n          _interactionBox={\n            Object {\n              \"p\": \"2\",\n            }\n          }\n          aria-label=\"Slider\"\n          dataSet={Object {}}\n          defaultValue={\n            Array [\n              40,\n            ]\n          }\n          sliderTrackHeight={4}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"width\": \"100%\",\n            }\n          }\n          thumbSize={4}\n        >\n          <View\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onLayout={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"height\": 16,\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 12,\n                \"paddingTop\": 12,\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              isVertical={false}\n              style={\n                Array [\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"borderRadius\": 8,\n                    \"height\": 16,\n                    \"overflow\": \"hidden\",\n                    \"width\": 16,\n                  },\n                  Object {\n                    \"height\": 4,\n                    \"width\": \"100%\",\n                  },\n                ]\n              }\n            >\n              <View\n                colorScheme=\"primary\"\n                dataSet={Object {}}\n                sliderTrackPosition=\"40%\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"#0891b2\",\n                      \"height\": 16,\n                      \"left\": 0,\n                      \"position\": \"absolute\",\n                      \"width\": 16,\n                    },\n                    Object {\n                      \"height\": 4,\n                      \"width\": \"40%\",\n                    },\n                  ]\n                }\n              />\n            </View>\n          </View>\n          <View\n            colorScheme=\"primary\"\n            dataSet={Object {}}\n            onBlur={[Function]}\n            onFocus={[Function]}\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            scaleOnPressed={1}\n            style={\n              Array [\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#0891b2\",\n                  \"borderRadius\": 9999,\n                  \"height\": 16,\n                  \"justifyContent\": \"center\",\n                  \"position\": \"absolute\",\n                  \"width\": 16,\n                  \"zIndex\": 999,\n                },\n                Array [\n                  Object {\n                    \"bottom\": undefined,\n                    \"left\": \"40%\",\n                    \"transform\": Array [\n                      Object {\n                        \"translateX\": -8,\n                      },\n                      Object {\n                        \"scale\": 1,\n                      },\n                    ],\n                  },\n                  undefined,\n                ],\n              ]\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"borderRadius\": 9999,\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 8,\n                    \"paddingRight\": 8,\n                    \"paddingTop\": 8,\n                    \"position\": \"absolute\",\n                    \"zIndex\": -1,\n                  }\n                }\n              />\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <View\n                colorScheme=\"primary\"\n                dataSet={Object {}}\n                scaleOnPressed={1}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#0891b2\",\n                    \"borderRadius\": 9999,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                  }\n                }\n              />\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <View\n          _interactionBox={\n            Object {\n              \"p\": \"2.5\",\n            }\n          }\n          aria-label=\"Slider\"\n          dataSet={Object {}}\n          defaultValue={\n            Array [\n              60,\n            ]\n          }\n          sliderTrackHeight={5}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"width\": \"100%\",\n            }\n          }\n          thumbSize={5}\n        >\n          <View\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onLayout={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"height\": 20,\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 12,\n                \"paddingTop\": 12,\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              isVertical={false}\n              style={\n                Array [\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"borderRadius\": 8,\n                    \"height\": 20,\n                    \"overflow\": \"hidden\",\n                    \"width\": 20,\n                  },\n                  Object {\n                    \"height\": 5,\n                    \"width\": \"100%\",\n                  },\n                ]\n              }\n            >\n              <View\n                colorScheme=\"primary\"\n                dataSet={Object {}}\n                sliderTrackPosition=\"60%\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"#0891b2\",\n                      \"height\": 20,\n                      \"left\": 0,\n                      \"position\": \"absolute\",\n                      \"width\": 20,\n                    },\n                    Object {\n                      \"height\": 5,\n                      \"width\": \"60%\",\n                    },\n                  ]\n                }\n              />\n            </View>\n          </View>\n          <View\n            colorScheme=\"primary\"\n            dataSet={Object {}}\n            onBlur={[Function]}\n            onFocus={[Function]}\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            scaleOnPressed={1}\n            style={\n              Array [\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#0891b2\",\n                  \"borderRadius\": 9999,\n                  \"height\": 20,\n                  \"justifyContent\": \"center\",\n                  \"position\": \"absolute\",\n                  \"width\": 20,\n                  \"zIndex\": 999,\n                },\n                Array [\n                  Object {\n                    \"bottom\": undefined,\n                    \"left\": \"60%\",\n                    \"transform\": Array [\n                      Object {\n                        \"translateX\": -10,\n                      },\n                      Object {\n                        \"scale\": 1,\n                      },\n                    ],\n                  },\n                  undefined,\n                ],\n              ]\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"borderRadius\": 9999,\n                    \"paddingBottom\": 10,\n                    \"paddingLeft\": 10,\n                    \"paddingRight\": 10,\n                    \"paddingTop\": 10,\n                    \"position\": \"absolute\",\n                    \"zIndex\": -1,\n                  }\n                }\n              />\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <View\n                colorScheme=\"primary\"\n                dataSet={Object {}}\n                scaleOnPressed={1}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#0891b2\",\n                    \"borderRadius\": 9999,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                  }\n                }\n              />\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <View\n          _interactionBox={\n            Object {\n              \"p\": \"3\",\n            }\n          }\n          aria-label=\"Slider\"\n          dataSet={Object {}}\n          defaultValue={\n            Array [\n              80,\n            ]\n          }\n          sliderTrackHeight={6}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"width\": \"100%\",\n            }\n          }\n          thumbSize={6}\n        >\n          <View\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onLayout={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"height\": 24,\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 12,\n                \"paddingTop\": 12,\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              isVertical={false}\n              style={\n                Array [\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"borderRadius\": 8,\n                    \"height\": 24,\n                    \"overflow\": \"hidden\",\n                    \"width\": 24,\n                  },\n                  Object {\n                    \"height\": 6,\n                    \"width\": \"100%\",\n                  },\n                ]\n              }\n            >\n              <View\n                colorScheme=\"primary\"\n                dataSet={Object {}}\n                sliderTrackPosition=\"80%\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"#0891b2\",\n                      \"height\": 24,\n                      \"left\": 0,\n                      \"position\": \"absolute\",\n                      \"width\": 24,\n                    },\n                    Object {\n                      \"height\": 6,\n                      \"width\": \"80%\",\n                    },\n                  ]\n                }\n              />\n            </View>\n          </View>\n          <View\n            colorScheme=\"primary\"\n            dataSet={Object {}}\n            onBlur={[Function]}\n            onFocus={[Function]}\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            scaleOnPressed={1}\n            style={\n              Array [\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#0891b2\",\n                  \"borderRadius\": 9999,\n                  \"height\": 24,\n                  \"justifyContent\": \"center\",\n                  \"position\": \"absolute\",\n                  \"width\": 24,\n                  \"zIndex\": 999,\n                },\n                Array [\n                  Object {\n                    \"bottom\": undefined,\n                    \"left\": \"80%\",\n                    \"transform\": Array [\n                      Object {\n                        \"translateX\": -12,\n                      },\n                      Object {\n                        \"scale\": 1,\n                      },\n                    ],\n                  },\n                  undefined,\n                ],\n              ]\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"borderRadius\": 9999,\n                    \"paddingBottom\": 12,\n                    \"paddingLeft\": 12,\n                    \"paddingRight\": 12,\n                    \"paddingTop\": 12,\n                    \"position\": \"absolute\",\n                    \"zIndex\": -1,\n                  }\n                }\n              />\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <View\n                colorScheme=\"primary\"\n                dataSet={Object {}}\n                scaleOnPressed={1}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#0891b2\",\n                    \"borderRadius\": 9999,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                  }\n                }\n              />\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Slider Usage 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        _interactionBox={\n          Object {\n            \"p\": \"2\",\n          }\n        }\n        accessibilityLabel=\"hello world\"\n        aria-label=\"hello world\"\n        dataSet={Object {}}\n        defaultValue={\n          Array [\n            70,\n          ]\n        }\n        maxValue={100}\n        minValue={0}\n        sliderTrackHeight={4}\n        step={10}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"justifyContent\": \"center\",\n            \"maxWidth\": 300,\n            \"width\": \"75%\",\n          }\n        }\n        thumbSize={4}\n      >\n        <View\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onLayout={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"height\": 16,\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 12,\n              \"paddingTop\": 12,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            isVertical={false}\n            style={\n              Array [\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"borderRadius\": 8,\n                  \"height\": 16,\n                  \"overflow\": \"hidden\",\n                  \"width\": 16,\n                },\n                Object {\n                  \"height\": 4,\n                  \"width\": \"100%\",\n                },\n              ]\n            }\n          >\n            <View\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              sliderTrackPosition=\"70%\"\n              style={\n                Array [\n                  Object {\n                    \"backgroundColor\": \"#0891b2\",\n                    \"height\": 16,\n                    \"left\": 0,\n                    \"position\": \"absolute\",\n                    \"width\": 16,\n                  },\n                  Object {\n                    \"height\": 4,\n                    \"width\": \"70%\",\n                  },\n                ]\n              }\n            />\n          </View>\n        </View>\n        <View\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          onBlur={[Function]}\n          onFocus={[Function]}\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          scaleOnPressed={1}\n          style={\n            Array [\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#0891b2\",\n                \"borderRadius\": 9999,\n                \"height\": 16,\n                \"justifyContent\": \"center\",\n                \"position\": \"absolute\",\n                \"width\": 16,\n                \"zIndex\": 999,\n              },\n              Array [\n                Object {\n                  \"bottom\": undefined,\n                  \"left\": \"70%\",\n                  \"transform\": Array [\n                    Object {\n                      \"translateX\": -8,\n                    },\n                    Object {\n                      \"scale\": 1,\n                    },\n                  ],\n                },\n                undefined,\n              ],\n            ]\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"borderRadius\": 9999,\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 8,\n                  \"paddingRight\": 8,\n                  \"paddingTop\": 8,\n                  \"position\": \"absolute\",\n                  \"zIndex\": -1,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              scaleOnPressed={1}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#0891b2\",\n                  \"borderRadius\": 9999,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            />\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Slider Value 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"maxWidth\": 300,\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"textAlign\": \"center\",\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          onChangeValue - \n          70\n        </Text>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"textAlign\": \"center\",\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          onChangeEndValue - \n          70\n        </Text>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <View\n          _interactionBox={\n            Object {\n              \"p\": \"2\",\n            }\n          }\n          aria-label=\"Slider\"\n          colorScheme=\"cyan\"\n          dataSet={Object {}}\n          defaultValue={\n            Array [\n              70,\n            ]\n          }\n          onChange={[Function]}\n          onChangeEnd={[Function]}\n          sliderTrackHeight={4}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"width\": \"100%\",\n            }\n          }\n          thumbSize={4}\n        >\n          <View\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onLayout={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"height\": 16,\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 12,\n                \"paddingTop\": 12,\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              colorScheme=\"cyan\"\n              dataSet={Object {}}\n              isVertical={false}\n              style={\n                Array [\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"borderRadius\": 8,\n                    \"height\": 16,\n                    \"overflow\": \"hidden\",\n                    \"width\": 16,\n                  },\n                  Object {\n                    \"height\": 4,\n                    \"width\": \"100%\",\n                  },\n                ]\n              }\n            >\n              <View\n                colorScheme=\"cyan\"\n                dataSet={Object {}}\n                sliderTrackPosition=\"70%\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"#0891b2\",\n                      \"height\": 16,\n                      \"left\": 0,\n                      \"position\": \"absolute\",\n                      \"width\": 16,\n                    },\n                    Object {\n                      \"height\": 4,\n                      \"width\": \"70%\",\n                    },\n                  ]\n                }\n              />\n            </View>\n          </View>\n          <View\n            colorScheme=\"cyan\"\n            dataSet={Object {}}\n            onBlur={[Function]}\n            onFocus={[Function]}\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            scaleOnPressed={1}\n            style={\n              Array [\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#0891b2\",\n                  \"borderRadius\": 9999,\n                  \"height\": 16,\n                  \"justifyContent\": \"center\",\n                  \"position\": \"absolute\",\n                  \"width\": 16,\n                  \"zIndex\": 999,\n                },\n                Array [\n                  Object {\n                    \"bottom\": undefined,\n                    \"left\": \"70%\",\n                    \"transform\": Array [\n                      Object {\n                        \"translateX\": -8,\n                      },\n                      Object {\n                        \"scale\": 1,\n                      },\n                    ],\n                  },\n                  undefined,\n                ],\n              ]\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"borderRadius\": 9999,\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 8,\n                    \"paddingRight\": 8,\n                    \"paddingTop\": 8,\n                    \"position\": \"absolute\",\n                    \"zIndex\": -1,\n                  }\n                }\n              />\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <View\n                colorScheme=\"cyan\"\n                dataSet={Object {}}\n                scaleOnPressed={1}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#0891b2\",\n                    \"borderRadius\": 9999,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                  }\n                }\n              />\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Slider Vertical 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"marginLeft\": 20,\n          \"marginRight\": 20,\n          \"width\": \"80%\",\n        }\n      }\n    >\n      <View\n        _interactionBox={\n          Object {\n            \"p\": \"2\",\n          }\n        }\n        aria-label=\"Slider\"\n        colorScheme=\"teal\"\n        dataSet={Object {}}\n        defaultValue={\n          Array [\n            70,\n          ]\n        }\n        orientation=\"vertical\"\n        sliderTrackHeight={4}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"height\": 192,\n            \"justifyContent\": \"center\",\n          }\n        }\n        thumbSize={4}\n      >\n        <View\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onLayout={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"height\": \"100%\",\n              \"justifyContent\": \"center\",\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"width\": 16,\n            }\n          }\n        >\n          <View\n            colorScheme=\"teal\"\n            dataSet={Object {}}\n            isVertical={true}\n            style={\n              Array [\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"borderRadius\": 8,\n                  \"height\": 16,\n                  \"overflow\": \"hidden\",\n                  \"width\": 16,\n                },\n                Object {\n                  \"height\": \"100%\",\n                  \"width\": 4,\n                },\n              ]\n            }\n          >\n            <View\n              colorScheme=\"teal\"\n              dataSet={Object {}}\n              orientation=\"vertical\"\n              sliderTrackPosition=\"70%\"\n              style={\n                Array [\n                  Object {\n                    \"backgroundColor\": \"#0d9488\",\n                    \"bottom\": 0,\n                    \"height\": 16,\n                    \"position\": \"absolute\",\n                    \"width\": 16,\n                  },\n                  Object {\n                    \"height\": \"70%\",\n                    \"width\": 4,\n                  },\n                ]\n              }\n            />\n          </View>\n        </View>\n        <View\n          colorScheme=\"teal\"\n          dataSet={Object {}}\n          onBlur={[Function]}\n          onFocus={[Function]}\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          scaleOnPressed={1}\n          style={\n            Array [\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#0d9488\",\n                \"borderRadius\": 9999,\n                \"height\": 16,\n                \"justifyContent\": \"center\",\n                \"position\": \"absolute\",\n                \"width\": 16,\n                \"zIndex\": 999,\n              },\n              Array [\n                Object {\n                  \"bottom\": \"70%\",\n                  \"left\": undefined,\n                  \"transform\": Array [\n                    Object {\n                      \"translateY\": 8,\n                    },\n                    Object {\n                      \"scale\": 1,\n                    },\n                  ],\n                },\n                undefined,\n              ],\n            ]\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"borderRadius\": 9999,\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 8,\n                  \"paddingRight\": 8,\n                  \"paddingTop\": 8,\n                  \"position\": \"absolute\",\n                  \"zIndex\": -1,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              colorScheme=\"teal\"\n              dataSet={Object {}}\n              scaleOnPressed={1}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#0d9488\",\n                  \"borderRadius\": 9999,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            />\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Spinner Color 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <ActivityIndicator\n        accessibilityLabel=\"loading\"\n        accessible={true}\n        animating={true}\n        color=\"#10b981\"\n        hidesWhenStopped={true}\n        size=\"small\"\n        style={\n          Array [\n            Array [\n              Object {},\n              Object {\n                \"dataSet\": Object {},\n              },\n              Object {},\n            ],\n            undefined,\n          ]\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 32,\n          }\n        }\n      />\n      <ActivityIndicator\n        accessibilityLabel=\"loading\"\n        accessible={true}\n        animating={true}\n        color=\"#f97316\"\n        hidesWhenStopped={true}\n        size=\"small\"\n        style={\n          Array [\n            Array [\n              Object {},\n              Object {\n                \"dataSet\": Object {},\n              },\n              Object {},\n            ],\n            undefined,\n          ]\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 32,\n          }\n        }\n      />\n      <ActivityIndicator\n        accessibilityLabel=\"loading\"\n        accessible={true}\n        animating={true}\n        color=\"#6366f1\"\n        hidesWhenStopped={true}\n        size=\"small\"\n        style={\n          Array [\n            Array [\n              Object {},\n              Object {\n                \"dataSet\": Object {},\n              },\n              Object {},\n            ],\n            undefined,\n          ]\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 32,\n          }\n        }\n      />\n      <ActivityIndicator\n        accessibilityLabel=\"loading\"\n        accessible={true}\n        animating={true}\n        color=\"#06b6d4\"\n        hidesWhenStopped={true}\n        size=\"small\"\n        style={\n          Array [\n            Array [\n              Object {},\n              Object {\n                \"dataSet\": Object {},\n              },\n              Object {},\n            ],\n            undefined,\n          ]\n        }\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Spinner Playground 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"space-between\",\n        }\n      }\n    >\n      <ActivityIndicator\n        accessibilityLabel=\"loading\"\n        accessible={true}\n        animating={true}\n        color=\"#67e8f9\"\n        hidesWhenStopped={true}\n        size=\"large\"\n        style={\n          Array [\n            Array [\n              Object {},\n              Object {\n                \"dataSet\": Object {},\n              },\n              Object {},\n            ],\n            undefined,\n          ]\n        }\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Spinner Size 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <ActivityIndicator\n        accessibilityLabel=\"loading\"\n        accessible={true}\n        animating={true}\n        color=\"#0891b2\"\n        hidesWhenStopped={true}\n        size=\"small\"\n        style={\n          Array [\n            Array [\n              Object {},\n              Object {\n                \"dataSet\": Object {},\n              },\n              Object {},\n            ],\n            undefined,\n          ]\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 32,\n          }\n        }\n      />\n      <ActivityIndicator\n        accessibilityLabel=\"loading\"\n        accessible={true}\n        animating={true}\n        color=\"#0891b2\"\n        hidesWhenStopped={true}\n        size=\"large\"\n        style={\n          Array [\n            Array [\n              Object {},\n              Object {\n                \"dataSet\": Object {},\n              },\n              Object {},\n            ],\n            undefined,\n          ]\n        }\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Spinner Usage 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <ActivityIndicator\n        accessibilityLabel=\"loading\"\n        accessible={true}\n        animating={true}\n        color=\"#0891b2\"\n        hidesWhenStopped={true}\n        size=\"small\"\n        style={\n          Array [\n            Array [\n              Object {},\n              Object {\n                \"accessibilityLabel\": \"Loading posts\",\n                \"dataSet\": Object {},\n              },\n              Object {},\n            ],\n            undefined,\n          ]\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 8,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#06b6d4\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 16,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 20,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Loading\n      </Text>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Stack Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <RCTScrollView\n      contentContainerStyle={\n        Array [\n          Object {},\n          Object {\n            \"dataSet\": Object {},\n          },\n          Object {},\n        ]\n      }\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"marginTop\": 16,\n              \"paddingLeft\": 32,\n              \"paddingRight\": 32,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            row\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"marginBottom\": 10,\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#22d3ee\",\n                  \"borderRadius\": 4,\n                  \"display\": \"flex\",\n                  \"elevation\": 4,\n                  \"height\": 64,\n                  \"justifyContent\": \"center\",\n                  \"shadowColor\": \"#000000\",\n                  \"shadowOffset\": Object {\n                    \"height\": 2,\n                    \"width\": 0,\n                  },\n                  \"shadowOpacity\": 0.23,\n                  \"shadowRadius\": 2.62,\n                  \"width\": 64,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafaf9\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Box 1\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#06b6d4\",\n                  \"borderRadius\": 4,\n                  \"display\": \"flex\",\n                  \"elevation\": 4,\n                  \"height\": 64,\n                  \"justifyContent\": \"center\",\n                  \"shadowColor\": \"#000000\",\n                  \"shadowOffset\": Object {\n                    \"height\": 2,\n                    \"width\": 0,\n                  },\n                  \"shadowOpacity\": 0.23,\n                  \"shadowRadius\": 2.62,\n                  \"width\": 64,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafaf9\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Box 2\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#0e7490\",\n                  \"borderRadius\": 4,\n                  \"display\": \"flex\",\n                  \"elevation\": 4,\n                  \"height\": 64,\n                  \"justifyContent\": \"center\",\n                  \"shadowColor\": \"#000000\",\n                  \"shadowOffset\": Object {\n                    \"height\": 2,\n                    \"width\": 0,\n                  },\n                  \"shadowOpacity\": 0.23,\n                  \"shadowRadius\": 2.62,\n                  \"width\": 64,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafaf9\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Box 3\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            column\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"column\",\n                \"marginBottom\": 10,\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#22d3ee\",\n                  \"borderRadius\": 4,\n                  \"display\": \"flex\",\n                  \"elevation\": 4,\n                  \"height\": 64,\n                  \"justifyContent\": \"center\",\n                  \"shadowColor\": \"#000000\",\n                  \"shadowOffset\": Object {\n                    \"height\": 2,\n                    \"width\": 0,\n                  },\n                  \"shadowOpacity\": 0.23,\n                  \"shadowRadius\": 2.62,\n                  \"width\": 64,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafaf9\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Box 1\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#06b6d4\",\n                  \"borderRadius\": 4,\n                  \"display\": \"flex\",\n                  \"elevation\": 4,\n                  \"height\": 64,\n                  \"justifyContent\": \"center\",\n                  \"shadowColor\": \"#000000\",\n                  \"shadowOffset\": Object {\n                    \"height\": 2,\n                    \"width\": 0,\n                  },\n                  \"shadowOpacity\": 0.23,\n                  \"shadowRadius\": 2.62,\n                  \"width\": 64,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafaf9\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Box 2\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#0e7490\",\n                  \"borderRadius\": 4,\n                  \"display\": \"flex\",\n                  \"elevation\": 4,\n                  \"height\": 64,\n                  \"justifyContent\": \"center\",\n                  \"shadowColor\": \"#000000\",\n                  \"shadowOffset\": Object {\n                    \"height\": 2,\n                    \"width\": 0,\n                  },\n                  \"shadowOpacity\": 0.23,\n                  \"shadowRadius\": 2.62,\n                  \"width\": 64,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafaf9\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Box 3\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            row-reverse\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"marginBottom\": 10,\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#0e7490\",\n                  \"borderRadius\": 4,\n                  \"display\": \"flex\",\n                  \"elevation\": 4,\n                  \"height\": 64,\n                  \"justifyContent\": \"center\",\n                  \"shadowColor\": \"#000000\",\n                  \"shadowOffset\": Object {\n                    \"height\": 2,\n                    \"width\": 0,\n                  },\n                  \"shadowOpacity\": 0.23,\n                  \"shadowRadius\": 2.62,\n                  \"width\": 64,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafaf9\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Box 3\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#06b6d4\",\n                  \"borderRadius\": 4,\n                  \"display\": \"flex\",\n                  \"elevation\": 4,\n                  \"height\": 64,\n                  \"justifyContent\": \"center\",\n                  \"shadowColor\": \"#000000\",\n                  \"shadowOffset\": Object {\n                    \"height\": 2,\n                    \"width\": 0,\n                  },\n                  \"shadowOpacity\": 0.23,\n                  \"shadowRadius\": 2.62,\n                  \"width\": 64,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafaf9\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Box 2\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#22d3ee\",\n                  \"borderRadius\": 4,\n                  \"display\": \"flex\",\n                  \"elevation\": 4,\n                  \"height\": 64,\n                  \"justifyContent\": \"center\",\n                  \"shadowColor\": \"#000000\",\n                  \"shadowOffset\": Object {\n                    \"height\": 2,\n                    \"width\": 0,\n                  },\n                  \"shadowOpacity\": 0.23,\n                  \"shadowRadius\": 2.62,\n                  \"width\": 64,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafaf9\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Box 1\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            column-reverse\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"column-reverse\",\n                \"marginBottom\": 10,\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#22d3ee\",\n                  \"borderRadius\": 4,\n                  \"display\": \"flex\",\n                  \"elevation\": 4,\n                  \"height\": 64,\n                  \"justifyContent\": \"center\",\n                  \"shadowColor\": \"#000000\",\n                  \"shadowOffset\": Object {\n                    \"height\": 2,\n                    \"width\": 0,\n                  },\n                  \"shadowOpacity\": 0.23,\n                  \"shadowRadius\": 2.62,\n                  \"width\": 64,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafaf9\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Box 1\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#06b6d4\",\n                  \"borderRadius\": 4,\n                  \"display\": \"flex\",\n                  \"elevation\": 4,\n                  \"height\": 64,\n                  \"justifyContent\": \"center\",\n                  \"shadowColor\": \"#000000\",\n                  \"shadowOffset\": Object {\n                    \"height\": 2,\n                    \"width\": 0,\n                  },\n                  \"shadowOpacity\": 0.23,\n                  \"shadowRadius\": 2.62,\n                  \"width\": 64,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafaf9\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Box 2\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#0e7490\",\n                  \"borderRadius\": 4,\n                  \"display\": \"flex\",\n                  \"elevation\": 4,\n                  \"height\": 64,\n                  \"justifyContent\": \"center\",\n                  \"shadowColor\": \"#000000\",\n                  \"shadowOffset\": Object {\n                    \"height\": 2,\n                    \"width\": 0,\n                  },\n                  \"shadowOpacity\": 0.23,\n                  \"shadowRadius\": 2.62,\n                  \"width\": 64,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafaf9\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Box 3\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n        </View>\n      </View>\n    </RCTScrollView>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Stack Divider 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"marginBottom\": 12,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Simple\n            </Text>\n          </View>\n          <View\n            aria-orientation=\"vertical\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#e5e7eb\",\n                \"height\": \"100%\",\n                \"marginLeft\": 8,\n                \"marginRight\": 8,\n                \"width\": 2,\n              }\n            }\n            thickness=\"2\"\n          />\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Easy\n            </Text>\n          </View>\n          <View\n            aria-orientation=\"vertical\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#e5e7eb\",\n                \"height\": \"100%\",\n                \"marginLeft\": 8,\n                \"marginRight\": 8,\n                \"width\": 2,\n              }\n            }\n            thickness=\"2\"\n          />\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Beautiful\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots StatusBar Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"flex\": 1,\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 14,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 21,\n            \"marginBottom\": 12,\n            \"textAlign\": \"center\",\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        StatusBar Visibility:\n        \n\n        Visible\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"paddingBottom\": 40,\n            \"paddingLeft\": 40,\n            \"paddingRight\": 40,\n            \"paddingTop\": 40,\n          }\n        }\n      >\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Toggle StatusBar\n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Switch Accessibility 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"flexDirection\": \"row\",\n        }\n      }\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 18,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 27,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Accessibility\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 32,\n          }\n        }\n      />\n      <AndroidSwitch\n        accessibilityHint=\"turn on or off\"\n        accessibilityLabel=\"switch-accessible\"\n        accessibilityRole=\"switch\"\n        activeThumbColor=\"#fafafa\"\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        enabled={true}\n        on={false}\n        onChange={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={Object {}}\n        thumbTintColor=\"#fafafa\"\n        trackColorForFalse=\"#d4d4d4\"\n        trackColorForTrue=\"#0891b2\"\n        trackTintColor=\"#d4d4d4\"\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Switch Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"flexDirection\": \"row\",\n        }\n      }\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 14,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 21,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Bluetooth\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 16,\n          }\n        }\n      />\n      <AndroidSwitch\n        accessibilityRole=\"switch\"\n        activeThumbColor=\"#fafafa\"\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        enabled={true}\n        on={false}\n        onChange={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Array [\n            Object {},\n            Object {\n              \"transform\": Array [\n                Object {\n                  \"scale\": 0.75,\n                },\n              ],\n            },\n          ]\n        }\n        thumbTintColor=\"#fafafa\"\n        trackColorForFalse=\"#d4d4d4\"\n        trackColorForTrue=\"#0891b2\"\n        trackTintColor=\"#d4d4d4\"\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Switch ColorSchemes 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <AndroidSwitch\n        accessibilityRole=\"switch\"\n        activeThumbColor=\"#fafafa\"\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        enabled={true}\n        on={true}\n        onChange={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={Object {}}\n        thumbTintColor=\"#fafafa\"\n        trackColorForFalse=\"#d4d4d4\"\n        trackColorForTrue=\"#0891b2\"\n        trackTintColor=\"#0891b2\"\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <AndroidSwitch\n        accessibilityRole=\"switch\"\n        activeThumbColor=\"#fafafa\"\n        colorScheme=\"secondary\"\n        dataSet={Object {}}\n        enabled={true}\n        on={true}\n        onChange={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={Object {}}\n        thumbTintColor=\"#fafafa\"\n        trackColorForFalse=\"#d4d4d4\"\n        trackColorForTrue=\"#db2777\"\n        trackTintColor=\"#db2777\"\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <AndroidSwitch\n        accessibilityRole=\"switch\"\n        activeThumbColor=\"#fafafa\"\n        colorScheme=\"emerald\"\n        dataSet={Object {}}\n        enabled={true}\n        on={true}\n        onChange={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={Object {}}\n        thumbTintColor=\"#fafafa\"\n        trackColorForFalse=\"#d4d4d4\"\n        trackColorForTrue=\"#059669\"\n        trackTintColor=\"#059669\"\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Switch Sizes 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <AndroidSwitch\n        accessibilityRole=\"switch\"\n        activeThumbColor=\"#fafafa\"\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        enabled={true}\n        on={false}\n        onChange={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Array [\n            Object {},\n            Object {\n              \"transform\": Array [\n                Object {\n                  \"scale\": 0.75,\n                },\n              ],\n            },\n          ]\n        }\n        thumbTintColor=\"#fafafa\"\n        trackColorForFalse=\"#d4d4d4\"\n        trackColorForTrue=\"#0891b2\"\n        trackTintColor=\"#d4d4d4\"\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <AndroidSwitch\n        accessibilityRole=\"switch\"\n        activeThumbColor=\"#fafafa\"\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        enabled={true}\n        on={false}\n        onChange={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={Object {}}\n        thumbTintColor=\"#fafafa\"\n        trackColorForFalse=\"#d4d4d4\"\n        trackColorForTrue=\"#0891b2\"\n        trackTintColor=\"#d4d4d4\"\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <AndroidSwitch\n        accessibilityRole=\"switch\"\n        activeThumbColor=\"#fafafa\"\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        enabled={true}\n        on={false}\n        onChange={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Array [\n            Object {\n              \"marginBottom\": 4,\n              \"marginLeft\": 4,\n              \"marginRight\": 4,\n              \"marginTop\": 4,\n            },\n            Object {\n              \"transform\": Array [\n                Object {\n                  \"scale\": 1.25,\n                },\n              ],\n            },\n          ]\n        }\n        thumbTintColor=\"#fafafa\"\n        trackColorForFalse=\"#d4d4d4\"\n        trackColorForTrue=\"#0891b2\"\n        trackTintColor=\"#d4d4d4\"\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Switch Switch bgColor 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <AndroidSwitch\n        accessibilityRole=\"switch\"\n        activeThumbColor=\"#fafafa\"\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        enabled={true}\n        on={false}\n        onChange={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={Object {}}\n        thumbTintColor=\"#fafafa\"\n        trackColorForFalse=\"#d4d4d4\"\n        trackColorForTrue=\"#0891b2\"\n        trackTintColor=\"#d4d4d4\"\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <AndroidSwitch\n        accessibilityRole=\"switch\"\n        activeThumbColor=\"#f97316\"\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        enabled={true}\n        on={false}\n        onChange={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={Object {}}\n        thumbTintColor=\"#fff7ed\"\n        trackColorForFalse=\"#ffedd5\"\n        trackColorForTrue=\"#fed7aa\"\n        trackTintColor=\"#ffedd5\"\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <AndroidSwitch\n        accessibilityRole=\"switch\"\n        activeThumbColor=\"#6366f1\"\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        enabled={true}\n        on={false}\n        onChange={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={Object {}}\n        thumbTintColor=\"#eef2ff\"\n        trackColorForFalse=\"#e0e7ff\"\n        trackColorForTrue=\"#c7d2fe\"\n        trackTintColor=\"#e0e7ff\"\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Text Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <Text\n      dataSet={Object {}}\n      style={\n        Object {\n          \"backgroundColor\": undefined,\n          \"color\": \"#171717\",\n          \"fontFamily\": undefined,\n          \"fontSize\": 14,\n          \"fontStyle\": \"normal\",\n          \"fontWeight\": \"400\",\n          \"letterSpacing\": 0,\n          \"lineHeight\": 21,\n          \"textDecorationLine\": undefined,\n        }\n      }\n    >\n      This is Text.\n    </Text>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Text Changing Font Size 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 12,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 18,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        xs\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 4,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 14,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 21,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        sm\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 4,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 16,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 24,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        md\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 4,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 18,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 27,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        lg\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 4,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 20,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 30,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        xl\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 4,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 24,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 36,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        2xl\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 4,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 30,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 45,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        3xl\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 4,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 36,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 54,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        4xl\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 4,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 48,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 72,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        5xl\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 4,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 60,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 90,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        6xl\n      </Text>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Text Nested 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <Text\n      dataSet={Object {}}\n      style={\n        Object {\n          \"backgroundColor\": undefined,\n          \"color\": \"#171717\",\n          \"fontFamily\": undefined,\n          \"fontSize\": 14,\n          \"fontStyle\": \"italic\",\n          \"fontWeight\": \"400\",\n          \"letterSpacing\": 0,\n          \"lineHeight\": 21,\n          \"textDecorationLine\": undefined,\n        }\n      }\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"fontFamily\": undefined,\n            \"fontSize\": undefined,\n            \"fontStyle\": undefined,\n            \"fontWeight\": \"700\",\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Taj Mahal\n      </Text>\n       is in Agra.\n    </Text>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Text Overriden 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 14,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 21,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Bold\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 14,\n            \"fontStyle\": \"italic\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 21,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Italic\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 14,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 21,\n            \"textDecorationLine\": \"underline\",\n          }\n        }\n      >\n        Underline\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": \"#fdba74\",\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 14,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 21,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Highlighted\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 14,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 21,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        H\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"fontFamily\": undefined,\n              \"fontSize\": 10,\n              \"fontStyle\": undefined,\n              \"fontWeight\": undefined,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          2\n        </Text>\n        O\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 14,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 21,\n            \"textDecorationLine\": \"underline\",\n          }\n        }\n      >\n        Underline\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 14,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 21,\n            \"textDecorationLine\": \"line-through\",\n          }\n        }\n      >\n        StrikeThrough\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 14,\n            \"fontStyle\": \"italic\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 21,\n            \"textDecorationLine\": \"underline\",\n          }\n        }\n      >\n        Bold, Italic & Underline\n      </Text>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Text Truncated 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <Text\n      dataSet={Object {}}\n      numberOfLines={1}\n      style={\n        Object {\n          \"backgroundColor\": undefined,\n          \"color\": \"#171717\",\n          \"fontFamily\": undefined,\n          \"fontSize\": 14,\n          \"fontStyle\": \"normal\",\n          \"fontWeight\": \"400\",\n          \"letterSpacing\": 0,\n          \"lineHeight\": 21,\n          \"maxWidth\": 300,\n          \"textDecorationLine\": undefined,\n          \"width\": \"80%\",\n        }\n      }\n    >\n      NativeBase gives you a contrasting color based on your theme. You can also customise it using the useAccessibleColors hook.\n    </Text>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots TextArea Default 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        isFocused={false}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"height\": 80,\n            \"maxWidth\": 300,\n            \"overflow\": \"hidden\",\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <TextInput\n          accessible={true}\n          allowFontScaling={true}\n          dataSet={Object {}}\n          editable={true}\n          multiline={true}\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyPress={[Function]}\n          placeholder=\"Text Area Placeholder\"\n          placeholderTextColor=\"#a3a3a3\"\n          rejectResponderTermination={true}\n          secureTextEntry={false}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"color\": \"#171717\",\n              \"flex\": 1,\n              \"fontFamily\": undefined,\n              \"fontSize\": 12,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 8,\n              \"width\": \"100%\",\n            }\n          }\n          textAlignVertical=\"top\"\n          underlineColorAndroid=\"transparent\"\n        />\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots TextArea InValid and Disabled 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"maxWidth\": 300,\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 18,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 27,\n                \"marginBottom\": 16,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Invalid TextArea\n          </Text>\n          <View\n            dataSet={Object {}}\n            isFocused={false}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"borderColor\": \"#d4d4d4\",\n                \"borderRadius\": 4,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"height\": 80,\n                \"marginBottom\": 20,\n                \"overflow\": \"hidden\",\n              }\n            }\n          >\n            <TextInput\n              accessibilityInvalid={true}\n              accessible={true}\n              allowFontScaling={true}\n              aria-label=\"t1\"\n              dataSet={Object {}}\n              editable={true}\n              isInvalid={true}\n              multiline={true}\n              onBlur={[Function]}\n              onFocus={[Function]}\n              onKeyPress={[Function]}\n              placeholder=\"Invalid TextArea\"\n              placeholderTextColor=\"#a3a3a3\"\n              rejectResponderTermination={true}\n              secureTextEntry={false}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"color\": \"#171717\",\n                  \"flex\": 1,\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"100%\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                  \"width\": \"100%\",\n                }\n              }\n              textAlignVertical=\"top\"\n              underlineColorAndroid=\"transparent\"\n            />\n          </View>\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 10,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 18,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 27,\n                \"marginBottom\": 16,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Disabled TextArea\n          </Text>\n          <View\n            dataSet={Object {}}\n            isFocused={false}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"borderColor\": \"#d4d4d4\",\n                \"borderRadius\": 4,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"height\": 80,\n                \"opacity\": 0.4,\n                \"overflow\": \"hidden\",\n              }\n            }\n          >\n            <TextInput\n              accessible={true}\n              allowFontScaling={true}\n              aria-label=\"t1Disabled\"\n              dataSet={Object {}}\n              disabled={true}\n              editable={false}\n              multiline={true}\n              onBlur={[Function]}\n              onFocus={[Function]}\n              onKeyPress={[Function]}\n              placeholder=\"Disabled TextArea\"\n              placeholderTextColor=\"#a3a3a3\"\n              rejectResponderTermination={true}\n              secureTextEntry={false}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"color\": \"#171717\",\n                  \"flex\": 1,\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"100%\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                  \"width\": \"100%\",\n                }\n              }\n              textAlignVertical=\"top\"\n              underlineColorAndroid=\"transparent\"\n            />\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots TextArea Sizes 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <RCTScrollView\n      contentContainerStyle={\n        Array [\n          Object {},\n          Object {\n            \"dataSet\": Object {},\n          },\n          Object {},\n        ]\n      }\n      dataSet={Object {}}\n      style={\n        Object {\n          \"width\": \"70%\",\n        }\n      }\n    >\n      <View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n              \"marginTop\": 16,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 24,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 30,\n                \"marginBottom\": 40,\n                \"textAlign\": \"center\",\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Sizes\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": \"90%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              isFocused={false}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"height\": 80,\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <TextInput\n                accessible={true}\n                allowFontScaling={true}\n                aria-label=\"t2\"\n                dataSet={Object {}}\n                editable={true}\n                multiline={true}\n                onBlur={[Function]}\n                onFocus={[Function]}\n                onKeyPress={[Function]}\n                placeholder=\"xs\"\n                placeholderTextColor=\"#a3a3a3\"\n                rejectResponderTermination={true}\n                secureTextEntry={false}\n                style={\n                  Object {\n                    \"backgroundColor\": \"transparent\",\n                    \"color\": \"#171717\",\n                    \"flex\": 1,\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 10,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 12,\n                    \"paddingRight\": 12,\n                    \"paddingTop\": 8,\n                    \"width\": \"100%\",\n                  }\n                }\n                textAlignVertical=\"top\"\n                underlineColorAndroid=\"transparent\"\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 16,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              isFocused={false}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"height\": 80,\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <TextInput\n                accessible={true}\n                allowFontScaling={true}\n                aria-label=\"t2\"\n                dataSet={Object {}}\n                editable={true}\n                multiline={true}\n                onBlur={[Function]}\n                onFocus={[Function]}\n                onKeyPress={[Function]}\n                placeholder=\"sm\"\n                placeholderTextColor=\"#a3a3a3\"\n                rejectResponderTermination={true}\n                secureTextEntry={false}\n                style={\n                  Object {\n                    \"backgroundColor\": \"transparent\",\n                    \"color\": \"#171717\",\n                    \"flex\": 1,\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 12,\n                    \"paddingRight\": 12,\n                    \"paddingTop\": 8,\n                    \"width\": \"100%\",\n                  }\n                }\n                textAlignVertical=\"top\"\n                underlineColorAndroid=\"transparent\"\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 16,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              isFocused={false}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"height\": 80,\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <TextInput\n                accessible={true}\n                allowFontScaling={true}\n                aria-label=\"t2\"\n                dataSet={Object {}}\n                editable={true}\n                multiline={true}\n                onBlur={[Function]}\n                onFocus={[Function]}\n                onKeyPress={[Function]}\n                placeholder=\"md\"\n                placeholderTextColor=\"#a3a3a3\"\n                rejectResponderTermination={true}\n                secureTextEntry={false}\n                style={\n                  Object {\n                    \"backgroundColor\": \"transparent\",\n                    \"color\": \"#171717\",\n                    \"flex\": 1,\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 12,\n                    \"paddingRight\": 12,\n                    \"paddingTop\": 8,\n                    \"width\": \"100%\",\n                  }\n                }\n                textAlignVertical=\"top\"\n                underlineColorAndroid=\"transparent\"\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 16,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              isFocused={false}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"height\": 80,\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <TextInput\n                accessible={true}\n                allowFontScaling={true}\n                aria-label=\"t2\"\n                dataSet={Object {}}\n                editable={true}\n                multiline={true}\n                onBlur={[Function]}\n                onFocus={[Function]}\n                onKeyPress={[Function]}\n                placeholder=\"lg\"\n                placeholderTextColor=\"#a3a3a3\"\n                rejectResponderTermination={true}\n                secureTextEntry={false}\n                style={\n                  Object {\n                    \"backgroundColor\": \"transparent\",\n                    \"color\": \"#171717\",\n                    \"flex\": 1,\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 16,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 12,\n                    \"paddingRight\": 12,\n                    \"paddingTop\": 8,\n                    \"width\": \"100%\",\n                  }\n                }\n                textAlignVertical=\"top\"\n                underlineColorAndroid=\"transparent\"\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 16,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              isFocused={false}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"height\": 80,\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <TextInput\n                accessible={true}\n                allowFontScaling={true}\n                aria-label=\"t2\"\n                dataSet={Object {}}\n                editable={true}\n                multiline={true}\n                onBlur={[Function]}\n                onFocus={[Function]}\n                onKeyPress={[Function]}\n                placeholder=\"xl\"\n                placeholderTextColor=\"#a3a3a3\"\n                rejectResponderTermination={true}\n                secureTextEntry={false}\n                style={\n                  Object {\n                    \"backgroundColor\": \"transparent\",\n                    \"color\": \"#171717\",\n                    \"flex\": 1,\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 18,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 12,\n                    \"paddingRight\": 12,\n                    \"paddingTop\": 8,\n                    \"width\": \"100%\",\n                  }\n                }\n                textAlignVertical=\"top\"\n                underlineColorAndroid=\"transparent\"\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 16,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              isFocused={false}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"height\": 80,\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <TextInput\n                accessible={true}\n                allowFontScaling={true}\n                aria-label=\"t2\"\n                dataSet={Object {}}\n                editable={true}\n                multiline={true}\n                onBlur={[Function]}\n                onFocus={[Function]}\n                onKeyPress={[Function]}\n                placeholder=\"2xl\"\n                placeholderTextColor=\"#a3a3a3\"\n                rejectResponderTermination={true}\n                secureTextEntry={false}\n                style={\n                  Object {\n                    \"backgroundColor\": \"transparent\",\n                    \"color\": \"#171717\",\n                    \"flex\": 1,\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 20,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 12,\n                    \"paddingRight\": 12,\n                    \"paddingTop\": 8,\n                    \"width\": \"100%\",\n                  }\n                }\n                textAlignVertical=\"top\"\n                underlineColorAndroid=\"transparent\"\n              />\n            </View>\n          </View>\n        </View>\n      </View>\n    </RCTScrollView>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots TextArea Value Controlled 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        isFocused={false}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"height\": 80,\n            \"maxWidth\": 300,\n            \"overflow\": \"hidden\",\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <TextInput\n          accessible={true}\n          allowFontScaling={true}\n          dataSet={Object {}}\n          editable={true}\n          multiline={true}\n          onBlur={[Function]}\n          onChange={[Function]}\n          onChangeText={[Function]}\n          onFocus={[Function]}\n          onKeyPress={[Function]}\n          placeholderTextColor=\"#a3a3a3\"\n          rejectResponderTermination={true}\n          secureTextEntry={false}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"color\": \"#171717\",\n              \"flex\": 1,\n              \"fontFamily\": undefined,\n              \"fontSize\": 12,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 8,\n              \"width\": \"100%\",\n            }\n          }\n          textAlignVertical=\"top\"\n          underlineColorAndroid=\"transparent\"\n          value=\"Value Controlled\"\n        />\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Toast Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Show Toast\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Toast CloseToast 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"flexDirection\": \"column\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Toast\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#0891b2\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Close last toast\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#0891b2\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Close all toasts\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Toast Custom Component 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Custom Toast\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Toast Custom Component with custom Id 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"#0891b2\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 10,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 10,\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n          }\n        }\n        test={true}\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#fafafa\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Custom Toast\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Toast Prevent Duplicate 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Click me!\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Toast Status Recipies 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      >\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"success\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#16a34a\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                success\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"error\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#dc2626\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                error\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"info\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0284c7\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                info\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"warning\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#ea580c\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                warning\n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Toast Toast Positions 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      >\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Bottom\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Top\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Top left\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Top right\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Bottom left\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Bottom right\n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Toast Toast Ref 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Show Toast\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Toast Variants Recipies 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      >\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                solid\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                subtle\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                left-accent\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                top-accent\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                outline\n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Tooltip Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onMouseEnter={[Function]}\n        onMouseLeave={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              More\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Tooltip Customizing 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onMouseEnter={[Function]}\n        onMouseLeave={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              More\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Tooltip Tooltip Positions 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignSelf\": \"flex-start\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onMouseEnter={[Function]}\n        onMouseLeave={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"alignSelf\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              ToolTip\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 24,\n          }\n        }\n      />\n      <View\n        accessibilityLabel=\"Select a position for Tooltip\"\n        accessibilityRole=\"button\"\n        accessible={true}\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"marginLeft\": 0,\n            \"marginRight\": 0,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          isFocused={false}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#d4d4d4\",\n              \"borderRadius\": 4,\n              \"borderWidth\": 1,\n              \"flexDirection\": \"row\",\n              \"overflow\": \"hidden\",\n            }\n          }\n        >\n          <TextInput\n            accessible={true}\n            allowFontScaling={true}\n            aria-hidden={true}\n            dataSet={Object {}}\n            editable={false}\n            focusable={false}\n            importantForAccessibility=\"no\"\n            onBlur={[Function]}\n            onFocus={[Function]}\n            onKeyPress={[Function]}\n            placeholderTextColor=\"#a3a3a3\"\n            pointerEvents=\"none\"\n            rejectResponderTermination={true}\n            secureTextEntry={false}\n            selection={\n              Object {\n                \"start\": 0,\n              }\n            }\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"color\": \"#171717\",\n                \"flex\": 1,\n                \"fontFamily\": undefined,\n                \"fontSize\": 12,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"height\": \"100%\",\n                \"paddingBottom\": 8,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 8,\n                \"width\": \"100%\",\n              }\n            }\n            underlineColorAndroid=\"transparent\"\n            value=\"Top Left\"\n          />\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          />\n          <RNSVGSvgView\n            accessibilityRole=\"image\"\n            align=\"xMidYMid\"\n            bbHeight={24}\n            bbWidth={24}\n            color={-9211021}\n            dataSet={Object {}}\n            focusable={false}\n            meetOrSlice={0}\n            minX={0}\n            minY={0}\n            stroke=\"\"\n            style={\n              Array [\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderWidth\": 0,\n                },\n                Object {\n                  \"color\": \"#737373\",\n                  \"height\": 24,\n                  \"marginRight\": 12,\n                  \"paddingBottom\": 4,\n                  \"paddingLeft\": 4,\n                  \"paddingRight\": 4,\n                  \"paddingTop\": 4,\n                  \"width\": 24,\n                },\n                Object {\n                  \"flex\": 0,\n                  \"height\": 24,\n                  \"width\": 24,\n                },\n              ]\n            }\n            tintColor={-9211021}\n            vbHeight={24}\n            vbWidth={24}\n          >\n            <RNSVGGroup\n              propList={\n                Array [\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            >\n              <RNSVGGroup>\n                <RNSVGPath\n                  d=\"M20.2286 6L11.9973 14.3785L3.76862 6.00268L2 7.80293L12 18L22 7.80293L20.2286 6Z\"\n                  fill={\n                    Array [\n                      2,\n                    ]\n                  }\n                  propList={\n                    Array [\n                      \"fill\",\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                />\n              </RNSVGGroup>\n            </RNSVGGroup>\n          </RNSVGSvgView>\n        </View>\n      </View>\n      <Modal\n        animationType=\"slide\"\n        hardwareAccelerated={false}\n        onRequestClose={[Function]}\n        statusBarTranslucent={true}\n        transparent={true}\n        visible={false}\n      >\n        <View\n          pointerEvents=\"none\"\n          style={\n            Object {\n              \"bottom\": 0,\n              \"left\": 0,\n              \"opacity\": 0,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"top\": 0,\n              \"transform\": Array [\n                Object {\n                  \"translateY\": 0,\n                },\n                Object {\n                  \"translateX\": 0,\n                },\n                Object {\n                  \"scale\": 1,\n                },\n                Object {\n                  \"scaleX\": 1,\n                },\n                Object {\n                  \"scaleY\": 1,\n                },\n                Object {\n                  \"rotate\": \"0deg\",\n                },\n              ],\n            }\n          }\n        >\n          <View\n            accessible={false}\n            dataSet={Object {}}\n            focusable={true}\n            importantForAccessibility=\"no\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"backgroundColor\": \"rgb(0, 0, 0)\",\n                \"bottom\": 0,\n                \"left\": 0,\n                \"opacity\": 0.3,\n                \"position\": \"absolute\",\n                \"right\": 0,\n                \"top\": 0,\n              }\n            }\n          />\n        </View>\n        <View\n          pointerEvents=\"none\"\n          style={\n            Object {\n              \"bottom\": 0,\n              \"height\": \"100%\",\n              \"left\": 0,\n              \"opacity\": 1,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"transform\": Array [\n                Object {\n                  \"translateY\": 0,\n                },\n                Object {\n                  \"translateX\": 0,\n                },\n                Object {\n                  \"scale\": 1,\n                },\n                Object {\n                  \"scaleX\": 1,\n                },\n                Object {\n                  \"scaleY\": 1,\n                },\n                Object {\n                  \"rotate\": \"0deg\",\n                },\n              ],\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            onLayout={[Function]}\n            pointerEvents=\"box-none\"\n            style={\n              Object {\n                \"height\": \"100%\",\n                \"opacity\": 0,\n              }\n            }\n          >\n            <View\n              closeOnOverlayClick={true}\n              dataSet={Object {}}\n              pointerEvents=\"box-none\"\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"height\": \"100%\",\n                  \"justifyContent\": \"flex-end\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                onLayout={[Function]}\n                pointerEvents=\"box-none\"\n                style={\n                  Object {\n                    \"transform\": Array [\n                      Object {\n                        \"translateY\": 0,\n                      },\n                    ],\n                    \"width\": \"100%\",\n                  }\n                }\n              >\n                <View\n                  collapsable={false}\n                  dataSet={Object {}}\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                      \"paddingBottom\": 8,\n                      \"paddingTop\": 8,\n                    }\n                  }\n                />\n                <View\n                  accessibilityViewIsModal={true}\n                  aria-modal=\"true\"\n                  dataSet={Object {}}\n                  onAccessibilityEscape={[Function]}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"#fafafa\",\n                      \"borderRadius\": 0,\n                      \"borderTopLeftRadius\": 20,\n                      \"borderTopRightRadius\": 20,\n                      \"elevation\": 2,\n                      \"maxHeight\": 1184,\n                      \"overflow\": \"hidden\",\n                      \"paddingBottom\": 8,\n                      \"paddingLeft\": 8,\n                      \"paddingRight\": 8,\n                      \"paddingTop\": 8,\n                      \"shadowColor\": \"#000000\",\n                      \"shadowOffset\": Object {\n                        \"height\": 1,\n                        \"width\": 0,\n                      },\n                      \"shadowOpacity\": 0.2,\n                      \"shadowRadius\": 1.41,\n                      \"width\": \"100%\",\n                    }\n                  }\n                >\n                  <View\n                    collapsable={false}\n                    dataSet={Object {}}\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                        \"alignItems\": \"center\",\n                        \"marginTop\": -8,\n                        \"paddingBottom\": 12,\n                        \"paddingTop\": 12,\n                        \"width\": \"100%\",\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"backgroundColor\": \"#737373\",\n                          \"borderRadius\": 2,\n                          \"height\": 4,\n                          \"width\": 40,\n                        }\n                      }\n                    />\n                  </View>\n                  <RCTScrollView\n                    contentContainerStyle={\n                      Array [\n                        Object {},\n                        Object {\n                          \"dataSet\": Object {},\n                        },\n                        Object {},\n                      ]\n                    }\n                    data={\n                      Array [\n                        Object {\n                          \"label\": \"Top Left\",\n                          \"value\": \"top left\",\n                        },\n                        Object {\n                          \"label\": \"Top\",\n                          \"value\": \"top\",\n                        },\n                        Object {\n                          \"label\": \"Top Right\",\n                          \"value\": \"top right\",\n                        },\n                        Object {\n                          \"label\": \"Right Top\",\n                          \"value\": \"right top\",\n                        },\n                        Object {\n                          \"label\": \"Right\",\n                          \"value\": \"right\",\n                        },\n                        Object {\n                          \"label\": \"Right Bottom\",\n                          \"value\": \"right bottom\",\n                        },\n                        Object {\n                          \"label\": \"Bottom Left\",\n                          \"value\": \"bottom left\",\n                        },\n                        Object {\n                          \"label\": \"Bottom\",\n                          \"value\": \"bottom\",\n                        },\n                        Object {\n                          \"label\": \"Bottom Right\",\n                          \"value\": \"bottom right\",\n                        },\n                        Object {\n                          \"label\": \"Left Top\",\n                          \"value\": \"left top\",\n                        },\n                        Object {\n                          \"label\": \"Left\",\n                          \"value\": \"left\",\n                        },\n                        Object {\n                          \"label\": \"Left Bottom\",\n                          \"value\": \"left bottom\",\n                        },\n                      ]\n                    }\n                    dataSet={Object {}}\n                    disableVirtualization={false}\n                    getItem={[Function]}\n                    getItemCount={[Function]}\n                    horizontal={false}\n                    initialNumToRender={10}\n                    keyExtractor={[Function]}\n                    maxToRenderPerBatch={10}\n                    onContentSizeChange={[Function]}\n                    onEndReachedThreshold={2}\n                    onLayout={[Function]}\n                    onMomentumScrollEnd={[Function]}\n                    onScroll={[Function]}\n                    onScrollBeginDrag={[Function]}\n                    onScrollEndDrag={[Function]}\n                    removeClippedSubviews={true}\n                    renderItem={[Function]}\n                    scrollEventThrottle={50}\n                    stickyHeaderIndices={Array []}\n                    style={\n                      Object {\n                        \"width\": \"100%\",\n                      }\n                    }\n                    updateCellsBatchingPeriod={50}\n                    viewabilityConfigCallbackPairs={Array []}\n                    windowSize={21}\n                  >\n                    <View>\n                      <View\n                        onLayout={[Function]}\n                        style={null}\n                      >\n                        <View\n                          accessibilityState={\n                            Object {\n                              \"selected\": true,\n                            }\n                          }\n                          accessible={true}\n                          dataSet={Object {}}\n                          focusable={true}\n                          label=\"Top Left\"\n                          onBlur={[Function]}\n                          onClick={[Function]}\n                          onFocus={[Function]}\n                          onHoverIn={[Function]}\n                          onHoverOut={[Function]}\n                          onResponderGrant={[Function]}\n                          onResponderMove={[Function]}\n                          onResponderRelease={[Function]}\n                          onResponderTerminate={[Function]}\n                          onResponderTerminationRequest={[Function]}\n                          onStartShouldSetResponder={[Function]}\n                          style={\n                            Object {\n                              \"backgroundColor\": \"#0891b2\",\n                              \"justifyContent\": \"flex-start\",\n                              \"paddingBottom\": 16,\n                              \"paddingLeft\": 16,\n                              \"paddingRight\": 16,\n                              \"paddingTop\": 16,\n                              \"width\": \"100%\",\n                            }\n                          }\n                          value=\"top left\"\n                        >\n                          <View\n                            dataSet={Object {}}\n                            style={\n                              Object {\n                                \"flexDirection\": \"row\",\n                              }\n                            }\n                            test={true}\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={Object {}}\n                            >\n                              <Text\n                                dataSet={Object {}}\n                                style={\n                                  Object {\n                                    \"backgroundColor\": undefined,\n                                    \"color\": \"#171717\",\n                                    \"fontFamily\": undefined,\n                                    \"fontSize\": 16,\n                                    \"fontStyle\": \"normal\",\n                                    \"fontWeight\": \"400\",\n                                    \"letterSpacing\": 0,\n                                    \"lineHeight\": 24,\n                                    \"textDecorationLine\": undefined,\n                                  }\n                                }\n                              >\n                                Top Left\n                              </Text>\n                            </View>\n                            <View\n                              dataSet={Object {}}\n                              style={\n                                Object {\n                                  \"width\": 16,\n                                }\n                              }\n                            />\n                            <RNSVGSvgView\n                              accessibilityRole=\"image\"\n                              align=\"xMidYMid\"\n                              bbHeight={16}\n                              bbWidth={16}\n                              color={-9211021}\n                              dataSet={Object {}}\n                              focusable={false}\n                              meetOrSlice={0}\n                              minX={0}\n                              minY={0}\n                              stroke=\"\"\n                              style={\n                                Array [\n                                  Object {\n                                    \"backgroundColor\": \"transparent\",\n                                    \"borderWidth\": 0,\n                                  },\n                                  Object {\n                                    \"color\": \"#737373\",\n                                    \"height\": 16,\n                                    \"width\": 16,\n                                  },\n                                  Object {\n                                    \"flex\": 0,\n                                    \"height\": 16,\n                                    \"width\": 16,\n                                  },\n                                ]\n                              }\n                              tintColor={-9211021}\n                              vbHeight={24}\n                              vbWidth={24}\n                            >\n                              <RNSVGGroup\n                                propList={\n                                  Array [\n                                    \"stroke\",\n                                  ]\n                                }\n                                stroke={null}\n                              >\n                                <RNSVGGroup>\n                                  <RNSVGPath\n                                    d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                                    fill={\n                                      Array [\n                                        2,\n                                      ]\n                                    }\n                                    propList={\n                                      Array [\n                                        \"fill\",\n                                        \"stroke\",\n                                      ]\n                                    }\n                                    stroke={null}\n                                  />\n                                </RNSVGGroup>\n                              </RNSVGGroup>\n                            </RNSVGSvgView>\n                          </View>\n                        </View>\n                      </View>\n                      <View\n                        onLayout={[Function]}\n                        style={null}\n                      >\n                        <View\n                          accessibilityState={\n                            Object {\n                              \"selected\": false,\n                            }\n                          }\n                          accessible={true}\n                          dataSet={Object {}}\n                          focusable={true}\n                          label=\"Top\"\n                          onBlur={[Function]}\n                          onClick={[Function]}\n                          onFocus={[Function]}\n                          onHoverIn={[Function]}\n                          onHoverOut={[Function]}\n                          onResponderGrant={[Function]}\n                          onResponderMove={[Function]}\n                          onResponderRelease={[Function]}\n                          onResponderTerminate={[Function]}\n                          onResponderTerminationRequest={[Function]}\n                          onStartShouldSetResponder={[Function]}\n                          style={\n                            Object {\n                              \"backgroundColor\": \"#fafafa\",\n                              \"justifyContent\": \"flex-start\",\n                              \"paddingBottom\": 16,\n                              \"paddingLeft\": 16,\n                              \"paddingRight\": 16,\n                              \"paddingTop\": 16,\n                              \"width\": \"100%\",\n                            }\n                          }\n                          value=\"top\"\n                        >\n                          <View\n                            dataSet={Object {}}\n                            style={\n                              Object {\n                                \"flexDirection\": \"row\",\n                              }\n                            }\n                            test={true}\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={Object {}}\n                            >\n                              <Text\n                                dataSet={Object {}}\n                                style={\n                                  Object {\n                                    \"backgroundColor\": undefined,\n                                    \"color\": \"#171717\",\n                                    \"fontFamily\": undefined,\n                                    \"fontSize\": 16,\n                                    \"fontStyle\": \"normal\",\n                                    \"fontWeight\": \"400\",\n                                    \"letterSpacing\": 0,\n                                    \"lineHeight\": 24,\n                                    \"textDecorationLine\": undefined,\n                                  }\n                                }\n                              >\n                                Top\n                              </Text>\n                            </View>\n                          </View>\n                        </View>\n                      </View>\n                      <View\n                        onLayout={[Function]}\n                        style={null}\n                      >\n                        <View\n                          accessibilityState={\n                            Object {\n                              \"selected\": false,\n                            }\n                          }\n                          accessible={true}\n                          dataSet={Object {}}\n                          focusable={true}\n                          label=\"Top Right\"\n                          onBlur={[Function]}\n                          onClick={[Function]}\n                          onFocus={[Function]}\n                          onHoverIn={[Function]}\n                          onHoverOut={[Function]}\n                          onResponderGrant={[Function]}\n                          onResponderMove={[Function]}\n                          onResponderRelease={[Function]}\n                          onResponderTerminate={[Function]}\n                          onResponderTerminationRequest={[Function]}\n                          onStartShouldSetResponder={[Function]}\n                          style={\n                            Object {\n                              \"backgroundColor\": \"#fafafa\",\n                              \"justifyContent\": \"flex-start\",\n                              \"paddingBottom\": 16,\n                              \"paddingLeft\": 16,\n                              \"paddingRight\": 16,\n                              \"paddingTop\": 16,\n                              \"width\": \"100%\",\n                            }\n                          }\n                          value=\"top right\"\n                        >\n                          <View\n                            dataSet={Object {}}\n                            style={\n                              Object {\n                                \"flexDirection\": \"row\",\n                              }\n                            }\n                            test={true}\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={Object {}}\n                            >\n                              <Text\n                                dataSet={Object {}}\n                                style={\n                                  Object {\n                                    \"backgroundColor\": undefined,\n                                    \"color\": \"#171717\",\n                                    \"fontFamily\": undefined,\n                                    \"fontSize\": 16,\n                                    \"fontStyle\": \"normal\",\n                                    \"fontWeight\": \"400\",\n                                    \"letterSpacing\": 0,\n                                    \"lineHeight\": 24,\n                                    \"textDecorationLine\": undefined,\n                                  }\n                                }\n                              >\n                                Top Right\n                              </Text>\n                            </View>\n                          </View>\n                        </View>\n                      </View>\n                      <View\n                        onLayout={[Function]}\n                        style={null}\n                      >\n                        <View\n                          accessibilityState={\n                            Object {\n                              \"selected\": false,\n                            }\n                          }\n                          accessible={true}\n                          dataSet={Object {}}\n                          focusable={true}\n                          label=\"Right Top\"\n                          onBlur={[Function]}\n                          onClick={[Function]}\n                          onFocus={[Function]}\n                          onHoverIn={[Function]}\n                          onHoverOut={[Function]}\n                          onResponderGrant={[Function]}\n                          onResponderMove={[Function]}\n                          onResponderRelease={[Function]}\n                          onResponderTerminate={[Function]}\n                          onResponderTerminationRequest={[Function]}\n                          onStartShouldSetResponder={[Function]}\n                          style={\n                            Object {\n                              \"backgroundColor\": \"#fafafa\",\n                              \"justifyContent\": \"flex-start\",\n                              \"paddingBottom\": 16,\n                              \"paddingLeft\": 16,\n                              \"paddingRight\": 16,\n                              \"paddingTop\": 16,\n                              \"width\": \"100%\",\n                            }\n                          }\n                          value=\"right top\"\n                        >\n                          <View\n                            dataSet={Object {}}\n                            style={\n                              Object {\n                                \"flexDirection\": \"row\",\n                              }\n                            }\n                            test={true}\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={Object {}}\n                            >\n                              <Text\n                                dataSet={Object {}}\n                                style={\n                                  Object {\n                                    \"backgroundColor\": undefined,\n                                    \"color\": \"#171717\",\n                                    \"fontFamily\": undefined,\n                                    \"fontSize\": 16,\n                                    \"fontStyle\": \"normal\",\n                                    \"fontWeight\": \"400\",\n                                    \"letterSpacing\": 0,\n                                    \"lineHeight\": 24,\n                                    \"textDecorationLine\": undefined,\n                                  }\n                                }\n                              >\n                                Right Top\n                              </Text>\n                            </View>\n                          </View>\n                        </View>\n                      </View>\n                      <View\n                        onLayout={[Function]}\n                        style={null}\n                      >\n                        <View\n                          accessibilityState={\n                            Object {\n                              \"selected\": false,\n                            }\n                          }\n                          accessible={true}\n                          dataSet={Object {}}\n                          focusable={true}\n                          label=\"Right\"\n                          onBlur={[Function]}\n                          onClick={[Function]}\n                          onFocus={[Function]}\n                          onHoverIn={[Function]}\n                          onHoverOut={[Function]}\n                          onResponderGrant={[Function]}\n                          onResponderMove={[Function]}\n                          onResponderRelease={[Function]}\n                          onResponderTerminate={[Function]}\n                          onResponderTerminationRequest={[Function]}\n                          onStartShouldSetResponder={[Function]}\n                          style={\n                            Object {\n                              \"backgroundColor\": \"#fafafa\",\n                              \"justifyContent\": \"flex-start\",\n                              \"paddingBottom\": 16,\n                              \"paddingLeft\": 16,\n                              \"paddingRight\": 16,\n                              \"paddingTop\": 16,\n                              \"width\": \"100%\",\n                            }\n                          }\n                          value=\"right\"\n                        >\n                          <View\n                            dataSet={Object {}}\n                            style={\n                              Object {\n                                \"flexDirection\": \"row\",\n                              }\n                            }\n                            test={true}\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={Object {}}\n                            >\n                              <Text\n                                dataSet={Object {}}\n                                style={\n                                  Object {\n                                    \"backgroundColor\": undefined,\n                                    \"color\": \"#171717\",\n                                    \"fontFamily\": undefined,\n                                    \"fontSize\": 16,\n                                    \"fontStyle\": \"normal\",\n                                    \"fontWeight\": \"400\",\n                                    \"letterSpacing\": 0,\n                                    \"lineHeight\": 24,\n                                    \"textDecorationLine\": undefined,\n                                  }\n                                }\n                              >\n                                Right\n                              </Text>\n                            </View>\n                          </View>\n                        </View>\n                      </View>\n                      <View\n                        onLayout={[Function]}\n                        style={null}\n                      >\n                        <View\n                          accessibilityState={\n                            Object {\n                              \"selected\": false,\n                            }\n                          }\n                          accessible={true}\n                          dataSet={Object {}}\n                          focusable={true}\n                          label=\"Right Bottom\"\n                          onBlur={[Function]}\n                          onClick={[Function]}\n                          onFocus={[Function]}\n                          onHoverIn={[Function]}\n                          onHoverOut={[Function]}\n                          onResponderGrant={[Function]}\n                          onResponderMove={[Function]}\n                          onResponderRelease={[Function]}\n                          onResponderTerminate={[Function]}\n                          onResponderTerminationRequest={[Function]}\n                          onStartShouldSetResponder={[Function]}\n                          style={\n                            Object {\n                              \"backgroundColor\": \"#fafafa\",\n                              \"justifyContent\": \"flex-start\",\n                              \"paddingBottom\": 16,\n                              \"paddingLeft\": 16,\n                              \"paddingRight\": 16,\n                              \"paddingTop\": 16,\n                              \"width\": \"100%\",\n                            }\n                          }\n                          value=\"right bottom\"\n                        >\n                          <View\n                            dataSet={Object {}}\n                            style={\n                              Object {\n                                \"flexDirection\": \"row\",\n                              }\n                            }\n                            test={true}\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={Object {}}\n                            >\n                              <Text\n                                dataSet={Object {}}\n                                style={\n                                  Object {\n                                    \"backgroundColor\": undefined,\n                                    \"color\": \"#171717\",\n                                    \"fontFamily\": undefined,\n                                    \"fontSize\": 16,\n                                    \"fontStyle\": \"normal\",\n                                    \"fontWeight\": \"400\",\n                                    \"letterSpacing\": 0,\n                                    \"lineHeight\": 24,\n                                    \"textDecorationLine\": undefined,\n                                  }\n                                }\n                              >\n                                Right Bottom\n                              </Text>\n                            </View>\n                          </View>\n                        </View>\n                      </View>\n                      <View\n                        onLayout={[Function]}\n                        style={null}\n                      >\n                        <View\n                          accessibilityState={\n                            Object {\n                              \"selected\": false,\n                            }\n                          }\n                          accessible={true}\n                          dataSet={Object {}}\n                          focusable={true}\n                          label=\"Bottom Left\"\n                          onBlur={[Function]}\n                          onClick={[Function]}\n                          onFocus={[Function]}\n                          onHoverIn={[Function]}\n                          onHoverOut={[Function]}\n                          onResponderGrant={[Function]}\n                          onResponderMove={[Function]}\n                          onResponderRelease={[Function]}\n                          onResponderTerminate={[Function]}\n                          onResponderTerminationRequest={[Function]}\n                          onStartShouldSetResponder={[Function]}\n                          style={\n                            Object {\n                              \"backgroundColor\": \"#fafafa\",\n                              \"justifyContent\": \"flex-start\",\n                              \"paddingBottom\": 16,\n                              \"paddingLeft\": 16,\n                              \"paddingRight\": 16,\n                              \"paddingTop\": 16,\n                              \"width\": \"100%\",\n                            }\n                          }\n                          value=\"bottom left\"\n                        >\n                          <View\n                            dataSet={Object {}}\n                            style={\n                              Object {\n                                \"flexDirection\": \"row\",\n                              }\n                            }\n                            test={true}\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={Object {}}\n                            >\n                              <Text\n                                dataSet={Object {}}\n                                style={\n                                  Object {\n                                    \"backgroundColor\": undefined,\n                                    \"color\": \"#171717\",\n                                    \"fontFamily\": undefined,\n                                    \"fontSize\": 16,\n                                    \"fontStyle\": \"normal\",\n                                    \"fontWeight\": \"400\",\n                                    \"letterSpacing\": 0,\n                                    \"lineHeight\": 24,\n                                    \"textDecorationLine\": undefined,\n                                  }\n                                }\n                              >\n                                Bottom Left\n                              </Text>\n                            </View>\n                          </View>\n                        </View>\n                      </View>\n                      <View\n                        onLayout={[Function]}\n                        style={null}\n                      >\n                        <View\n                          accessibilityState={\n                            Object {\n                              \"selected\": false,\n                            }\n                          }\n                          accessible={true}\n                          dataSet={Object {}}\n                          focusable={true}\n                          label=\"Bottom\"\n                          onBlur={[Function]}\n                          onClick={[Function]}\n                          onFocus={[Function]}\n                          onHoverIn={[Function]}\n                          onHoverOut={[Function]}\n                          onResponderGrant={[Function]}\n                          onResponderMove={[Function]}\n                          onResponderRelease={[Function]}\n                          onResponderTerminate={[Function]}\n                          onResponderTerminationRequest={[Function]}\n                          onStartShouldSetResponder={[Function]}\n                          style={\n                            Object {\n                              \"backgroundColor\": \"#fafafa\",\n                              \"justifyContent\": \"flex-start\",\n                              \"paddingBottom\": 16,\n                              \"paddingLeft\": 16,\n                              \"paddingRight\": 16,\n                              \"paddingTop\": 16,\n                              \"width\": \"100%\",\n                            }\n                          }\n                          value=\"bottom\"\n                        >\n                          <View\n                            dataSet={Object {}}\n                            style={\n                              Object {\n                                \"flexDirection\": \"row\",\n                              }\n                            }\n                            test={true}\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={Object {}}\n                            >\n                              <Text\n                                dataSet={Object {}}\n                                style={\n                                  Object {\n                                    \"backgroundColor\": undefined,\n                                    \"color\": \"#171717\",\n                                    \"fontFamily\": undefined,\n                                    \"fontSize\": 16,\n                                    \"fontStyle\": \"normal\",\n                                    \"fontWeight\": \"400\",\n                                    \"letterSpacing\": 0,\n                                    \"lineHeight\": 24,\n                                    \"textDecorationLine\": undefined,\n                                  }\n                                }\n                              >\n                                Bottom\n                              </Text>\n                            </View>\n                          </View>\n                        </View>\n                      </View>\n                      <View\n                        onLayout={[Function]}\n                        style={null}\n                      >\n                        <View\n                          accessibilityState={\n                            Object {\n                              \"selected\": false,\n                            }\n                          }\n                          accessible={true}\n                          dataSet={Object {}}\n                          focusable={true}\n                          label=\"Bottom Right\"\n                          onBlur={[Function]}\n                          onClick={[Function]}\n                          onFocus={[Function]}\n                          onHoverIn={[Function]}\n                          onHoverOut={[Function]}\n                          onResponderGrant={[Function]}\n                          onResponderMove={[Function]}\n                          onResponderRelease={[Function]}\n                          onResponderTerminate={[Function]}\n                          onResponderTerminationRequest={[Function]}\n                          onStartShouldSetResponder={[Function]}\n                          style={\n                            Object {\n                              \"backgroundColor\": \"#fafafa\",\n                              \"justifyContent\": \"flex-start\",\n                              \"paddingBottom\": 16,\n                              \"paddingLeft\": 16,\n                              \"paddingRight\": 16,\n                              \"paddingTop\": 16,\n                              \"width\": \"100%\",\n                            }\n                          }\n                          value=\"bottom right\"\n                        >\n                          <View\n                            dataSet={Object {}}\n                            style={\n                              Object {\n                                \"flexDirection\": \"row\",\n                              }\n                            }\n                            test={true}\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={Object {}}\n                            >\n                              <Text\n                                dataSet={Object {}}\n                                style={\n                                  Object {\n                                    \"backgroundColor\": undefined,\n                                    \"color\": \"#171717\",\n                                    \"fontFamily\": undefined,\n                                    \"fontSize\": 16,\n                                    \"fontStyle\": \"normal\",\n                                    \"fontWeight\": \"400\",\n                                    \"letterSpacing\": 0,\n                                    \"lineHeight\": 24,\n                                    \"textDecorationLine\": undefined,\n                                  }\n                                }\n                              >\n                                Bottom Right\n                              </Text>\n                            </View>\n                          </View>\n                        </View>\n                      </View>\n                      <View\n                        onLayout={[Function]}\n                        style={null}\n                      >\n                        <View\n                          accessibilityState={\n                            Object {\n                              \"selected\": false,\n                            }\n                          }\n                          accessible={true}\n                          dataSet={Object {}}\n                          focusable={true}\n                          label=\"Left Top\"\n                          onBlur={[Function]}\n                          onClick={[Function]}\n                          onFocus={[Function]}\n                          onHoverIn={[Function]}\n                          onHoverOut={[Function]}\n                          onResponderGrant={[Function]}\n                          onResponderMove={[Function]}\n                          onResponderRelease={[Function]}\n                          onResponderTerminate={[Function]}\n                          onResponderTerminationRequest={[Function]}\n                          onStartShouldSetResponder={[Function]}\n                          style={\n                            Object {\n                              \"backgroundColor\": \"#fafafa\",\n                              \"justifyContent\": \"flex-start\",\n                              \"paddingBottom\": 16,\n                              \"paddingLeft\": 16,\n                              \"paddingRight\": 16,\n                              \"paddingTop\": 16,\n                              \"width\": \"100%\",\n                            }\n                          }\n                          value=\"left top\"\n                        >\n                          <View\n                            dataSet={Object {}}\n                            style={\n                              Object {\n                                \"flexDirection\": \"row\",\n                              }\n                            }\n                            test={true}\n                          >\n                            <View\n                              dataSet={Object {}}\n                              style={Object {}}\n                            >\n                              <Text\n                                dataSet={Object {}}\n                                style={\n                                  Object {\n                                    \"backgroundColor\": undefined,\n                                    \"color\": \"#171717\",\n                                    \"fontFamily\": undefined,\n                                    \"fontSize\": 16,\n                                    \"fontStyle\": \"normal\",\n                                    \"fontWeight\": \"400\",\n                                    \"letterSpacing\": 0,\n                                    \"lineHeight\": 24,\n                                    \"textDecorationLine\": undefined,\n                                  }\n                                }\n                              >\n                                Left Top\n                              </Text>\n                            </View>\n                          </View>\n                        </View>\n                      </View>\n                      <View\n                        style={\n                          Object {\n                            \"height\": 0,\n                          }\n                        }\n                      />\n                    </View>\n                  </RCTScrollView>\n                </View>\n              </View>\n            </View>\n          </View>\n        </View>\n      </Modal>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Transitions Fade 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Show\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        pointerEvents=\"none\"\n        style={\n          Object {\n            \"opacity\": 0,\n            \"transform\": Array [\n              Object {\n                \"translateY\": 0,\n              },\n              Object {\n                \"translateX\": 0,\n              },\n              Object {\n                \"scale\": 1,\n              },\n              Object {\n                \"scaleX\": 1,\n              },\n              Object {\n                \"scaleY\": 1,\n              },\n              Object {\n                \"rotate\": \"0deg\",\n              },\n            ],\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#14b8a6\",\n              \"borderRadius\": 6,\n              \"display\": \"flex\",\n              \"height\": 100,\n              \"justifyContent\": \"center\",\n              \"marginTop\": 28,\n              \"width\": 200,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#FFFFFF\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Fade\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Transitions ScaleFade 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Show\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        pointerEvents=\"none\"\n        style={\n          Object {\n            \"opacity\": 0,\n            \"transform\": Array [\n              Object {\n                \"translateY\": 0,\n              },\n              Object {\n                \"translateX\": 0,\n              },\n              Object {\n                \"scale\": 0,\n              },\n              Object {\n                \"scaleX\": 1,\n              },\n              Object {\n                \"scaleY\": 1,\n              },\n              Object {\n                \"rotate\": \"0deg\",\n              },\n            ],\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#14b8a6\",\n              \"borderRadius\": 6,\n              \"display\": \"flex\",\n              \"height\": 100,\n              \"justifyContent\": \"center\",\n              \"marginTop\": 28,\n              \"width\": 200,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            ScaleFade\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Transitions Slide 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"height\": 128,\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(55, 65, 81, 0.3)\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#000000\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Check Internet Connection\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Transitions Slide wrapped inside parent 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"justifyContent\": \"center\",\n            \"width\": 300,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"flex-end\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 24,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 30,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Order\n            </Text>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"space-between\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"500\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Sub Total\n            </Text>\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#94a3b8\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              $298.77\n            </Text>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"space-between\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"500\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Tax\n            </Text>\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#94a3b8\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              $38.84\n            </Text>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"space-between\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"500\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Total Amount\n            </Text>\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#059669\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              $337.61\n            </Text>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"marginTop\": 8,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Promo Code\n            </Text>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 8,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                isFocused={false}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"borderColor\": \"#d4d4d4\",\n                    \"borderRadius\": 4,\n                    \"borderWidth\": 1,\n                    \"flex\": 1,\n                    \"flexDirection\": \"row\",\n                    \"overflow\": \"hidden\",\n                  }\n                }\n              >\n                <TextInput\n                  accessible={true}\n                  allowFontScaling={true}\n                  dataSet={Object {}}\n                  editable={true}\n                  onBlur={[Function]}\n                  onFocus={[Function]}\n                  onKeyPress={[Function]}\n                  placeholderTextColor=\"#a3a3a3\"\n                  rejectResponderTermination={true}\n                  secureTextEntry={false}\n                  style={\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"color\": \"#171717\",\n                      \"flex\": 1,\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 12,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"height\": \"100%\",\n                      \"paddingBottom\": 8,\n                      \"paddingLeft\": 12,\n                      \"paddingRight\": 12,\n                      \"paddingTop\": 8,\n                      \"width\": \"100%\",\n                    }\n                  }\n                  underlineColorAndroid=\"transparent\"\n                />\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 12,\n                  }\n                }\n              />\n              <View\n                accessibilityRole=\"button\"\n                accessible={true}\n                colorScheme=\"primary\"\n                dataSet={Object {}}\n                focusable={true}\n                onBlur={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onHoverIn={[Function]}\n                onHoverOut={[Function]}\n                onResponderGrant={[Function]}\n                onResponderMove={[Function]}\n                onResponderRelease={[Function]}\n                onResponderTerminate={[Function]}\n                onResponderTerminationRequest={[Function]}\n                onStartShouldSetResponder={[Function]}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"borderColor\": \"#d4d4d4\",\n                    \"borderRadius\": 4,\n                    \"borderWidth\": 1,\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"center\",\n                    \"paddingBottom\": 10,\n                    \"paddingLeft\": 12,\n                    \"paddingRight\": 12,\n                    \"paddingTop\": 10,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                    }\n                  }\n                  test={true}\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={Object {}}\n                  >\n                    <Text\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"backgroundColor\": undefined,\n                          \"color\": \"#0891b2\",\n                          \"fontFamily\": undefined,\n                          \"fontSize\": 14,\n                          \"fontStyle\": \"normal\",\n                          \"fontWeight\": \"400\",\n                          \"letterSpacing\": 0,\n                          \"lineHeight\": 21,\n                          \"textDecorationLine\": undefined,\n                        }\n                      }\n                    >\n                      Apply\n                    </Text>\n                  </View>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"primary\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#0891b2\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": 8,\n                \"marginTop\": 8,\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#fafafa\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Place Order\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Transitions SlideComposition 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 300,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"flex-start\",\n              \"justifyContent\": \"center\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"flex-end\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 24,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 30,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Order\n              </Text>\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"flexGrow\": 1,\n                  }\n                }\n              />\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={-1419252}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#ea580c\",\n                      \"height\": 12,\n                      \"marginBottom\": 6,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={-1419252}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M11.9836 0.00267822C8.77744 0.0551662 5.72075 1.36728 3.47427 3.65538C2.35024 4.77447 1.46338 6.10869 0.866705 7.57831C0.270027 9.04793 -0.0242179 10.6228 0.00155827 12.2087C-0.000286057 13.7583 0.303697 15.2931 0.896087 16.7251C1.48848 18.1571 2.35763 19.458 3.45373 20.5535C4.54983 21.6489 5.85133 22.5173 7.28365 23.1089C8.71596 23.7004 10.2509 24.0035 11.8006 24.0007H12.0146C15.2217 23.9677 18.2847 22.6638 20.5316 20.3751C22.7785 18.0864 24.0257 14.9999 23.9996 11.7927C24.0033 10.2243 23.6933 8.6709 23.0879 7.22398C22.4825 5.77706 21.5939 4.4658 20.4744 3.36731C19.3548 2.26882 18.0269 1.40527 16.5688 0.827453C15.1106 0.249636 13.5517 -0.0307856 11.9836 0.00267822ZM10.5007 16.5433C10.4935 16.3473 10.5254 16.1517 10.5947 15.9682C10.6639 15.7846 10.7691 15.6167 10.904 15.4742C11.0389 15.3318 11.2009 15.2177 11.3804 15.1386C11.5599 15.0594 11.7534 15.0169 11.9496 15.0135H11.9766C12.3712 15.0142 12.7501 15.1677 13.034 15.4417C13.3179 15.7157 13.4847 16.089 13.4995 16.4833C13.5068 16.6794 13.4749 16.875 13.4057 17.0586C13.3365 17.2423 13.2314 17.4102 13.0965 17.5527C12.9615 17.6952 12.7995 17.8093 12.6199 17.8884C12.4403 17.9674 12.2468 18.0099 12.0506 18.0132H12.0236C11.6291 18.0119 11.2505 17.8583 10.9667 17.5844C10.6829 17.3105 10.5159 16.9375 10.5007 16.5433ZM11.0007 12.5017V6.50215C11.0007 6.23695 11.106 5.98262 11.2935 5.7951C11.481 5.60758 11.7354 5.50223 12.0006 5.50223C12.2658 5.50223 12.5201 5.60758 12.7076 5.7951C12.8951 5.98262 13.0005 6.23695 13.0005 6.50215V12.5017C13.0005 12.7669 12.8951 13.0212 12.7076 13.2087C12.5201 13.3962 12.2658 13.5016 12.0006 13.5016C11.7354 13.5016 11.481 13.3962 11.2935 13.2087C11.106 13.0212 11.0007 12.7669 11.0007 12.5017Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"space-between\",\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Sub Total\n              </Text>\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#94a3b8\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                $298.77\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"space-between\",\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Tax\n              </Text>\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#94a3b8\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                $38.84\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"space-between\",\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Total Amount\n              </Text>\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#22c55e\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                $337.61\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"marginTop\": 8,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Promo Code\n              </Text>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"height\": 8,\n                  }\n                }\n              />\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"flexDirection\": \"row\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  isFocused={false}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"borderColor\": \"#d4d4d4\",\n                      \"borderRadius\": 4,\n                      \"borderWidth\": 1,\n                      \"flex\": 1,\n                      \"flexDirection\": \"row\",\n                      \"overflow\": \"hidden\",\n                    }\n                  }\n                >\n                  <TextInput\n                    accessible={true}\n                    allowFontScaling={true}\n                    dataSet={Object {}}\n                    editable={true}\n                    onBlur={[Function]}\n                    onFocus={[Function]}\n                    onKeyPress={[Function]}\n                    placeholderTextColor=\"#a3a3a3\"\n                    rejectResponderTermination={true}\n                    secureTextEntry={false}\n                    style={\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"color\": \"#171717\",\n                        \"flex\": 1,\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 12,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"height\": \"100%\",\n                        \"paddingBottom\": 8,\n                        \"paddingLeft\": 12,\n                        \"paddingRight\": 12,\n                        \"paddingTop\": 8,\n                        \"width\": \"100%\",\n                      }\n                    }\n                    underlineColorAndroid=\"transparent\"\n                  />\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 12,\n                    }\n                  }\n                />\n                <View\n                  accessibilityRole=\"button\"\n                  accessible={true}\n                  colorScheme=\"primary\"\n                  dataSet={Object {}}\n                  focusable={true}\n                  onBlur={[Function]}\n                  onClick={[Function]}\n                  onFocus={[Function]}\n                  onHoverIn={[Function]}\n                  onHoverOut={[Function]}\n                  onResponderGrant={[Function]}\n                  onResponderMove={[Function]}\n                  onResponderRelease={[Function]}\n                  onResponderTerminate={[Function]}\n                  onResponderTerminationRequest={[Function]}\n                  onStartShouldSetResponder={[Function]}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"borderColor\": \"#d4d4d4\",\n                      \"borderRadius\": 4,\n                      \"borderWidth\": 1,\n                      \"flexDirection\": \"row\",\n                      \"justifyContent\": \"center\",\n                      \"paddingBottom\": 10,\n                      \"paddingLeft\": 12,\n                      \"paddingRight\": 12,\n                      \"paddingTop\": 10,\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"alignItems\": \"center\",\n                        \"flexDirection\": \"row\",\n                      }\n                    }\n                    test={true}\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={Object {}}\n                    >\n                      <Text\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"backgroundColor\": undefined,\n                            \"color\": \"#0891b2\",\n                            \"fontFamily\": undefined,\n                            \"fontSize\": 14,\n                            \"fontStyle\": \"normal\",\n                            \"fontWeight\": \"400\",\n                            \"letterSpacing\": 0,\n                            \"lineHeight\": 21,\n                            \"textDecorationLine\": undefined,\n                          }\n                        }\n                      >\n                        Apply\n                      </Text>\n                    </View>\n                  </View>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 12,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#0891b2\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": 8,\n                  \"marginTop\": 8,\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#fafafa\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Place Order\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Transitions SlideFade 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Show\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        pointerEvents=\"none\"\n        style={\n          Object {\n            \"opacity\": 0,\n            \"transform\": Array [\n              Object {\n                \"translateY\": 0,\n              },\n              Object {\n                \"translateX\": -200,\n              },\n              Object {\n                \"scale\": 1,\n              },\n              Object {\n                \"scaleX\": 1,\n              },\n              Object {\n                \"scaleY\": 1,\n              },\n              Object {\n                \"rotate\": \"0deg\",\n              },\n            ],\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#14b8a6\",\n              \"borderRadius\": 6,\n              \"display\": \"flex\",\n              \"height\": 100,\n              \"justifyContent\": \"center\",\n              \"marginTop\": 16,\n              \"position\": \"absolute\",\n              \"top\": 16,\n              \"width\": 200,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#FFFFFF\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            SlideFade\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Transitions Stagger 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"minHeight\": 220,\n          }\n        }\n      >\n        <View\n          pointerEvents=\"none\"\n          style={\n            Object {\n              \"opacity\": 0,\n              \"transform\": Array [\n                Object {\n                  \"translateY\": 34,\n                },\n                Object {\n                  \"translateX\": 0,\n                },\n                Object {\n                  \"scale\": 0,\n                },\n                Object {\n                  \"scaleX\": 1,\n                },\n                Object {\n                  \"scaleY\": 1,\n                },\n                Object {\n                  \"rotate\": \"0deg\",\n                },\n              ],\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"indigo\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#6366f1\",\n                \"borderRadius\": 9999,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": 16,\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 10,\n                \"paddingRight\": 10,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <Text\n              allowFontScaling={false}\n              dataSet={Object {}}\n              style={\n                Array [\n                  Object {\n                    \"color\": undefined,\n                    \"fontSize\": 12,\n                  },\n                  Object {\n                    \"color\": \"#fafaf9\",\n                    \"fontSize\": 24,\n                    \"height\": 24,\n                    \"lineHeight\": 24,\n                    \"width\": 24,\n                  },\n                  Object {\n                    \"fontFamily\": \"material\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"normal\",\n                  },\n                  Object {},\n                ]\n              }\n            >\n              \n            </Text>\n          </View>\n        </View>\n        <View\n          pointerEvents=\"none\"\n          style={\n            Object {\n              \"opacity\": 0,\n              \"transform\": Array [\n                Object {\n                  \"translateY\": 34,\n                },\n                Object {\n                  \"translateX\": 0,\n                },\n                Object {\n                  \"scale\": 0,\n                },\n                Object {\n                  \"scaleX\": 1,\n                },\n                Object {\n                  \"scaleY\": 1,\n                },\n                Object {\n                  \"rotate\": \"0deg\",\n                },\n              ],\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"yellow\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#facc15\",\n                \"borderRadius\": 9999,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": 16,\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 10,\n                \"paddingRight\": 10,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <Text\n              allowFontScaling={false}\n              dataSet={Object {}}\n              style={\n                Array [\n                  Object {\n                    \"color\": undefined,\n                    \"fontSize\": 12,\n                  },\n                  Object {\n                    \"color\": \"#fafaf9\",\n                    \"fontSize\": 24,\n                    \"height\": 24,\n                    \"lineHeight\": 24,\n                    \"width\": 24,\n                  },\n                  Object {\n                    \"fontFamily\": \"material-community\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"normal\",\n                  },\n                  Object {},\n                ]\n              }\n            >\n              󰍬\n            </Text>\n          </View>\n        </View>\n        <View\n          pointerEvents=\"none\"\n          style={\n            Object {\n              \"opacity\": 0,\n              \"transform\": Array [\n                Object {\n                  \"translateY\": 34,\n                },\n                Object {\n                  \"translateX\": 0,\n                },\n                Object {\n                  \"scale\": 0,\n                },\n                Object {\n                  \"scaleX\": 1,\n                },\n                Object {\n                  \"scaleY\": 1,\n                },\n                Object {\n                  \"rotate\": \"0deg\",\n                },\n              ],\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"teal\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#2dd4bf\",\n                \"borderRadius\": 9999,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": 16,\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 10,\n                \"paddingRight\": 10,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <Text\n              allowFontScaling={false}\n              dataSet={Object {}}\n              style={\n                Array [\n                  Object {\n                    \"color\": undefined,\n                    \"fontSize\": 12,\n                  },\n                  Object {\n                    \"color\": \"#fafaf9\",\n                    \"fontSize\": 24,\n                    \"height\": 24,\n                    \"lineHeight\": 24,\n                    \"width\": 24,\n                  },\n                  Object {\n                    \"fontFamily\": \"material-community\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"normal\",\n                  },\n                  Object {},\n                ]\n              }\n            >\n              󰕧\n            </Text>\n          </View>\n        </View>\n        <View\n          pointerEvents=\"none\"\n          style={\n            Object {\n              \"opacity\": 0,\n              \"transform\": Array [\n                Object {\n                  \"translateY\": 34,\n                },\n                Object {\n                  \"translateX\": 0,\n                },\n                Object {\n                  \"scale\": 0,\n                },\n                Object {\n                  \"scaleX\": 1,\n                },\n                Object {\n                  \"scaleY\": 1,\n                },\n                Object {\n                  \"rotate\": \"0deg\",\n                },\n              ],\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"red\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#ef4444\",\n                \"borderRadius\": 9999,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": 16,\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 10,\n                \"paddingRight\": 10,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <Text\n              allowFontScaling={false}\n              dataSet={Object {}}\n              style={\n                Array [\n                  Object {\n                    \"color\": undefined,\n                    \"fontSize\": 12,\n                  },\n                  Object {\n                    \"color\": \"#fafaf9\",\n                    \"fontSize\": 24,\n                    \"height\": 24,\n                    \"lineHeight\": 24,\n                    \"width\": 24,\n                  },\n                  Object {\n                    \"fontFamily\": \"material\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"normal\",\n                  },\n                  Object {},\n                ]\n              }\n            >\n              \n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n          }\n        }\n      >\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#22d3ee\",\n              \"borderRadius\": 9999,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 12,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 12,\n            }\n          }\n        >\n          <Text\n            allowFontScaling={false}\n            dataSet={Object {}}\n            style={\n              Array [\n                Object {\n                  \"color\": undefined,\n                  \"fontSize\": 12,\n                },\n                Object {\n                  \"color\": \"#fafaf9\",\n                  \"fontSize\": 24,\n                  \"height\": 24,\n                  \"lineHeight\": 24,\n                  \"width\": 24,\n                },\n                Object {\n                  \"fontFamily\": \"material-community\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"normal\",\n                },\n                Object {},\n              ]\n            }\n          >\n            󰇘\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots VStack Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#a5b4fc\",\n            \"borderRadius\": 6,\n            \"display\": \"flex\",\n            \"elevation\": 4,\n            \"height\": 80,\n            \"justifyContent\": \"center\",\n            \"shadowColor\": \"#000000\",\n            \"shadowOffset\": Object {\n              \"height\": 2,\n              \"width\": 0,\n            },\n            \"shadowOpacity\": 0.23,\n            \"shadowRadius\": 2.62,\n            \"width\": 256,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#6366f1\",\n            \"borderRadius\": 6,\n            \"display\": \"flex\",\n            \"elevation\": 4,\n            \"height\": 80,\n            \"justifyContent\": \"center\",\n            \"shadowColor\": \"#000000\",\n            \"shadowOffset\": Object {\n              \"height\": 2,\n              \"width\": 0,\n            },\n            \"shadowOpacity\": 0.23,\n            \"shadowRadius\": 2.62,\n            \"width\": 256,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#4338ca\",\n            \"borderRadius\": 6,\n            \"display\": \"flex\",\n            \"elevation\": 4,\n            \"height\": 80,\n            \"justifyContent\": \"center\",\n            \"shadowColor\": \"#000000\",\n            \"shadowOffset\": Object {\n              \"height\": 2,\n              \"width\": 0,\n            },\n            \"shadowOpacity\": 0.23,\n            \"shadowRadius\": 2.62,\n            \"width\": 256,\n          }\n        }\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots View Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 24,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 30,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        A component library for the\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#10b981\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 24,\n              \"fontStyle\": undefined,\n              \"fontWeight\": \"700\",\n              \"lineHeight\": 30,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n           React Ecosystem\n        </Text>\n      </Text>\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 14,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"500\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 21,\n            \"marginTop\": 12,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        NativeBase is a simple, modular and accessible component library that gives you building blocks to build you React applications.\n      </Text>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots ZStack Basic ZStack 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"height\": 160,\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"marginTop\": -128,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"marginLeft\": -50,\n              \"marginTop\": 12,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#0e7490\",\n                \"borderRadius\": 8,\n                \"elevation\": 4,\n                \"height\": 80,\n                \"position\": \"absolute\",\n                \"shadowColor\": \"#000000\",\n                \"shadowOffset\": Object {\n                  \"height\": 2,\n                  \"width\": 0,\n                },\n                \"shadowOpacity\": 0.23,\n                \"shadowRadius\": 2.62,\n                \"width\": 80,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#06b6d4\",\n                \"borderRadius\": 8,\n                \"elevation\": 6,\n                \"height\": 80,\n                \"marginLeft\": 20,\n                \"marginTop\": 20,\n                \"position\": \"absolute\",\n                \"shadowColor\": \"#000000\",\n                \"shadowOffset\": Object {\n                  \"height\": 3,\n                  \"width\": 0,\n                },\n                \"shadowOpacity\": 0.27,\n                \"shadowRadius\": 4.65,\n                \"width\": 80,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#67e8f9\",\n                \"borderRadius\": 8,\n                \"elevation\": 8,\n                \"height\": 80,\n                \"marginLeft\": 40,\n                \"marginTop\": 40,\n                \"position\": \"absolute\",\n                \"shadowColor\": \"#000000\",\n                \"shadowOffset\": Object {\n                  \"height\": 4,\n                  \"width\": 0,\n                },\n                \"shadowOpacity\": 0.3,\n                \"shadowRadius\": 4.65,\n                \"width\": 80,\n              }\n            }\n          />\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots ZStack ZStack items centered 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"height\": 384,\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"justifyContent\": \"center\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": \"#4338ca\",\n              \"borderRadius\": 8,\n              \"height\": 256,\n              \"position\": \"absolute\",\n              \"width\": 256,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": \"#6366f1\",\n              \"borderRadius\": 8,\n              \"elevation\": 9,\n              \"height\": 192,\n              \"position\": \"absolute\",\n              \"shadowColor\": \"#000000\",\n              \"shadowOffset\": Object {\n                \"height\": 4,\n                \"width\": 0,\n              },\n              \"shadowOpacity\": 0.32,\n              \"shadowRadius\": 5.46,\n              \"width\": 192,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": \"#a5b4fc\",\n              \"borderRadius\": 8,\n              \"elevation\": 9,\n              \"height\": 128,\n              \"position\": \"absolute\",\n              \"shadowColor\": \"#000000\",\n              \"shadowOffset\": Object {\n                \"height\": 4,\n                \"width\": 0,\n              },\n              \"shadowOpacity\": 0.32,\n              \"shadowRadius\": 5.46,\n              \"width\": 128,\n            }\n          }\n        />\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots useAccessibleColors Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"flexDirection\": \"row\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"emerald\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#6ee7b7\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": 4,\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#FFFFFF\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Save\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"width\": 12,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"emerald\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#34d399\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": 4,\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#FFFFFF\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Save\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"width\": 12,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"emerald\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#10b981\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": 4,\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#FFFFFF\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Save\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"width\": 12,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"emerald\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#059669\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": 4,\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#FFFFFF\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Save\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"width\": 12,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"emerald\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#047857\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": 4,\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#FFFFFF\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Save\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"width\": 12,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"emerald\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#065f46\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": 4,\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#FFFFFF\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Save\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"flexDirection\": \"row\",\n            \"marginTop\": 24,\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Toggle Accessible Colors\n        </Text>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"width\": 12,\n            }\n          }\n        />\n        <AndroidSwitch\n          accessibilityRole=\"switch\"\n          activeThumbColor=\"#fafafa\"\n          colorScheme=\"coolGray\"\n          dataSet={Object {}}\n          enabled={true}\n          on={false}\n          onChange={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={Object {}}\n          thumbTintColor=\"#fafafa\"\n          trackColorForFalse=\"#d4d4d4\"\n          trackColorForTrue=\"#4b5563\"\n          trackTintColor=\"#d4d4d4\"\n        />\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots useBreakpointValue Usage 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <RCTScrollView\n      contentContainerStyle={\n        Array [\n          Object {},\n          Object {\n            \"dataSet\": Object {},\n          },\n          Object {},\n        ]\n      }\n      dataSet={Object {}}\n      showsVerticalScrollIndicator={false}\n      style={Object {}}\n    >\n      <View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 32,\n              \"paddingTop\": 32,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 24,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 30,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Why us?\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 32,\n              }\n            }\n          />\n          <View\n            style={\n              Object {\n                \"flexDirection\": \"column\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#a5f3fc\",\n                  \"borderRadius\": 12,\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": 12,\n                  \"marginLeft\": 12,\n                  \"marginRight\": 12,\n                  \"marginTop\": 12,\n                  \"paddingBottom\": 12,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 12,\n                  \"width\": 140,\n                }\n              }\n            >\n              <Text />\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"height\": 8,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 18,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 27,\n                    \"textAlign\": \"center\",\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Secure Checkout\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#a5f3fc\",\n                  \"borderRadius\": 12,\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": 12,\n                  \"marginLeft\": 12,\n                  \"marginRight\": 12,\n                  \"marginTop\": 12,\n                  \"paddingBottom\": 12,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 12,\n                  \"width\": 140,\n                }\n              }\n            >\n              <Text />\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"height\": 8,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 18,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 27,\n                    \"textAlign\": \"center\",\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Secure Checkout\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#a5f3fc\",\n                  \"borderRadius\": 12,\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": 12,\n                  \"marginLeft\": 12,\n                  \"marginRight\": 12,\n                  \"marginTop\": 12,\n                  \"paddingBottom\": 12,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 12,\n                  \"width\": 140,\n                }\n              }\n            >\n              <Text />\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"height\": 8,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 18,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 27,\n                    \"textAlign\": \"center\",\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Fast Turn Around\n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </RCTScrollView>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots useClipboard Usage 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"maxWidth\": 300,\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            isFocused={false}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"borderColor\": \"#d4d4d4\",\n                \"borderRadius\": 4,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"overflow\": \"hidden\",\n              }\n            }\n          >\n            <TextInput\n              accessible={true}\n              allowFontScaling={true}\n              dataSet={Object {}}\n              editable={true}\n              onBlur={[Function]}\n              onChangeText={[Function]}\n              onFocus={[Function]}\n              onKeyPress={[Function]}\n              placeholder=\"Copy From\"\n              placeholderTextColor=\"#a3a3a3\"\n              rejectResponderTermination={true}\n              secureTextEntry={false}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"color\": \"#171717\",\n                  \"flex\": 1,\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"100%\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                  \"width\": \"100%\",\n                }\n              }\n              underlineColorAndroid=\"transparent\"\n              value=\"Hello\"\n            />\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 12,\n              }\n            }\n          />\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"primary\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#0891b2\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#fafafa\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Copy\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            isFocused={false}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"borderColor\": \"#d4d4d4\",\n                \"borderRadius\": 4,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"overflow\": \"hidden\",\n              }\n            }\n          >\n            <TextInput\n              accessible={true}\n              allowFontScaling={true}\n              dataSet={Object {}}\n              editable={true}\n              onBlur={[Function]}\n              onChangeText={[Function]}\n              onFocus={[Function]}\n              onKeyPress={[Function]}\n              placeholder=\"Paste Here\"\n              placeholderTextColor=\"#a3a3a3\"\n              rejectResponderTermination={true}\n              secureTextEntry={false}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"color\": \"#171717\",\n                  \"flex\": 1,\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"100%\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                  \"width\": \"100%\",\n                }\n              }\n              underlineColorAndroid=\"transparent\"\n              value=\"\"\n            />\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 12,\n              }\n            }\n          />\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"primary\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#0891b2\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#fafafa\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Paste\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots useColorMode Basic 1`] = `\n<View\n  style={\n    Object {\n      \"flex\": 1,\n    }\n  }\n>\n  <RNCSafeAreaProvider\n    onInsetsChange={[Function]}\n    style={\n      Array [\n        Object {\n          \"flex\": 1,\n        },\n        undefined,\n      ]\n    }\n  />\n</View>\n`;\n\nexports[`Storyshots useColorModeValue Basic 1`] = `\n<View\n  style={\n    Object {\n      \"flex\": 1,\n    }\n  }\n>\n  <RNCSafeAreaProvider\n    onInsetsChange={[Function]}\n    style={\n      Array [\n        Object {\n          \"flex\": 1,\n        },\n        undefined,\n      ]\n    }\n  />\n</View>\n`;\n\nexports[`Storyshots useContrastText Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      >\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#18181b\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#FFFFFF\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                NativeBase\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#fafafa\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#000000\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                NativeBase\n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots useContrastText Variations 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"#ecfeff\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginBottom\": 4,\n          \"paddingBottom\": 10,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 10,\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n          }\n        }\n        test={true}\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#000000\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            NativeBase\n          </Text>\n        </View>\n      </View>\n    </View>\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"#cffafe\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginBottom\": 4,\n          \"paddingBottom\": 10,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 10,\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n          }\n        }\n        test={true}\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#000000\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            NativeBase\n          </Text>\n        </View>\n      </View>\n    </View>\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"#a5f3fc\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginBottom\": 4,\n          \"paddingBottom\": 10,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 10,\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n          }\n        }\n        test={true}\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#000000\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            NativeBase\n          </Text>\n        </View>\n      </View>\n    </View>\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"#67e8f9\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginBottom\": 4,\n          \"paddingBottom\": 10,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 10,\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n          }\n        }\n        test={true}\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#FFFFFF\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            NativeBase\n          </Text>\n        </View>\n      </View>\n    </View>\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"#22d3ee\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginBottom\": 4,\n          \"paddingBottom\": 10,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 10,\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n          }\n        }\n        test={true}\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#FFFFFF\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            NativeBase\n          </Text>\n        </View>\n      </View>\n    </View>\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"#06b6d4\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginBottom\": 4,\n          \"paddingBottom\": 10,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 10,\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n          }\n        }\n        test={true}\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#FFFFFF\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            NativeBase\n          </Text>\n        </View>\n      </View>\n    </View>\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"#0891b2\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginBottom\": 4,\n          \"paddingBottom\": 10,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 10,\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n          }\n        }\n        test={true}\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#FFFFFF\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            NativeBase\n          </Text>\n        </View>\n      </View>\n    </View>\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"#0e7490\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginBottom\": 4,\n          \"paddingBottom\": 10,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 10,\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n          }\n        }\n        test={true}\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#FFFFFF\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            NativeBase\n          </Text>\n        </View>\n      </View>\n    </View>\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"#155e75\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginBottom\": 4,\n          \"paddingBottom\": 10,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 10,\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n          }\n        }\n        test={true}\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#FFFFFF\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            NativeBase\n          </Text>\n        </View>\n      </View>\n    </View>\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"#164e63\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginBottom\": 4,\n          \"paddingBottom\": 10,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 10,\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n          }\n        }\n        test={true}\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#FFFFFF\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            NativeBase\n          </Text>\n        </View>\n      </View>\n    </View>\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"indigo\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"#4f46e5\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginTop\": 8,\n          \"paddingBottom\": 10,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 10,\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n          }\n        }\n        test={true}\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#fafafa\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Toggle Accessible Colors\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots useDisclose Usage 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <Modal\n        animationType=\"fade\"\n        hardwareAccelerated={false}\n        onRequestClose={[Function]}\n        statusBarTranslucent={true}\n        transparent={true}\n        visible={false}\n      >\n        <View\n          pointerEvents=\"none\"\n          style={\n            Object {\n              \"bottom\": 0,\n              \"left\": 0,\n              \"opacity\": 0,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"top\": 0,\n              \"transform\": Array [\n                Object {\n                  \"translateY\": 0,\n                },\n                Object {\n                  \"translateX\": 0,\n                },\n                Object {\n                  \"scale\": 1,\n                },\n                Object {\n                  \"scaleX\": 1,\n                },\n                Object {\n                  \"scaleY\": 1,\n                },\n                Object {\n                  \"rotate\": \"0deg\",\n                },\n              ],\n            }\n          }\n        >\n          <View\n            accessible={false}\n            dataSet={Object {}}\n            focusable={true}\n            importantForAccessibility=\"no\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"backgroundColor\": \"rgb(0, 0, 0)\",\n                \"bottom\": 0,\n                \"left\": 0,\n                \"opacity\": 0.3,\n                \"position\": \"absolute\",\n                \"right\": 0,\n                \"top\": 0,\n              }\n            }\n          />\n        </View>\n        <View\n          pointerEvents=\"none\"\n          style={\n            Object {\n              \"bottom\": 0,\n              \"left\": 0,\n              \"opacity\": 0,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"top\": 0,\n              \"transform\": Array [\n                Object {\n                  \"translateY\": 0,\n                },\n                Object {\n                  \"translateX\": 0,\n                },\n                Object {\n                  \"scale\": 1,\n                },\n                Object {\n                  \"scaleX\": 1,\n                },\n                Object {\n                  \"scaleY\": 1,\n                },\n                Object {\n                  \"rotate\": \"0deg\",\n                },\n              ],\n            }\n          }\n        >\n          <View\n            closeOnOverlayClick={true}\n            dataSet={Object {}}\n            pointerEvents=\"box-none\"\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"height\": \"100%\",\n                \"justifyContent\": \"center\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              accessibilityViewIsModal={true}\n              aria-modal=\"true\"\n              dataSet={Object {}}\n              onAccessibilityEscape={[Function]}\n              style={\n                Object {\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderRadius\": 8,\n                  \"elevation\": 2,\n                  \"maxHeight\": 1184,\n                  \"maxWidth\": 380,\n                  \"overflow\": \"hidden\",\n                  \"shadowColor\": \"#000000\",\n                  \"shadowOffset\": Object {\n                    \"height\": 1,\n                    \"width\": 0,\n                  },\n                  \"shadowOpacity\": 0.2,\n                  \"shadowRadius\": 1.41,\n                  \"width\": \"75%\",\n                }\n              }\n            >\n              <View\n                accessibilityRole=\"button\"\n                accessible={true}\n                colorScheme=\"coolGray\"\n                dataSet={Object {}}\n                focusable={true}\n                onBlur={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onHoverIn={[Function]}\n                onHoverOut={[Function]}\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                    \"borderRadius\": 4,\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 8,\n                    \"paddingRight\": 8,\n                    \"paddingTop\": 8,\n                    \"position\": \"absolute\",\n                    \"right\": 12,\n                    \"top\": 12,\n                    \"zIndex\": 1,\n                  }\n                }\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={16}\n                  bbWidth={16}\n                  color={-9211021}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#737373\",\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                    ]\n                  }\n                  tintColor={-9211021}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": \"#fafafa\",\n                    \"borderBottomWidth\": 1,\n                    \"borderColor\": \"#d4d4d4\",\n                    \"fontSize\": 36,\n                    \"fontWeight\": \"700\",\n                    \"paddingBottom\": 16,\n                    \"paddingLeft\": 16,\n                    \"paddingRight\": 16,\n                    \"paddingTop\": 16,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 16,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"600\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 20,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Delete Customer\n                </Text>\n              </View>\n              <RCTScrollView\n                contentContainerStyle={\n                  Array [\n                    Object {},\n                    Object {\n                      \"dataSet\": Object {},\n                    },\n                    Object {},\n                  ]\n                }\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <View>\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"paddingBottom\": 16,\n                        \"paddingLeft\": 16,\n                        \"paddingRight\": 16,\n                        \"paddingTop\": 16,\n                      }\n                    }\n                  >\n                    <Text\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"backgroundColor\": undefined,\n                          \"color\": \"#171717\",\n                          \"fontFamily\": undefined,\n                          \"fontSize\": 14,\n                          \"fontStyle\": \"normal\",\n                          \"fontWeight\": \"400\",\n                          \"letterSpacing\": 0,\n                          \"lineHeight\": 21,\n                          \"textDecorationLine\": undefined,\n                        }\n                      }\n                    >\n                      This will remove all data relating to Alex. This action cannot be reversed. Deleted data can not be recovered.\n                    </Text>\n                  </View>\n                </View>\n              </RCTScrollView>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": \"#fafafa\",\n                    \"borderColor\": \"#d4d4d4\",\n                    \"borderTopWidth\": 1,\n                    \"flexDirection\": \"row\",\n                    \"flexWrap\": \"wrap\",\n                    \"justifyContent\": \"flex-end\",\n                    \"paddingBottom\": 16,\n                    \"paddingLeft\": 16,\n                    \"paddingRight\": 16,\n                    \"paddingTop\": 16,\n                  }\n                }\n              >\n                <View\n                  accessibilityRole=\"button\"\n                  accessible={true}\n                  colorScheme=\"primary\"\n                  dataSet={Object {}}\n                  focusable={true}\n                  onBlur={[Function]}\n                  onClick={[Function]}\n                  onFocus={[Function]}\n                  onHoverIn={[Function]}\n                  onHoverOut={[Function]}\n                  onResponderGrant={[Function]}\n                  onResponderMove={[Function]}\n                  onResponderRelease={[Function]}\n                  onResponderTerminate={[Function]}\n                  onResponderTerminationRequest={[Function]}\n                  onStartShouldSetResponder={[Function]}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"borderRadius\": 4,\n                      \"flexDirection\": \"row\",\n                      \"justifyContent\": \"center\",\n                      \"marginRight\": 4,\n                      \"paddingBottom\": 10,\n                      \"paddingLeft\": 12,\n                      \"paddingRight\": 12,\n                      \"paddingTop\": 10,\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"alignItems\": \"center\",\n                        \"flexDirection\": \"row\",\n                      }\n                    }\n                    test={true}\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={Object {}}\n                    >\n                      <Text\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"backgroundColor\": undefined,\n                            \"color\": \"#171717\",\n                            \"fontFamily\": undefined,\n                            \"fontSize\": 14,\n                            \"fontStyle\": \"normal\",\n                            \"fontWeight\": \"400\",\n                            \"letterSpacing\": 0,\n                            \"lineHeight\": 21,\n                            \"textDecorationLine\": undefined,\n                          }\n                        }\n                      >\n                        Cancel\n                      </Text>\n                    </View>\n                  </View>\n                </View>\n                <View\n                  accessibilityRole=\"button\"\n                  accessible={true}\n                  colorScheme=\"error\"\n                  dataSet={Object {}}\n                  focusable={true}\n                  onBlur={[Function]}\n                  onClick={[Function]}\n                  onFocus={[Function]}\n                  onHoverIn={[Function]}\n                  onHoverOut={[Function]}\n                  onResponderGrant={[Function]}\n                  onResponderMove={[Function]}\n                  onResponderRelease={[Function]}\n                  onResponderTerminate={[Function]}\n                  onResponderTerminationRequest={[Function]}\n                  onStartShouldSetResponder={[Function]}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"#dc2626\",\n                      \"borderRadius\": 4,\n                      \"flexDirection\": \"row\",\n                      \"justifyContent\": \"center\",\n                      \"paddingBottom\": 10,\n                      \"paddingLeft\": 12,\n                      \"paddingRight\": 12,\n                      \"paddingTop\": 10,\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"alignItems\": \"center\",\n                        \"flexDirection\": \"row\",\n                      }\n                    }\n                    test={true}\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={Object {}}\n                    >\n                      <Text\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"backgroundColor\": undefined,\n                            \"color\": \"#fafafa\",\n                            \"fontFamily\": undefined,\n                            \"fontSize\": 14,\n                            \"fontStyle\": \"normal\",\n                            \"fontWeight\": \"400\",\n                            \"letterSpacing\": 0,\n                            \"lineHeight\": 21,\n                            \"textDecorationLine\": undefined,\n                          }\n                        }\n                      >\n                        Delete\n                      </Text>\n                    </View>\n                  </View>\n                </View>\n              </View>\n            </View>\n          </View>\n        </View>\n      </Modal>\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Open Modal\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots useMediaQuery MaxHeight 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"borderColor\": \"#9ca3af\",\n            \"borderRadius\": 6,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"maxWidth\": 400,\n            \"paddingBottom\": 16,\n            \"paddingLeft\": 16,\n            \"paddingRight\": 16,\n            \"paddingTop\": 16,\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          fadeDuration={0.1}\n          speed={1}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderRadius\": 6,\n              \"flex\": 1,\n              \"height\": 150,\n              \"overflow\": \"hidden\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            style={\n              Object {\n                \"backgroundColor\": \"#e5e5e5\",\n                \"height\": \"100%\",\n                \"opacity\": 0,\n                \"width\": \"100%\",\n              }\n            }\n          />\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"width\": 32,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flex\": 3,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            speed={1}\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"height\": 40,\n                \"overflow\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            speed={1}\n            style={\n              Object {\n                \"flexDirection\": \"column\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"75%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"height\": 20,\n                  \"overflow\": \"hidden\",\n                  \"width\": 20,\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"flex\": 2,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"flex\": 1,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots useMediaQuery MinWidth 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"borderColor\": \"#9ca3af\",\n            \"borderRadius\": 6,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"maxWidth\": 400,\n            \"paddingBottom\": 16,\n            \"paddingLeft\": 16,\n            \"paddingRight\": 16,\n            \"paddingTop\": 16,\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flex\": 3,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            speed={1}\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"height\": 40,\n                \"overflow\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            speed={1}\n            style={\n              Object {\n                \"flexDirection\": \"column\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"75%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"height\": 20,\n                  \"overflow\": \"hidden\",\n                  \"width\": 20,\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"flex\": 2,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"flex\": 1,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots useMediaQuery Orientation 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"borderColor\": \"#9ca3af\",\n            \"borderRadius\": 6,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"maxWidth\": 400,\n            \"paddingBottom\": 16,\n            \"paddingLeft\": 16,\n            \"paddingRight\": 16,\n            \"paddingTop\": 16,\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flex\": 3,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            speed={1}\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"height\": 40,\n                \"overflow\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            speed={1}\n            style={\n              Object {\n                \"flexDirection\": \"column\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"75%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"height\": 20,\n                  \"overflow\": \"hidden\",\n                  \"width\": 20,\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"flex\": 2,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"flex\": 1,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots useSafeArea Fixed 1`] = `\n<View>\n  <RNCSafeAreaProvider\n    onInsetsChange={[Function]}\n    style={\n      Array [\n        Object {\n          \"flex\": 1,\n        },\n        undefined,\n      ]\n    }\n  />\n</View>\n`;\n\nexports[`Storyshots useSafeArea Flexible 1`] = `\n<View>\n  <RNCSafeAreaProvider\n    onInsetsChange={[Function]}\n    style={\n      Array [\n        Object {\n          \"flex\": 1,\n        },\n        undefined,\n      ]\n    }\n  />\n</View>\n`;\n\nexports[`Storyshots useSafeArea Hook 1`] = `\n<View>\n  <RNCSafeAreaProvider\n    onInsetsChange={[Function]}\n    style={\n      Array [\n        Object {\n          \"flex\": 1,\n        },\n        undefined,\n      ]\n    }\n  />\n</View>\n`;\n\nexports[`Storyshots useSx Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={-16215630}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={-16215630}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      style={\n        Array [\n          Object {\n            \"backgroundColor\": \"#a78bfa\",\n            \"height\": 192,\n            \"padding\": 8,\n            \"width\": 192,\n          },\n          Object {\n            \"alignItems\": \"center\",\n            \"justifyContent\": \"center\",\n          },\n        ]\n      }\n    >\n      <Text\n        style={\n          Object {\n            \"color\": \"#FFFFFF\",\n            \"height\": 48,\n            \"textAlign\": \"center\",\n            \"width\": 48,\n          }\n        }\n      >\n        New Feat useSx in NativeBase\n      </Text>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n"
  },
  {
    "path": "example/tests/storybook.test.js.snap.ios",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Storyshots Actionsheet Composition 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Actionsheet\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Actionsheet Custom Backdrop 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"#0891b2\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 10,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 10,\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n          }\n        }\n        test={true}\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#fafafa\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Actionsheet\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Actionsheet DisableOverlay 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Actionsheet\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Actionsheet Icon 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Actionsheet\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Actionsheet Usage 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Actionsheet\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Alert Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        space={3}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#bae6fd\",\n            \"borderRadius\": 4,\n            \"justifyContent\": \"flex-start\",\n            \"maxWidth\": 400,\n            \"paddingBottom\": 12,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 12,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexShrink\": 1,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"flexShrink\": 1,\n                \"justifyContent\": \"space-between\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"flexShrink\": 1,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={16}\n                  bbWidth={16}\n                  color={4278413729}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#0369a1\",\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                    ]\n                  }\n                  tintColor={4278413729}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M12 0C9.62663 0 7.30655 0.703788 5.33316 2.02236C3.35977 3.34094 1.8217 5.21509 0.913451 7.4078C0.00519948 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6689 1.83649 18.807 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0865C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6935 24 14.3734 24 12C23.9966 8.81846 22.7312 5.76821 20.4815 3.51852C18.2318 1.26883 15.1815 0.00344108 12 0ZM12.25 5C12.5467 5 12.8367 5.08797 13.0834 5.25279C13.33 5.41762 13.5223 5.65189 13.6358 5.92597C13.7494 6.20006 13.7791 6.50166 13.7212 6.79263C13.6633 7.08361 13.5204 7.35088 13.3107 7.56066C13.1009 7.77044 12.8336 7.9133 12.5426 7.97118C12.2517 8.02905 11.9501 7.99935 11.676 7.88582C11.4019 7.77229 11.1676 7.58003 11.0028 7.33335C10.838 7.08668 10.75 6.79667 10.75 6.5C10.75 6.10217 10.908 5.72064 11.1893 5.43934C11.4706 5.15803 11.8522 5 12.25 5ZM14.5 18.5H10.5C10.2348 18.5 9.98043 18.3946 9.7929 18.2071C9.60536 18.0196 9.5 17.7652 9.5 17.5C9.5 17.2348 9.60536 16.9804 9.7929 16.7929C9.98043 16.6054 10.2348 16.5 10.5 16.5H11.25C11.3163 16.5 11.3799 16.4737 11.4268 16.4268C11.4737 16.3799 11.5 16.3163 11.5 16.25V11.75C11.5 11.6837 11.4737 11.6201 11.4268 11.5732C11.3799 11.5263 11.3163 11.5 11.25 11.5H10.5C10.2348 11.5 9.98043 11.3946 9.7929 11.2071C9.60536 11.0196 9.5 10.7652 9.5 10.5C9.5 10.2348 9.60536 9.98043 9.7929 9.79289C9.98043 9.60536 10.2348 9.5 10.5 9.5H11.5C12.0304 9.5 12.5391 9.71071 12.9142 10.0858C13.2893 10.4609 13.5 10.9696 13.5 11.5V16.25C13.5 16.3163 13.5263 16.3799 13.5732 16.4268C13.6201 16.4737 13.6837 16.5 13.75 16.5H14.5C14.7652 16.5 15.0196 16.6054 15.2071 16.7929C15.3946 16.9804 15.5 17.2348 15.5 17.5C15.5 17.7652 15.3946 18.0196 15.2071 18.2071C15.0196 18.3946 14.7652 18.5 14.5 18.5Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#1f2937\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 16,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 20,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                We are going live in July!\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 10,\n                  \"paddingRight\": 10,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={4283127139}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#4b5563\",\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={4283127139}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 4,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"paddingLeft\": 24,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#4b5563\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              We are happy to announce that we are going live on July 28th. Get ready!\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Alert ColorScheme 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"marginLeft\": 12,\n          \"marginRight\": 12,\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        space={3}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#fecaca\",\n            \"borderRadius\": 4,\n            \"justifyContent\": \"flex-start\",\n            \"paddingBottom\": 12,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 12,\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexShrink\": 1,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"flexShrink\": 1,\n                \"justifyContent\": \"space-between\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"flexShrink\": 1,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={16}\n                  bbWidth={16}\n                  color={4290321436}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#b91c1c\",\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                    ]\n                  }\n                  tintColor={4290321436}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M12 0C9.62663 0 7.30655 0.703788 5.33316 2.02236C3.35977 3.34094 1.8217 5.21509 0.913451 7.4078C0.00519948 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6689 1.83649 18.807 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0865C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6935 24 14.3734 24 12C23.9966 8.81846 22.7312 5.76821 20.4815 3.51852C18.2318 1.26883 15.1815 0.00344108 12 0ZM12.25 5C12.5467 5 12.8367 5.08797 13.0834 5.25279C13.33 5.41762 13.5223 5.65189 13.6358 5.92597C13.7494 6.20006 13.7791 6.50166 13.7212 6.79263C13.6633 7.08361 13.5204 7.35088 13.3107 7.56066C13.1009 7.77044 12.8336 7.9133 12.5426 7.97118C12.2517 8.02905 11.9501 7.99935 11.676 7.88582C11.4019 7.77229 11.1676 7.58003 11.0028 7.33335C10.838 7.08668 10.75 6.79667 10.75 6.5C10.75 6.10217 10.908 5.72064 11.1893 5.43934C11.4706 5.15803 11.8522 5 12.25 5ZM14.5 18.5H10.5C10.2348 18.5 9.98043 18.3946 9.7929 18.2071C9.60536 18.0196 9.5 17.7652 9.5 17.5C9.5 17.2348 9.60536 16.9804 9.7929 16.7929C9.98043 16.6054 10.2348 16.5 10.5 16.5H11.25C11.3163 16.5 11.3799 16.4737 11.4268 16.4268C11.4737 16.3799 11.5 16.3163 11.5 16.25V11.75C11.5 11.6837 11.4737 11.6201 11.4268 11.5732C11.3799 11.5263 11.3163 11.5 11.25 11.5H10.5C10.2348 11.5 9.98043 11.3946 9.7929 11.2071C9.60536 11.0196 9.5 10.7652 9.5 10.5C9.5 10.2348 9.60536 9.98043 9.7929 9.79289C9.98043 9.60536 10.2348 9.5 10.5 9.5H11.5C12.0304 9.5 12.5391 9.71071 12.9142 10.0858C13.2893 10.4609 13.5 10.9696 13.5 11.5V16.25C13.5 16.3163 13.5263 16.3799 13.5732 16.4268C13.6201 16.4737 13.6837 16.5 13.75 16.5H14.5C14.7652 16.5 15.0196 16.6054 15.2071 16.7929C15.3946 16.9804 15.5 17.2348 15.5 17.5C15.5 17.7652 15.3946 18.0196 15.2071 18.2071C15.0196 18.3946 14.7652 18.5 14.5 18.5Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#1f2937\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 16,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 24,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Please try again later!\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 10,\n                  \"paddingRight\": 10,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={4283127139}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#4b5563\",\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={4283127139}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 8,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"paddingLeft\": 24,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#4b5563\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Your coupon could not be processed at this time.\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        space={3}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#fed7aa\",\n            \"borderRadius\": 4,\n            \"justifyContent\": \"flex-start\",\n            \"paddingBottom\": 12,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 12,\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexShrink\": 1,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"flexShrink\": 1,\n                \"justifyContent\": \"space-between\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"flexShrink\": 1,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={16}\n                  bbWidth={16}\n                  color={4290920716}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#c2410c\",\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                    ]\n                  }\n                  tintColor={4290920716}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M12 0C9.62663 0 7.30655 0.703788 5.33316 2.02236C3.35977 3.34094 1.8217 5.21509 0.913451 7.4078C0.00519948 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6689 1.83649 18.807 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0865C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6935 24 14.3734 24 12C23.9966 8.81846 22.7312 5.76821 20.4815 3.51852C18.2318 1.26883 15.1815 0.00344108 12 0ZM12.25 5C12.5467 5 12.8367 5.08797 13.0834 5.25279C13.33 5.41762 13.5223 5.65189 13.6358 5.92597C13.7494 6.20006 13.7791 6.50166 13.7212 6.79263C13.6633 7.08361 13.5204 7.35088 13.3107 7.56066C13.1009 7.77044 12.8336 7.9133 12.5426 7.97118C12.2517 8.02905 11.9501 7.99935 11.676 7.88582C11.4019 7.77229 11.1676 7.58003 11.0028 7.33335C10.838 7.08668 10.75 6.79667 10.75 6.5C10.75 6.10217 10.908 5.72064 11.1893 5.43934C11.4706 5.15803 11.8522 5 12.25 5ZM14.5 18.5H10.5C10.2348 18.5 9.98043 18.3946 9.7929 18.2071C9.60536 18.0196 9.5 17.7652 9.5 17.5C9.5 17.2348 9.60536 16.9804 9.7929 16.7929C9.98043 16.6054 10.2348 16.5 10.5 16.5H11.25C11.3163 16.5 11.3799 16.4737 11.4268 16.4268C11.4737 16.3799 11.5 16.3163 11.5 16.25V11.75C11.5 11.6837 11.4737 11.6201 11.4268 11.5732C11.3799 11.5263 11.3163 11.5 11.25 11.5H10.5C10.2348 11.5 9.98043 11.3946 9.7929 11.2071C9.60536 11.0196 9.5 10.7652 9.5 10.5C9.5 10.2348 9.60536 9.98043 9.7929 9.79289C9.98043 9.60536 10.2348 9.5 10.5 9.5H11.5C12.0304 9.5 12.5391 9.71071 12.9142 10.0858C13.2893 10.4609 13.5 10.9696 13.5 11.5V16.25C13.5 16.3163 13.5263 16.3799 13.5732 16.4268C13.6201 16.4737 13.6837 16.5 13.75 16.5H14.5C14.7652 16.5 15.0196 16.6054 15.2071 16.7929C15.3946 16.9804 15.5 17.2348 15.5 17.5C15.5 17.7652 15.3946 18.0196 15.2071 18.2071C15.0196 18.3946 14.7652 18.5 14.5 18.5Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#1f2937\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 16,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 24,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Please try again later!\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 10,\n                  \"paddingRight\": 10,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={4283127139}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#4b5563\",\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={4283127139}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 8,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"paddingLeft\": 24,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#4b5563\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Your coupon could not be processed at this time.\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        space={3}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#fbcfe8\",\n            \"borderRadius\": 4,\n            \"justifyContent\": \"flex-start\",\n            \"paddingBottom\": 12,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 12,\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexShrink\": 1,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"flexShrink\": 1,\n                \"justifyContent\": \"space-between\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"flexShrink\": 1,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={16}\n                  bbWidth={16}\n                  color={4290648157}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#be185d\",\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                    ]\n                  }\n                  tintColor={4290648157}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M12 0C9.62663 0 7.30655 0.703788 5.33316 2.02236C3.35977 3.34094 1.8217 5.21509 0.913451 7.4078C0.00519948 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6689 1.83649 18.807 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0865C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6935 24 14.3734 24 12C23.9966 8.81846 22.7312 5.76821 20.4815 3.51852C18.2318 1.26883 15.1815 0.00344108 12 0ZM12.25 5C12.5467 5 12.8367 5.08797 13.0834 5.25279C13.33 5.41762 13.5223 5.65189 13.6358 5.92597C13.7494 6.20006 13.7791 6.50166 13.7212 6.79263C13.6633 7.08361 13.5204 7.35088 13.3107 7.56066C13.1009 7.77044 12.8336 7.9133 12.5426 7.97118C12.2517 8.02905 11.9501 7.99935 11.676 7.88582C11.4019 7.77229 11.1676 7.58003 11.0028 7.33335C10.838 7.08668 10.75 6.79667 10.75 6.5C10.75 6.10217 10.908 5.72064 11.1893 5.43934C11.4706 5.15803 11.8522 5 12.25 5ZM14.5 18.5H10.5C10.2348 18.5 9.98043 18.3946 9.7929 18.2071C9.60536 18.0196 9.5 17.7652 9.5 17.5C9.5 17.2348 9.60536 16.9804 9.7929 16.7929C9.98043 16.6054 10.2348 16.5 10.5 16.5H11.25C11.3163 16.5 11.3799 16.4737 11.4268 16.4268C11.4737 16.3799 11.5 16.3163 11.5 16.25V11.75C11.5 11.6837 11.4737 11.6201 11.4268 11.5732C11.3799 11.5263 11.3163 11.5 11.25 11.5H10.5C10.2348 11.5 9.98043 11.3946 9.7929 11.2071C9.60536 11.0196 9.5 10.7652 9.5 10.5C9.5 10.2348 9.60536 9.98043 9.7929 9.79289C9.98043 9.60536 10.2348 9.5 10.5 9.5H11.5C12.0304 9.5 12.5391 9.71071 12.9142 10.0858C13.2893 10.4609 13.5 10.9696 13.5 11.5V16.25C13.5 16.3163 13.5263 16.3799 13.5732 16.4268C13.6201 16.4737 13.6837 16.5 13.75 16.5H14.5C14.7652 16.5 15.0196 16.6054 15.2071 16.7929C15.3946 16.9804 15.5 17.2348 15.5 17.5C15.5 17.7652 15.3946 18.0196 15.2071 18.2071C15.0196 18.3946 14.7652 18.5 14.5 18.5Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#1f2937\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 16,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 24,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Please try again later!\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 10,\n                  \"paddingRight\": 10,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={4283127139}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#4b5563\",\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={4283127139}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 8,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"paddingLeft\": 24,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#4b5563\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Your coupon could not be processed at this time.\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Alert Composition 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"maxWidth\": 400,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          space={3}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#bbf7d0\",\n              \"borderRadius\": 4,\n              \"justifyContent\": \"flex-start\",\n              \"paddingBottom\": 12,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 12,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexShrink\": 1,\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"flexShrink\": 1,\n                  \"justifyContent\": \"space-between\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"flexShrink\": 1,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={4279599165}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#15803d\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={4279599165}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 16,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"500\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 24,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Application received!\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 4,\n                  }\n                }\n              />\n              <View\n                accessibilityRole=\"button\"\n                accessible={true}\n                colorScheme=\"primary\"\n                dataSet={Object {}}\n                focusable={true}\n                onBlur={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onHoverIn={[Function]}\n                onHoverOut={[Function]}\n                onResponderGrant={[Function]}\n                onResponderMove={[Function]}\n                onResponderRelease={[Function]}\n                onResponderTerminate={[Function]}\n                onResponderTerminationRequest={[Function]}\n                onStartShouldSetResponder={[Function]}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"borderRadius\": 4,\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"center\",\n                    \"paddingBottom\": 10,\n                    \"paddingLeft\": 10,\n                    \"paddingRight\": 10,\n                    \"paddingTop\": 10,\n                  }\n                }\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={12}\n                  bbWidth={12}\n                  color={4283127139}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#4b5563\",\n                        \"height\": 12,\n                        \"width\": 12,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 12,\n                        \"width\": 12,\n                      },\n                    ]\n                  }\n                  tintColor={4283127139}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 8,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"paddingLeft\": 24,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Your application has been received. We will review your application and respond within the next 48 hours.\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 20,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          space={3}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#bbf7d0\",\n              \"borderRadius\": 4,\n              \"justifyContent\": \"flex-start\",\n              \"paddingBottom\": 12,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 12,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexShrink\": 1,\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={20}\n                bbWidth={20}\n                color={4279599165}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#15803d\",\n                      \"height\": 20,\n                      \"width\": 20,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 20,\n                      \"width\": 20,\n                    },\n                  ]\n                }\n                tintColor={4279599165}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 4,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 16,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"500\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 24,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Application received!\n            </Text>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 4,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textAlign\": \"center\",\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Your application has been received. We will review your application and respond within the next 48 hours.\n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Alert Status 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"maxWidth\": 400,\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        space={3}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#bbf7d0\",\n            \"borderRadius\": 4,\n            \"justifyContent\": \"flex-start\",\n            \"paddingBottom\": 12,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 12,\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexShrink\": 1,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"flexShrink\": 1,\n                \"justifyContent\": \"space-between\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                  \"flexShrink\": 1,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={16}\n                  bbWidth={16}\n                  color={4279599165}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#15803d\",\n                        \"height\": 16,\n                        \"marginTop\": 4,\n                        \"width\": 16,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                    ]\n                  }\n                  tintColor={4279599165}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#1f2937\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 16,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 24,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Selection successfully moved!\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 10,\n                  \"paddingRight\": 10,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={4283127139}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#4b5563\",\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={4283127139}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 12,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        space={3}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#fecaca\",\n            \"borderRadius\": 4,\n            \"justifyContent\": \"flex-start\",\n            \"paddingBottom\": 12,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 12,\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexShrink\": 1,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"flexShrink\": 1,\n                \"justifyContent\": \"space-between\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                  \"flexShrink\": 1,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={16}\n                  bbWidth={16}\n                  color={4290321436}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#b91c1c\",\n                        \"height\": 16,\n                        \"marginTop\": 4,\n                        \"width\": 16,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                    ]\n                  }\n                  tintColor={4290321436}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGGroup\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      >\n                        <RNSVGPath\n                          d=\"M13.9193 18.4271C13.8992 17.9392 13.6816 17.4813 13.3178 17.1478C12.9545 16.8148 12.4731 16.631 11.975 16.6304H11.9746H11.945V16.6304L11.9392 16.6305C11.6898 16.6348 11.4434 16.6864 11.2142 16.7827L11.333 17.0655L11.2142 16.7827C10.9851 16.879 10.7773 17.0183 10.6035 17.1931C10.4296 17.368 10.2932 17.5751 10.2031 17.8026C10.113 18.0302 10.0712 18.2732 10.0806 18.5171L10.0807 18.5176C10.1001 19.0055 10.3169 19.4638 10.6802 19.7979C11.043 20.1315 11.5241 20.3162 12.0222 20.3177H12.0233H12.0529V20.3178L12.058 20.3177C12.3081 20.3138 12.5552 20.2624 12.785 20.1661C13.0148 20.0698 13.2232 19.9303 13.3974 19.7549C13.5716 19.5795 13.7081 19.3718 13.7981 19.1436C13.8881 18.9153 13.9295 18.6716 13.9193 18.4271ZM13.9193 18.4271L13.5863 18.4408M13.9193 18.4271C13.9193 18.4271 13.9193 18.4271 13.9193 18.427L13.5863 18.4408M13.5863 18.4408C13.5945 18.6386 13.5611 18.836 13.488 19.0213C13.415 19.2066 13.3037 19.3762 13.1609 19.52C13.018 19.6638 12.8464 19.779 12.6561 19.8587C12.4658 19.9385 12.2607 19.9812 12.0529 19.9844H12.0233C11.6062 19.9831 11.2058 19.8284 10.9059 19.5525C10.6059 19.2767 10.4296 18.9011 10.4137 18.5043C10.4061 18.3069 10.4399 18.1101 10.513 17.9254C10.5862 17.7406 10.6973 17.5715 10.8399 17.4281C10.9824 17.2847 11.1536 17.1698 11.3434 17.09C11.5331 17.0103 11.7376 16.9674 11.945 16.9638H11.9746C12.3916 16.9642 12.7922 17.1182 13.0926 17.3936C13.393 17.6689 13.5699 18.0442 13.5863 18.4408ZM23.4665 20.2125L23.4665 20.2125C23.6068 20.4676 23.6751 20.7517 23.6658 21.0376C23.6566 21.3234 23.57 21.6033 23.4131 21.8501C23.2562 22.097 23.0337 22.3031 22.7658 22.4469C22.4978 22.5907 22.1942 22.6667 21.8847 22.6667H21.8846H2.11538H2.11533C1.80576 22.6667 1.50222 22.5907 1.23422 22.4469C0.96631 22.3031 0.743845 22.097 0.586879 21.8501L0.305565 22.0289L0.586879 21.8501C0.429998 21.6033 0.343434 21.3234 0.334166 21.0376C0.324898 20.7517 0.393165 20.4676 0.533517 20.2125L0.53353 20.2125L10.4192 2.23977C10.5681 1.96911 10.7933 1.74021 11.0721 1.5796C11.3511 1.41893 11.6722 1.33333 12.0005 1.33333C12.3289 1.33333 12.65 1.41893 12.9289 1.5796C13.2078 1.74021 13.4329 1.96911 13.5819 2.23977L23.4665 20.2125ZM11.0224 7.44182C10.7599 7.69176 10.6091 8.03434 10.6091 8.39521V14.4365C10.6091 14.7974 10.7599 15.1399 11.0224 15.3899C11.2843 15.6393 11.6363 15.7767 12 15.7767C12.3637 15.7767 12.7157 15.6393 12.9776 15.3899C13.2401 15.1399 13.3909 14.7974 13.3909 14.4365V8.39521C13.3909 8.03434 13.2401 7.69176 12.9776 7.44182C12.7157 7.19242 12.3637 7.05499 12 7.05499C11.6363 7.05499 11.2843 7.19242 11.0224 7.44182Z\"\n                          propList={\n                            Array [\n                              \"stroke\",\n                              \"strokeWidth\",\n                            ]\n                          }\n                          stroke={\n                            Array [\n                              2,\n                            ]\n                          }\n                          strokeWidth=\"0.666667\"\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#1f2937\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 16,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 24,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Please try again later!\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 10,\n                  \"paddingRight\": 10,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={4283127139}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#4b5563\",\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={4283127139}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 12,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        space={3}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#bae6fd\",\n            \"borderRadius\": 4,\n            \"justifyContent\": \"flex-start\",\n            \"paddingBottom\": 12,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 12,\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexShrink\": 1,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"flexShrink\": 1,\n                \"justifyContent\": \"space-between\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                  \"flexShrink\": 1,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={16}\n                  bbWidth={16}\n                  color={4278413729}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#0369a1\",\n                        \"height\": 16,\n                        \"marginTop\": 4,\n                        \"width\": 16,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                    ]\n                  }\n                  tintColor={4278413729}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M12 0C9.62663 0 7.30655 0.703788 5.33316 2.02236C3.35977 3.34094 1.8217 5.21509 0.913451 7.4078C0.00519948 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6689 1.83649 18.807 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0865C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6935 24 14.3734 24 12C23.9966 8.81846 22.7312 5.76821 20.4815 3.51852C18.2318 1.26883 15.1815 0.00344108 12 0ZM12.25 5C12.5467 5 12.8367 5.08797 13.0834 5.25279C13.33 5.41762 13.5223 5.65189 13.6358 5.92597C13.7494 6.20006 13.7791 6.50166 13.7212 6.79263C13.6633 7.08361 13.5204 7.35088 13.3107 7.56066C13.1009 7.77044 12.8336 7.9133 12.5426 7.97118C12.2517 8.02905 11.9501 7.99935 11.676 7.88582C11.4019 7.77229 11.1676 7.58003 11.0028 7.33335C10.838 7.08668 10.75 6.79667 10.75 6.5C10.75 6.10217 10.908 5.72064 11.1893 5.43934C11.4706 5.15803 11.8522 5 12.25 5ZM14.5 18.5H10.5C10.2348 18.5 9.98043 18.3946 9.7929 18.2071C9.60536 18.0196 9.5 17.7652 9.5 17.5C9.5 17.2348 9.60536 16.9804 9.7929 16.7929C9.98043 16.6054 10.2348 16.5 10.5 16.5H11.25C11.3163 16.5 11.3799 16.4737 11.4268 16.4268C11.4737 16.3799 11.5 16.3163 11.5 16.25V11.75C11.5 11.6837 11.4737 11.6201 11.4268 11.5732C11.3799 11.5263 11.3163 11.5 11.25 11.5H10.5C10.2348 11.5 9.98043 11.3946 9.7929 11.2071C9.60536 11.0196 9.5 10.7652 9.5 10.5C9.5 10.2348 9.60536 9.98043 9.7929 9.79289C9.98043 9.60536 10.2348 9.5 10.5 9.5H11.5C12.0304 9.5 12.5391 9.71071 12.9142 10.0858C13.2893 10.4609 13.5 10.9696 13.5 11.5V16.25C13.5 16.3163 13.5263 16.3799 13.5732 16.4268C13.6201 16.4737 13.6837 16.5 13.75 16.5H14.5C14.7652 16.5 15.0196 16.6054 15.2071 16.7929C15.3946 16.9804 15.5 17.2348 15.5 17.5C15.5 17.7652 15.3946 18.0196 15.2071 18.2071C15.0196 18.3946 14.7652 18.5 14.5 18.5Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#1f2937\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 16,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 24,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                We are going live in July!\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 10,\n                  \"paddingRight\": 10,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={4283127139}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#4b5563\",\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={4283127139}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 12,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        space={3}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#fed7aa\",\n            \"borderRadius\": 4,\n            \"justifyContent\": \"flex-start\",\n            \"paddingBottom\": 12,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 12,\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexShrink\": 1,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"flexShrink\": 1,\n                \"justifyContent\": \"space-between\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                  \"flexShrink\": 1,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={16}\n                  bbWidth={16}\n                  color={4290920716}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#c2410c\",\n                        \"height\": 16,\n                        \"marginTop\": 4,\n                        \"width\": 16,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                    ]\n                  }\n                  tintColor={4290920716}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M11.9836 0.00267822C8.77744 0.0551662 5.72075 1.36728 3.47427 3.65538C2.35024 4.77447 1.46338 6.10869 0.866705 7.57831C0.270027 9.04793 -0.0242179 10.6228 0.00155827 12.2087C-0.000286057 13.7583 0.303697 15.2931 0.896087 16.7251C1.48848 18.1571 2.35763 19.458 3.45373 20.5535C4.54983 21.6489 5.85133 22.5173 7.28365 23.1089C8.71596 23.7004 10.2509 24.0035 11.8006 24.0007H12.0146C15.2217 23.9677 18.2847 22.6638 20.5316 20.3751C22.7785 18.0864 24.0257 14.9999 23.9996 11.7927C24.0033 10.2243 23.6933 8.6709 23.0879 7.22398C22.4825 5.77706 21.5939 4.4658 20.4744 3.36731C19.3548 2.26882 18.0269 1.40527 16.5688 0.827453C15.1106 0.249636 13.5517 -0.0307856 11.9836 0.00267822ZM10.5007 16.5433C10.4935 16.3473 10.5254 16.1517 10.5947 15.9682C10.6639 15.7846 10.7691 15.6167 10.904 15.4742C11.0389 15.3318 11.2009 15.2177 11.3804 15.1386C11.5599 15.0594 11.7534 15.0169 11.9496 15.0135H11.9766C12.3712 15.0142 12.7501 15.1677 13.034 15.4417C13.3179 15.7157 13.4847 16.089 13.4995 16.4833C13.5068 16.6794 13.4749 16.875 13.4057 17.0586C13.3365 17.2423 13.2314 17.4102 13.0965 17.5527C12.9615 17.6952 12.7995 17.8093 12.6199 17.8884C12.4403 17.9674 12.2468 18.0099 12.0506 18.0132H12.0236C11.6291 18.0119 11.2505 17.8583 10.9667 17.5844C10.6829 17.3105 10.5159 16.9375 10.5007 16.5433ZM11.0007 12.5017V6.50215C11.0007 6.23695 11.106 5.98262 11.2935 5.7951C11.481 5.60758 11.7354 5.50223 12.0006 5.50223C12.2658 5.50223 12.5201 5.60758 12.7076 5.7951C12.8951 5.98262 13.0005 6.23695 13.0005 6.50215V12.5017C13.0005 12.7669 12.8951 13.0212 12.7076 13.2087C12.5201 13.3962 12.2658 13.5016 12.0006 13.5016C11.7354 13.5016 11.481 13.3962 11.2935 13.2087C11.106 13.0212 11.0007 12.7669 11.0007 12.5017Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#1f2937\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 16,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 24,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Poor internet connection.\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 10,\n                  \"paddingRight\": 10,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={4283127139}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#4b5563\",\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={4283127139}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Alert Usage 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        space={3}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#bae6fd\",\n            \"borderRadius\": 4,\n            \"justifyContent\": \"flex-start\",\n            \"maxWidth\": 400,\n            \"paddingBottom\": 12,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 12,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexShrink\": 1,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"flexShrink\": 1,\n                \"justifyContent\": \"space-between\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"flexShrink\": 1,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={16}\n                  bbWidth={16}\n                  color={4278413729}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#0369a1\",\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                    ]\n                  }\n                  tintColor={4278413729}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M12 0C9.62663 0 7.30655 0.703788 5.33316 2.02236C3.35977 3.34094 1.8217 5.21509 0.913451 7.4078C0.00519948 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6689 1.83649 18.807 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0865C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6935 24 14.3734 24 12C23.9966 8.81846 22.7312 5.76821 20.4815 3.51852C18.2318 1.26883 15.1815 0.00344108 12 0ZM12.25 5C12.5467 5 12.8367 5.08797 13.0834 5.25279C13.33 5.41762 13.5223 5.65189 13.6358 5.92597C13.7494 6.20006 13.7791 6.50166 13.7212 6.79263C13.6633 7.08361 13.5204 7.35088 13.3107 7.56066C13.1009 7.77044 12.8336 7.9133 12.5426 7.97118C12.2517 8.02905 11.9501 7.99935 11.676 7.88582C11.4019 7.77229 11.1676 7.58003 11.0028 7.33335C10.838 7.08668 10.75 6.79667 10.75 6.5C10.75 6.10217 10.908 5.72064 11.1893 5.43934C11.4706 5.15803 11.8522 5 12.25 5ZM14.5 18.5H10.5C10.2348 18.5 9.98043 18.3946 9.7929 18.2071C9.60536 18.0196 9.5 17.7652 9.5 17.5C9.5 17.2348 9.60536 16.9804 9.7929 16.7929C9.98043 16.6054 10.2348 16.5 10.5 16.5H11.25C11.3163 16.5 11.3799 16.4737 11.4268 16.4268C11.4737 16.3799 11.5 16.3163 11.5 16.25V11.75C11.5 11.6837 11.4737 11.6201 11.4268 11.5732C11.3799 11.5263 11.3163 11.5 11.25 11.5H10.5C10.2348 11.5 9.98043 11.3946 9.7929 11.2071C9.60536 11.0196 9.5 10.7652 9.5 10.5C9.5 10.2348 9.60536 9.98043 9.7929 9.79289C9.98043 9.60536 10.2348 9.5 10.5 9.5H11.5C12.0304 9.5 12.5391 9.71071 12.9142 10.0858C13.2893 10.4609 13.5 10.9696 13.5 11.5V16.25C13.5 16.3163 13.5263 16.3799 13.5732 16.4268C13.6201 16.4737 13.6837 16.5 13.75 16.5H14.5C14.7652 16.5 15.0196 16.6054 15.2071 16.7929C15.3946 16.9804 15.5 17.2348 15.5 17.5C15.5 17.7652 15.3946 18.0196 15.2071 18.2071C15.0196 18.3946 14.7652 18.5 14.5 18.5Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#1f2937\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 16,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 24,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                We are going live in July!\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 10,\n                  \"paddingRight\": 10,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={4283127139}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#4b5563\",\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={4283127139}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 8,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"paddingLeft\": 24,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#4b5563\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              We are happy to announce that we are going live on July 28th. Get ready!\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Alert Variant 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <RCTScrollView\n      contentContainerStyle={\n        Array [\n          Object {},\n          Object {\n            \"dataSet\": Object {},\n          },\n          Object {},\n        ]\n      }\n      dataSet={Object {}}\n      style={\n        Object {\n          \"marginTop\": 20,\n        }\n      }\n    >\n      <View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"column\",\n              \"justifyContent\": \"center\",\n              \"marginRight\": 20,\n              \"maxWidth\": 400,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 30,\n                \"marginBottom\": 16,\n                \"textAlign\": \"center\",\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            solid\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            space={3}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#15803d\",\n                \"borderRadius\": 4,\n                \"justifyContent\": \"flex-start\",\n                \"paddingBottom\": 12,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 12,\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"flexShrink\": 1,\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"flexShrink\": 1,\n                    \"justifyContent\": \"space-between\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                      \"flexShrink\": 1,\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={Object {}}\n                  >\n                    <RNSVGSvgView\n                      accessibilityRole=\"image\"\n                      align=\"xMidYMid\"\n                      bbHeight={16}\n                      bbWidth={16}\n                      color={4294638330}\n                      dataSet={Object {}}\n                      focusable={false}\n                      meetOrSlice={0}\n                      minX={0}\n                      minY={0}\n                      stroke=\"\"\n                      style={\n                        Array [\n                          Object {\n                            \"backgroundColor\": \"transparent\",\n                            \"borderWidth\": 0,\n                          },\n                          Object {\n                            \"color\": \"#fafafa\",\n                            \"height\": 16,\n                            \"width\": 16,\n                          },\n                          Object {\n                            \"flex\": 0,\n                            \"height\": 16,\n                            \"width\": 16,\n                          },\n                        ]\n                      }\n                      tintColor={4294638330}\n                      vbHeight={24}\n                      vbWidth={24}\n                    >\n                      <RNSVGGroup\n                        propList={\n                          Array [\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      >\n                        <RNSVGGroup>\n                          <RNSVGPath\n                            d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z\"\n                            fill={\n                              Array [\n                                2,\n                              ]\n                            }\n                            propList={\n                              Array [\n                                \"fill\",\n                                \"stroke\",\n                              ]\n                            }\n                            stroke={null}\n                          />\n                        </RNSVGGroup>\n                      </RNSVGGroup>\n                    </RNSVGSvgView>\n                  </View>\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"width\": 8,\n                      }\n                    }\n                  />\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#fafaf9\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Selection successfully moved!\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"marginBottom\": 10,\n                \"marginTop\": 20,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 30,\n                \"marginBottom\": 16,\n                \"textAlign\": \"center\",\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            left-accent\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            space={3}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#bbf7d0\",\n                \"borderLeftColor\": \"#15803d\",\n                \"borderLeftWidth\": 4,\n                \"borderRadius\": 4,\n                \"justifyContent\": \"flex-start\",\n                \"paddingBottom\": 12,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 12,\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"flexShrink\": 1,\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"flexShrink\": 1,\n                    \"justifyContent\": \"space-between\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                      \"flexShrink\": 1,\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={Object {}}\n                  >\n                    <RNSVGSvgView\n                      accessibilityRole=\"image\"\n                      align=\"xMidYMid\"\n                      bbHeight={16}\n                      bbWidth={16}\n                      color={4279599165}\n                      dataSet={Object {}}\n                      focusable={false}\n                      meetOrSlice={0}\n                      minX={0}\n                      minY={0}\n                      stroke=\"\"\n                      style={\n                        Array [\n                          Object {\n                            \"backgroundColor\": \"transparent\",\n                            \"borderWidth\": 0,\n                          },\n                          Object {\n                            \"color\": \"#15803d\",\n                            \"height\": 16,\n                            \"width\": 16,\n                          },\n                          Object {\n                            \"flex\": 0,\n                            \"height\": 16,\n                            \"width\": 16,\n                          },\n                        ]\n                      }\n                      tintColor={4279599165}\n                      vbHeight={24}\n                      vbWidth={24}\n                    >\n                      <RNSVGGroup\n                        propList={\n                          Array [\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      >\n                        <RNSVGGroup>\n                          <RNSVGPath\n                            d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z\"\n                            fill={\n                              Array [\n                                2,\n                              ]\n                            }\n                            propList={\n                              Array [\n                                \"fill\",\n                                \"stroke\",\n                              ]\n                            }\n                            stroke={null}\n                          />\n                        </RNSVGGroup>\n                      </RNSVGGroup>\n                    </RNSVGSvgView>\n                  </View>\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"width\": 8,\n                      }\n                    }\n                  />\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#1f2937\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Selection successfully moved!\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"marginBottom\": 10,\n                \"marginTop\": 20,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 30,\n                \"marginBottom\": 16,\n                \"textAlign\": \"center\",\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            top-accent\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            space={3}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#bbf7d0\",\n                \"borderRadius\": 4,\n                \"borderTopColor\": \"#15803d\",\n                \"borderTopWidth\": 4,\n                \"justifyContent\": \"flex-start\",\n                \"paddingBottom\": 12,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 12,\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"flexShrink\": 1,\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"flexShrink\": 1,\n                    \"justifyContent\": \"space-between\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                      \"flexShrink\": 1,\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={Object {}}\n                  >\n                    <RNSVGSvgView\n                      accessibilityRole=\"image\"\n                      align=\"xMidYMid\"\n                      bbHeight={16}\n                      bbWidth={16}\n                      color={4279599165}\n                      dataSet={Object {}}\n                      focusable={false}\n                      meetOrSlice={0}\n                      minX={0}\n                      minY={0}\n                      stroke=\"\"\n                      style={\n                        Array [\n                          Object {\n                            \"backgroundColor\": \"transparent\",\n                            \"borderWidth\": 0,\n                          },\n                          Object {\n                            \"color\": \"#15803d\",\n                            \"height\": 16,\n                            \"width\": 16,\n                          },\n                          Object {\n                            \"flex\": 0,\n                            \"height\": 16,\n                            \"width\": 16,\n                          },\n                        ]\n                      }\n                      tintColor={4279599165}\n                      vbHeight={24}\n                      vbWidth={24}\n                    >\n                      <RNSVGGroup\n                        propList={\n                          Array [\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      >\n                        <RNSVGGroup>\n                          <RNSVGPath\n                            d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z\"\n                            fill={\n                              Array [\n                                2,\n                              ]\n                            }\n                            propList={\n                              Array [\n                                \"fill\",\n                                \"stroke\",\n                              ]\n                            }\n                            stroke={null}\n                          />\n                        </RNSVGGroup>\n                      </RNSVGGroup>\n                    </RNSVGSvgView>\n                  </View>\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"width\": 8,\n                      }\n                    }\n                  />\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#1f2937\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Selection successfully moved!\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"marginBottom\": 10,\n                \"marginTop\": 20,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 30,\n                \"marginBottom\": 16,\n                \"textAlign\": \"center\",\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            outline\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            space={3}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"borderColor\": \"#15803d\",\n                \"borderRadius\": 4,\n                \"borderWidth\": 1,\n                \"justifyContent\": \"flex-start\",\n                \"paddingBottom\": 12,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 12,\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"flexShrink\": 1,\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"flexShrink\": 1,\n                    \"justifyContent\": \"space-between\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                      \"flexShrink\": 1,\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={Object {}}\n                  >\n                    <RNSVGSvgView\n                      accessibilityRole=\"image\"\n                      align=\"xMidYMid\"\n                      bbHeight={16}\n                      bbWidth={16}\n                      color={4279599165}\n                      dataSet={Object {}}\n                      focusable={false}\n                      meetOrSlice={0}\n                      minX={0}\n                      minY={0}\n                      stroke=\"\"\n                      style={\n                        Array [\n                          Object {\n                            \"backgroundColor\": \"transparent\",\n                            \"borderWidth\": 0,\n                          },\n                          Object {\n                            \"color\": \"#15803d\",\n                            \"height\": 16,\n                            \"width\": 16,\n                          },\n                          Object {\n                            \"flex\": 0,\n                            \"height\": 16,\n                            \"width\": 16,\n                          },\n                        ]\n                      }\n                      tintColor={4279599165}\n                      vbHeight={24}\n                      vbWidth={24}\n                    >\n                      <RNSVGGroup\n                        propList={\n                          Array [\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      >\n                        <RNSVGGroup>\n                          <RNSVGPath\n                            d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z\"\n                            fill={\n                              Array [\n                                2,\n                              ]\n                            }\n                            propList={\n                              Array [\n                                \"fill\",\n                                \"stroke\",\n                              ]\n                            }\n                            stroke={null}\n                          />\n                        </RNSVGGroup>\n                      </RNSVGGroup>\n                    </RNSVGSvgView>\n                  </View>\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"width\": 8,\n                      }\n                    }\n                  />\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#171717\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Selection successfully moved!\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"marginBottom\": 10,\n                \"marginTop\": 20,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 30,\n                \"marginBottom\": 16,\n                \"textAlign\": \"center\",\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            subtle\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            space={3}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#bbf7d0\",\n                \"borderRadius\": 4,\n                \"justifyContent\": \"flex-start\",\n                \"paddingBottom\": 12,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 12,\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"flexShrink\": 1,\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"flexShrink\": 1,\n                    \"justifyContent\": \"space-between\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                      \"flexShrink\": 1,\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={Object {}}\n                  >\n                    <RNSVGSvgView\n                      accessibilityRole=\"image\"\n                      align=\"xMidYMid\"\n                      bbHeight={16}\n                      bbWidth={16}\n                      color={4279599165}\n                      dataSet={Object {}}\n                      focusable={false}\n                      meetOrSlice={0}\n                      minX={0}\n                      minY={0}\n                      stroke=\"\"\n                      style={\n                        Array [\n                          Object {\n                            \"backgroundColor\": \"transparent\",\n                            \"borderWidth\": 0,\n                          },\n                          Object {\n                            \"color\": \"#15803d\",\n                            \"height\": 16,\n                            \"width\": 16,\n                          },\n                          Object {\n                            \"flex\": 0,\n                            \"height\": 16,\n                            \"width\": 16,\n                          },\n                        ]\n                      }\n                      tintColor={4279599165}\n                      vbHeight={24}\n                      vbWidth={24}\n                    >\n                      <RNSVGGroup\n                        propList={\n                          Array [\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      >\n                        <RNSVGGroup>\n                          <RNSVGPath\n                            d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z\"\n                            fill={\n                              Array [\n                                2,\n                              ]\n                            }\n                            propList={\n                              Array [\n                                \"fill\",\n                                \"stroke\",\n                              ]\n                            }\n                            stroke={null}\n                          />\n                        </RNSVGGroup>\n                      </RNSVGGroup>\n                    </RNSVGSvgView>\n                  </View>\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"width\": 8,\n                      }\n                    }\n                  />\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#1f2937\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Selection successfully moved!\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"marginBottom\": 10,\n                \"marginTop\": 20,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 30,\n                \"marginBottom\": 16,\n                \"textAlign\": \"center\",\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            outline-light\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            space={3}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"borderColor\": \"rgba(21, 128, 61, 0.4)\",\n                \"borderRadius\": 4,\n                \"borderWidth\": 1,\n                \"justifyContent\": \"flex-start\",\n                \"paddingBottom\": 12,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 12,\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"flexShrink\": 1,\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"flexShrink\": 1,\n                    \"justifyContent\": \"space-between\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                      \"flexShrink\": 1,\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={Object {}}\n                  >\n                    <RNSVGSvgView\n                      accessibilityRole=\"image\"\n                      align=\"xMidYMid\"\n                      bbHeight={16}\n                      bbWidth={16}\n                      color={4279599165}\n                      dataSet={Object {}}\n                      focusable={false}\n                      meetOrSlice={0}\n                      minX={0}\n                      minY={0}\n                      stroke=\"\"\n                      style={\n                        Array [\n                          Object {\n                            \"backgroundColor\": \"transparent\",\n                            \"borderWidth\": 0,\n                          },\n                          Object {\n                            \"color\": \"#15803d\",\n                            \"height\": 16,\n                            \"width\": 16,\n                          },\n                          Object {\n                            \"flex\": 0,\n                            \"height\": 16,\n                            \"width\": 16,\n                          },\n                        ]\n                      }\n                      tintColor={4279599165}\n                      vbHeight={24}\n                      vbWidth={24}\n                    >\n                      <RNSVGGroup\n                        propList={\n                          Array [\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      >\n                        <RNSVGGroup>\n                          <RNSVGPath\n                            d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z\"\n                            fill={\n                              Array [\n                                2,\n                              ]\n                            }\n                            propList={\n                              Array [\n                                \"fill\",\n                                \"stroke\",\n                              ]\n                            }\n                            stroke={null}\n                          />\n                        </RNSVGGroup>\n                      </RNSVGGroup>\n                    </RNSVGSvgView>\n                  </View>\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"width\": 8,\n                      }\n                    }\n                  />\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#171717\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Selection successfully moved!\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"marginBottom\": 10,\n                \"marginTop\": 20,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n        </View>\n      </View>\n    </RCTScrollView>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Alert action 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Array [\n            Object {\n              \"overflow\": \"hidden\",\n            },\n            Object {\n              \"height\": undefined,\n            },\n          ]\n        }\n      >\n        <View\n          dataSet={Object {}}\n          onLayout={[Function]}\n          style={\n            Object {\n              \"overflow\": \"scroll\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            space={3}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#fecaca\",\n                \"borderRadius\": 4,\n                \"justifyContent\": \"flex-start\",\n                \"maxWidth\": 400,\n                \"paddingBottom\": 12,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 12,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"flexShrink\": 1,\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"flexShrink\": 1,\n                    \"justifyContent\": \"space-between\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                      \"flexShrink\": 1,\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={Object {}}\n                  >\n                    <RNSVGSvgView\n                      accessibilityRole=\"image\"\n                      align=\"xMidYMid\"\n                      bbHeight={16}\n                      bbWidth={16}\n                      color={4290321436}\n                      dataSet={Object {}}\n                      focusable={false}\n                      meetOrSlice={0}\n                      minX={0}\n                      minY={0}\n                      stroke=\"\"\n                      style={\n                        Array [\n                          Object {\n                            \"backgroundColor\": \"transparent\",\n                            \"borderWidth\": 0,\n                          },\n                          Object {\n                            \"color\": \"#b91c1c\",\n                            \"height\": 16,\n                            \"width\": 16,\n                          },\n                          Object {\n                            \"flex\": 0,\n                            \"height\": 16,\n                            \"width\": 16,\n                          },\n                        ]\n                      }\n                      tintColor={4290321436}\n                      vbHeight={24}\n                      vbWidth={24}\n                    >\n                      <RNSVGGroup\n                        propList={\n                          Array [\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      >\n                        <RNSVGGroup>\n                          <RNSVGGroup\n                            fill={\n                              Array [\n                                2,\n                              ]\n                            }\n                            propList={\n                              Array [\n                                \"fill\",\n                                \"stroke\",\n                              ]\n                            }\n                            stroke={null}\n                          >\n                            <RNSVGPath\n                              d=\"M13.9193 18.4271C13.8992 17.9392 13.6816 17.4813 13.3178 17.1478C12.9545 16.8148 12.4731 16.631 11.975 16.6304H11.9746H11.945V16.6304L11.9392 16.6305C11.6898 16.6348 11.4434 16.6864 11.2142 16.7827L11.333 17.0655L11.2142 16.7827C10.9851 16.879 10.7773 17.0183 10.6035 17.1931C10.4296 17.368 10.2932 17.5751 10.2031 17.8026C10.113 18.0302 10.0712 18.2732 10.0806 18.5171L10.0807 18.5176C10.1001 19.0055 10.3169 19.4638 10.6802 19.7979C11.043 20.1315 11.5241 20.3162 12.0222 20.3177H12.0233H12.0529V20.3178L12.058 20.3177C12.3081 20.3138 12.5552 20.2624 12.785 20.1661C13.0148 20.0698 13.2232 19.9303 13.3974 19.7549C13.5716 19.5795 13.7081 19.3718 13.7981 19.1436C13.8881 18.9153 13.9295 18.6716 13.9193 18.4271ZM13.9193 18.4271L13.5863 18.4408M13.9193 18.4271C13.9193 18.4271 13.9193 18.4271 13.9193 18.427L13.5863 18.4408M13.5863 18.4408C13.5945 18.6386 13.5611 18.836 13.488 19.0213C13.415 19.2066 13.3037 19.3762 13.1609 19.52C13.018 19.6638 12.8464 19.779 12.6561 19.8587C12.4658 19.9385 12.2607 19.9812 12.0529 19.9844H12.0233C11.6062 19.9831 11.2058 19.8284 10.9059 19.5525C10.6059 19.2767 10.4296 18.9011 10.4137 18.5043C10.4061 18.3069 10.4399 18.1101 10.513 17.9254C10.5862 17.7406 10.6973 17.5715 10.8399 17.4281C10.9824 17.2847 11.1536 17.1698 11.3434 17.09C11.5331 17.0103 11.7376 16.9674 11.945 16.9638H11.9746C12.3916 16.9642 12.7922 17.1182 13.0926 17.3936C13.393 17.6689 13.5699 18.0442 13.5863 18.4408ZM23.4665 20.2125L23.4665 20.2125C23.6068 20.4676 23.6751 20.7517 23.6658 21.0376C23.6566 21.3234 23.57 21.6033 23.4131 21.8501C23.2562 22.097 23.0337 22.3031 22.7658 22.4469C22.4978 22.5907 22.1942 22.6667 21.8847 22.6667H21.8846H2.11538H2.11533C1.80576 22.6667 1.50222 22.5907 1.23422 22.4469C0.96631 22.3031 0.743845 22.097 0.586879 21.8501L0.305565 22.0289L0.586879 21.8501C0.429998 21.6033 0.343434 21.3234 0.334166 21.0376C0.324898 20.7517 0.393165 20.4676 0.533517 20.2125L0.53353 20.2125L10.4192 2.23977C10.5681 1.96911 10.7933 1.74021 11.0721 1.5796C11.3511 1.41893 11.6722 1.33333 12.0005 1.33333C12.3289 1.33333 12.65 1.41893 12.9289 1.5796C13.2078 1.74021 13.4329 1.96911 13.5819 2.23977L23.4665 20.2125ZM11.0224 7.44182C10.7599 7.69176 10.6091 8.03434 10.6091 8.39521V14.4365C10.6091 14.7974 10.7599 15.1399 11.0224 15.3899C11.2843 15.6393 11.6363 15.7767 12 15.7767C12.3637 15.7767 12.7157 15.6393 12.9776 15.3899C13.2401 15.1399 13.3909 14.7974 13.3909 14.4365V8.39521C13.3909 8.03434 13.2401 7.69176 12.9776 7.44182C12.7157 7.19242 12.3637 7.05499 12 7.05499C11.6363 7.05499 11.2843 7.19242 11.0224 7.44182Z\"\n                              propList={\n                                Array [\n                                  \"stroke\",\n                                  \"strokeWidth\",\n                                ]\n                              }\n                              stroke={\n                                Array [\n                                  2,\n                                ]\n                              }\n                              strokeWidth=\"0.666667\"\n                            />\n                          </RNSVGGroup>\n                        </RNSVGGroup>\n                      </RNSVGGroup>\n                    </RNSVGSvgView>\n                  </View>\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"width\": 8,\n                      }\n                    }\n                  />\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#171717\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 16,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"500\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 24,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Please try again later!\n                  </Text>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 8,\n                    }\n                  }\n                />\n                <View\n                  accessibilityRole=\"button\"\n                  accessible={true}\n                  colorScheme=\"primary\"\n                  dataSet={Object {}}\n                  focusable={true}\n                  onBlur={[Function]}\n                  onClick={[Function]}\n                  onFocus={[Function]}\n                  onHoverIn={[Function]}\n                  onHoverOut={[Function]}\n                  onResponderGrant={[Function]}\n                  onResponderMove={[Function]}\n                  onResponderRelease={[Function]}\n                  onResponderTerminate={[Function]}\n                  onResponderTerminationRequest={[Function]}\n                  onStartShouldSetResponder={[Function]}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"borderRadius\": 4,\n                      \"flexDirection\": \"row\",\n                      \"justifyContent\": \"center\",\n                      \"paddingBottom\": 10,\n                      \"paddingLeft\": 10,\n                      \"paddingRight\": 10,\n                      \"paddingTop\": 10,\n                    }\n                  }\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={12}\n                    bbWidth={12}\n                    color={4283127139}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#4b5563\",\n                          \"height\": 12,\n                          \"width\": 12,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 12,\n                          \"width\": 12,\n                        },\n                      ]\n                    }\n                    tintColor={4283127139}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"height\": 4,\n                  }\n                }\n              />\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"paddingLeft\": 24,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Your coupon could not be processed at this time.\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n      </View>\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"marginLeft\": \"auto\",\n            \"marginRight\": \"auto\",\n            \"marginTop\": 32,\n            \"paddingBottom\": 8,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 8,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 18,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Re-Open\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots AlertDialog Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"danger\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#e11d48\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Delete Customer\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots AlertDialog Transition 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Discard\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots AspectRatio Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Array [\n          Object {\n            \"height\": 200,\n          },\n          Object {\n            \"aspectRatio\": 1.3333333333333333,\n            \"style\": undefined,\n          },\n        ]\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"#f87171\",\n            },\n            Object {\n              \"bottom\": 0,\n              \"left\": 0,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"top\": 0,\n            },\n          ]\n        }\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots AspectRatio EmbedImage 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Array [\n          Object {\n            \"height\": 200,\n          },\n          Object {\n            \"aspectRatio\": 0.75,\n            \"style\": undefined,\n          },\n        ]\n      }\n    >\n      <Image\n        accessibilityLabel=\"Picture of a Flower\"\n        alt=\"Picture of a Flower\"\n        dataSet={Object {}}\n        onError={[Function]}\n        resizeMode=\"cover\"\n        source={\n          Object {\n            \"uri\": \"https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260\",\n          }\n        }\n        style={\n          Array [\n            Object {\n              \"maxWidth\": \"100%\",\n            },\n            Object {\n              \"bottom\": 0,\n              \"left\": 0,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"top\": 0,\n            },\n          ]\n        }\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Avatar AvatarBadge 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#38bdf8\",\n            \"borderColor\": \"#27272a\",\n            \"borderRadius\": 9999,\n            \"height\": 24,\n            \"justifyContent\": \"center\",\n            \"position\": \"relative\",\n            \"width\": 24,\n          }\n        }\n      >\n        <Image\n          accessibilityLabel=\"--\"\n          alt=\"--\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80\",\n            }\n          }\n          style={\n            Array [\n              Object {\n                \"borderRadius\": 9999,\n                \"maxWidth\": \"100%\",\n              },\n              Object {\n                \"height\": \"100%\",\n                \"width\": \"100%\",\n              },\n            ]\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": \"#22c55e\",\n              \"borderColor\": \"#fafafa\",\n              \"borderRadius\": 9999,\n              \"borderWidth\": 2,\n              \"bottom\": 0,\n              \"height\": 8,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"width\": 8,\n            }\n          }\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#f59e0b\",\n            \"borderColor\": \"#27272a\",\n            \"borderRadius\": 9999,\n            \"height\": 32,\n            \"justifyContent\": \"center\",\n            \"position\": \"relative\",\n            \"width\": 32,\n          }\n        }\n      >\n        <Image\n          accessibilityLabel=\"--\"\n          alt=\"--\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://images.unsplash.com/photo-1614289371518-722f2615943d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80\",\n            }\n          }\n          style={\n            Array [\n              Object {\n                \"borderRadius\": 9999,\n                \"maxWidth\": \"100%\",\n              },\n              Object {\n                \"height\": \"100%\",\n                \"width\": \"100%\",\n              },\n            ]\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": \"#22c55e\",\n              \"borderColor\": \"#fafafa\",\n              \"borderRadius\": 9999,\n              \"borderWidth\": 2,\n              \"bottom\": 0,\n              \"height\": 12,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"width\": 12,\n            }\n          }\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#f59e0b\",\n            \"borderColor\": \"#27272a\",\n            \"borderRadius\": 9999,\n            \"height\": 48,\n            \"justifyContent\": \"center\",\n            \"position\": \"relative\",\n            \"width\": 48,\n          }\n        }\n      >\n        <Image\n          accessibilityLabel=\"--\"\n          alt=\"--\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://images.unsplash.com/photo-1614289371518-722f2615943d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80\",\n            }\n          }\n          style={\n            Array [\n              Object {\n                \"borderRadius\": 9999,\n                \"maxWidth\": \"100%\",\n              },\n              Object {\n                \"height\": \"100%\",\n                \"width\": \"100%\",\n              },\n            ]\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": \"#22c55e\",\n              \"borderColor\": \"#fafafa\",\n              \"borderRadius\": 9999,\n              \"borderWidth\": 2,\n              \"bottom\": 0,\n              \"height\": 16,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"width\": 16,\n            }\n          }\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#f59e0b\",\n            \"borderColor\": \"#27272a\",\n            \"borderRadius\": 9999,\n            \"height\": 64,\n            \"justifyContent\": \"center\",\n            \"position\": \"relative\",\n            \"width\": 64,\n          }\n        }\n      >\n        <Image\n          accessibilityLabel=\"--\"\n          alt=\"--\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://images.unsplash.com/photo-1614289371518-722f2615943d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80\",\n            }\n          }\n          style={\n            Array [\n              Object {\n                \"borderRadius\": 9999,\n                \"maxWidth\": \"100%\",\n              },\n              Object {\n                \"height\": \"100%\",\n                \"width\": \"100%\",\n              },\n            ]\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": \"#22c55e\",\n              \"borderColor\": \"#fafafa\",\n              \"borderRadius\": 9999,\n              \"borderWidth\": 2,\n              \"bottom\": 0,\n              \"height\": 20,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"width\": 20,\n            }\n          }\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#f59e0b\",\n            \"borderColor\": \"#27272a\",\n            \"borderRadius\": 9999,\n            \"height\": 96,\n            \"justifyContent\": \"center\",\n            \"position\": \"relative\",\n            \"width\": 96,\n          }\n        }\n      >\n        <Image\n          accessibilityLabel=\"--\"\n          alt=\"--\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://images.unsplash.com/photo-1614289371518-722f2615943d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80\",\n            }\n          }\n          style={\n            Array [\n              Object {\n                \"borderRadius\": 9999,\n                \"maxWidth\": \"100%\",\n              },\n              Object {\n                \"height\": \"100%\",\n                \"width\": \"100%\",\n              },\n            ]\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": \"#22c55e\",\n              \"borderColor\": \"#fafafa\",\n              \"borderRadius\": 9999,\n              \"borderWidth\": 2,\n              \"bottom\": 0,\n              \"height\": 24,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"width\": 24,\n            }\n          }\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#f59e0b\",\n            \"borderColor\": \"#27272a\",\n            \"borderRadius\": 9999,\n            \"height\": 128,\n            \"justifyContent\": \"center\",\n            \"position\": \"relative\",\n            \"width\": 128,\n          }\n        }\n      >\n        <Image\n          accessibilityLabel=\"--\"\n          alt=\"--\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://images.unsplash.com/photo-1614289371518-722f2615943d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80\",\n            }\n          }\n          style={\n            Array [\n              Object {\n                \"borderRadius\": 9999,\n                \"maxWidth\": \"100%\",\n              },\n              Object {\n                \"height\": \"100%\",\n                \"width\": \"100%\",\n              },\n            ]\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": \"#22c55e\",\n              \"borderColor\": \"#fafafa\",\n              \"borderRadius\": 9999,\n              \"borderWidth\": 2,\n              \"bottom\": 0,\n              \"height\": 28,\n              \"position\": \"absolute\",\n              \"right\": 0,\n              \"width\": 28,\n            }\n          }\n        />\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Avatar AvatarGroup 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"flexDirection\": \"row-reverse\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#52525b\",\n              \"borderColor\": \"#fafafa\",\n              \"borderRadius\": 9999,\n              \"borderWidth\": 2,\n              \"height\": 64,\n              \"justifyContent\": \"center\",\n              \"marginLeft\": -16,\n              \"marginTop\": 0,\n              \"position\": \"relative\",\n              \"width\": 64,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#fafafa\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"600\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 30,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            + 5\n          </Text>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#6366f1\",\n              \"borderColor\": \"#fafafa\",\n              \"borderRadius\": 9999,\n              \"borderWidth\": 2,\n              \"height\": 64,\n              \"justifyContent\": \"center\",\n              \"marginLeft\": -16,\n              \"marginTop\": 0,\n              \"position\": \"relative\",\n              \"width\": 64,\n            }\n          }\n        >\n          <Image\n            accessibilityLabel=\"--\"\n            alt=\"--\"\n            dataSet={Object {}}\n            onError={[Function]}\n            source={\n              Object {\n                \"uri\": \"https://images.unsplash.com/photo-1614289371518-722f2615943d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80\",\n              }\n            }\n            style={\n              Array [\n                Object {\n                  \"borderRadius\": 9999,\n                  \"maxWidth\": \"100%\",\n                },\n                Object {\n                  \"height\": \"100%\",\n                  \"width\": \"100%\",\n                },\n              ]\n            }\n          />\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#06b6d4\",\n              \"borderColor\": \"#fafafa\",\n              \"borderRadius\": 9999,\n              \"borderWidth\": 2,\n              \"height\": 64,\n              \"justifyContent\": \"center\",\n              \"marginLeft\": -16,\n              \"marginTop\": 0,\n              \"position\": \"relative\",\n              \"width\": 64,\n            }\n          }\n        >\n          <Image\n            accessibilityLabel=\"--\"\n            alt=\"--\"\n            dataSet={Object {}}\n            onError={[Function]}\n            source={\n              Object {\n                \"uri\": \"https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80\",\n              }\n            }\n            style={\n              Array [\n                Object {\n                  \"borderRadius\": 9999,\n                  \"maxWidth\": \"100%\",\n                },\n                Object {\n                  \"height\": \"100%\",\n                  \"width\": \"100%\",\n                },\n              ]\n            }\n          />\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#22c55e\",\n              \"borderColor\": \"#fafafa\",\n              \"borderRadius\": 9999,\n              \"borderWidth\": 2,\n              \"height\": 64,\n              \"justifyContent\": \"center\",\n              \"position\": \"relative\",\n              \"width\": 64,\n            }\n          }\n        >\n          <Image\n            accessibilityLabel=\"--\"\n            alt=\"--\"\n            dataSet={Object {}}\n            onError={[Function]}\n            source={\n              Object {\n                \"uri\": \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80\",\n              }\n            }\n            style={\n              Array [\n                Object {\n                  \"borderRadius\": 9999,\n                  \"maxWidth\": \"100%\",\n                },\n                Object {\n                  \"height\": \"100%\",\n                  \"width\": \"100%\",\n                },\n              ]\n            }\n          />\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Avatar Fallback 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginLeft\": \"auto\",\n          \"marginRight\": \"auto\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#22c55e\",\n            \"borderColor\": \"#27272a\",\n            \"borderRadius\": 9999,\n            \"height\": 48,\n            \"justifyContent\": \"center\",\n            \"marginRight\": 4,\n            \"position\": \"relative\",\n            \"width\": 48,\n          }\n        }\n      >\n        <Image\n          accessibilityLabel=\"--\"\n          alt=\"--\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://bit.ly/broken-link\",\n            }\n          }\n          style={\n            Array [\n              Object {\n                \"borderRadius\": 9999,\n                \"maxWidth\": \"100%\",\n              },\n              Object {\n                \"height\": \"100%\",\n                \"width\": \"100%\",\n              },\n            ]\n          }\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 8,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#f59e0b\",\n            \"borderColor\": \"#27272a\",\n            \"borderRadius\": 9999,\n            \"height\": 48,\n            \"justifyContent\": \"center\",\n            \"position\": \"relative\",\n            \"width\": 48,\n          }\n        }\n      >\n        <Image\n          accessibilityLabel=\"--\"\n          alt=\"--\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://bit.ly/broken-link\",\n            }\n          }\n          style={\n            Array [\n              Object {\n                \"borderRadius\": 9999,\n                \"maxWidth\": \"100%\",\n              },\n              Object {\n                \"height\": \"100%\",\n                \"width\": \"100%\",\n              },\n            ]\n          }\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 8,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#38bdf8\",\n            \"borderColor\": \"#27272a\",\n            \"borderRadius\": 9999,\n            \"height\": 48,\n            \"justifyContent\": \"center\",\n            \"position\": \"relative\",\n            \"width\": 48,\n          }\n        }\n      >\n        <Image\n          accessibilityLabel=\"--\"\n          alt=\"--\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://bit.ly/broken-link\",\n            }\n          }\n          style={\n            Array [\n              Object {\n                \"borderRadius\": 9999,\n                \"maxWidth\": \"100%\",\n              },\n              Object {\n                \"height\": \"100%\",\n                \"width\": \"100%\",\n              },\n            ]\n          }\n        />\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Avatar Playground 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"#0d9488\",\n          \"borderColor\": \"#000000\",\n          \"borderRadius\": 999,\n          \"borderWidth\": 2,\n          \"height\": 48,\n          \"justifyContent\": \"center\",\n          \"position\": \"relative\",\n          \"width\": 48,\n        }\n      }\n    >\n      <Image\n        accessibilityLabel=\"--\"\n        alt=\"--\"\n        dataSet={Object {}}\n        onError={[Function]}\n        source={\n          Object {\n            \"uri\": \"https://alpha.nativebase.io/img/native-base-icon.png\",\n          }\n        }\n        style={\n          Array [\n            Object {\n              \"borderRadius\": 9999,\n              \"maxWidth\": \"100%\",\n            },\n            Object {\n              \"height\": \"100%\",\n              \"width\": \"100%\",\n            },\n          ]\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": \"#fecaca\",\n            \"borderColor\": \"#fafafa\",\n            \"borderRadius\": 9999,\n            \"borderWidth\": 2,\n            \"bottom\": 0,\n            \"height\": 16,\n            \"position\": \"absolute\",\n            \"right\": 0,\n            \"width\": 16,\n          }\n        }\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Avatar Size 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"alignSelf\": \"center\",\n              \"backgroundColor\": \"#22c55e\",\n              \"borderColor\": \"#27272a\",\n              \"borderRadius\": 9999,\n              \"height\": 24,\n              \"justifyContent\": \"center\",\n              \"position\": \"relative\",\n              \"width\": 24,\n            }\n          }\n        >\n          <Image\n            accessibilityLabel=\"--\"\n            alt=\"--\"\n            dataSet={Object {}}\n            onError={[Function]}\n            source={\n              Object {\n                \"uri\": \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80\",\n              }\n            }\n            style={\n              Array [\n                Object {\n                  \"borderRadius\": 9999,\n                  \"maxWidth\": \"100%\",\n                },\n                Object {\n                  \"height\": \"100%\",\n                  \"width\": \"100%\",\n                },\n              ]\n            }\n          />\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"alignSelf\": \"center\",\n              \"backgroundColor\": \"#06b6d4\",\n              \"borderColor\": \"#27272a\",\n              \"borderRadius\": 9999,\n              \"height\": 32,\n              \"justifyContent\": \"center\",\n              \"position\": \"relative\",\n              \"width\": 32,\n            }\n          }\n        >\n          <Image\n            accessibilityLabel=\"--\"\n            alt=\"--\"\n            dataSet={Object {}}\n            onError={[Function]}\n            source={\n              Object {\n                \"uri\": \"https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80\",\n              }\n            }\n            style={\n              Array [\n                Object {\n                  \"borderRadius\": 9999,\n                  \"maxWidth\": \"100%\",\n                },\n                Object {\n                  \"height\": \"100%\",\n                  \"width\": \"100%\",\n                },\n              ]\n            }\n          />\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"alignSelf\": \"center\",\n              \"backgroundColor\": \"#6366f1\",\n              \"borderColor\": \"#27272a\",\n              \"borderRadius\": 9999,\n              \"height\": 48,\n              \"justifyContent\": \"center\",\n              \"position\": \"relative\",\n              \"width\": 48,\n            }\n          }\n        >\n          <Image\n            accessibilityLabel=\"--\"\n            alt=\"--\"\n            dataSet={Object {}}\n            onError={[Function]}\n            source={\n              Object {\n                \"uri\": \"https://images.unsplash.com/photo-1614289371518-722f2615943d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80\",\n              }\n            }\n            style={\n              Array [\n                Object {\n                  \"borderRadius\": 9999,\n                  \"maxWidth\": \"100%\",\n                },\n                Object {\n                  \"height\": \"100%\",\n                  \"width\": \"100%\",\n                },\n              ]\n            }\n          />\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"alignSelf\": \"center\",\n              \"backgroundColor\": \"#f59e0b\",\n              \"borderColor\": \"#27272a\",\n              \"borderRadius\": 9999,\n              \"height\": 64,\n              \"justifyContent\": \"center\",\n              \"position\": \"relative\",\n              \"width\": 64,\n            }\n          }\n        >\n          <Image\n            accessibilityLabel=\"--\"\n            alt=\"--\"\n            dataSet={Object {}}\n            onError={[Function]}\n            source={\n              Object {\n                \"uri\": \"https://images.unsplash.com/photo-1607746882042-944635dfe10e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80\",\n              }\n            }\n            style={\n              Array [\n                Object {\n                  \"borderRadius\": 9999,\n                  \"maxWidth\": \"100%\",\n                },\n                Object {\n                  \"height\": \"100%\",\n                  \"width\": \"100%\",\n                },\n              ]\n            }\n          />\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"alignSelf\": \"center\",\n              \"backgroundColor\": \"#db2777\",\n              \"borderColor\": \"#27272a\",\n              \"borderRadius\": 9999,\n              \"height\": 96,\n              \"justifyContent\": \"center\",\n              \"position\": \"relative\",\n              \"width\": 96,\n            }\n          }\n        >\n          <Image\n            accessibilityLabel=\"--\"\n            alt=\"--\"\n            dataSet={Object {}}\n            onError={[Function]}\n            source={\n              Object {\n                \"uri\": \"https://images.unsplash.com/photo-1601233749202-95d04d5b3c00?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2876&q=80\",\n              }\n            }\n            style={\n              Array [\n                Object {\n                  \"borderRadius\": 9999,\n                  \"maxWidth\": \"100%\",\n                },\n                Object {\n                  \"height\": \"100%\",\n                  \"width\": \"100%\",\n                },\n              ]\n            }\n          />\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"alignSelf\": \"center\",\n              \"backgroundColor\": \"#9333ea\",\n              \"borderColor\": \"#27272a\",\n              \"borderRadius\": 9999,\n              \"height\": 128,\n              \"justifyContent\": \"center\",\n              \"position\": \"relative\",\n              \"width\": 128,\n            }\n          }\n        >\n          <Image\n            accessibilityLabel=\"--\"\n            alt=\"--\"\n            dataSet={Object {}}\n            onError={[Function]}\n            source={\n              Object {\n                \"uri\": \"https://images.unsplash.com/photo-1510771463146-e89e6e86560e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=627&q=80\",\n              }\n            }\n            style={\n              Array [\n                Object {\n                  \"borderRadius\": 9999,\n                  \"maxWidth\": \"100%\",\n                },\n                Object {\n                  \"height\": \"100%\",\n                  \"width\": \"100%\",\n                },\n              ]\n            }\n          />\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Avatar Usage 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#22c55e\",\n            \"borderColor\": \"#27272a\",\n            \"borderRadius\": 9999,\n            \"height\": 48,\n            \"justifyContent\": \"center\",\n            \"position\": \"relative\",\n            \"width\": 48,\n          }\n        }\n      >\n        <Image\n          accessibilityLabel=\"--\"\n          alt=\"--\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80\",\n            }\n          }\n          style={\n            Array [\n              Object {\n                \"borderRadius\": 9999,\n                \"maxWidth\": \"100%\",\n              },\n              Object {\n                \"height\": \"100%\",\n                \"width\": \"100%\",\n              },\n            ]\n          }\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 8,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#06b6d4\",\n            \"borderColor\": \"#27272a\",\n            \"borderRadius\": 9999,\n            \"height\": 48,\n            \"justifyContent\": \"center\",\n            \"position\": \"relative\",\n            \"width\": 48,\n          }\n        }\n      >\n        <Image\n          accessibilityLabel=\"--\"\n          alt=\"--\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80\",\n            }\n          }\n          style={\n            Array [\n              Object {\n                \"borderRadius\": 9999,\n                \"maxWidth\": \"100%\",\n              },\n              Object {\n                \"height\": \"100%\",\n                \"width\": \"100%\",\n              },\n            ]\n          }\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 8,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#6366f1\",\n            \"borderColor\": \"#27272a\",\n            \"borderRadius\": 9999,\n            \"height\": 48,\n            \"justifyContent\": \"center\",\n            \"position\": \"relative\",\n            \"width\": 48,\n          }\n        }\n      >\n        <Image\n          accessibilityLabel=\"--\"\n          alt=\"--\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://images.unsplash.com/photo-1614289371518-722f2615943d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80\",\n            }\n          }\n          style={\n            Array [\n              Object {\n                \"borderRadius\": 9999,\n                \"maxWidth\": \"100%\",\n              },\n              Object {\n                \"height\": \"100%\",\n                \"width\": \"100%\",\n              },\n            ]\n          }\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 8,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#f59e0b\",\n            \"borderColor\": \"#27272a\",\n            \"borderRadius\": 9999,\n            \"height\": 48,\n            \"justifyContent\": \"center\",\n            \"position\": \"relative\",\n            \"width\": 48,\n          }\n        }\n      >\n        <Image\n          accessibilityLabel=\"--\"\n          alt=\"--\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://images.unsplash.com/photo-1607746882042-944635dfe10e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80\",\n            }\n          }\n          style={\n            Array [\n              Object {\n                \"borderRadius\": 9999,\n                \"maxWidth\": \"100%\",\n              },\n              Object {\n                \"height\": \"100%\",\n                \"width\": \"100%\",\n              },\n            ]\n          }\n        />\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Badge Color 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"flexDirection\": \"row\",\n          \"marginLeft\": \"auto\",\n          \"marginRight\": \"auto\",\n        }\n      }\n    >\n      <View\n        colorScheme=\"success\"\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#dcfce7\",\n            \"borderColor\": \"transparent\",\n            \"borderRadius\": 2,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 2,\n            \"paddingLeft\": 8,\n            \"paddingRight\": 8,\n            \"paddingTop\": 2,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#14532d\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 12,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 18,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            SUCCESS\n          </Text>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 16,\n          }\n        }\n      />\n      <View\n        colorScheme=\"danger\"\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#ffe4e6\",\n            \"borderColor\": \"transparent\",\n            \"borderRadius\": 2,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 2,\n            \"paddingLeft\": 8,\n            \"paddingRight\": 8,\n            \"paddingTop\": 2,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#881337\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 12,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 18,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            DANGER\n          </Text>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 16,\n          }\n        }\n      />\n      <View\n        colorScheme=\"info\"\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#e0f2fe\",\n            \"borderColor\": \"transparent\",\n            \"borderRadius\": 2,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 2,\n            \"paddingLeft\": 8,\n            \"paddingRight\": 8,\n            \"paddingTop\": 2,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#0c4a6e\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 12,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 18,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            INFO\n          </Text>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 16,\n          }\n        }\n      />\n      <View\n        colorScheme=\"coolGray\"\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#f3f4f6\",\n            \"borderColor\": \"transparent\",\n            \"borderRadius\": 2,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 2,\n            \"paddingLeft\": 8,\n            \"paddingRight\": 8,\n            \"paddingTop\": 2,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#111827\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 12,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 18,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            DARK\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Badge Composition 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      >\n        <View\n          colorScheme=\"danger\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"alignSelf\": \"flex-end\",\n              \"backgroundColor\": \"#e11d48\",\n              \"borderColor\": \"transparent\",\n              \"borderRadius\": 9999,\n              \"borderWidth\": 1,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"marginBottom\": -16,\n              \"marginRight\": -16,\n              \"paddingBottom\": 2,\n              \"paddingLeft\": 8,\n              \"paddingRight\": 8,\n              \"paddingTop\": 2,\n              \"zIndex\": 1,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"500\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 18,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              2\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#06b6d4\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"marginLeft\": \"auto\",\n              \"marginRight\": \"auto\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 8,\n              \"paddingRight\": 8,\n              \"paddingTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Notifications\n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Badge Icon 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"flexDirection\": \"column\",\n        }\n      }\n    >\n      <View\n        colorScheme=\"success\"\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#dcfce7\",\n            \"borderColor\": \"transparent\",\n            \"borderRadius\": 2,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 2,\n            \"paddingLeft\": 8,\n            \"paddingRight\": 8,\n            \"paddingTop\": 2,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#14532d\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 12,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 18,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            SUCCESS\n          </Text>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"width\": 4,\n            }\n          }\n        />\n        <RNSVGSvgView\n          accessibilityRole=\"image\"\n          align=\"xMidYMid\"\n          bbHeight={8}\n          bbWidth={8}\n          color={4279522093}\n          dataSet={Object {}}\n          focusable={false}\n          meetOrSlice={0}\n          minX={0}\n          minY={0}\n          stroke=\"\"\n          style={\n            Array [\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"borderWidth\": 0,\n              },\n              Object {\n                \"color\": \"#14532d\",\n                \"height\": 8,\n                \"width\": 8,\n              },\n              Object {\n                \"flex\": 0,\n                \"height\": 8,\n                \"width\": 8,\n              },\n            ]\n          }\n          tintColor={4279522093}\n          vbHeight={24}\n          vbWidth={24}\n        >\n          <RNSVGGroup\n            propList={\n              Array [\n                \"stroke\",\n              ]\n            }\n            stroke={null}\n          >\n            <RNSVGGroup>\n              <RNSVGPath\n                d=\"M13.25 10.75V2H10.75V10.75H2V13.25H10.75V22H13.25V13.25H22V10.75H13.25Z\"\n                fill={\n                  Array [\n                    2,\n                  ]\n                }\n                propList={\n                  Array [\n                    \"fill\",\n                    \"stroke\",\n                  ]\n                }\n                stroke={null}\n              />\n            </RNSVGGroup>\n          </RNSVGGroup>\n        </RNSVGSvgView>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        colorScheme=\"warning\"\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#ea580c\",\n            \"borderRadius\": 2,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 2,\n            \"paddingLeft\": 8,\n            \"paddingRight\": 8,\n            \"paddingTop\": 2,\n          }\n        }\n      >\n        <RNSVGSvgView\n          accessibilityRole=\"image\"\n          align=\"xMidYMid\"\n          bbHeight={8}\n          bbWidth={8}\n          color={4293548044}\n          dataSet={Object {}}\n          focusable={false}\n          meetOrSlice={0}\n          minX={0}\n          minY={0}\n          stroke=\"\"\n          style={\n            Array [\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"borderWidth\": 0,\n              },\n              Object {\n                \"color\": \"#ea580c\",\n                \"height\": 8,\n                \"width\": 8,\n              },\n              Object {\n                \"flex\": 0,\n                \"height\": 8,\n                \"width\": 8,\n              },\n            ]\n          }\n          tintColor={4293548044}\n          vbHeight={24}\n          vbWidth={24}\n        >\n          <RNSVGGroup\n            propList={\n              Array [\n                \"stroke\",\n              ]\n            }\n            stroke={null}\n          >\n            <RNSVGGroup>\n              <RNSVGPath\n                d=\"M13.25 10.75V2H10.75V10.75H2V13.25H10.75V22H13.25V13.25H22V10.75H13.25Z\"\n                fill={\n                  Array [\n                    2,\n                  ]\n                }\n                propList={\n                  Array [\n                    \"fill\",\n                    \"stroke\",\n                  ]\n                }\n                stroke={null}\n              />\n            </RNSVGGroup>\n          </RNSVGGroup>\n        </RNSVGSvgView>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"width\": 4,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#ea580c\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 12,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 18,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            SUCCESS\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Badge Playground 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      colorScheme=\"success\"\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"#16a34a\",\n          \"borderColor\": \"transparent\",\n          \"borderRadius\": 2,\n          \"borderWidth\": 1,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 2,\n          \"paddingLeft\": 8,\n          \"paddingRight\": 8,\n          \"paddingTop\": 2,\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#fafafa\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 12,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"500\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 18,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          NATIVEBASE\n        </Text>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Badge Usage 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        colorScheme=\"muted\"\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#f5f5f5\",\n            \"borderColor\": \"transparent\",\n            \"borderRadius\": 2,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 2,\n            \"paddingLeft\": 8,\n            \"paddingRight\": 8,\n            \"paddingTop\": 2,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 12,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 18,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            NEW FEATURE\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Badge Variants 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"flexDirection\": \"row\",\n            \"marginLeft\": \"auto\",\n            \"marginRight\": \"auto\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <View\n            colorScheme=\"muted\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"#525252\",\n                \"borderColor\": \"transparent\",\n                \"borderRadius\": 2,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 2,\n                \"paddingLeft\": 8,\n                \"paddingRight\": 8,\n                \"paddingTop\": 2,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 18,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                DEFAULT\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            colorScheme=\"success\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"#16a34a\",\n                \"borderColor\": \"transparent\",\n                \"borderRadius\": 2,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 2,\n                \"paddingLeft\": 8,\n                \"paddingRight\": 8,\n                \"paddingTop\": 2,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 18,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                SUCCESS\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            colorScheme=\"error\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"#dc2626\",\n                \"borderColor\": \"transparent\",\n                \"borderRadius\": 2,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 2,\n                \"paddingLeft\": 8,\n                \"paddingRight\": 8,\n                \"paddingTop\": 2,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 18,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                ERROR\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            colorScheme=\"info\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"#0284c7\",\n                \"borderColor\": \"transparent\",\n                \"borderRadius\": 2,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 2,\n                \"paddingLeft\": 8,\n                \"paddingRight\": 8,\n                \"paddingTop\": 2,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 18,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                INFO\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            colorScheme=\"warning\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"#ea580c\",\n                \"borderColor\": \"transparent\",\n                \"borderRadius\": 2,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 2,\n                \"paddingLeft\": 8,\n                \"paddingRight\": 8,\n                \"paddingTop\": 2,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 18,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                WARNING\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"width\": 16,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <View\n            colorScheme=\"muted\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"borderColor\": \"#525252\",\n                \"borderRadius\": 2,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 2,\n                \"paddingLeft\": 8,\n                \"paddingRight\": 8,\n                \"paddingTop\": 2,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#525252\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 18,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                DEFAULT\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            colorScheme=\"success\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"borderColor\": \"#16a34a\",\n                \"borderRadius\": 2,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 2,\n                \"paddingLeft\": 8,\n                \"paddingRight\": 8,\n                \"paddingTop\": 2,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#16a34a\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 18,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                SUCCESS\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            colorScheme=\"error\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"borderColor\": \"#dc2626\",\n                \"borderRadius\": 2,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 2,\n                \"paddingLeft\": 8,\n                \"paddingRight\": 8,\n                \"paddingTop\": 2,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#dc2626\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 18,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                ERROR\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            colorScheme=\"info\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"borderColor\": \"#0284c7\",\n                \"borderRadius\": 2,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 2,\n                \"paddingLeft\": 8,\n                \"paddingRight\": 8,\n                \"paddingTop\": 2,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#0284c7\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 18,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                INFO\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            colorScheme=\"warning\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"borderColor\": \"#ea580c\",\n                \"borderRadius\": 2,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 2,\n                \"paddingLeft\": 8,\n                \"paddingRight\": 8,\n                \"paddingTop\": 2,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#ea580c\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 18,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                WARNING\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"width\": 16,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <View\n            colorScheme=\"muted\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"#f5f5f5\",\n                \"borderColor\": \"transparent\",\n                \"borderRadius\": 2,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 2,\n                \"paddingLeft\": 8,\n                \"paddingRight\": 8,\n                \"paddingTop\": 2,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 18,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                DEFAULT\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            colorScheme=\"success\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"#dcfce7\",\n                \"borderColor\": \"transparent\",\n                \"borderRadius\": 2,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 2,\n                \"paddingLeft\": 8,\n                \"paddingRight\": 8,\n                \"paddingTop\": 2,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#14532d\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 18,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                SUCCESS\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            colorScheme=\"error\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"#fee2e2\",\n                \"borderColor\": \"transparent\",\n                \"borderRadius\": 2,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 2,\n                \"paddingLeft\": 8,\n                \"paddingRight\": 8,\n                \"paddingTop\": 2,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#7f1d1d\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 18,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                ERROR\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            colorScheme=\"info\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"#e0f2fe\",\n                \"borderColor\": \"transparent\",\n                \"borderRadius\": 2,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 2,\n                \"paddingLeft\": 8,\n                \"paddingRight\": 8,\n                \"paddingTop\": 2,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#0c4a6e\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 18,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                INFO\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            colorScheme=\"warning\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"#ffedd5\",\n                \"borderColor\": \"transparent\",\n                \"borderRadius\": 2,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 2,\n                \"paddingLeft\": 8,\n                \"paddingRight\": 8,\n                \"paddingTop\": 2,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#7c2d12\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 18,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                WARNING\n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Box Basic Box 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignSelf\": \"center\",\n            \"backgroundColor\": \"#06b6d4\",\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#fafaf9\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 16,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"500\",\n              \"letterSpacing\": 0.4,\n              \"lineHeight\": 24,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          This is a Box\n        </Text>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Box Composition 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": \"#fafafa\",\n            \"borderColor\": \"#e5e7eb\",\n            \"borderRadius\": 8,\n            \"borderWidth\": 1,\n            \"maxWidth\": 320,\n            \"overflow\": \"hidden\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Array [\n                Object {\n                  \"width\": \"100%\",\n                },\n                Object {\n                  \"aspectRatio\": 1.7777777777777777,\n                  \"style\": undefined,\n                },\n              ]\n            }\n          >\n            <Image\n              accessibilityLabel=\"image\"\n              alt=\"image\"\n              dataSet={Object {}}\n              onError={[Function]}\n              source={\n                Object {\n                  \"uri\": \"https://www.holidify.com/images/cmsuploads/compressed/Bangalore_citycover_20190613234056.jpg\",\n                }\n              }\n              style={\n                Array [\n                  Object {\n                    \"maxWidth\": \"100%\",\n                  },\n                  Object {\n                    \"bottom\": 0,\n                    \"left\": 0,\n                    \"position\": \"absolute\",\n                    \"right\": 0,\n                    \"top\": 0,\n                  },\n                ]\n              }\n            />\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#8b5cf6\",\n                \"bottom\": 0,\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 6,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 6,\n                \"position\": \"absolute\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafaf9\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 18,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              PHOTOS\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"paddingBottom\": 16,\n              \"paddingLeft\": 16,\n              \"paddingRight\": 16,\n              \"paddingTop\": 16,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 20,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 25,\n                  \"marginLeft\": -4,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              The Garden City\n            </Text>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 8,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#8b5cf6\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"500\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 18,\n                  \"marginLeft\": -2,\n                  \"marginTop\": -4,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              The Silicon Valley of India.\n            </Text>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Bengaluru (also called Bangalore) is the center of India's high-tech industry. The city is also known for its parks and nightlife.\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"space-between\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#4b5563\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                6 mins ago\n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Box LinearGradient Box 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <ViewManagerAdapter_ExpoLinearGradient\n      proxiedProperties={\n        Object {\n          \"colors\": Array [\n            4286436348,\n            4284162486,\n          ],\n          \"dataSet\": Object {},\n          \"endPoint\": Array [\n            1,\n            0,\n          ],\n          \"locations\": undefined,\n          \"startPoint\": Array [\n            0,\n            0,\n          ],\n        }\n      }\n      style={\n        Object {\n          \"borderRadius\": 12,\n          \"paddingBottom\": 48,\n          \"paddingLeft\": 48,\n          \"paddingRight\": 48,\n          \"paddingTop\": 48,\n          \"width\": 288,\n        }\n      }\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#fafaf9\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 16,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"500\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 24,\n            \"textAlign\": \"center\",\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        This is a Box with Linear Gradient\n      </Text>\n    </ViewManagerAdapter_ExpoLinearGradient>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Box With Ref 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"backgroundColor\": \"#06b6d4\",\n          \"elevation\": 3,\n          \"paddingBottom\": 16,\n          \"paddingLeft\": 16,\n          \"paddingRight\": 16,\n          \"paddingTop\": 16,\n          \"shadowColor\": \"#000000\",\n          \"shadowOffset\": Object {\n            \"height\": 1,\n            \"width\": 0,\n          },\n          \"shadowOpacity\": 0.22,\n          \"shadowRadius\": 2.22,\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#FFFFFF\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 16,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 24,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        This is a Box\n      </Text>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Breadcrumb Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 24,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 30,\n            \"marginBottom\": 16,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Default Breadcrumb\n      </Text>\n      <View\n        accessibilityLabel=\"Breadcrumb\"\n        dataSet={Object {}}\n        style={\n          Object {\n            \"display\": \"flex\",\n            \"flexDirection\": \"row\",\n            \"flexWrap\": \"wrap\",\n            \"height\": \"auto\",\n            \"width\": \"auto\",\n          }\n        }\n        wrap=\"wrap\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"link\"\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              direction=\"row\"\n              spacing=\"2\"\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#ef4444\",\n                  \"display\": \"flex\",\n                  \"flexDirection\": \"row\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"height\": \"auto\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                  \"width\": \"auto\",\n                }\n              }\n              wrap=\"wrap\"\n            >\n              Home (This is currently active)\n            </Text>\n          </View>\n        </View>\n        <Text\n          dataSet={Object {}}\n          orientation=\"vertical\"\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"marginLeft\": 8,\n              \"marginRight\": 8,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          /\n        </Text>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"link\"\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              direction=\"row\"\n              spacing=\"2\"\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"display\": \"flex\",\n                  \"flexDirection\": \"row\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"auto\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                  \"width\": \"auto\",\n                }\n              }\n              wrap=\"wrap\"\n            >\n              Docs\n            </Text>\n          </View>\n        </View>\n        <Text\n          dataSet={Object {}}\n          orientation=\"vertical\"\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"marginLeft\": 8,\n              \"marginRight\": 8,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          /\n        </Text>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"link\"\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              direction=\"row\"\n              spacing=\"2\"\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"display\": \"flex\",\n                  \"flexDirection\": \"row\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"auto\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                  \"width\": \"auto\",\n                }\n              }\n              wrap=\"wrap\"\n            >\n              Github\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Breadcrumb Collapsible 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 24,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 30,\n            \"marginBottom\": 16,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Breadcrumb Collapsible\n      </Text>\n      <View\n        accessibilityLabel=\"Breadcrumb\"\n        dataSet={Object {}}\n        style={\n          Object {\n            \"display\": \"flex\",\n            \"flexDirection\": \"row\",\n            \"flexWrap\": \"wrap\",\n            \"height\": \"auto\",\n            \"marginTop\": 12,\n            \"width\": \"auto\",\n          }\n        }\n        wrap=\"wrap\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"link\"\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <Text\n                allowFontScaling={false}\n                dataSet={Object {}}\n                direction=\"row\"\n                spacing=\"2\"\n                style={\n                  Array [\n                    Object {\n                      \"color\": undefined,\n                      \"fontSize\": 12,\n                    },\n                    Object {\n                      \"color\": \"#737373\",\n                      \"display\": \"flex\",\n                      \"flexDirection\": \"row\",\n                      \"fontSize\": 12,\n                      \"height\": 12,\n                      \"lineHeight\": 12,\n                      \"marginRight\": 4,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"fontFamily\": \"material\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"normal\",\n                    },\n                    Object {},\n                  ]\n                }\n                wrap=\"wrap\"\n              >\n                \n              </Text>\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <Text\n                dataSet={Object {}}\n                direction=\"row\"\n                spacing=\"2\"\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"display\": \"flex\",\n                    \"flexDirection\": \"row\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"auto\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                    \"width\": \"auto\",\n                  }\n                }\n                wrap=\"wrap\"\n              >\n                Home\n              </Text>\n            </View>\n          </View>\n        </View>\n        <Text\n          dataSet={Object {}}\n          orientation=\"vertical\"\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"marginLeft\": 8,\n              \"marginRight\": 8,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          /\n        </Text>\n        <View\n          _text={Object {}}\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          setCollapsed={[Function]}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n            }\n          }\n        >\n          <RNSVGSvgView\n            accessibilityRole=\"image\"\n            align=\"xMidYMid\"\n            bbHeight={16}\n            bbWidth={16}\n            color={4285756275}\n            dataSet={Object {}}\n            focusable={false}\n            meetOrSlice={0}\n            minX={0}\n            minY={0}\n            stroke=\"\"\n            style={\n              Array [\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderWidth\": 0,\n                },\n                Object {\n                  \"color\": \"#737373\",\n                  \"height\": 16,\n                  \"width\": 16,\n                },\n                Object {\n                  \"flex\": 0,\n                  \"height\": 16,\n                  \"width\": 16,\n                },\n              ]\n            }\n            tintColor={4285756275}\n            vbHeight={32.055}\n            vbWidth={32.055}\n          >\n            <RNSVGGroup\n              propList={\n                Array [\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            >\n              <RNSVGGroup>\n                <RNSVGGroup\n                  fill={\n                    Array [\n                      2,\n                    ]\n                  }\n                  propList={\n                    Array [\n                      \"fill\",\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGPath\n                    d=\"M3.968,12.061C1.775,12.061,0,13.835,0,16.027c0,2.192,1.773,3.967,3.968,3.967c2.189,0,3.966-1.772,3.966-3.967   C7.934,13.835,6.157,12.061,3.968,12.061z M16.233,12.061c-2.188,0-3.968,1.773-3.968,3.965c0,2.192,1.778,3.967,3.968,3.967   s3.97-1.772,3.97-3.967C20.201,13.835,18.423,12.061,16.233,12.061z M28.09,12.061c-2.192,0-3.969,1.774-3.969,3.967   c0,2.19,1.774,3.965,3.969,3.965c2.188,0,3.965-1.772,3.965-3.965S30.278,12.061,28.09,12.061z\"\n                  />\n                </RNSVGGroup>\n              </RNSVGGroup>\n            </RNSVGGroup>\n          </RNSVGSvgView>\n        </View>\n        <Text\n          dataSet={Object {}}\n          orientation=\"vertical\"\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"marginLeft\": 8,\n              \"marginRight\": 8,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          /\n        </Text>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"link\"\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <Text\n                allowFontScaling={false}\n                dataSet={Object {}}\n                direction=\"row\"\n                spacing=\"2\"\n                style={\n                  Array [\n                    Object {\n                      \"color\": undefined,\n                      \"fontSize\": 12,\n                    },\n                    Object {\n                      \"color\": \"#ef4444\",\n                      \"display\": \"flex\",\n                      \"flexDirection\": \"row\",\n                      \"fontSize\": 12,\n                      \"height\": 12,\n                      \"lineHeight\": 12,\n                      \"marginRight\": 4,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"fontFamily\": \"anticon\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"normal\",\n                    },\n                    Object {},\n                  ]\n                }\n                wrap=\"wrap\"\n              >\n                \n              </Text>\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <Text\n                dataSet={Object {}}\n                direction=\"row\"\n                spacing=\"2\"\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#ef4444\",\n                    \"display\": \"flex\",\n                    \"flexDirection\": \"row\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"height\": \"auto\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                    \"width\": \"auto\",\n                  }\n                }\n                wrap=\"wrap\"\n              >\n                Github (This is currently active)\n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"marginTop\": 12,\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"gray\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 0,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 12,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 12,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#52525b\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Expand\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Breadcrumb ComponentSeparator 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 24,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 30,\n            \"marginBottom\": 16,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Breadcrumb with Custom Separator\n      </Text>\n      <View\n        accessibilityLabel=\"Breadcrumb\"\n        dataSet={Object {}}\n        style={\n          Object {\n            \"display\": \"flex\",\n            \"flexDirection\": \"row\",\n            \"flexWrap\": \"wrap\",\n            \"height\": \"auto\",\n            \"width\": \"auto\",\n          }\n        }\n        wrap=\"wrap\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"link\"\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": \"none\",\n                }\n              }\n            >\n              Home (This is currently active)\n            </Text>\n          </View>\n        </View>\n        <Text />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"link\"\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": \"none\",\n                }\n              }\n            >\n              Docs\n            </Text>\n          </View>\n        </View>\n        <Text />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"link\"\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": \"none\",\n                }\n              }\n            >\n              Github\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Breadcrumb Composition 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 24,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 30,\n            \"marginBottom\": 16,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Breadcrumb Composition\n      </Text>\n      <View\n        accessibilityLabel=\"Breadcrumb\"\n        dataSet={Object {}}\n        style={\n          Object {\n            \"display\": \"flex\",\n            \"flexDirection\": \"row\",\n            \"flexWrap\": \"wrap\",\n            \"height\": \"auto\",\n            \"width\": \"auto\",\n          }\n        }\n        wrap=\"wrap\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"link\"\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <Text />\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <Text\n                dataSet={Object {}}\n                direction=\"row\"\n                spacing=\"2\"\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"display\": \"flex\",\n                    \"flexDirection\": \"row\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"auto\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                    \"width\": \"auto\",\n                  }\n                }\n                wrap=\"wrap\"\n              >\n                Home\n              </Text>\n            </View>\n          </View>\n        </View>\n        <Text\n          dataSet={Object {}}\n          orientation=\"vertical\"\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"marginLeft\": 8,\n              \"marginRight\": 8,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          /\n        </Text>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"link\"\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <Text />\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <Text\n                dataSet={Object {}}\n                direction=\"row\"\n                spacing=\"2\"\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"display\": \"flex\",\n                    \"flexDirection\": \"row\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"auto\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                    \"width\": \"auto\",\n                  }\n                }\n                wrap=\"wrap\"\n              >\n                Docs\n              </Text>\n            </View>\n          </View>\n        </View>\n        <Text\n          dataSet={Object {}}\n          orientation=\"vertical\"\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"marginLeft\": 8,\n              \"marginRight\": 8,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          /\n        </Text>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"link\"\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <Text />\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <Text\n                dataSet={Object {}}\n                direction=\"row\"\n                spacing=\"2\"\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"display\": \"flex\",\n                    \"flexDirection\": \"row\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"height\": \"auto\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                    \"width\": \"auto\",\n                  }\n                }\n                wrap=\"wrap\"\n              >\n                Github (This is currently active)\n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Breadcrumb Separators 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 24,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 30,\n            \"marginBottom\": 16,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Breadcrumb with String Separator\n      </Text>\n      <View\n        accessibilityLabel=\"Breadcrumb\"\n        dataSet={Object {}}\n        style={\n          Object {\n            \"display\": \"flex\",\n            \"flexDirection\": \"row\",\n            \"flexWrap\": \"wrap\",\n            \"height\": \"auto\",\n            \"width\": \"auto\",\n          }\n        }\n        wrap=\"wrap\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"link\"\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              direction=\"row\"\n              spacing=\"2\"\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#ef4444\",\n                  \"display\": \"flex\",\n                  \"flexDirection\": \"row\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"height\": \"auto\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                  \"width\": \"auto\",\n                }\n              }\n              wrap=\"wrap\"\n            >\n              Home (This is currently active)\n            </Text>\n          </View>\n        </View>\n        <Text\n          dataSet={Object {}}\n          orientation=\"vertical\"\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"marginLeft\": 8,\n              \"marginRight\": 8,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          -\n        </Text>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"link\"\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": \"none\",\n                }\n              }\n            >\n              Docs\n            </Text>\n          </View>\n        </View>\n        <Text\n          dataSet={Object {}}\n          orientation=\"vertical\"\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"marginLeft\": 8,\n              \"marginRight\": 8,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          -\n        </Text>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"link\"\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": \"none\",\n                }\n              }\n            >\n              Github\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Button Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Click Me\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Button Composition 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderColor\": \"#d4d4d4\",\n          \"borderRadius\": 999,\n          \"borderWidth\": 2,\n          \"flexDirection\": \"row\",\n          \"height\": 48,\n          \"justifyContent\": \"center\",\n          \"marginLeft\": \"auto\",\n          \"marginRight\": \"auto\",\n          \"paddingBottom\": 10,\n          \"paddingLeft\": 20,\n          \"paddingRight\": 20,\n          \"paddingTop\": 10,\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n          }\n        }\n        test={true}\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#0891b2\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            SHOP NOW\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Button Icons 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"flexDirection\": \"column\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <Text\n            allowFontScaling={false}\n            dataSet={Object {}}\n            style={\n              Array [\n                Object {\n                  \"color\": undefined,\n                  \"fontSize\": 12,\n                },\n                Object {\n                  \"color\": \"#fafafa\",\n                  \"fontSize\": 16,\n                  \"height\": 16,\n                  \"lineHeight\": 16,\n                  \"width\": 16,\n                },\n                Object {\n                  \"fontFamily\": \"ionicons\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"normal\",\n                },\n                Object {},\n              ]\n            }\n          >\n            \n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 6,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Upload\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#cffafe\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#164e63\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Download\n            </Text>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 6,\n              }\n            }\n          />\n          <Text\n            allowFontScaling={false}\n            dataSet={Object {}}\n            style={\n              Array [\n                Object {\n                  \"color\": undefined,\n                  \"fontSize\": 12,\n                },\n                Object {\n                  \"color\": \"#164e63\",\n                  \"fontSize\": 16,\n                  \"height\": 16,\n                  \"lineHeight\": 16,\n                  \"width\": 16,\n                },\n                Object {\n                  \"fontFamily\": \"ionicons\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"normal\",\n                },\n                Object {},\n              ]\n            }\n          >\n            \n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Button Loading 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"flexDirection\": \"column\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"opacity\": 0.4,\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <ActivityIndicator\n            accessibilityLabel=\"loading\"\n            accessible={true}\n            animating={true}\n            color=\"#fafafa\"\n            hidesWhenStopped={true}\n            size=\"small\"\n            style={\n              Array [\n                Array [\n                  Object {},\n                  Object {\n                    \"dataSet\": Object {},\n                    \"focusable\": false,\n                  },\n                  Object {},\n                ],\n                undefined,\n              ]\n            }\n          />\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"opacity\": 0.4,\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <ActivityIndicator\n            accessibilityLabel=\"loading\"\n            accessible={true}\n            animating={true}\n            color=\"#fafafa\"\n            hidesWhenStopped={true}\n            size=\"small\"\n            style={\n              Array [\n                Array [\n                  Object {},\n                  Object {\n                    \"dataSet\": Object {},\n                    \"focusable\": false,\n                  },\n                  Object {},\n                ],\n                undefined,\n              ]\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 6,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Submitting\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"opacity\": 0.4,\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Submitting\n            </Text>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 6,\n              }\n            }\n          />\n          <ActivityIndicator\n            accessibilityLabel=\"loading\"\n            accessible={true}\n            animating={true}\n            color=\"#fafafa\"\n            hidesWhenStopped={true}\n            size=\"small\"\n            style={\n              Array [\n                Array [\n                  Object {},\n                  Object {\n                    \"dataSet\": Object {},\n                    \"focusable\": false,\n                  },\n                  Object {},\n                ],\n                undefined,\n              ]\n            }\n          />\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(251, 191, 36, 0.7)\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"opacity\": 0.4,\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <ActivityIndicator\n            accessibilityLabel=\"loading\"\n            accessible={true}\n            animating={true}\n            color=\"#FFFFFF\"\n            hidesWhenStopped={true}\n            size=\"small\"\n            style={\n              Array [\n                Array [\n                  Object {},\n                  Object {\n                    \"dataSet\": Object {},\n                    \"focusable\": false,\n                  },\n                  Object {},\n                ],\n                undefined,\n              ]\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 6,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#374151\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Submitting\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"opacity\": 0.4,\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <ActivityIndicator\n            accessibilityLabel=\"loading\"\n            accessible={true}\n            animating={true}\n            color=\"#0891b2\"\n            hidesWhenStopped={true}\n            size=\"small\"\n            style={\n              Array [\n                Array [\n                  Object {},\n                  Object {\n                    \"dataSet\": Object {},\n                    \"focusable\": false,\n                  },\n                  Object {},\n                ],\n                undefined,\n              ]\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 6,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#0891b2\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Submitting\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Button Sizes 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 8,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 8,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 10,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 15,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              BUTTON\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 8,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 8,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 18,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              BUTTON\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              BUTTON\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 12,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 12,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 16,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 24,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              BUTTON\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Button Variants 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <RCTScrollView\n      contentContainerStyle={\n        Array [\n          Object {},\n          Object {\n            \"dataSet\": Object {},\n          },\n          Object {},\n        ]\n      }\n      dataSet={Object {}}\n      showsVerticalScrollIndicator={false}\n      style={\n        Object {\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n        }\n      }\n    >\n      <View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"marginTop\": 16,\n              \"paddingLeft\": 8,\n              \"paddingRight\": 8,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Solid\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"column\",\n                \"marginBottom\": 10,\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#0891b2\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#fafafa\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 12,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 18,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    PRIMARY\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"secondary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#db2777\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#fafafa\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 12,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 18,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    SECONDARY\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#0891b2\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"opacity\": 0.4,\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#fafafa\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 12,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 18,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    DISABLED\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Subtle\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"column\",\n                \"marginBottom\": 10,\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#cffafe\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#164e63\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 12,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 18,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    PRIMARY\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"secondary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fce7f3\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#831843\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 12,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 18,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    SECONDARY\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#cffafe\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"opacity\": 0.4,\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#164e63\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 12,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 18,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    DISABLED\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Outline\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"column\",\n                \"marginBottom\": 10,\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#0891b2\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 12,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 18,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    PRIMARY\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"secondary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#db2777\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 12,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 18,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    SECONDARY\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"opacity\": 0.4,\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#0891b2\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 12,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 18,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    DISABLED\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Link\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"column\",\n                \"marginBottom\": 10,\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#0891b2\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 12,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 18,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    PRIMARY\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"secondary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#db2777\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 12,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 18,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    SECONDARY\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"opacity\": 0.4,\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#0891b2\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 12,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 18,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    DISABLED\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Ghost\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"column\",\n                \"marginBottom\": 10,\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#0891b2\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 12,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 18,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    PRIMARY\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"secondary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#db2777\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 12,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 18,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    SECONDARY\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"opacity\": 0.4,\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#0891b2\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 12,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 18,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    DISABLED\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Unstyled\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"column\",\n                \"marginBottom\": 10,\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#171717\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Unstyled\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n        </View>\n      </View>\n    </RCTScrollView>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Button WithRef 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 8,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 8,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#1F2937\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 18,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Send\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots ButtonGroup Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"flexDirection\": \"row\",\n          \"marginLeft\": \"auto\",\n          \"marginRight\": \"auto\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"blue\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#2563eb\",\n            \"borderBottomLeftRadius\": 4,\n            \"borderRadius\": 0,\n            \"borderTopLeftRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 8,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 8,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 18,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Edit\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 0,\n          }\n        }\n      />\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"blue\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderBottomRightRadius\": 4,\n            \"borderColor\": \"#d4d4d4\",\n            \"borderLeftWidth\": 0,\n            \"borderRadius\": 0,\n            \"borderTopRightRadius\": 4,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 8,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 8,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#2563eb\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 18,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Save\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots ButtonGroup Sizes 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 20,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 25,\n            \"marginBottom\": 40,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Sizes\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"column\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"primary\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#0891b2\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 8,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 8,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#fafafa\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 10,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 15,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  BUTTON\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 12,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"primary\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#0891b2\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 8,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 8,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#fafafa\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 12,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 18,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  BUTTON\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 12,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"primary\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#0891b2\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#fafafa\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  BUTTON\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 12,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"primary\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#0891b2\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 12,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 12,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#fafafa\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 16,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 24,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  BUTTON\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots ButtonGroup Variants 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <RCTScrollView\n      contentContainerStyle={\n        Array [\n          Object {},\n          Object {\n            \"dataSet\": Object {},\n          },\n          Object {},\n        ]\n      }\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"marginTop\": 16,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Solid\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"marginBottom\": 10,\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"teal\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#0d9488\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#fafafa\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Save\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"danger\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#e11d48\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#fafafa\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Cancel\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Subtle\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"marginBottom\": 10,\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"teal\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#ccfbf1\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#134e4a\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Save\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"danger\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#ffe4e6\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#881337\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Cancel\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Outline\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"marginBottom\": 10,\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"teal\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#0d9488\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Save\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"danger\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#e11d48\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Cancel\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Link\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"marginBottom\": 10,\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"teal\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#0d9488\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Save\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"danger\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#e11d48\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Cancel\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Ghost\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"marginBottom\": 10,\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"teal\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#0d9488\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Save\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"danger\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#e11d48\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Cancel\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Unstyled\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"marginBottom\": 10,\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"teal\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#171717\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Save\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"danger\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#171717\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Cancel\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n        </View>\n      </View>\n    </RCTScrollView>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots ButtonGroup direction 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"paddingLeft\": 8,\n          \"paddingRight\": 8,\n          \"width\": \"50%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"display\": \"flex\",\n            \"justifyContent\": \"center\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 20,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 25,\n              \"marginBottom\": 16,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Row\n        </Text>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n              \"marginLeft\": \"auto\",\n              \"marginRight\": \"auto\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"teal\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#0d9488\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#fafafa\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Save\n                </Text>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"rose\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#e11d48\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#fafafa\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Cancel\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n        <View\n          aria-orientation=\"horizontal\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": \"#d4d4d4\",\n              \"height\": 1,\n              \"marginTop\": 20,\n              \"width\": \"100%\",\n            }\n          }\n          thickness=\"1\"\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 10,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"display\": \"flex\",\n            \"justifyContent\": \"center\",\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 20,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 25,\n              \"marginBottom\": 16,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Column\n        </Text>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexDirection\": \"column\",\n              \"marginLeft\": \"auto\",\n              \"marginRight\": \"auto\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"teal\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#0d9488\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#fafafa\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Save\n                </Text>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 8,\n              }\n            }\n          />\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"rose\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#e11d48\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#fafafa\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Cancel\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots ButtonGroup isAttached 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <RCTScrollView\n      contentContainerStyle={\n        Array [\n          Object {},\n          Object {\n            \"dataSet\": Object {},\n          },\n          Object {},\n        ]\n      }\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"marginTop\": 16,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Solid\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"marginBottom\": 10,\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"teal\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#0d9488\",\n                  \"borderBottomLeftRadius\": 4,\n                  \"borderRadius\": 0,\n                  \"borderTopLeftRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#fafafa\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Save\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 0,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"danger\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#e11d48\",\n                  \"borderBottomRightRadius\": 4,\n                  \"borderLeftWidth\": 0,\n                  \"borderRadius\": 0,\n                  \"borderTopRightRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#fafafa\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Cancel\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Outline\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"marginBottom\": 10,\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"teal\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": 4,\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderRadius\": 0,\n                  \"borderTopLeftRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#0d9488\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Save\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 0,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"danger\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderBottomRightRadius\": 4,\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderLeftWidth\": 0,\n                  \"borderRadius\": 0,\n                  \"borderTopRightRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#e11d48\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Cancel\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Link\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"marginBottom\": 10,\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"teal\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": 4,\n                  \"borderRadius\": 0,\n                  \"borderTopLeftRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#0d9488\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Save\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 0,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"danger\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderBottomRightRadius\": 4,\n                  \"borderLeftWidth\": 0,\n                  \"borderRadius\": 0,\n                  \"borderTopRightRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#e11d48\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Cancel\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Ghost\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"marginBottom\": 10,\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"teal\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#0d9488\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Save\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"danger\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#e11d48\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Cancel\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Unstyled\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"marginBottom\": 10,\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"teal\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": 4,\n                  \"borderRadius\": 0,\n                  \"borderTopLeftRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#171717\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Save\n                  </Text>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 0,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"danger\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderBottomRightRadius\": 4,\n                  \"borderLeftWidth\": 0,\n                  \"borderRadius\": 0,\n                  \"borderTopRightRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#171717\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Cancel\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n        </View>\n      </View>\n    </RCTScrollView>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Card Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"backgroundColor\": \"#0e7490\",\n          \"borderRadius\": 6,\n          \"elevation\": 5,\n          \"overflow\": \"hidden\",\n          \"paddingBottom\": 16,\n          \"paddingLeft\": 16,\n          \"paddingRight\": 16,\n          \"paddingTop\": 16,\n          \"shadowColor\": \"#000000\",\n          \"shadowOffset\": Object {\n            \"height\": 2,\n            \"width\": 0,\n          },\n          \"shadowOpacity\": 0.25,\n          \"shadowRadius\": 3.84,\n          \"width\": 296,\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"flex-start\",\n            \"flexDirection\": \"row\",\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#ecfeff\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 12,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"500\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 18,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Open Source\n        </Text>\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexGrow\": 1,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        />\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#cffafe\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 10,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 15,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          1 month ago\n        </Text>\n      </View>\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#ecfeff\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 18,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"500\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 22.5,\n            \"marginTop\": 8,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        NativeBase\n      </Text>\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#FFFFFF\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 14,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 21,\n            \"marginTop\": 4,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        NativeBase is a component library that enables devs to build universal design systems.\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"display\": \"flex\",\n            \"flexDirection\": \"column\",\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#22d3ee\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 12,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"500\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 18,\n              \"marginTop\": 8,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Read More\n        </Text>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Center Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#22d3ee\",\n            \"display\": \"flex\",\n            \"height\": 200,\n            \"justifyContent\": \"center\",\n            \"width\": 200,\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#FFFFFF\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          This is the Center\n        </Text>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Center SquareCircle 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"flexDirection\": \"row\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#f472b6\",\n            \"borderRadius\": 9999,\n            \"height\": 40,\n            \"justifyContent\": \"center\",\n            \"width\": 40,\n          }\n        }\n      >\n        <Text\n          allowFontScaling={false}\n          dataSet={Object {}}\n          style={\n            Array [\n              Object {\n                \"color\": undefined,\n                \"fontSize\": 12,\n              },\n              Object {\n                \"color\": \"#FFFFFF\",\n                \"fontSize\": 20,\n                \"height\": 20,\n                \"lineHeight\": 20,\n                \"width\": 20,\n              },\n              Object {\n                \"fontFamily\": \"material\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"normal\",\n              },\n              Object {},\n            ]\n          }\n        >\n          \n        </Text>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 12,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#22d3ee\",\n            \"height\": 40,\n            \"justifyContent\": \"center\",\n            \"width\": 40,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#FFFFFF\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 18,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 27,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            20\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Center WithIcons 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"flexDirection\": \"row\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#22d3ee\",\n            \"display\": \"flex\",\n            \"height\": 40,\n            \"justifyContent\": \"center\",\n            \"width\": 40,\n          }\n        }\n      >\n        <Text\n          allowFontScaling={false}\n          dataSet={Object {}}\n          style={\n            Array [\n              Object {\n                \"color\": undefined,\n                \"fontSize\": 12,\n              },\n              Object {\n                \"color\": \"#FFFFFF\",\n                \"fontSize\": 24,\n                \"height\": 24,\n                \"lineHeight\": 24,\n                \"width\": 24,\n              },\n              Object {\n                \"fontFamily\": \"material\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"normal\",\n              },\n              Object {},\n            ]\n          }\n        >\n          \n        </Text>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 4,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#f472b6\",\n            \"display\": \"flex\",\n            \"height\": 40,\n            \"justifyContent\": \"center\",\n            \"width\": 40,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#FFFFFF\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 18,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 27,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            20\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Checkbox Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"flexDirection\": \"row\",\n        }\n      }\n    >\n      <View\n        accessibilityLabel=\"This is a dummy checkbox\"\n        accessibilityRole=\"checkbox\"\n        accessibilityState={\n          Object {\n            \"checked\": false,\n            \"disabled\": undefined,\n          }\n        }\n        accessible={true}\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={Object {}}\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              checked={false}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              disabled={false}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#a3a3a3\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"opacity\": 1,\n                  \"paddingBottom\": 2,\n                  \"paddingLeft\": 2,\n                  \"paddingRight\": 2,\n                  \"paddingTop\": 2,\n                }\n              }\n              value=\"test\"\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"color\": \"#fafafa\",\n                    \"height\": 12,\n                    \"width\": 12,\n                  }\n                }\n              />\n            </View>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 24,\n          }\n        }\n      />\n      <View\n        accessibilityLabel=\"This is a dummy checkbox\"\n        accessibilityRole=\"checkbox\"\n        accessibilityState={\n          Object {\n            \"checked\": true,\n            \"disabled\": undefined,\n          }\n        }\n        accessible={true}\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={Object {}}\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              checked={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              defaultIsChecked={true}\n              disabled={false}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#0891b2\",\n                  \"borderColor\": \"#0891b2\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"opacity\": 1,\n                  \"paddingBottom\": 2,\n                  \"paddingLeft\": 2,\n                  \"paddingRight\": 2,\n                  \"paddingTop\": 2,\n                }\n              }\n              value=\"test\"\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={4294638330}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#fafafa\",\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={4294638330}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Checkbox Checkbox Group 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"baseline\",\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 18,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 22.5,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Hobbies\n          </Text>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Selected: (\n              2\n              )\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityLabel=\"pick an item\"\n          accessibilityState={\n            Object {\n              \"disabled\": undefined,\n            }\n          }\n          aria-label=\"pick an item\"\n          dataSet={Object {}}\n          defaultValue={\n            Array [\n              \"Photography\",\n              \"Gardening\",\n            ]\n          }\n          onChange={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"flex-start\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"checkbox\"\n            accessibilityState={\n              Object {\n                \"checked\": true,\n                \"disabled\": false,\n              }\n            }\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={Object {}}\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"flex-start\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                />\n                <View\n                  checked={true}\n                  colorScheme=\"green\"\n                  dataSet={Object {}}\n                  defaultIsChecked={false}\n                  disabled={false}\n                  isDisabled={false}\n                  isReadOnly={false}\n                  readOnly={false}\n                  state={\n                    Object {\n                      \"addValue\": [Function],\n                      \"isDisabled\": false,\n                      \"isReadOnly\": false,\n                      \"isSelected\": [Function],\n                      \"removeValue\": [Function],\n                      \"setValue\": [Function],\n                      \"toggleValue\": [Function],\n                      \"value\": Array [\n                        \"Photography\",\n                        \"Gardening\",\n                      ],\n                    }\n                  }\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"#16a34a\",\n                      \"borderColor\": \"#16a34a\",\n                      \"borderRadius\": 4,\n                      \"borderWidth\": 2,\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"opacity\": 1,\n                      \"paddingBottom\": 2,\n                      \"paddingLeft\": 2,\n                      \"paddingRight\": 2,\n                      \"paddingTop\": 2,\n                    }\n                  }\n                  value=\"Photography\"\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={12}\n                    bbWidth={12}\n                    color={4294638330}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#fafafa\",\n                          \"height\": 12,\n                          \"width\": 12,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 12,\n                          \"width\": 12,\n                        },\n                      ]\n                    }\n                    tintColor={4294638330}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#000000\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 16,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 24,\n                    \"marginLeft\": 8,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Photography\n              </Text>\n            </View>\n          </View>\n          <View\n            accessibilityRole=\"checkbox\"\n            accessibilityState={\n              Object {\n                \"checked\": false,\n                \"disabled\": false,\n              }\n            }\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={Object {}}\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"flex-start\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                />\n                <View\n                  checked={false}\n                  colorScheme=\"green\"\n                  dataSet={Object {}}\n                  defaultIsChecked={false}\n                  disabled={false}\n                  isDisabled={false}\n                  isReadOnly={false}\n                  readOnly={false}\n                  state={\n                    Object {\n                      \"addValue\": [Function],\n                      \"isDisabled\": false,\n                      \"isReadOnly\": false,\n                      \"isSelected\": [Function],\n                      \"removeValue\": [Function],\n                      \"setValue\": [Function],\n                      \"toggleValue\": [Function],\n                      \"value\": Array [\n                        \"Photography\",\n                        \"Gardening\",\n                      ],\n                    }\n                  }\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"#fafafa\",\n                      \"borderColor\": \"#a3a3a3\",\n                      \"borderRadius\": 4,\n                      \"borderWidth\": 2,\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"opacity\": 1,\n                      \"paddingBottom\": 2,\n                      \"paddingLeft\": 2,\n                      \"paddingRight\": 2,\n                      \"paddingTop\": 2,\n                    }\n                  }\n                  value=\"Writing\"\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"color\": \"#fafafa\",\n                        \"height\": 12,\n                        \"width\": 12,\n                      }\n                    }\n                  />\n                </View>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#000000\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 16,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 24,\n                    \"marginLeft\": 8,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Writing\n              </Text>\n            </View>\n          </View>\n          <View\n            accessibilityRole=\"checkbox\"\n            accessibilityState={\n              Object {\n                \"checked\": true,\n                \"disabled\": false,\n              }\n            }\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={Object {}}\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"flex-start\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                />\n                <View\n                  checked={true}\n                  colorScheme=\"green\"\n                  dataSet={Object {}}\n                  defaultIsChecked={false}\n                  disabled={false}\n                  isDisabled={false}\n                  isReadOnly={false}\n                  readOnly={false}\n                  state={\n                    Object {\n                      \"addValue\": [Function],\n                      \"isDisabled\": false,\n                      \"isReadOnly\": false,\n                      \"isSelected\": [Function],\n                      \"removeValue\": [Function],\n                      \"setValue\": [Function],\n                      \"toggleValue\": [Function],\n                      \"value\": Array [\n                        \"Photography\",\n                        \"Gardening\",\n                      ],\n                    }\n                  }\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"#16a34a\",\n                      \"borderColor\": \"#16a34a\",\n                      \"borderRadius\": 4,\n                      \"borderWidth\": 2,\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"opacity\": 1,\n                      \"paddingBottom\": 2,\n                      \"paddingLeft\": 2,\n                      \"paddingRight\": 2,\n                      \"paddingTop\": 2,\n                    }\n                  }\n                  value=\"Gardening\"\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={12}\n                    bbWidth={12}\n                    color={4294638330}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#fafafa\",\n                          \"height\": 12,\n                          \"width\": 12,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 12,\n                          \"width\": 12,\n                        },\n                      ]\n                    }\n                    tintColor={4294638330}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#000000\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 16,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 24,\n                    \"marginLeft\": 8,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Gardening\n              </Text>\n            </View>\n          </View>\n          <View\n            accessibilityRole=\"checkbox\"\n            accessibilityState={\n              Object {\n                \"checked\": false,\n                \"disabled\": false,\n              }\n            }\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={Object {}}\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"flex-start\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                />\n                <View\n                  checked={false}\n                  colorScheme=\"green\"\n                  dataSet={Object {}}\n                  defaultIsChecked={false}\n                  disabled={false}\n                  isDisabled={false}\n                  isReadOnly={false}\n                  readOnly={false}\n                  state={\n                    Object {\n                      \"addValue\": [Function],\n                      \"isDisabled\": false,\n                      \"isReadOnly\": false,\n                      \"isSelected\": [Function],\n                      \"removeValue\": [Function],\n                      \"setValue\": [Function],\n                      \"toggleValue\": [Function],\n                      \"value\": Array [\n                        \"Photography\",\n                        \"Gardening\",\n                      ],\n                    }\n                  }\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"#fafafa\",\n                      \"borderColor\": \"#a3a3a3\",\n                      \"borderRadius\": 4,\n                      \"borderWidth\": 2,\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"opacity\": 1,\n                      \"paddingBottom\": 2,\n                      \"paddingLeft\": 2,\n                      \"paddingRight\": 2,\n                      \"paddingTop\": 2,\n                    }\n                  }\n                  value=\"Cooking\"\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"color\": \"#fafafa\",\n                        \"height\": 12,\n                        \"width\": 12,\n                      }\n                    }\n                  />\n                </View>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#000000\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 16,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 24,\n                    \"marginLeft\": 8,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Cooking\n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Checkbox Controlled checkbox 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      accessibilityLabel=\"choose numbers\"\n      accessibilityState={\n        Object {\n          \"disabled\": undefined,\n        }\n      }\n      aria-label=\"choose numbers\"\n      dataSet={Object {}}\n      onChange={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"flex-start\",\n        }\n      }\n      value={Array []}\n    >\n      <View\n        accessibilityRole=\"checkbox\"\n        accessibilityState={\n          Object {\n            \"checked\": false,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={Object {}}\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"marginBottom\": 8,\n              \"marginTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              checked={false}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              disabled={false}\n              isDisabled={false}\n              isReadOnly={false}\n              readOnly={false}\n              state={\n                Object {\n                  \"addValue\": [Function],\n                  \"isDisabled\": false,\n                  \"isReadOnly\": false,\n                  \"isSelected\": [Function],\n                  \"removeValue\": [Function],\n                  \"setValue\": [Function],\n                  \"toggleValue\": [Function],\n                  \"value\": Array [],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#a3a3a3\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"opacity\": 1,\n                  \"paddingBottom\": 2,\n                  \"paddingLeft\": 2,\n                  \"paddingRight\": 2,\n                  \"paddingTop\": 2,\n                }\n              }\n              value=\"one\"\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"color\": \"#fafafa\",\n                    \"height\": 12,\n                    \"width\": 12,\n                  }\n                }\n              />\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#000000\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"marginLeft\": 8,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            UX Research\n          </Text>\n        </View>\n      </View>\n      <View\n        accessibilityRole=\"checkbox\"\n        accessibilityState={\n          Object {\n            \"checked\": false,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={Object {}}\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              checked={false}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              disabled={false}\n              isDisabled={false}\n              isReadOnly={false}\n              readOnly={false}\n              state={\n                Object {\n                  \"addValue\": [Function],\n                  \"isDisabled\": false,\n                  \"isReadOnly\": false,\n                  \"isSelected\": [Function],\n                  \"removeValue\": [Function],\n                  \"setValue\": [Function],\n                  \"toggleValue\": [Function],\n                  \"value\": Array [],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#a3a3a3\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"opacity\": 1,\n                  \"paddingBottom\": 2,\n                  \"paddingLeft\": 2,\n                  \"paddingRight\": 2,\n                  \"paddingTop\": 2,\n                }\n              }\n              value=\"two\"\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"color\": \"#fafafa\",\n                    \"height\": 12,\n                    \"width\": 12,\n                  }\n                }\n              />\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#000000\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"marginLeft\": 8,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Software Development\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Checkbox Custom Color 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"flex-start\",\n            \"flexDirection\": \"column\",\n          }\n        }\n      >\n        <View\n          accessibilityRole=\"checkbox\"\n          accessibilityState={\n            Object {\n              \"checked\": true,\n              \"disabled\": undefined,\n            }\n          }\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={Object {}}\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                checked={true}\n                colorScheme=\"danger\"\n                dataSet={Object {}}\n                defaultIsChecked={true}\n                disabled={false}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#e11d48\",\n                    \"borderColor\": \"#e11d48\",\n                    \"borderRadius\": 4,\n                    \"borderWidth\": 2,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": 2,\n                    \"paddingLeft\": 2,\n                    \"paddingRight\": 2,\n                    \"paddingTop\": 2,\n                  }\n                }\n                value=\"danger\"\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={12}\n                  bbWidth={12}\n                  color={4294638330}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#fafafa\",\n                        \"height\": 12,\n                        \"width\": 12,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 12,\n                        \"width\": 12,\n                      },\n                    ]\n                  }\n                  tintColor={4294638330}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#000000\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 16,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 24,\n                  \"marginLeft\": 8,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Danger\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 12,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"checkbox\"\n          accessibilityState={\n            Object {\n              \"checked\": true,\n              \"disabled\": undefined,\n            }\n          }\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={Object {}}\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                checked={true}\n                colorScheme=\"info\"\n                dataSet={Object {}}\n                defaultIsChecked={true}\n                disabled={false}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#0284c7\",\n                    \"borderColor\": \"#0284c7\",\n                    \"borderRadius\": 4,\n                    \"borderWidth\": 2,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": 2,\n                    \"paddingLeft\": 2,\n                    \"paddingRight\": 2,\n                    \"paddingTop\": 2,\n                  }\n                }\n                value=\"info\"\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={12}\n                  bbWidth={12}\n                  color={4294638330}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#fafafa\",\n                        \"height\": 12,\n                        \"width\": 12,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 12,\n                        \"width\": 12,\n                      },\n                    ]\n                  }\n                  tintColor={4294638330}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#000000\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 16,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 24,\n                  \"marginLeft\": 8,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Info\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 12,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"checkbox\"\n          accessibilityState={\n            Object {\n              \"checked\": true,\n              \"disabled\": undefined,\n            }\n          }\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={Object {}}\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                checked={true}\n                colorScheme=\"orange\"\n                dataSet={Object {}}\n                defaultIsChecked={true}\n                disabled={false}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#ea580c\",\n                    \"borderColor\": \"#ea580c\",\n                    \"borderRadius\": 4,\n                    \"borderWidth\": 2,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": 2,\n                    \"paddingLeft\": 2,\n                    \"paddingRight\": 2,\n                    \"paddingTop\": 2,\n                  }\n                }\n                value=\"orange\"\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={12}\n                  bbWidth={12}\n                  color={4294638330}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#fafafa\",\n                        \"height\": 12,\n                        \"width\": 12,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 12,\n                        \"width\": 12,\n                      },\n                    ]\n                  }\n                  tintColor={4294638330}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#000000\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 16,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 24,\n                  \"marginLeft\": 8,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Orange\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 12,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"checkbox\"\n          accessibilityState={\n            Object {\n              \"checked\": true,\n              \"disabled\": undefined,\n            }\n          }\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={Object {}}\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                checked={true}\n                colorScheme=\"purple\"\n                dataSet={Object {}}\n                defaultIsChecked={true}\n                disabled={false}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#9333ea\",\n                    \"borderColor\": \"#9333ea\",\n                    \"borderRadius\": 4,\n                    \"borderWidth\": 2,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": 2,\n                    \"paddingLeft\": 2,\n                    \"paddingRight\": 2,\n                    \"paddingTop\": 2,\n                  }\n                }\n                value=\"purple\"\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={12}\n                  bbWidth={12}\n                  color={4294638330}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#fafafa\",\n                        \"height\": 12,\n                        \"width\": 12,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 12,\n                        \"width\": 12,\n                      },\n                    ]\n                  }\n                  tintColor={4294638330}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#000000\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 16,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 24,\n                  \"marginLeft\": 8,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Purple\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Checkbox Custom Icon 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"flex-start\",\n            \"flexDirection\": \"column\",\n          }\n        }\n      >\n        <View\n          accessibilityRole=\"checkbox\"\n          accessibilityState={\n            Object {\n              \"checked\": true,\n              \"disabled\": undefined,\n            }\n          }\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={Object {}}\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                checked={true}\n                colorScheme=\"orange\"\n                dataSet={Object {}}\n                defaultIsChecked={true}\n                disabled={false}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#ea580c\",\n                    \"borderColor\": \"#ea580c\",\n                    \"borderRadius\": 4,\n                    \"borderWidth\": 2,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": 2,\n                    \"paddingLeft\": 2,\n                    \"paddingRight\": 2,\n                    \"paddingTop\": 2,\n                  }\n                }\n                value=\"orange\"\n              >\n                <Text\n                  allowFontScaling={false}\n                  dataSet={Object {}}\n                  style={\n                    Array [\n                      Object {\n                        \"color\": undefined,\n                        \"fontSize\": 12,\n                      },\n                      Object {\n                        \"color\": \"#fafafa\",\n                        \"fontSize\": 16,\n                        \"height\": 16,\n                        \"lineHeight\": 16,\n                        \"width\": 16,\n                      },\n                      Object {\n                        \"fontFamily\": \"material-community\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"normal\",\n                      },\n                      Object {},\n                    ]\n                  }\n                >\n                  󰗝\n                </Text>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#000000\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 18,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 27,\n                  \"marginLeft\": 8,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Darts\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 12,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"checkbox\"\n          accessibilityState={\n            Object {\n              \"checked\": true,\n              \"disabled\": undefined,\n            }\n          }\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={Object {}}\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                checked={true}\n                colorScheme=\"dark\"\n                dataSet={Object {}}\n                defaultIsChecked={true}\n                disabled={false}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#d4d4d8\",\n                    \"borderColor\": \"#d4d4d8\",\n                    \"borderRadius\": 4,\n                    \"borderWidth\": 2,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": 2,\n                    \"paddingLeft\": 2,\n                    \"paddingRight\": 2,\n                    \"paddingTop\": 2,\n                  }\n                }\n                value=\"dark\"\n              >\n                <Text\n                  allowFontScaling={false}\n                  dataSet={Object {}}\n                  style={\n                    Array [\n                      Object {\n                        \"color\": undefined,\n                        \"fontSize\": 12,\n                      },\n                      Object {\n                        \"color\": \"#fafafa\",\n                        \"fontSize\": 16,\n                        \"height\": 16,\n                        \"lineHeight\": 16,\n                        \"width\": 16,\n                      },\n                      Object {\n                        \"fontFamily\": \"material-community\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"normal\",\n                      },\n                      Object {},\n                    ]\n                  }\n                >\n                  󰭟\n                </Text>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#000000\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 18,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 27,\n                  \"marginLeft\": 8,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Movie\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 12,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"checkbox\"\n          accessibilityState={\n            Object {\n              \"checked\": true,\n              \"disabled\": undefined,\n            }\n          }\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={Object {}}\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                checked={true}\n                colorScheme=\"red\"\n                dataSet={Object {}}\n                defaultIsChecked={true}\n                disabled={false}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#dc2626\",\n                    \"borderColor\": \"#dc2626\",\n                    \"borderRadius\": 4,\n                    \"borderWidth\": 2,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": 2,\n                    \"paddingLeft\": 2,\n                    \"paddingRight\": 2,\n                    \"paddingTop\": 2,\n                  }\n                }\n                value=\"red\"\n              >\n                <Text\n                  allowFontScaling={false}\n                  dataSet={Object {}}\n                  style={\n                    Array [\n                      Object {\n                        \"color\": undefined,\n                        \"fontSize\": 12,\n                      },\n                      Object {\n                        \"color\": \"#fafafa\",\n                        \"fontSize\": 16,\n                        \"height\": 16,\n                        \"lineHeight\": 16,\n                        \"width\": 16,\n                      },\n                      Object {\n                        \"fontFamily\": \"material-community\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"normal\",\n                      },\n                      Object {},\n                    ]\n                  }\n                >\n                  󰻝\n                </Text>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#000000\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 18,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 27,\n                  \"marginLeft\": 8,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Camping\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 12,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"checkbox\"\n          accessibilityState={\n            Object {\n              \"checked\": true,\n              \"disabled\": undefined,\n            }\n          }\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={Object {}}\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                checked={true}\n                colorScheme=\"blue\"\n                dataSet={Object {}}\n                defaultIsChecked={true}\n                disabled={false}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#2563eb\",\n                    \"borderColor\": \"#2563eb\",\n                    \"borderRadius\": 4,\n                    \"borderWidth\": 2,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": 2,\n                    \"paddingLeft\": 2,\n                    \"paddingRight\": 2,\n                    \"paddingTop\": 2,\n                  }\n                }\n                value=\"blue\"\n              >\n                <Text\n                  allowFontScaling={false}\n                  dataSet={Object {}}\n                  style={\n                    Array [\n                      Object {\n                        \"color\": undefined,\n                        \"fontSize\": 12,\n                      },\n                      Object {\n                        \"color\": \"#fafafa\",\n                        \"fontSize\": 16,\n                        \"height\": 16,\n                        \"lineHeight\": 16,\n                        \"width\": 16,\n                      },\n                      Object {\n                        \"fontFamily\": \"material-community\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"normal\",\n                      },\n                      Object {},\n                    ]\n                  }\n                >\n                  󰡘\n                </Text>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#000000\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 18,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 27,\n                  \"marginLeft\": 8,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Chess\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Checkbox Disabled 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <View\n        accessibilityRole=\"checkbox\"\n        accessibilityState={\n          Object {\n            \"checked\": false,\n            \"disabled\": true,\n          }\n        }\n        accessible={true}\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={Object {}}\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              checked={false}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              disabled={true}\n              isDisabled={true}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#a3a3a3\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"opacity\": 0.4,\n                  \"paddingBottom\": 2,\n                  \"paddingLeft\": 2,\n                  \"paddingRight\": 2,\n                  \"paddingTop\": 2,\n                }\n              }\n              value=\"one\"\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"color\": \"#fafafa\",\n                    \"height\": 12,\n                    \"width\": 12,\n                  }\n                }\n              />\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#000000\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"marginLeft\": 8,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            UX Research\n          </Text>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <View\n        accessibilityRole=\"checkbox\"\n        accessibilityState={\n          Object {\n            \"checked\": true,\n            \"disabled\": true,\n          }\n        }\n        accessible={true}\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={Object {}}\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              checked={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              defaultIsChecked={true}\n              disabled={true}\n              isDisabled={true}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#0891b2\",\n                  \"borderColor\": \"#0891b2\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"opacity\": 0.4,\n                  \"paddingBottom\": 2,\n                  \"paddingLeft\": 2,\n                  \"paddingRight\": 2,\n                  \"paddingTop\": 2,\n                }\n              }\n              value=\"two\"\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={4294638330}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#fafafa\",\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={4294638330}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#000000\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"marginLeft\": 8,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Software Development\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Checkbox Form Controlled 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"flex-start\",\n            \"maxWidth\": \"80%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          isInvalid={true}\n          style={\n            Object {\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            feedbackId=\"field-69-feedback\"\n            hasFeedbackText={false}\n            hasHelpText={false}\n            helpTextId=\"field-69-helptext\"\n            isDisabled={false}\n            isInvalid={true}\n            isReadOnly={false}\n            isRequired={false}\n            labelId=\"field-69-label\"\n            nativeID=\"field-69-label\"\n            setHasFeedbackText={[Function]}\n            setHasHelpText={[Function]}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n                \"marginBottom\": 4,\n                \"marginTop\": 4,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#737373\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 18,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 27,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Preferred contact method\n            </Text>\n          </View>\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Selected Values: \n          </Text>\n          <View\n            accessibilityLabel=\"choose multiple items\"\n            accessibilityState={\n              Object {\n                \"disabled\": undefined,\n              }\n            }\n            aria-label=\"choose multiple items\"\n            dataSet={Object {}}\n            defaultValue={\n              Array [\n                \"Phone\",\n                \"Email\",\n              ]\n            }\n            onChange={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"flex-start\",\n                \"marginTop\": 8,\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"checkbox\"\n              accessibilityState={\n                Object {\n                  \"checked\": true,\n                  \"disabled\": false,\n                }\n              }\n              accessible={true}\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={Object {}}\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"flex-start\",\n                    \"marginBottom\": 4,\n                    \"marginTop\": 4,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={Object {}}\n                  />\n                  <View\n                    checked={true}\n                    colorScheme=\"green\"\n                    dataSet={Object {}}\n                    defaultIsChecked={false}\n                    disabled={false}\n                    feedbackId=\"field-69-feedback\"\n                    hasFeedbackText={false}\n                    hasHelpText={false}\n                    helpTextId=\"field-69-helptext\"\n                    isDisabled={false}\n                    isInvalid={true}\n                    isReadOnly={false}\n                    isRequired={false}\n                    labelId=\"field-69-label\"\n                    nativeID=\"field-69\"\n                    readOnly={false}\n                    required={false}\n                    setHasFeedbackText={[Function]}\n                    setHasHelpText={[Function]}\n                    state={\n                      Object {\n                        \"addValue\": [Function],\n                        \"isDisabled\": false,\n                        \"isReadOnly\": false,\n                        \"isSelected\": [Function],\n                        \"removeValue\": [Function],\n                        \"setValue\": [Function],\n                        \"toggleValue\": [Function],\n                        \"value\": Array [\n                          \"Phone\",\n                          \"Email\",\n                        ],\n                      }\n                    }\n                    style={\n                      Object {\n                        \"alignItems\": \"center\",\n                        \"backgroundColor\": \"#16a34a\",\n                        \"borderColor\": \"#dc2626\",\n                        \"borderRadius\": 4,\n                        \"borderWidth\": 2,\n                        \"display\": \"flex\",\n                        \"justifyContent\": \"center\",\n                        \"opacity\": 1,\n                        \"paddingBottom\": 2,\n                        \"paddingLeft\": 2,\n                        \"paddingRight\": 2,\n                        \"paddingTop\": 2,\n                      }\n                    }\n                    value=\"Phone\"\n                  >\n                    <RNSVGSvgView\n                      accessibilityRole=\"image\"\n                      align=\"xMidYMid\"\n                      bbHeight={12}\n                      bbWidth={12}\n                      color={4294638330}\n                      dataSet={Object {}}\n                      focusable={false}\n                      meetOrSlice={0}\n                      minX={0}\n                      minY={0}\n                      stroke=\"\"\n                      style={\n                        Array [\n                          Object {\n                            \"backgroundColor\": \"transparent\",\n                            \"borderWidth\": 0,\n                          },\n                          Object {\n                            \"color\": \"#fafafa\",\n                            \"height\": 12,\n                            \"width\": 12,\n                          },\n                          Object {\n                            \"flex\": 0,\n                            \"height\": 12,\n                            \"width\": 12,\n                          },\n                        ]\n                      }\n                      tintColor={4294638330}\n                      vbHeight={24}\n                      vbWidth={24}\n                    >\n                      <RNSVGGroup\n                        propList={\n                          Array [\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      >\n                        <RNSVGGroup>\n                          <RNSVGPath\n                            d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                            fill={\n                              Array [\n                                2,\n                              ]\n                            }\n                            propList={\n                              Array [\n                                \"fill\",\n                                \"stroke\",\n                              ]\n                            }\n                            stroke={null}\n                          />\n                        </RNSVGGroup>\n                      </RNSVGGroup>\n                    </RNSVGSvgView>\n                  </View>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#000000\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 16,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 24,\n                      \"marginLeft\": 8,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Phone\n                </Text>\n              </View>\n            </View>\n            <View\n              accessibilityRole=\"checkbox\"\n              accessibilityState={\n                Object {\n                  \"checked\": true,\n                  \"disabled\": false,\n                }\n              }\n              accessible={true}\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={Object {}}\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"flex-start\",\n                    \"marginBottom\": 4,\n                    \"marginTop\": 4,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={Object {}}\n                  />\n                  <View\n                    checked={true}\n                    colorScheme=\"green\"\n                    dataSet={Object {}}\n                    defaultIsChecked={false}\n                    disabled={false}\n                    feedbackId=\"field-69-feedback\"\n                    hasFeedbackText={false}\n                    hasHelpText={false}\n                    helpTextId=\"field-69-helptext\"\n                    isDisabled={false}\n                    isInvalid={true}\n                    isReadOnly={false}\n                    isRequired={false}\n                    labelId=\"field-69-label\"\n                    nativeID=\"field-69\"\n                    readOnly={false}\n                    required={false}\n                    setHasFeedbackText={[Function]}\n                    setHasHelpText={[Function]}\n                    state={\n                      Object {\n                        \"addValue\": [Function],\n                        \"isDisabled\": false,\n                        \"isReadOnly\": false,\n                        \"isSelected\": [Function],\n                        \"removeValue\": [Function],\n                        \"setValue\": [Function],\n                        \"toggleValue\": [Function],\n                        \"value\": Array [\n                          \"Phone\",\n                          \"Email\",\n                        ],\n                      }\n                    }\n                    style={\n                      Object {\n                        \"alignItems\": \"center\",\n                        \"backgroundColor\": \"#16a34a\",\n                        \"borderColor\": \"#dc2626\",\n                        \"borderRadius\": 4,\n                        \"borderWidth\": 2,\n                        \"display\": \"flex\",\n                        \"justifyContent\": \"center\",\n                        \"opacity\": 1,\n                        \"paddingBottom\": 2,\n                        \"paddingLeft\": 2,\n                        \"paddingRight\": 2,\n                        \"paddingTop\": 2,\n                      }\n                    }\n                    value=\"Email\"\n                  >\n                    <RNSVGSvgView\n                      accessibilityRole=\"image\"\n                      align=\"xMidYMid\"\n                      bbHeight={12}\n                      bbWidth={12}\n                      color={4294638330}\n                      dataSet={Object {}}\n                      focusable={false}\n                      meetOrSlice={0}\n                      minX={0}\n                      minY={0}\n                      stroke=\"\"\n                      style={\n                        Array [\n                          Object {\n                            \"backgroundColor\": \"transparent\",\n                            \"borderWidth\": 0,\n                          },\n                          Object {\n                            \"color\": \"#fafafa\",\n                            \"height\": 12,\n                            \"width\": 12,\n                          },\n                          Object {\n                            \"flex\": 0,\n                            \"height\": 12,\n                            \"width\": 12,\n                          },\n                        ]\n                      }\n                      tintColor={4294638330}\n                      vbHeight={24}\n                      vbWidth={24}\n                    >\n                      <RNSVGGroup\n                        propList={\n                          Array [\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      >\n                        <RNSVGGroup>\n                          <RNSVGPath\n                            d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                            fill={\n                              Array [\n                                2,\n                              ]\n                            }\n                            propList={\n                              Array [\n                                \"fill\",\n                                \"stroke\",\n                              ]\n                            }\n                            stroke={null}\n                          />\n                        </RNSVGGroup>\n                      </RNSVGGroup>\n                    </RNSVGSvgView>\n                  </View>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#000000\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 16,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 24,\n                      \"marginLeft\": 8,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Email\n                </Text>\n              </View>\n            </View>\n            <View\n              accessibilityRole=\"checkbox\"\n              accessibilityState={\n                Object {\n                  \"checked\": false,\n                  \"disabled\": false,\n                }\n              }\n              accessible={true}\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={Object {}}\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"flex-start\",\n                    \"marginBottom\": 4,\n                    \"marginTop\": 4,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={Object {}}\n                  />\n                  <View\n                    checked={false}\n                    colorScheme=\"green\"\n                    dataSet={Object {}}\n                    defaultIsChecked={false}\n                    disabled={false}\n                    feedbackId=\"field-69-feedback\"\n                    hasFeedbackText={false}\n                    hasHelpText={false}\n                    helpTextId=\"field-69-helptext\"\n                    isDisabled={false}\n                    isInvalid={true}\n                    isReadOnly={false}\n                    isRequired={false}\n                    labelId=\"field-69-label\"\n                    nativeID=\"field-69\"\n                    readOnly={false}\n                    required={false}\n                    setHasFeedbackText={[Function]}\n                    setHasHelpText={[Function]}\n                    state={\n                      Object {\n                        \"addValue\": [Function],\n                        \"isDisabled\": false,\n                        \"isReadOnly\": false,\n                        \"isSelected\": [Function],\n                        \"removeValue\": [Function],\n                        \"setValue\": [Function],\n                        \"toggleValue\": [Function],\n                        \"value\": Array [\n                          \"Phone\",\n                          \"Email\",\n                        ],\n                      }\n                    }\n                    style={\n                      Object {\n                        \"alignItems\": \"center\",\n                        \"backgroundColor\": \"#fafafa\",\n                        \"borderColor\": \"#dc2626\",\n                        \"borderRadius\": 4,\n                        \"borderWidth\": 2,\n                        \"display\": \"flex\",\n                        \"justifyContent\": \"center\",\n                        \"opacity\": 1,\n                        \"paddingBottom\": 2,\n                        \"paddingLeft\": 2,\n                        \"paddingRight\": 2,\n                        \"paddingTop\": 2,\n                      }\n                    }\n                    value=\"Message\"\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"color\": \"#fafafa\",\n                          \"height\": 12,\n                          \"width\": 12,\n                        }\n                      }\n                    />\n                  </View>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#000000\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 16,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 24,\n                      \"marginLeft\": 8,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Message\n                </Text>\n              </View>\n            </View>\n            <View\n              accessibilityRole=\"checkbox\"\n              accessibilityState={\n                Object {\n                  \"checked\": false,\n                  \"disabled\": false,\n                }\n              }\n              accessible={true}\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={Object {}}\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"flex-start\",\n                    \"marginBottom\": 4,\n                    \"marginTop\": 4,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={Object {}}\n                  />\n                  <View\n                    checked={false}\n                    colorScheme=\"green\"\n                    dataSet={Object {}}\n                    defaultIsChecked={false}\n                    disabled={false}\n                    feedbackId=\"field-69-feedback\"\n                    hasFeedbackText={false}\n                    hasHelpText={false}\n                    helpTextId=\"field-69-helptext\"\n                    isDisabled={false}\n                    isInvalid={true}\n                    isReadOnly={false}\n                    isRequired={false}\n                    labelId=\"field-69-label\"\n                    nativeID=\"field-69\"\n                    readOnly={false}\n                    required={false}\n                    setHasFeedbackText={[Function]}\n                    setHasHelpText={[Function]}\n                    state={\n                      Object {\n                        \"addValue\": [Function],\n                        \"isDisabled\": false,\n                        \"isReadOnly\": false,\n                        \"isSelected\": [Function],\n                        \"removeValue\": [Function],\n                        \"setValue\": [Function],\n                        \"toggleValue\": [Function],\n                        \"value\": Array [\n                          \"Phone\",\n                          \"Email\",\n                        ],\n                      }\n                    }\n                    style={\n                      Object {\n                        \"alignItems\": \"center\",\n                        \"backgroundColor\": \"#fafafa\",\n                        \"borderColor\": \"#dc2626\",\n                        \"borderRadius\": 4,\n                        \"borderWidth\": 2,\n                        \"display\": \"flex\",\n                        \"justifyContent\": \"center\",\n                        \"opacity\": 1,\n                        \"paddingBottom\": 2,\n                        \"paddingLeft\": 2,\n                        \"paddingRight\": 2,\n                        \"paddingTop\": 2,\n                      }\n                    }\n                    value=\"Fax\"\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"color\": \"#fafafa\",\n                          \"height\": 12,\n                          \"width\": 12,\n                        }\n                      }\n                    />\n                  </View>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#000000\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 16,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 24,\n                      \"marginLeft\": 8,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Fax\n                </Text>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            feedbackId=\"field-69-feedback\"\n            hasFeedbackText={false}\n            hasHelpText={false}\n            helpTextId=\"field-69-helptext\"\n            isDisabled={false}\n            isInvalid={true}\n            isReadOnly={false}\n            isRequired={false}\n            labelId=\"field-69-label\"\n            nativeID=\"field-69\"\n            setHasFeedbackText={[Function]}\n            setHasHelpText={[Function]}\n            style={\n              Object {\n                \"marginTop\": 8,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"flex-start\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={4292617766}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#dc2626\",\n                      \"fontSize\": 12,\n                      \"height\": 12,\n                      \"marginTop\": 4,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={4292617766}\n                vbHeight={16}\n                vbWidth={16}\n              >\n                <RNSVGGroup\n                  font={\n                    Object {\n                      \"fontSize\": 12,\n                    }\n                  }\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M8 16C6.41775 16 4.87103 15.5308 3.55544 14.6518C2.23985 13.7727 1.21447 12.5233 0.608967 11.0615C0.00346627 9.59966 -0.15496 7.99113 0.153721 6.43928C0.462403 4.88743 1.22433 3.46197 2.34315 2.34315C3.46197 1.22433 4.88743 0.462403 6.43928 0.153721C7.99113 -0.15496 9.59966 0.00346627 11.0615 0.608967C12.5233 1.21447 13.7727 2.23985 14.6518 3.55544C15.5308 4.87103 16 6.41775 16 8C16 10.1217 15.1571 12.1566 13.6569 13.6569C12.1566 15.1571 10.1217 16 8 16ZM8 14.4C9.2658 14.4 10.5032 14.0246 11.5556 13.3214C12.6081 12.6182 13.4284 11.6186 13.9128 10.4492C14.3972 9.27973 14.524 7.9929 14.277 6.75142C14.0301 5.50995 13.4205 4.36958 12.5255 3.47452C11.6304 2.57946 10.4901 1.96992 9.24858 1.72298C8.0071 1.47603 6.72028 1.60277 5.55083 2.08717C4.38138 2.57158 3.38184 3.39188 2.6786 4.44435C1.97536 5.49683 1.6 6.7342 1.6 8C1.6 9.69739 2.27429 11.3253 3.47452 12.5255C4.67475 13.7257 6.30262 14.4 8 14.4ZM7.2 10.4H8.8V12H7.2V10.4ZM7.2 4H8.8V8.8H7.2V4Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 4,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#dc2626\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 18,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                You must select at least three methods\n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Checkbox Invalid 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      accessibilityRole=\"checkbox\"\n      accessibilityState={\n        Object {\n          \"checked\": false,\n          \"disabled\": undefined,\n        }\n      }\n      accessible={true}\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={Object {}}\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"flex-start\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          />\n          <View\n            checked={false}\n            colorScheme=\"primary\"\n            dataSet={Object {}}\n            defaultIsChecked={false}\n            disabled={false}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#fafafa\",\n                \"borderColor\": \"#dc2626\",\n                \"borderRadius\": 4,\n                \"borderWidth\": 2,\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"opacity\": 1,\n                \"paddingBottom\": 2,\n                \"paddingLeft\": 2,\n                \"paddingRight\": 2,\n                \"paddingTop\": 2,\n              }\n            }\n            value=\"invalid\"\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"color\": \"#fafafa\",\n                  \"height\": 12,\n                  \"width\": 12,\n                }\n              }\n            />\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"width\": 8,\n            }\n          }\n        />\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#000000\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 16,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 24,\n              \"marginLeft\": 8,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Software Development\n        </Text>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Checkbox Playground 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"space-between\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"checkbox\"\n        accessibilityState={\n          Object {\n            \"checked\": true,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={Object {}}\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              checked={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              disabled={false}\n              isChecked={true}\n              isDisabled={false}\n              onChange={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#0891b2\",\n                  \"borderColor\": \"#0891b2\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"opacity\": 1,\n                  \"paddingBottom\": 2,\n                  \"paddingLeft\": 2,\n                  \"paddingRight\": 2,\n                  \"paddingTop\": 2,\n                }\n              }\n              value=\"Cool\"\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={16}\n                bbWidth={16}\n                color={4294638330}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#fafafa\",\n                      \"height\": 16,\n                      \"width\": 16,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 16,\n                      \"width\": 16,\n                    },\n                  ]\n                }\n                tintColor={4294638330}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#000000\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 18,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 27,\n                \"marginLeft\": 8,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Yes\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Checkbox Size 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      >\n        <View\n          accessibilityRole=\"checkbox\"\n          accessibilityState={\n            Object {\n              \"checked\": true,\n              \"disabled\": undefined,\n            }\n          }\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={Object {}}\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                checked={true}\n                colorScheme=\"primary\"\n                dataSet={Object {}}\n                defaultIsChecked={true}\n                disabled={false}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#0891b2\",\n                    \"borderColor\": \"#0891b2\",\n                    \"borderRadius\": 4,\n                    \"borderWidth\": 2,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": 2,\n                    \"paddingLeft\": 2,\n                    \"paddingRight\": 2,\n                    \"paddingTop\": 2,\n                  }\n                }\n                value=\"red\"\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={12}\n                  bbWidth={12}\n                  color={4294638330}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#fafafa\",\n                        \"height\": 12,\n                        \"width\": 12,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 12,\n                        \"width\": 12,\n                      },\n                    ]\n                  }\n                  tintColor={4294638330}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#000000\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 16,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 24,\n                  \"marginLeft\": 8,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              UX Research\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 12,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"checkbox\"\n          accessibilityState={\n            Object {\n              \"checked\": true,\n              \"disabled\": undefined,\n            }\n          }\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={Object {}}\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                checked={true}\n                colorScheme=\"primary\"\n                dataSet={Object {}}\n                defaultIsChecked={true}\n                disabled={false}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#0891b2\",\n                    \"borderColor\": \"#0891b2\",\n                    \"borderRadius\": 4,\n                    \"borderWidth\": 2,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": 2,\n                    \"paddingLeft\": 2,\n                    \"paddingRight\": 2,\n                    \"paddingTop\": 2,\n                  }\n                }\n                value=\"green\"\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={16}\n                  bbWidth={16}\n                  color={4294638330}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#fafafa\",\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                    ]\n                  }\n                  tintColor={4294638330}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#000000\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 18,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 27,\n                  \"marginLeft\": 8,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              UX Research\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 12,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"checkbox\"\n          accessibilityState={\n            Object {\n              \"checked\": true,\n              \"disabled\": undefined,\n            }\n          }\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={Object {}}\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                checked={true}\n                colorScheme=\"primary\"\n                dataSet={Object {}}\n                defaultIsChecked={true}\n                disabled={false}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#0891b2\",\n                    \"borderColor\": \"#0891b2\",\n                    \"borderRadius\": 4,\n                    \"borderWidth\": 2,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": 2,\n                    \"paddingLeft\": 2,\n                    \"paddingRight\": 2,\n                    \"paddingTop\": 2,\n                  }\n                }\n                value=\"yellow\"\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={20}\n                  bbWidth={20}\n                  color={4294638330}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#fafafa\",\n                        \"height\": 20,\n                        \"width\": 20,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 20,\n                        \"width\": 20,\n                      },\n                    ]\n                  }\n                  tintColor={4294638330}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#000000\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 20,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 30,\n                  \"marginLeft\": 8,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              UX Research\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Checkbox Uncontrolled checkbox 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      accessibilityLabel=\"choose values\"\n      accessibilityState={\n        Object {\n          \"disabled\": undefined,\n        }\n      }\n      aria-label=\"choose values\"\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"flex-start\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"checkbox\"\n        accessibilityState={\n          Object {\n            \"checked\": false,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={Object {}}\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"marginBottom\": 8,\n              \"marginTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              checked={false}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              disabled={false}\n              isDisabled={false}\n              isReadOnly={false}\n              readOnly={false}\n              state={\n                Object {\n                  \"addValue\": [Function],\n                  \"isDisabled\": false,\n                  \"isReadOnly\": false,\n                  \"isSelected\": [Function],\n                  \"removeValue\": [Function],\n                  \"setValue\": [Function],\n                  \"toggleValue\": [Function],\n                  \"value\": Array [],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#a3a3a3\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"opacity\": 1,\n                  \"paddingBottom\": 2,\n                  \"paddingLeft\": 2,\n                  \"paddingRight\": 2,\n                  \"paddingTop\": 2,\n                }\n              }\n              value=\"one\"\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"color\": \"#fafafa\",\n                    \"height\": 12,\n                    \"width\": 12,\n                  }\n                }\n              />\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#000000\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"marginLeft\": 8,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            UX Research\n          </Text>\n        </View>\n      </View>\n      <View\n        accessibilityRole=\"checkbox\"\n        accessibilityState={\n          Object {\n            \"checked\": false,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={Object {}}\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              checked={false}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              disabled={false}\n              isDisabled={false}\n              isReadOnly={false}\n              readOnly={false}\n              state={\n                Object {\n                  \"addValue\": [Function],\n                  \"isDisabled\": false,\n                  \"isReadOnly\": false,\n                  \"isSelected\": [Function],\n                  \"removeValue\": [Function],\n                  \"setValue\": [Function],\n                  \"toggleValue\": [Function],\n                  \"value\": Array [],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#a3a3a3\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"opacity\": 1,\n                  \"paddingBottom\": 2,\n                  \"paddingLeft\": 2,\n                  \"paddingRight\": 2,\n                  \"paddingTop\": 2,\n                }\n              }\n              value=\"two\"\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"color\": \"#fafafa\",\n                    \"height\": 12,\n                    \"width\": 12,\n                  }\n                }\n              />\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#000000\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"marginLeft\": 8,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Software Development\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Checkbox With Ref 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"flex-start\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"checkbox\"\n        accessibilityState={\n          Object {\n            \"checked\": false,\n            \"disabled\": undefined,\n          }\n        }\n        accessible={true}\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={Object {}}\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              checked={false}\n              colorScheme=\"success\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              disabled={false}\n              onChange={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#a3a3a3\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"opacity\": 1,\n                  \"paddingBottom\": 2,\n                  \"paddingLeft\": 2,\n                  \"paddingRight\": 2,\n                  \"paddingTop\": 2,\n                }\n              }\n              value=\"success\"\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"color\": \"#fafafa\",\n                    \"height\": 12,\n                    \"width\": 12,\n                  }\n                }\n              />\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#000000\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"marginLeft\": 8,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Archery\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Column Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": \"#22c55e\",\n            \"height\": 100,\n            \"width\": 100,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": \"#93c5fd\",\n            \"height\": 100,\n            \"width\": 100,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": \"tomato\",\n            \"height\": 100,\n            \"width\": 100,\n          }\n        }\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Container Playground 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      centerContent={true}\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"maxWidth\": \"80%\",\n        }\n      }\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 24,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 30,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Benefits to a joint design and development system\n      </Text>\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 14,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 21,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        There are many benefits to a joint design and development system. Not only does it bring benefits to the design team, but it also brings benefits to engineering teams. It makes sure that our experiences have a consistent look and feel, not just in our design specs, but in production\n      </Text>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Container Usage 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"flex-start\",\n            \"maxWidth\": \"80%\",\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 24,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 30,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          A component library for the\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#10b981\",\n                \"fontFamily\": undefined,\n                \"fontSize\": undefined,\n                \"fontStyle\": undefined,\n                \"fontWeight\": undefined,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n             React Ecosystem\n          </Text>\n        </Text>\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"500\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"marginTop\": 12,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          NativeBase is a simple, modular and accessible component library that gives you building blocks to build you React applications.\n        </Text>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Custom Theme Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n/>\n`;\n\nexports[`Storyshots Custom Theme CustomizingBase 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n/>\n`;\n\nexports[`Storyshots Custom Theme CustomizingComponents 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n/>\n`;\n\nexports[`Storyshots Custom Theme CustomizingTheme 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n/>\n`;\n\nexports[`Storyshots Custom Theme CustomizingVariant 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n/>\n`;\n\nexports[`Storyshots Divider Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 140,\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"flexDirection\": \"row\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 24,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 30,\n              \"marginLeft\": 12,\n              \"marginRight\": 12,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Chrome\n        </Text>\n        <View\n          aria-orientation=\"horizontal\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": \"#262626\",\n              \"height\": 1,\n              \"marginBottom\": 8,\n              \"marginTop\": 8,\n              \"width\": \"100%\",\n            }\n          }\n          thickness=\"1\"\n        />\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"flexDirection\": \"row\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 24,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 30,\n              \"marginLeft\": 12,\n              \"marginRight\": 12,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Firefox\n        </Text>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Divider Composition 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"display\": \"flex\",\n            \"flexDirection\": \"row\",\n            \"height\": 58,\n            \"paddingBottom\": 16,\n            \"paddingLeft\": 16,\n            \"paddingRight\": 16,\n            \"paddingTop\": 16,\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Simple\n        </Text>\n        <View\n          aria-orientation=\"vertical\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": \"#10b981\",\n              \"height\": \"100%\",\n              \"marginLeft\": 8,\n              \"marginRight\": 8,\n              \"width\": 2,\n            }\n          }\n          thickness=\"2\"\n        />\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Easy\n        </Text>\n        <View\n          aria-orientation=\"vertical\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": \"#6366f1\",\n              \"height\": \"100%\",\n              \"marginLeft\": 8,\n              \"marginRight\": 8,\n              \"width\": 2,\n            }\n          }\n          thickness=\"2\"\n        />\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Beautiful\n        </Text>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Divider Orientation 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 160,\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 24,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 30,\n              \"marginLeft\": \"auto\",\n              \"marginRight\": \"auto\",\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Shoes\n        </Text>\n        <View\n          aria-orientation=\"horizontal\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": \"#262626\",\n              \"height\": 1,\n              \"marginBottom\": 8,\n              \"marginTop\": 8,\n              \"width\": \"100%\",\n            }\n          }\n          thickness=\"1\"\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"display\": \"flex\",\n              \"flexDirection\": \"row\",\n              \"height\": 60,\n              \"justifyContent\": \"space-evenly\",\n              \"marginLeft\": 12,\n              \"marginRight\": 12,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 24,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 30,\n                \"paddingBottom\": 8,\n                \"paddingTop\": 8,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Girls\n          </Text>\n          <View\n            aria-orientation=\"vertical\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#262626\",\n                \"height\": \"100%\",\n                \"marginLeft\": 12,\n                \"marginRight\": 12,\n                \"width\": 1,\n              }\n            }\n            thickness=\"1\"\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 24,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 30,\n                \"paddingBottom\": 8,\n                \"paddingTop\": 8,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Boys\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Examples Signin Screen 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"maxWidth\": 290,\n            \"paddingBottom\": 32,\n            \"paddingLeft\": 8,\n            \"paddingRight\": 8,\n            \"paddingTop\": 32,\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#1f2937\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 24,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"600\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 30,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Welcome\n        </Text>\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#4b5563\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"500\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 17.5,\n              \"marginTop\": 4,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Sign in to continue!\n        </Text>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"marginTop\": 20,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              feedbackId=\"field-264-feedback\"\n              hasFeedbackText={false}\n              hasHelpText={false}\n              helpTextId=\"field-264-helptext\"\n              isDisabled={false}\n              isInvalid={false}\n              isReadOnly={false}\n              isRequired={false}\n              labelId=\"field-264-label\"\n              nativeID=\"field-264-label\"\n              setHasFeedbackText={[Function]}\n              setHasHelpText={[Function]}\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"flex-start\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#737373\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Email ID\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              isFocused={false}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <TextInput\n                accessible={true}\n                allowFontScaling={true}\n                dataSet={Object {}}\n                disabled={false}\n                editable={true}\n                isRequired={false}\n                nativeID=\"field-264-input\"\n                onBlur={[Function]}\n                onFocus={[Function]}\n                onKeyPress={[Function]}\n                placeholderTextColor=\"#a3a3a3\"\n                readOnly={false}\n                rejectResponderTermination={true}\n                required={false}\n                secureTextEntry={false}\n                style={\n                  Object {\n                    \"backgroundColor\": \"transparent\",\n                    \"color\": \"#171717\",\n                    \"flex\": 1,\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 12,\n                    \"paddingRight\": 12,\n                    \"paddingTop\": 8,\n                    \"width\": \"100%\",\n                  }\n                }\n                underlineColorAndroid=\"transparent\"\n              />\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              feedbackId=\"field-265-feedback\"\n              hasFeedbackText={false}\n              hasHelpText={false}\n              helpTextId=\"field-265-helptext\"\n              isDisabled={false}\n              isInvalid={false}\n              isReadOnly={false}\n              isRequired={false}\n              labelId=\"field-265-label\"\n              nativeID=\"field-265-label\"\n              setHasFeedbackText={[Function]}\n              setHasHelpText={[Function]}\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"flex-start\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#737373\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Password\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              isFocused={false}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <TextInput\n                accessible={true}\n                allowFontScaling={true}\n                dataSet={Object {}}\n                disabled={false}\n                editable={true}\n                isRequired={false}\n                nativeID=\"field-265-input\"\n                onBlur={[Function]}\n                onFocus={[Function]}\n                onKeyPress={[Function]}\n                placeholderTextColor=\"#a3a3a3\"\n                readOnly={false}\n                rejectResponderTermination={true}\n                required={false}\n                secureTextEntry={true}\n                style={\n                  Object {\n                    \"backgroundColor\": \"transparent\",\n                    \"color\": \"#171717\",\n                    \"flex\": 1,\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 12,\n                    \"paddingRight\": 12,\n                    \"paddingTop\": 8,\n                    \"width\": \"100%\",\n                  }\n                }\n                underlineColorAndroid=\"transparent\"\n              />\n            </View>\n            <View\n              accessibilityRole=\"link\"\n              accessible={true}\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignSelf\": \"flex-end\",\n                  \"flexDirection\": \"row\",\n                  \"height\": \"auto\",\n                  \"marginTop\": 4,\n                  \"width\": \"auto\",\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#6366f1\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 18,\n                    \"textDecorationLine\": \"underline\",\n                  }\n                }\n              >\n                Forget Password?\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"indigo\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#4f46e5\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginTop\": 8,\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#fafafa\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Sign in\n                </Text>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginTop\": 24,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#4b5563\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              I'm a new user.\n               \n            </Text>\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              accessibilityRole=\"link\"\n              accessible={true}\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                  \"height\": \"auto\",\n                  \"width\": \"auto\",\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#6366f1\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": \"underline\",\n                  }\n                }\n              >\n                Sign Up\n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Examples Signup Screen 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"maxWidth\": 290,\n            \"paddingBottom\": 32,\n            \"paddingLeft\": 8,\n            \"paddingRight\": 8,\n            \"paddingTop\": 32,\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#1f2937\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 24,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"600\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 30,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Welcome\n        </Text>\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#4b5563\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"500\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 17.5,\n              \"marginTop\": 4,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Sign up to continue!\n        </Text>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"marginTop\": 20,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              feedbackId=\"field-267-feedback\"\n              hasFeedbackText={false}\n              hasHelpText={false}\n              helpTextId=\"field-267-helptext\"\n              isDisabled={false}\n              isInvalid={false}\n              isReadOnly={false}\n              isRequired={false}\n              labelId=\"field-267-label\"\n              nativeID=\"field-267-label\"\n              setHasFeedbackText={[Function]}\n              setHasHelpText={[Function]}\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"flex-start\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#737373\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Email\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              isFocused={false}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <TextInput\n                accessible={true}\n                allowFontScaling={true}\n                dataSet={Object {}}\n                disabled={false}\n                editable={true}\n                isRequired={false}\n                nativeID=\"field-267-input\"\n                onBlur={[Function]}\n                onFocus={[Function]}\n                onKeyPress={[Function]}\n                placeholderTextColor=\"#a3a3a3\"\n                readOnly={false}\n                rejectResponderTermination={true}\n                required={false}\n                secureTextEntry={false}\n                style={\n                  Object {\n                    \"backgroundColor\": \"transparent\",\n                    \"color\": \"#171717\",\n                    \"flex\": 1,\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 12,\n                    \"paddingRight\": 12,\n                    \"paddingTop\": 8,\n                    \"width\": \"100%\",\n                  }\n                }\n                underlineColorAndroid=\"transparent\"\n              />\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              feedbackId=\"field-268-feedback\"\n              hasFeedbackText={false}\n              hasHelpText={false}\n              helpTextId=\"field-268-helptext\"\n              isDisabled={false}\n              isInvalid={false}\n              isReadOnly={false}\n              isRequired={false}\n              labelId=\"field-268-label\"\n              nativeID=\"field-268-label\"\n              setHasFeedbackText={[Function]}\n              setHasHelpText={[Function]}\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"flex-start\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#737373\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Password\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              isFocused={false}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <TextInput\n                accessible={true}\n                allowFontScaling={true}\n                dataSet={Object {}}\n                disabled={false}\n                editable={true}\n                isRequired={false}\n                nativeID=\"field-268-input\"\n                onBlur={[Function]}\n                onFocus={[Function]}\n                onKeyPress={[Function]}\n                placeholderTextColor=\"#a3a3a3\"\n                readOnly={false}\n                rejectResponderTermination={true}\n                required={false}\n                secureTextEntry={true}\n                style={\n                  Object {\n                    \"backgroundColor\": \"transparent\",\n                    \"color\": \"#171717\",\n                    \"flex\": 1,\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 12,\n                    \"paddingRight\": 12,\n                    \"paddingTop\": 8,\n                    \"width\": \"100%\",\n                  }\n                }\n                underlineColorAndroid=\"transparent\"\n              />\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              feedbackId=\"field-269-feedback\"\n              hasFeedbackText={false}\n              hasHelpText={false}\n              helpTextId=\"field-269-helptext\"\n              isDisabled={false}\n              isInvalid={false}\n              isReadOnly={false}\n              isRequired={false}\n              labelId=\"field-269-label\"\n              nativeID=\"field-269-label\"\n              setHasFeedbackText={[Function]}\n              setHasHelpText={[Function]}\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"flex-start\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#737373\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Confirm Password\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              isFocused={false}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <TextInput\n                accessible={true}\n                allowFontScaling={true}\n                dataSet={Object {}}\n                disabled={false}\n                editable={true}\n                isRequired={false}\n                nativeID=\"field-269-input\"\n                onBlur={[Function]}\n                onFocus={[Function]}\n                onKeyPress={[Function]}\n                placeholderTextColor=\"#a3a3a3\"\n                readOnly={false}\n                rejectResponderTermination={true}\n                required={false}\n                secureTextEntry={true}\n                style={\n                  Object {\n                    \"backgroundColor\": \"transparent\",\n                    \"color\": \"#171717\",\n                    \"flex\": 1,\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 12,\n                    \"paddingRight\": 12,\n                    \"paddingTop\": 8,\n                    \"width\": \"100%\",\n                  }\n                }\n                underlineColorAndroid=\"transparent\"\n              />\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"indigo\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#4f46e5\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginTop\": 8,\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#fafafa\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Sign up\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Examples Todo App 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"maxWidth\": 300,\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 20,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 25,\n              \"marginBottom\": 8,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Wednesday\n        </Text>\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              isFocused={false}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flex\": 1,\n                  \"flexDirection\": \"row\",\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <TextInput\n                accessible={true}\n                allowFontScaling={true}\n                dataSet={Object {}}\n                editable={true}\n                onBlur={[Function]}\n                onChangeText={[Function]}\n                onFocus={[Function]}\n                onKeyPress={[Function]}\n                placeholder=\"Add Task\"\n                placeholderTextColor=\"#a3a3a3\"\n                rejectResponderTermination={true}\n                secureTextEntry={false}\n                style={\n                  Object {\n                    \"backgroundColor\": \"transparent\",\n                    \"color\": \"#171717\",\n                    \"flex\": 1,\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 12,\n                    \"paddingRight\": 12,\n                    \"paddingTop\": 8,\n                    \"width\": \"100%\",\n                  }\n                }\n                underlineColorAndroid=\"transparent\"\n                value=\"\"\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#0891b2\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 10,\n                  \"paddingRight\": 10,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <Text\n                allowFontScaling={false}\n                dataSet={Object {}}\n                style={\n                  Array [\n                    Object {\n                      \"color\": undefined,\n                      \"fontSize\": 12,\n                    },\n                    Object {\n                      \"color\": \"#fafaf9\",\n                      \"fontSize\": 16,\n                      \"height\": 16,\n                      \"lineHeight\": 16,\n                      \"width\": 16,\n                    },\n                    Object {\n                      \"fontFamily\": \"feather\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"normal\",\n                    },\n                    Object {},\n                  ]\n                }\n              >\n                \n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"space-between\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                accessibilityRole=\"checkbox\"\n                accessibilityState={\n                  Object {\n                    \"checked\": true,\n                    \"disabled\": undefined,\n                  }\n                }\n                accessible={true}\n                dataSet={Object {}}\n                focusable={true}\n                onBlur={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onHoverIn={[Function]}\n                onHoverOut={[Function]}\n                onResponderGrant={[Function]}\n                onResponderMove={[Function]}\n                onResponderRelease={[Function]}\n                onResponderTerminate={[Function]}\n                onResponderTerminationRequest={[Function]}\n                onStartShouldSetResponder={[Function]}\n                style={Object {}}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                      \"justifyContent\": \"flex-start\",\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"alignItems\": \"center\",\n                        \"display\": \"flex\",\n                        \"justifyContent\": \"center\",\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={Object {}}\n                    />\n                    <View\n                      checked={true}\n                      colorScheme=\"primary\"\n                      dataSet={Object {}}\n                      defaultIsChecked={false}\n                      disabled={false}\n                      isChecked={true}\n                      onChange={[Function]}\n                      style={\n                        Object {\n                          \"alignItems\": \"center\",\n                          \"backgroundColor\": \"#0891b2\",\n                          \"borderColor\": \"#0891b2\",\n                          \"borderRadius\": 4,\n                          \"borderWidth\": 2,\n                          \"display\": \"flex\",\n                          \"justifyContent\": \"center\",\n                          \"opacity\": 1,\n                          \"paddingBottom\": 2,\n                          \"paddingLeft\": 2,\n                          \"paddingRight\": 2,\n                          \"paddingTop\": 2,\n                        }\n                      }\n                      value=\"Code\"\n                    >\n                      <RNSVGSvgView\n                        accessibilityRole=\"image\"\n                        align=\"xMidYMid\"\n                        bbHeight={12}\n                        bbWidth={12}\n                        color={4294638330}\n                        dataSet={Object {}}\n                        focusable={false}\n                        meetOrSlice={0}\n                        minX={0}\n                        minY={0}\n                        stroke=\"\"\n                        style={\n                          Array [\n                            Object {\n                              \"backgroundColor\": \"transparent\",\n                              \"borderWidth\": 0,\n                            },\n                            Object {\n                              \"color\": \"#fafafa\",\n                              \"height\": 12,\n                              \"width\": 12,\n                            },\n                            Object {\n                              \"flex\": 0,\n                              \"height\": 12,\n                              \"width\": 12,\n                            },\n                          ]\n                        }\n                        tintColor={4294638330}\n                        vbHeight={24}\n                        vbWidth={24}\n                      >\n                        <RNSVGGroup\n                          propList={\n                            Array [\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        >\n                          <RNSVGGroup>\n                            <RNSVGPath\n                              d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                              fill={\n                                Array [\n                                  2,\n                                ]\n                              }\n                              propList={\n                                Array [\n                                  \"fill\",\n                                  \"stroke\",\n                                ]\n                              }\n                              stroke={null}\n                            />\n                          </RNSVGGroup>\n                        </RNSVGGroup>\n                      </RNSVGSvgView>\n                    </View>\n                  </View>\n                </View>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <Text\n                dataSet={Object {}}\n                onPress={[Function]}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#a1a1aa\",\n                    \"flexShrink\": 1,\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"textAlign\": \"left\",\n                    \"textDecorationLine\": \"line-through\",\n                    \"width\": \"100%\",\n                  }\n                }\n              >\n                Code\n              </Text>\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                accessibilityRole=\"button\"\n                accessible={true}\n                colorScheme=\"trueGray\"\n                dataSet={Object {}}\n                focusable={true}\n                onBlur={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onHoverIn={[Function]}\n                onHoverOut={[Function]}\n                onResponderGrant={[Function]}\n                onResponderMove={[Function]}\n                onResponderRelease={[Function]}\n                onResponderTerminate={[Function]}\n                onResponderTerminationRequest={[Function]}\n                onStartShouldSetResponder={[Function]}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"borderRadius\": 4,\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"center\",\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 8,\n                    \"paddingRight\": 8,\n                    \"paddingTop\": 8,\n                  }\n                }\n              >\n                <Text\n                  allowFontScaling={false}\n                  dataSet={Object {}}\n                  style={\n                    Array [\n                      Object {\n                        \"color\": undefined,\n                        \"fontSize\": 12,\n                      },\n                      Object {\n                        \"color\": \"#a3a3a3\",\n                        \"fontSize\": 12,\n                        \"height\": 12,\n                        \"lineHeight\": 12,\n                        \"width\": 12,\n                      },\n                      Object {\n                        \"fontFamily\": \"entypo\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"normal\",\n                      },\n                      Object {},\n                    ]\n                  }\n                >\n                  \n                </Text>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 8,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"space-between\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                accessibilityRole=\"checkbox\"\n                accessibilityState={\n                  Object {\n                    \"checked\": false,\n                    \"disabled\": undefined,\n                  }\n                }\n                accessible={true}\n                dataSet={Object {}}\n                focusable={true}\n                onBlur={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onHoverIn={[Function]}\n                onHoverOut={[Function]}\n                onResponderGrant={[Function]}\n                onResponderMove={[Function]}\n                onResponderRelease={[Function]}\n                onResponderTerminate={[Function]}\n                onResponderTerminationRequest={[Function]}\n                onStartShouldSetResponder={[Function]}\n                style={Object {}}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                      \"justifyContent\": \"flex-start\",\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"alignItems\": \"center\",\n                        \"display\": \"flex\",\n                        \"justifyContent\": \"center\",\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={Object {}}\n                    />\n                    <View\n                      checked={false}\n                      colorScheme=\"primary\"\n                      dataSet={Object {}}\n                      defaultIsChecked={false}\n                      disabled={false}\n                      isChecked={false}\n                      onChange={[Function]}\n                      style={\n                        Object {\n                          \"alignItems\": \"center\",\n                          \"backgroundColor\": \"#fafafa\",\n                          \"borderColor\": \"#a3a3a3\",\n                          \"borderRadius\": 4,\n                          \"borderWidth\": 2,\n                          \"display\": \"flex\",\n                          \"justifyContent\": \"center\",\n                          \"opacity\": 1,\n                          \"paddingBottom\": 2,\n                          \"paddingLeft\": 2,\n                          \"paddingRight\": 2,\n                          \"paddingTop\": 2,\n                        }\n                      }\n                      value=\"Meeting with team at 9\"\n                    >\n                      <View\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"color\": \"#fafafa\",\n                            \"height\": 12,\n                            \"width\": 12,\n                          }\n                        }\n                      />\n                    </View>\n                  </View>\n                </View>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <Text\n                dataSet={Object {}}\n                onPress={[Function]}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#1f2937\",\n                    \"flexShrink\": 1,\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"textAlign\": \"left\",\n                    \"textDecorationLine\": undefined,\n                    \"width\": \"100%\",\n                  }\n                }\n              >\n                Meeting with team at 9\n              </Text>\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                accessibilityRole=\"button\"\n                accessible={true}\n                colorScheme=\"trueGray\"\n                dataSet={Object {}}\n                focusable={true}\n                onBlur={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onHoverIn={[Function]}\n                onHoverOut={[Function]}\n                onResponderGrant={[Function]}\n                onResponderMove={[Function]}\n                onResponderRelease={[Function]}\n                onResponderTerminate={[Function]}\n                onResponderTerminationRequest={[Function]}\n                onStartShouldSetResponder={[Function]}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"borderRadius\": 4,\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"center\",\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 8,\n                    \"paddingRight\": 8,\n                    \"paddingTop\": 8,\n                  }\n                }\n              >\n                <Text\n                  allowFontScaling={false}\n                  dataSet={Object {}}\n                  style={\n                    Array [\n                      Object {\n                        \"color\": undefined,\n                        \"fontSize\": 12,\n                      },\n                      Object {\n                        \"color\": \"#a3a3a3\",\n                        \"fontSize\": 12,\n                        \"height\": 12,\n                        \"lineHeight\": 12,\n                        \"width\": 12,\n                      },\n                      Object {\n                        \"fontFamily\": \"entypo\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"normal\",\n                      },\n                      Object {},\n                    ]\n                  }\n                >\n                  \n                </Text>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 8,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"space-between\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                accessibilityRole=\"checkbox\"\n                accessibilityState={\n                  Object {\n                    \"checked\": false,\n                    \"disabled\": undefined,\n                  }\n                }\n                accessible={true}\n                dataSet={Object {}}\n                focusable={true}\n                onBlur={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onHoverIn={[Function]}\n                onHoverOut={[Function]}\n                onResponderGrant={[Function]}\n                onResponderMove={[Function]}\n                onResponderRelease={[Function]}\n                onResponderTerminate={[Function]}\n                onResponderTerminationRequest={[Function]}\n                onStartShouldSetResponder={[Function]}\n                style={Object {}}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                      \"justifyContent\": \"flex-start\",\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"alignItems\": \"center\",\n                        \"display\": \"flex\",\n                        \"justifyContent\": \"center\",\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={Object {}}\n                    />\n                    <View\n                      checked={false}\n                      colorScheme=\"primary\"\n                      dataSet={Object {}}\n                      defaultIsChecked={false}\n                      disabled={false}\n                      isChecked={false}\n                      onChange={[Function]}\n                      style={\n                        Object {\n                          \"alignItems\": \"center\",\n                          \"backgroundColor\": \"#fafafa\",\n                          \"borderColor\": \"#a3a3a3\",\n                          \"borderRadius\": 4,\n                          \"borderWidth\": 2,\n                          \"display\": \"flex\",\n                          \"justifyContent\": \"center\",\n                          \"opacity\": 1,\n                          \"paddingBottom\": 2,\n                          \"paddingLeft\": 2,\n                          \"paddingRight\": 2,\n                          \"paddingTop\": 2,\n                        }\n                      }\n                      value=\"Check Emails\"\n                    >\n                      <View\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"color\": \"#fafafa\",\n                            \"height\": 12,\n                            \"width\": 12,\n                          }\n                        }\n                      />\n                    </View>\n                  </View>\n                </View>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <Text\n                dataSet={Object {}}\n                onPress={[Function]}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#1f2937\",\n                    \"flexShrink\": 1,\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"textAlign\": \"left\",\n                    \"textDecorationLine\": undefined,\n                    \"width\": \"100%\",\n                  }\n                }\n              >\n                Check Emails\n              </Text>\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                accessibilityRole=\"button\"\n                accessible={true}\n                colorScheme=\"trueGray\"\n                dataSet={Object {}}\n                focusable={true}\n                onBlur={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onHoverIn={[Function]}\n                onHoverOut={[Function]}\n                onResponderGrant={[Function]}\n                onResponderMove={[Function]}\n                onResponderRelease={[Function]}\n                onResponderTerminate={[Function]}\n                onResponderTerminationRequest={[Function]}\n                onStartShouldSetResponder={[Function]}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"borderRadius\": 4,\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"center\",\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 8,\n                    \"paddingRight\": 8,\n                    \"paddingTop\": 8,\n                  }\n                }\n              >\n                <Text\n                  allowFontScaling={false}\n                  dataSet={Object {}}\n                  style={\n                    Array [\n                      Object {\n                        \"color\": undefined,\n                        \"fontSize\": 12,\n                      },\n                      Object {\n                        \"color\": \"#a3a3a3\",\n                        \"fontSize\": 12,\n                        \"height\": 12,\n                        \"lineHeight\": 12,\n                        \"width\": 12,\n                      },\n                      Object {\n                        \"fontFamily\": \"entypo\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"normal\",\n                      },\n                      Object {},\n                    ]\n                  }\n                >\n                  \n                </Text>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 8,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"space-between\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                accessibilityRole=\"checkbox\"\n                accessibilityState={\n                  Object {\n                    \"checked\": false,\n                    \"disabled\": undefined,\n                  }\n                }\n                accessible={true}\n                dataSet={Object {}}\n                focusable={true}\n                onBlur={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onHoverIn={[Function]}\n                onHoverOut={[Function]}\n                onResponderGrant={[Function]}\n                onResponderMove={[Function]}\n                onResponderRelease={[Function]}\n                onResponderTerminate={[Function]}\n                onResponderTerminationRequest={[Function]}\n                onStartShouldSetResponder={[Function]}\n                style={Object {}}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                      \"justifyContent\": \"flex-start\",\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"alignItems\": \"center\",\n                        \"display\": \"flex\",\n                        \"justifyContent\": \"center\",\n                      }\n                    }\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={Object {}}\n                    />\n                    <View\n                      checked={false}\n                      colorScheme=\"primary\"\n                      dataSet={Object {}}\n                      defaultIsChecked={false}\n                      disabled={false}\n                      isChecked={false}\n                      onChange={[Function]}\n                      style={\n                        Object {\n                          \"alignItems\": \"center\",\n                          \"backgroundColor\": \"#fafafa\",\n                          \"borderColor\": \"#a3a3a3\",\n                          \"borderRadius\": 4,\n                          \"borderWidth\": 2,\n                          \"display\": \"flex\",\n                          \"justifyContent\": \"center\",\n                          \"opacity\": 1,\n                          \"paddingBottom\": 2,\n                          \"paddingLeft\": 2,\n                          \"paddingRight\": 2,\n                          \"paddingTop\": 2,\n                        }\n                      }\n                      value=\"Write an article\"\n                    >\n                      <View\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"color\": \"#fafafa\",\n                            \"height\": 12,\n                            \"width\": 12,\n                          }\n                        }\n                      />\n                    </View>\n                  </View>\n                </View>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <Text\n                dataSet={Object {}}\n                onPress={[Function]}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#1f2937\",\n                    \"flexShrink\": 1,\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"textAlign\": \"left\",\n                    \"textDecorationLine\": undefined,\n                    \"width\": \"100%\",\n                  }\n                }\n              >\n                Write an article\n              </Text>\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                accessibilityRole=\"button\"\n                accessible={true}\n                colorScheme=\"trueGray\"\n                dataSet={Object {}}\n                focusable={true}\n                onBlur={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onHoverIn={[Function]}\n                onHoverOut={[Function]}\n                onResponderGrant={[Function]}\n                onResponderMove={[Function]}\n                onResponderRelease={[Function]}\n                onResponderTerminate={[Function]}\n                onResponderTerminationRequest={[Function]}\n                onStartShouldSetResponder={[Function]}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"borderRadius\": 4,\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"center\",\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 8,\n                    \"paddingRight\": 8,\n                    \"paddingTop\": 8,\n                  }\n                }\n              >\n                <Text\n                  allowFontScaling={false}\n                  dataSet={Object {}}\n                  style={\n                    Array [\n                      Object {\n                        \"color\": undefined,\n                        \"fontSize\": 12,\n                      },\n                      Object {\n                        \"color\": \"#a3a3a3\",\n                        \"fontSize\": 12,\n                        \"height\": 12,\n                        \"lineHeight\": 12,\n                        \"width\": 12,\n                      },\n                      Object {\n                        \"fontFamily\": \"entypo\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"normal\",\n                      },\n                      Object {},\n                    ]\n                  }\n                >\n                  \n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Fab Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"height\": 100,\n          \"position\": \"relative\",\n          \"width\": \"100%\",\n        }\n      }\n    />\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Fab CustomPosition 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"height\": 200,\n          \"position\": \"relative\",\n          \"width\": \"100%\",\n        }\n      }\n    />\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Fab Placement 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"height\": 400,\n          \"width\": \"100%\",\n        }\n      }\n    />\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots FlatList Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 20,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 25,\n            \"paddingBottom\": 12,\n            \"paddingLeft\": 16,\n            \"paddingRight\": 16,\n            \"paddingTop\": 16,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Inbox\n      </Text>\n      <RCTScrollView\n        contentContainerStyle={\n          Array [\n            Object {},\n            Object {\n              \"dataSet\": Object {},\n            },\n            Object {},\n          ]\n        }\n        data={\n          Array [\n            Object {\n              \"avatarUrl\": \"https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500\",\n              \"fullName\": \"Aafreen Khan\",\n              \"id\": \"bd7acbea-c1b1-46c2-aed5-3ad53abb28ba\",\n              \"recentText\": \"Good Day!\",\n              \"timeStamp\": \"12:47 PM\",\n            },\n            Object {\n              \"avatarUrl\": \"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyEaZqT3fHeNrPGcnjLLX1v_W4mvBlgpwxnA&usqp=CAU\",\n              \"fullName\": \"Sujitha Mathur\",\n              \"id\": \"3ac68afc-c605-48d3-a4f8-fbd91aa97f63\",\n              \"recentText\": \"Cheer up, there!\",\n              \"timeStamp\": \"11:11 PM\",\n            },\n            Object {\n              \"avatarUrl\": \"https://miro.medium.com/max/1400/0*0fClPmIScV5pTLoE.jpg\",\n              \"fullName\": \"Anci Barroco\",\n              \"id\": \"58694a0f-3da1-471f-bd96-145571e29d72\",\n              \"recentText\": \"Good Day!\",\n              \"timeStamp\": \"6:22 PM\",\n            },\n            Object {\n              \"avatarUrl\": \"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSr01zI37DYuR8bMV5exWQBSw28C1v_71CAh8d7GP1mplcmTgQA6Q66Oo--QedAN1B4E1k&usqp=CAU\",\n              \"fullName\": \"Aniket Kumar\",\n              \"id\": \"68694a0f-3da1-431f-bd56-142371e29d72\",\n              \"recentText\": \"All the best\",\n              \"timeStamp\": \"8:56 PM\",\n            },\n            Object {\n              \"avatarUrl\": \"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBwgu1A5zgPSvfE83nurkuzNEoXs9DMNr8Ww&usqp=CAU\",\n              \"fullName\": \"Kiara\",\n              \"id\": \"28694a0f-3da1-471f-bd96-142456e29d72\",\n              \"recentText\": \"I will call today.\",\n              \"timeStamp\": \"12:47 PM\",\n            },\n          ]\n        }\n        dataSet={Object {}}\n        disableVirtualization={false}\n        getItem={[Function]}\n        getItemCount={[Function]}\n        horizontal={false}\n        initialNumToRender={10}\n        keyExtractor={[Function]}\n        maxToRenderPerBatch={10}\n        onContentSizeChange={[Function]}\n        onEndReachedThreshold={2}\n        onLayout={[Function]}\n        onMomentumScrollEnd={[Function]}\n        onScroll={[Function]}\n        onScrollBeginDrag={[Function]}\n        onScrollEndDrag={[Function]}\n        removeClippedSubviews={false}\n        renderItem={[Function]}\n        scrollEventThrottle={50}\n        stickyHeaderIndices={Array []}\n        style={Object {}}\n        updateCellsBatchingPeriod={50}\n        viewabilityConfigCallbackPairs={Array []}\n        windowSize={21}\n      >\n        <View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"borderBottomWidth\": 1,\n                  \"borderColor\": \"#262626\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 16,\n                  \"paddingRight\": 20,\n                  \"paddingTop\": 8,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"space-between\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"#a1a1aa\",\n                      \"borderColor\": \"#27272a\",\n                      \"borderRadius\": 9999,\n                      \"height\": 48,\n                      \"justifyContent\": \"center\",\n                      \"position\": \"relative\",\n                      \"width\": 48,\n                    }\n                  }\n                >\n                  <Image\n                    accessibilityLabel=\"--\"\n                    alt=\"--\"\n                    dataSet={Object {}}\n                    onError={[Function]}\n                    source={\n                      Object {\n                        \"uri\": \"https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500\",\n                      }\n                    }\n                    style={\n                      Array [\n                        Object {\n                          \"borderRadius\": 9999,\n                          \"maxWidth\": \"100%\",\n                        },\n                        Object {\n                          \"height\": \"100%\",\n                          \"width\": \"100%\",\n                        },\n                      ]\n                    }\n                  />\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 12,\n                    }\n                  }\n                />\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#1f2937\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"700\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Aafreen Khan\n                  </Text>\n                  <View\n                    dataSet={Object {}}\n                    style={Object {}}\n                  />\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#4b5563\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Good Day!\n                  </Text>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 12,\n                    }\n                  }\n                />\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"flexGrow\": 1,\n                    }\n                  }\n                />\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 12,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignSelf\": \"flex-start\",\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 12,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 18,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  12:47 PM\n                </Text>\n              </View>\n            </View>\n          </View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"borderBottomWidth\": 1,\n                  \"borderColor\": \"#262626\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 16,\n                  \"paddingRight\": 20,\n                  \"paddingTop\": 8,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"space-between\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"#a1a1aa\",\n                      \"borderColor\": \"#27272a\",\n                      \"borderRadius\": 9999,\n                      \"height\": 48,\n                      \"justifyContent\": \"center\",\n                      \"position\": \"relative\",\n                      \"width\": 48,\n                    }\n                  }\n                >\n                  <Image\n                    accessibilityLabel=\"--\"\n                    alt=\"--\"\n                    dataSet={Object {}}\n                    onError={[Function]}\n                    source={\n                      Object {\n                        \"uri\": \"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyEaZqT3fHeNrPGcnjLLX1v_W4mvBlgpwxnA&usqp=CAU\",\n                      }\n                    }\n                    style={\n                      Array [\n                        Object {\n                          \"borderRadius\": 9999,\n                          \"maxWidth\": \"100%\",\n                        },\n                        Object {\n                          \"height\": \"100%\",\n                          \"width\": \"100%\",\n                        },\n                      ]\n                    }\n                  />\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 12,\n                    }\n                  }\n                />\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#1f2937\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"700\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Sujitha Mathur\n                  </Text>\n                  <View\n                    dataSet={Object {}}\n                    style={Object {}}\n                  />\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#4b5563\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Cheer up, there!\n                  </Text>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 12,\n                    }\n                  }\n                />\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"flexGrow\": 1,\n                    }\n                  }\n                />\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 12,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignSelf\": \"flex-start\",\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 12,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 18,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  11:11 PM\n                </Text>\n              </View>\n            </View>\n          </View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"borderBottomWidth\": 1,\n                  \"borderColor\": \"#262626\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 16,\n                  \"paddingRight\": 20,\n                  \"paddingTop\": 8,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"space-between\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"#a1a1aa\",\n                      \"borderColor\": \"#27272a\",\n                      \"borderRadius\": 9999,\n                      \"height\": 48,\n                      \"justifyContent\": \"center\",\n                      \"position\": \"relative\",\n                      \"width\": 48,\n                    }\n                  }\n                >\n                  <Image\n                    accessibilityLabel=\"--\"\n                    alt=\"--\"\n                    dataSet={Object {}}\n                    onError={[Function]}\n                    source={\n                      Object {\n                        \"uri\": \"https://miro.medium.com/max/1400/0*0fClPmIScV5pTLoE.jpg\",\n                      }\n                    }\n                    style={\n                      Array [\n                        Object {\n                          \"borderRadius\": 9999,\n                          \"maxWidth\": \"100%\",\n                        },\n                        Object {\n                          \"height\": \"100%\",\n                          \"width\": \"100%\",\n                        },\n                      ]\n                    }\n                  />\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 12,\n                    }\n                  }\n                />\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#1f2937\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"700\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Anci Barroco\n                  </Text>\n                  <View\n                    dataSet={Object {}}\n                    style={Object {}}\n                  />\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#4b5563\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Good Day!\n                  </Text>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 12,\n                    }\n                  }\n                />\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"flexGrow\": 1,\n                    }\n                  }\n                />\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 12,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignSelf\": \"flex-start\",\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 12,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 18,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  6:22 PM\n                </Text>\n              </View>\n            </View>\n          </View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"borderBottomWidth\": 1,\n                  \"borderColor\": \"#262626\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 16,\n                  \"paddingRight\": 20,\n                  \"paddingTop\": 8,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"space-between\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"#a1a1aa\",\n                      \"borderColor\": \"#27272a\",\n                      \"borderRadius\": 9999,\n                      \"height\": 48,\n                      \"justifyContent\": \"center\",\n                      \"position\": \"relative\",\n                      \"width\": 48,\n                    }\n                  }\n                >\n                  <Image\n                    accessibilityLabel=\"--\"\n                    alt=\"--\"\n                    dataSet={Object {}}\n                    onError={[Function]}\n                    source={\n                      Object {\n                        \"uri\": \"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSr01zI37DYuR8bMV5exWQBSw28C1v_71CAh8d7GP1mplcmTgQA6Q66Oo--QedAN1B4E1k&usqp=CAU\",\n                      }\n                    }\n                    style={\n                      Array [\n                        Object {\n                          \"borderRadius\": 9999,\n                          \"maxWidth\": \"100%\",\n                        },\n                        Object {\n                          \"height\": \"100%\",\n                          \"width\": \"100%\",\n                        },\n                      ]\n                    }\n                  />\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 12,\n                    }\n                  }\n                />\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#1f2937\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"700\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Aniket Kumar\n                  </Text>\n                  <View\n                    dataSet={Object {}}\n                    style={Object {}}\n                  />\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#4b5563\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    All the best\n                  </Text>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 12,\n                    }\n                  }\n                />\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"flexGrow\": 1,\n                    }\n                  }\n                />\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 12,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignSelf\": \"flex-start\",\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 12,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 18,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  8:56 PM\n                </Text>\n              </View>\n            </View>\n          </View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"borderBottomWidth\": 1,\n                  \"borderColor\": \"#262626\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 16,\n                  \"paddingRight\": 20,\n                  \"paddingTop\": 8,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"space-between\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"#a1a1aa\",\n                      \"borderColor\": \"#27272a\",\n                      \"borderRadius\": 9999,\n                      \"height\": 48,\n                      \"justifyContent\": \"center\",\n                      \"position\": \"relative\",\n                      \"width\": 48,\n                    }\n                  }\n                >\n                  <Image\n                    accessibilityLabel=\"--\"\n                    alt=\"--\"\n                    dataSet={Object {}}\n                    onError={[Function]}\n                    source={\n                      Object {\n                        \"uri\": \"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBwgu1A5zgPSvfE83nurkuzNEoXs9DMNr8Ww&usqp=CAU\",\n                      }\n                    }\n                    style={\n                      Array [\n                        Object {\n                          \"borderRadius\": 9999,\n                          \"maxWidth\": \"100%\",\n                        },\n                        Object {\n                          \"height\": \"100%\",\n                          \"width\": \"100%\",\n                        },\n                      ]\n                    }\n                  />\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 12,\n                    }\n                  }\n                />\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#1f2937\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"700\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Kiara\n                  </Text>\n                  <View\n                    dataSet={Object {}}\n                    style={Object {}}\n                  />\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#4b5563\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    I will call today.\n                  </Text>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 12,\n                    }\n                  }\n                />\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"flexGrow\": 1,\n                    }\n                  }\n                />\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 12,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignSelf\": \"flex-start\",\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 12,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 18,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  12:47 PM\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n      </RCTScrollView>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Flex Basic Usage 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"flex\": 1,\n        }\n      }\n    >\n      <RCTScrollView\n        contentContainerStyle={\n          Array [\n            Object {},\n            Object {\n              \"dataSet\": Object {},\n            },\n            Object {},\n          ]\n        }\n        dataSet={Object {}}\n        style={Object {}}\n      >\n        <View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 20,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 25,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              row\n            </Text>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 10,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"display\": \"flex\",\n                  \"flexDirection\": \"row\",\n                  \"marginBottom\": 10,\n                  \"marginTop\": 6,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#cffafe\",\n                    \"display\": \"flex\",\n                    \"height\": 64,\n                    \"justifyContent\": \"center\",\n                    \"width\": 64,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  100\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#a5f3fc\",\n                    \"display\": \"flex\",\n                    \"height\": 64,\n                    \"justifyContent\": \"center\",\n                    \"width\": 64,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  200\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#67e8f9\",\n                    \"display\": \"flex\",\n                    \"height\": 64,\n                    \"justifyContent\": \"center\",\n                    \"width\": 64,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  300\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#22d3ee\",\n                    \"display\": \"flex\",\n                    \"height\": 64,\n                    \"justifyContent\": \"center\",\n                    \"width\": 64,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  400\n                </Text>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 10,\n                }\n              }\n            />\n            <View\n              aria-orientation=\"horizontal\"\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": \"#d4d4d4\",\n                  \"height\": 1,\n                  \"width\": \"100%\",\n                }\n              }\n              thickness=\"1\"\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 10,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 20,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 25,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              column\n            </Text>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 10,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"display\": \"flex\",\n                  \"flexDirection\": \"column\",\n                  \"marginBottom\": 10,\n                  \"marginTop\": 6,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#cffafe\",\n                    \"display\": \"flex\",\n                    \"height\": 64,\n                    \"justifyContent\": \"center\",\n                    \"width\": 64,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  100\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#a5f3fc\",\n                    \"display\": \"flex\",\n                    \"height\": 64,\n                    \"justifyContent\": \"center\",\n                    \"width\": 64,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  200\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#67e8f9\",\n                    \"display\": \"flex\",\n                    \"height\": 64,\n                    \"justifyContent\": \"center\",\n                    \"width\": 64,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  300\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#22d3ee\",\n                    \"display\": \"flex\",\n                    \"height\": 64,\n                    \"justifyContent\": \"center\",\n                    \"width\": 64,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  400\n                </Text>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 10,\n                }\n              }\n            />\n            <View\n              aria-orientation=\"horizontal\"\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": \"#d4d4d4\",\n                  \"height\": 1,\n                  \"width\": \"100%\",\n                }\n              }\n              thickness=\"1\"\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 10,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 20,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 25,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              row-reverse\n            </Text>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 10,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"display\": \"flex\",\n                  \"flexDirection\": \"row-reverse\",\n                  \"marginBottom\": 10,\n                  \"marginTop\": 6,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#cffafe\",\n                    \"display\": \"flex\",\n                    \"height\": 64,\n                    \"justifyContent\": \"center\",\n                    \"width\": 64,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  100\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#a5f3fc\",\n                    \"display\": \"flex\",\n                    \"height\": 64,\n                    \"justifyContent\": \"center\",\n                    \"width\": 64,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  200\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#67e8f9\",\n                    \"display\": \"flex\",\n                    \"height\": 64,\n                    \"justifyContent\": \"center\",\n                    \"width\": 64,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  300\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#22d3ee\",\n                    \"display\": \"flex\",\n                    \"height\": 64,\n                    \"justifyContent\": \"center\",\n                    \"width\": 64,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  400\n                </Text>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 10,\n                }\n              }\n            />\n            <View\n              aria-orientation=\"horizontal\"\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": \"#d4d4d4\",\n                  \"height\": 1,\n                  \"width\": \"100%\",\n                }\n              }\n              thickness=\"1\"\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 10,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 20,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 25,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              column-reverse\n            </Text>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 10,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"display\": \"flex\",\n                  \"flexDirection\": \"column-reverse\",\n                  \"marginBottom\": 10,\n                  \"marginTop\": 6,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#cffafe\",\n                    \"display\": \"flex\",\n                    \"height\": 64,\n                    \"justifyContent\": \"center\",\n                    \"width\": 64,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  100\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#a5f3fc\",\n                    \"display\": \"flex\",\n                    \"height\": 64,\n                    \"justifyContent\": \"center\",\n                    \"width\": 64,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  200\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#67e8f9\",\n                    \"display\": \"flex\",\n                    \"height\": 64,\n                    \"justifyContent\": \"center\",\n                    \"width\": 64,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  300\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#22d3ee\",\n                    \"display\": \"flex\",\n                    \"height\": 64,\n                    \"justifyContent\": \"center\",\n                    \"width\": 64,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#1f2937\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  400\n                </Text>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 10,\n                }\n              }\n            />\n            <View\n              aria-orientation=\"horizontal\"\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": \"#d4d4d4\",\n                  \"height\": 1,\n                  \"width\": \"100%\",\n                }\n              }\n              thickness=\"1\"\n            />\n          </View>\n        </View>\n      </RCTScrollView>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Flex Spacer Example 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"flexDirection\": \"column\",\n          \"height\": 160,\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#06b6d4\",\n            \"borderRadius\": 4,\n            \"display\": \"flex\",\n            \"height\": 64,\n            \"justifyContent\": \"center\",\n            \"width\": 64,\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#fafaf9\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"500\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Box 1\n        </Text>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"flexGrow\": 1,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#ec4899\",\n            \"borderRadius\": 4,\n            \"display\": \"flex\",\n            \"height\": 64,\n            \"justifyContent\": \"center\",\n            \"width\": 64,\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#fafaf9\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"500\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Box 2\n        </Text>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots FormControl CustomStyle 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <RCTScrollView\n      contentContainerStyle={\n        Array [\n          Object {},\n          Object {\n            \"dataSet\": Object {},\n          },\n          Object {},\n        ]\n      }\n      dataSet={Object {}}\n      style={\n        Object {\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignSelf\": \"center\",\n              \"marginTop\": 16,\n              \"paddingLeft\": 16,\n              \"paddingRight\": 16,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 20,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 30,\n                  \"marginBottom\": 16,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Default\n            </Text>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"marginBottom\": 20,\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                feedbackId=\"field-87-feedback\"\n                hasFeedbackText={false}\n                hasHelpText={false}\n                helpTextId=\"field-87-helptext\"\n                isDisabled={false}\n                isInvalid={false}\n                isReadOnly={false}\n                isRequired={false}\n                labelId=\"field-87-label\"\n                nativeID=\"field-87-label\"\n                setHasFeedbackText={[Function]}\n                setHasHelpText={[Function]}\n                style={\n                  Object {\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"flex-start\",\n                    \"marginBottom\": 4,\n                    \"marginTop\": 4,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#737373\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"500\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Project Title\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                isFocused={false}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"borderColor\": \"#d4d4d4\",\n                    \"borderRadius\": 4,\n                    \"borderWidth\": 1,\n                    \"flexDirection\": \"row\",\n                    \"overflow\": \"hidden\",\n                  }\n                }\n              >\n                <TextInput\n                  accessible={true}\n                  allowFontScaling={true}\n                  dataSet={Object {}}\n                  disabled={false}\n                  editable={true}\n                  isRequired={false}\n                  nativeID=\"field-87-input\"\n                  onBlur={[Function]}\n                  onFocus={[Function]}\n                  onKeyPress={[Function]}\n                  placeholderTextColor=\"#a3a3a3\"\n                  readOnly={false}\n                  rejectResponderTermination={true}\n                  required={false}\n                  secureTextEntry={false}\n                  style={\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"color\": \"#171717\",\n                      \"flex\": 1,\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 12,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"height\": \"100%\",\n                      \"paddingBottom\": 8,\n                      \"paddingLeft\": 12,\n                      \"paddingRight\": 12,\n                      \"paddingTop\": 8,\n                      \"width\": \"100%\",\n                    }\n                  }\n                  underlineColorAndroid=\"transparent\"\n                />\n              </View>\n              <View\n                dataSet={Object {}}\n                feedbackId=\"field-87-feedback\"\n                hasFeedbackText={false}\n                hasHelpText={false}\n                helpTextId=\"field-87-helptext\"\n                isDisabled={false}\n                isInvalid={false}\n                isReadOnly={false}\n                isRequired={false}\n                labelId=\"field-87-label\"\n                nativeID=\"field-87-feedback\"\n                setHasFeedbackText={[Function]}\n                setHasHelpText={[Function]}\n                style={\n                  Object {\n                    \"marginTop\": 8,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#737373\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 12,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 18,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Give your project a title.\n                </Text>\n              </View>\n            </View>\n            <View\n              aria-orientation=\"horizontal\"\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": \"#d4d4d4\",\n                  \"height\": 1,\n                  \"width\": \"100%\",\n                }\n              }\n              thickness=\"1\"\n            />\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 20,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 30,\n                  \"marginBottom\": 16,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Disabled\n            </Text>\n            <View\n              dataSet={Object {}}\n              isDisabled={true}\n              style={\n                Object {\n                  \"marginBottom\": 20,\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                feedbackId=\"field-88-feedback\"\n                hasFeedbackText={false}\n                hasHelpText={false}\n                helpTextId=\"field-88-helptext\"\n                isDisabled={true}\n                isInvalid={false}\n                isReadOnly={false}\n                isRequired={false}\n                labelId=\"field-88-label\"\n                nativeID=\"field-88-label\"\n                setHasFeedbackText={[Function]}\n                setHasHelpText={[Function]}\n                style={\n                  Object {\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"flex-start\",\n                    \"marginBottom\": 4,\n                    \"marginTop\": 4,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#a1a1aa\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"700\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Project Title\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                isFocused={false}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"borderColor\": \"#d4d4d4\",\n                    \"borderRadius\": 4,\n                    \"borderWidth\": 1,\n                    \"flexDirection\": \"row\",\n                    \"opacity\": 0.4,\n                    \"overflow\": \"hidden\",\n                  }\n                }\n              >\n                <TextInput\n                  accessible={true}\n                  allowFontScaling={true}\n                  dataSet={Object {}}\n                  disabled={true}\n                  editable={false}\n                  isRequired={false}\n                  nativeID=\"field-88-input\"\n                  onBlur={[Function]}\n                  onFocus={[Function]}\n                  onKeyPress={[Function]}\n                  placeholder=\"Title\"\n                  placeholderTextColor=\"#a3a3a3\"\n                  readOnly={false}\n                  rejectResponderTermination={true}\n                  required={false}\n                  secureTextEntry={false}\n                  style={\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"color\": \"#171717\",\n                      \"flex\": 1,\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 12,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"height\": \"100%\",\n                      \"paddingBottom\": 8,\n                      \"paddingLeft\": 12,\n                      \"paddingRight\": 12,\n                      \"paddingTop\": 8,\n                      \"width\": \"100%\",\n                    }\n                  }\n                  underlineColorAndroid=\"transparent\"\n                />\n              </View>\n              <View\n                dataSet={Object {}}\n                feedbackId=\"field-88-feedback\"\n                hasFeedbackText={false}\n                hasHelpText={false}\n                helpTextId=\"field-88-helptext\"\n                isDisabled={true}\n                isInvalid={false}\n                isReadOnly={false}\n                isRequired={false}\n                labelId=\"field-88-label\"\n                nativeID=\"field-88-feedback\"\n                setHasFeedbackText={[Function]}\n                setHasHelpText={[Function]}\n                style={\n                  Object {\n                    \"marginTop\": 8,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#737373\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 12,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 18,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Give your project a title.\n                </Text>\n              </View>\n            </View>\n            <View\n              aria-orientation=\"horizontal\"\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": \"#d4d4d4\",\n                  \"height\": 1,\n                  \"width\": \"100%\",\n                }\n              }\n              thickness=\"1\"\n            />\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 20,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 30,\n                  \"marginBottom\": 16,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Invalid\n            </Text>\n            <View\n              dataSet={Object {}}\n              isInvalid={true}\n              style={\n                Object {\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                feedbackId=\"field-89-feedback\"\n                hasFeedbackText={false}\n                hasHelpText={false}\n                helpTextId=\"field-89-helptext\"\n                isDisabled={false}\n                isInvalid={true}\n                isReadOnly={false}\n                isRequired={false}\n                labelId=\"field-89-label\"\n                nativeID=\"field-89-label\"\n                setHasFeedbackText={[Function]}\n                setHasHelpText={[Function]}\n                style={\n                  Object {\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"flex-start\",\n                    \"marginBottom\": 4,\n                    \"marginTop\": 4,\n                  }\n                }\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#737373\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"500\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Project Title\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                isFocused={false}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"borderColor\": \"#d4d4d4\",\n                    \"borderRadius\": 4,\n                    \"borderWidth\": 1,\n                    \"flexDirection\": \"row\",\n                    \"overflow\": \"hidden\",\n                  }\n                }\n              >\n                <TextInput\n                  accessibilityInvalid={true}\n                  accessible={true}\n                  allowFontScaling={true}\n                  dataSet={Object {}}\n                  disabled={false}\n                  editable={true}\n                  isInvalid={true}\n                  isRequired={false}\n                  nativeID=\"field-89-input\"\n                  onBlur={[Function]}\n                  onFocus={[Function]}\n                  onKeyPress={[Function]}\n                  placeholder=\"Title\"\n                  placeholderTextColor=\"#a3a3a3\"\n                  readOnly={false}\n                  rejectResponderTermination={true}\n                  required={false}\n                  secureTextEntry={false}\n                  style={\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"color\": \"#171717\",\n                      \"flex\": 1,\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 12,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"height\": \"100%\",\n                      \"paddingBottom\": 8,\n                      \"paddingLeft\": 12,\n                      \"paddingRight\": 12,\n                      \"paddingTop\": 8,\n                      \"width\": \"100%\",\n                    }\n                  }\n                  underlineColorAndroid=\"transparent\"\n                />\n              </View>\n              <View\n                dataSet={Object {}}\n                feedbackId=\"field-89-feedback\"\n                hasFeedbackText={false}\n                hasHelpText={false}\n                helpTextId=\"field-89-helptext\"\n                isDisabled={false}\n                isInvalid={true}\n                isReadOnly={false}\n                isRequired={false}\n                labelId=\"field-89-label\"\n                nativeID=\"field-89\"\n                setHasFeedbackText={[Function]}\n                setHasHelpText={[Function]}\n                style={\n                  Object {\n                    \"marginTop\": 8,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                    }\n                  }\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={12}\n                    bbWidth={12}\n                    color={4292617766}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#dc2626\",\n                          \"fontSize\": 12,\n                          \"height\": 12,\n                          \"width\": 12,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 12,\n                          \"width\": 12,\n                        },\n                      ]\n                    }\n                    tintColor={4292617766}\n                    vbHeight={16}\n                    vbWidth={16}\n                  >\n                    <RNSVGGroup\n                      font={\n                        Object {\n                          \"fontSize\": 12,\n                        }\n                      }\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M8 16C6.41775 16 4.87103 15.5308 3.55544 14.6518C2.23985 13.7727 1.21447 12.5233 0.608967 11.0615C0.00346627 9.59966 -0.15496 7.99113 0.153721 6.43928C0.462403 4.88743 1.22433 3.46197 2.34315 2.34315C3.46197 1.22433 4.88743 0.462403 6.43928 0.153721C7.99113 -0.15496 9.59966 0.00346627 11.0615 0.608967C12.5233 1.21447 13.7727 2.23985 14.6518 3.55544C15.5308 4.87103 16 6.41775 16 8C16 10.1217 15.1571 12.1566 13.6569 13.6569C12.1566 15.1571 10.1217 16 8 16ZM8 14.4C9.2658 14.4 10.5032 14.0246 11.5556 13.3214C12.6081 12.6182 13.4284 11.6186 13.9128 10.4492C14.3972 9.27973 14.524 7.9929 14.277 6.75142C14.0301 5.50995 13.4205 4.36958 12.5255 3.47452C11.6304 2.57946 10.4901 1.96992 9.24858 1.72298C8.0071 1.47603 6.72028 1.60277 5.55083 2.08717C4.38138 2.57158 3.38184 3.39188 2.6786 4.44435C1.97536 5.49683 1.6 6.7342 1.6 8C1.6 9.69739 2.27429 11.3253 3.47452 12.5255C4.67475 13.7257 6.30262 14.4 8 14.4ZM7.2 10.4H8.8V12H7.2V10.4ZM7.2 4H8.8V8.8H7.2V4Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"width\": 4,\n                      }\n                    }\n                  />\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#dc2626\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 12,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 18,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Something is wrong.\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n        </View>\n      </View>\n    </RCTScrollView>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots FormControl Playground 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      isDisabled={false}\n      isInvalid={false}\n      isReadOnly={false}\n      isRequired={true}\n      style={\n        Object {\n          \"width\": \"70%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"marginLeft\": 16,\n            \"marginRight\": 16,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          feedbackId=\"field-83-feedback\"\n          hasFeedbackText={false}\n          hasHelpText={false}\n          helpTextId=\"field-83-helptext\"\n          isDisabled={false}\n          isInvalid={false}\n          isReadOnly={false}\n          isRequired={true}\n          labelId=\"field-83-label\"\n          nativeID=\"field-83-label\"\n          setHasFeedbackText={[Function]}\n          setHasHelpText={[Function]}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"marginBottom\": 4,\n              \"marginTop\": 4,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#737373\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Favorite framework\n          </Text>\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#dc2626\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            *\n          </Text>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        />\n        <View\n          dataSet={Object {}}\n          isFocused={false}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#d4d4d4\",\n              \"borderRadius\": 4,\n              \"borderWidth\": 1,\n              \"flexDirection\": \"row\",\n              \"overflow\": \"hidden\",\n            }\n          }\n        >\n          <TextInput\n            accessibilityRequired={true}\n            accessible={true}\n            allowFontScaling={true}\n            dataSet={Object {}}\n            disabled={false}\n            editable={true}\n            isRequired={true}\n            nativeID=\"field-83-input\"\n            onBlur={[Function]}\n            onFocus={[Function]}\n            onKeyPress={[Function]}\n            placeholder=\"Is it react?\"\n            placeholderTextColor=\"#a3a3a3\"\n            readOnly={false}\n            rejectResponderTermination={true}\n            required={true}\n            secureTextEntry={false}\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"color\": \"#171717\",\n                \"flex\": 1,\n                \"fontFamily\": undefined,\n                \"fontSize\": 12,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"height\": \"100%\",\n                \"paddingBottom\": 8,\n                \"paddingLeft\": 8,\n                \"paddingRight\": 8,\n                \"paddingTop\": 8,\n                \"width\": \"100%\",\n              }\n            }\n            underlineColorAndroid=\"transparent\"\n          />\n        </View>\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        />\n        <View\n          dataSet={Object {}}\n          feedbackId=\"field-83-feedback\"\n          hasFeedbackText={false}\n          hasHelpText={false}\n          helpTextId=\"field-83-helptext\"\n          isDisabled={false}\n          isInvalid={false}\n          isReadOnly={false}\n          isRequired={true}\n          labelId=\"field-83-label\"\n          nativeID=\"field-83-feedback\"\n          setHasFeedbackText={[Function]}\n          setHasHelpText={[Function]}\n          style={\n            Object {\n              \"marginTop\": 8,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#737373\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 12,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 18,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            We'll keep this between us.\n          </Text>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        />\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots FormControl Usage 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"maxWidth\": 300,\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          isRequired={true}\n          style={\n            Object {\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"marginLeft\": 16,\n                \"marginRight\": 16,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              feedbackId=\"field-85-feedback\"\n              hasFeedbackText={false}\n              hasHelpText={false}\n              helpTextId=\"field-85-helptext\"\n              isDisabled={false}\n              isInvalid={false}\n              isReadOnly={false}\n              isRequired={true}\n              labelId=\"field-85-label\"\n              nativeID=\"field-85-label\"\n              setHasFeedbackText={[Function]}\n              setHasHelpText={[Function]}\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"flex-start\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#737373\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Password\n              </Text>\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#dc2626\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                *\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              dataSet={Object {}}\n              isFocused={false}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <TextInput\n                accessibilityRequired={true}\n                accessible={true}\n                allowFontScaling={true}\n                dataSet={Object {}}\n                defaultValue=\"12345\"\n                disabled={false}\n                editable={true}\n                isRequired={true}\n                nativeID=\"field-85-input\"\n                onBlur={[Function]}\n                onFocus={[Function]}\n                onKeyPress={[Function]}\n                placeholder=\"password\"\n                placeholderTextColor=\"#a3a3a3\"\n                readOnly={false}\n                rejectResponderTermination={true}\n                required={true}\n                secureTextEntry={true}\n                style={\n                  Object {\n                    \"backgroundColor\": \"transparent\",\n                    \"color\": \"#171717\",\n                    \"flex\": 1,\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 12,\n                    \"paddingRight\": 12,\n                    \"paddingTop\": 8,\n                    \"width\": \"100%\",\n                  }\n                }\n                underlineColorAndroid=\"transparent\"\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              dataSet={Object {}}\n              feedbackId=\"field-85-feedback\"\n              hasFeedbackText={false}\n              hasHelpText={false}\n              helpTextId=\"field-85-helptext\"\n              isDisabled={false}\n              isInvalid={false}\n              isReadOnly={false}\n              isRequired={true}\n              labelId=\"field-85-label\"\n              nativeID=\"field-85-feedback\"\n              setHasFeedbackText={[Function]}\n              setHasHelpText={[Function]}\n              style={\n                Object {\n                  \"marginTop\": 8,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#737373\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 18,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Must be atleast 6 characters.\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots HStack Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#67e8f9\",\n            \"borderRadius\": 6,\n            \"display\": \"flex\",\n            \"elevation\": 4,\n            \"height\": 160,\n            \"justifyContent\": \"center\",\n            \"shadowColor\": \"#000000\",\n            \"shadowOffset\": Object {\n              \"height\": 2,\n              \"width\": 0,\n            },\n            \"shadowOpacity\": 0.23,\n            \"shadowRadius\": 2.62,\n            \"width\": 80,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 12,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#06b6d4\",\n            \"borderRadius\": 6,\n            \"display\": \"flex\",\n            \"elevation\": 4,\n            \"height\": 160,\n            \"justifyContent\": \"center\",\n            \"shadowColor\": \"#000000\",\n            \"shadowOffset\": Object {\n              \"height\": 2,\n              \"width\": 0,\n            },\n            \"shadowOpacity\": 0.23,\n            \"shadowRadius\": 2.62,\n            \"width\": 80,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 12,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0e7490\",\n            \"borderRadius\": 6,\n            \"display\": \"flex\",\n            \"elevation\": 4,\n            \"height\": 160,\n            \"justifyContent\": \"center\",\n            \"shadowColor\": \"#000000\",\n            \"shadowOffset\": Object {\n              \"height\": 2,\n              \"width\": 0,\n            },\n            \"shadowOpacity\": 0.23,\n            \"shadowRadius\": 2.62,\n            \"width\": 80,\n          }\n        }\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Heading Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <Text\n      dataSet={Object {}}\n      style={\n        Object {\n          \"backgroundColor\": undefined,\n          \"color\": \"#171717\",\n          \"fontFamily\": undefined,\n          \"fontSize\": 24,\n          \"fontStyle\": \"normal\",\n          \"fontWeight\": \"700\",\n          \"letterSpacing\": 0,\n          \"lineHeight\": 30,\n          \"textDecorationLine\": undefined,\n        }\n      }\n    >\n      I'm a Heading\n    </Text>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Heading Composition 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 30,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 37.5,\n            \"marginBottom\": 16,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Heading\n      </Text>\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 20,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 30,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Headings are used for rendering headlines. Heading composes Text so you can use all the style props.\n      </Text>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Heading OverridenStyle 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <Text\n      dataSet={Object {}}\n      style={\n        Object {\n          \"backgroundColor\": undefined,\n          \"color\": \"#171717\",\n          \"fontFamily\": undefined,\n          \"fontSize\": 50,\n          \"fontStyle\": \"normal\",\n          \"fontWeight\": \"700\",\n          \"letterSpacing\": 0,\n          \"lineHeight\": 62.5,\n          \"textDecorationLine\": undefined,\n        }\n      }\n    >\n      How are you?\n    </Text>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Heading Sizes 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 14,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 17.5,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        xs\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 4,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 16,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 20,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        sm\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 4,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 20,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 25,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        md\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 4,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 24,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 30,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        lg\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 4,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 30,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 37.5,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        xl\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 4,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 36,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 45,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        2xl\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 4,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 48,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 2.4000000000000004,\n            \"lineHeight\": 60,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        3xl\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 4,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 60,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 3,\n            \"lineHeight\": 75,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        4xl\n      </Text>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Heading Truncate 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <Text\n      dataSet={Object {}}\n      numberOfLines={1}\n      style={\n        Object {\n          \"backgroundColor\": undefined,\n          \"color\": \"#171717\",\n          \"fontFamily\": undefined,\n          \"fontSize\": 24,\n          \"fontStyle\": \"normal\",\n          \"fontWeight\": \"700\",\n          \"letterSpacing\": 0,\n          \"lineHeight\": 30,\n          \"textDecorationLine\": undefined,\n        }\n      }\n    >\n      NativeBase is a simple, modular and accessible component library that gives you building blocks to build you React applications.\n    </Text>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Hidden Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": \"#fdba74\",\n            \"paddingBottom\": 8,\n            \"paddingLeft\": 8,\n            \"paddingRight\": 8,\n            \"paddingTop\": 8,\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          This text will be always visible.\n        </Text>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Hidden HiddenFromAndToBreakpoints 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": \"#fdba74\",\n            \"paddingBottom\": 8,\n            \"paddingLeft\": 8,\n            \"paddingRight\": 8,\n            \"paddingTop\": 8,\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          This text will be always visible.\n        </Text>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Hidden HiddenOnColorModes 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"coolGray\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#4b5563\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#FFFFFF\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Change mode\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"display\": \"flex\",\n            \"justifyContent\": \"center\",\n            \"marginTop\": 20,\n          }\n        }\n      >\n        <Image\n          accessibilityLabel=\"image\"\n          alt=\"image\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://images.unsplash.com/photo-1561566482-5fa7e82d88b7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1471&q=80\",\n            }\n          }\n          style={\n            Object {\n              \"height\": 150,\n              \"maxWidth\": \"100%\",\n              \"width\": 150,\n            }\n          }\n        />\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Hidden HiddenOnPlatforms 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": \"#fdba74\",\n            \"paddingBottom\": 8,\n            \"paddingLeft\": 8,\n            \"paddingRight\": 8,\n            \"paddingTop\": 8,\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          This text will be visible on every platform.\n        </Text>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": \"#f87171\",\n            \"paddingBottom\": 8,\n            \"paddingLeft\": 8,\n            \"paddingRight\": 8,\n            \"paddingTop\": 8,\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          This text will be hidden on android and web.\n        </Text>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Hidden HiddenOnlyOnBreakPoints 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": \"#fdba74\",\n            \"paddingBottom\": 8,\n            \"paddingLeft\": 8,\n            \"paddingRight\": 8,\n            \"paddingTop\": 8,\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          This text will be visible on every screen size.\n        </Text>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Icon All Icons 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <RCTScrollView\n        contentContainerStyle={\n          Array [\n            Object {},\n            Object {\n              \"dataSet\": Object {},\n            },\n            Object {},\n          ]\n        }\n        data={\n          Array [\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"add\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"arrow-back\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"arrow-forward\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"arrow-up\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"arrow-down\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"check\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"check-circle\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"chevron-down\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"chevron-left\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"chevron-right\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"chevron-up\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"circle\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"close\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"small-close\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"menu\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"info\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"info-outline\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"minus\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"moon\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"question\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"question-outline\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"search\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"sun\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"warning-1\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"warning-2\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"warning-outline\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"three-dots\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"share\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"play\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"favourite\",\n            },\n            Object {\n              \"icon\": <Memo />,\n              \"iconName\": \"delete\",\n            },\n          ]\n        }\n        dataSet={Object {}}\n        disableVirtualization={false}\n        getItem={[Function]}\n        getItemCount={[Function]}\n        horizontal={false}\n        initialNumToRender={10}\n        keyExtractor={[Function]}\n        maxToRenderPerBatch={10}\n        onContentSizeChange={[Function]}\n        onEndReachedThreshold={2}\n        onLayout={[Function]}\n        onMomentumScrollEnd={[Function]}\n        onScroll={[Function]}\n        onScrollBeginDrag={[Function]}\n        onScrollEndDrag={[Function]}\n        removeClippedSubviews={false}\n        renderItem={[Function]}\n        scrollEventThrottle={50}\n        stickyHeaderIndices={Array []}\n        style={Object {}}\n        updateCellsBatchingPeriod={50}\n        viewabilityConfigCallbackPairs={Array []}\n        windowSize={21}\n      >\n        <View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={4285756275}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={4285756275}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M13.25 10.75V2H10.75V10.75H2V13.25H10.75V22H13.25V13.25H22V10.75H13.25Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  add\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={4285756275}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={4285756275}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGGroup\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        >\n                          <RNSVGPath\n                            d=\"M13.0666 3.76375L6.43395 10.3964L5.58039 11.25H6.7875H21.5V12.75H6.7875H5.58192L6.43363 13.6032L13.0557 20.2372L12 21.2929L2.70711 12L12.0012 2.70586L13.0666 3.76375Z\"\n                            propList={\n                              Array [\n                                \"stroke\",\n                              ]\n                            }\n                            stroke={\n                              Array [\n                                2,\n                              ]\n                            }\n                          />\n                        </RNSVGGroup>\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  arrow-back\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={4285756275}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={4285756275}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGGroup\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        >\n                          <RNSVGPath\n                            d=\"M10.9334 3.76375L17.5661 10.3964L18.4196 11.25H17.2125H2.5V12.75H17.2125H18.4181L17.5664 13.6032L10.9443 20.2372L12 21.2929L21.2929 12L11.9988 2.70586L10.9334 3.76375Z\"\n                            propList={\n                              Array [\n                                \"stroke\",\n                              ]\n                            }\n                            stroke={\n                              Array [\n                                2,\n                              ]\n                            }\n                          />\n                        </RNSVGGroup>\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  arrow-forward\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={4285756275}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={4285756275}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGGroup\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        >\n                          <RNSVGPath\n                            d=\"M20.2362 13.0666L13.6036 6.43395L12.75 5.58039V6.7875L12.75 21.5H11.25L11.25 6.7875V5.58192L10.3968 6.43363L3.76282 13.0557L2.70711 12L12 2.70711L21.2941 12.0012L20.2362 13.0666Z\"\n                            propList={\n                              Array [\n                                \"stroke\",\n                              ]\n                            }\n                            stroke={\n                              Array [\n                                2,\n                              ]\n                            }\n                          />\n                        </RNSVGGroup>\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  arrow-up\n                </Text>\n              </View>\n            </View>\n          </View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={4285756275}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={4285756275}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGGroup\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        >\n                          <RNSVGPath\n                            d=\"M3.76375 10.9334L10.3964 17.5661L11.25 18.4196V17.2125L11.25 2.5H12.75L12.75 17.2125V18.4181L13.6032 17.5664L20.2372 10.9443L21.2929 12L12 21.2929L2.70586 11.9988L3.76375 10.9334Z\"\n                            propList={\n                              Array [\n                                \"stroke\",\n                              ]\n                            }\n                            stroke={\n                              Array [\n                                2,\n                              ]\n                            }\n                          />\n                        </RNSVGGroup>\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  arrow-down\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={4285756275}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={4285756275}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  check\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={4285756275}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={4285756275}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  check-circle\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={4285756275}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={4285756275}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M20.2286 6L11.9973 14.3785L3.76862 6.00268L2 7.80293L12 18L22 7.80293L20.2286 6Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  chevron-down\n                </Text>\n              </View>\n            </View>\n          </View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={4285756275}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={4285756275}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M18 3.77141L9.62148 12.0027L17.9973 20.2314L16.1971 22L6 12L16.1971 2L18 3.77141Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  chevron-left\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={4285756275}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={4285756275}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M6 3.77141L14.3785 12.0027L6.00268 20.2314L7.80293 22L18 12L7.80293 2L6 3.77141Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  chevron-right\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={4285756275}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={4285756275}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M20.2286 18L11.9973 9.62148L3.76862 17.9973L2 16.1971L12 6L22 16.1971L20.2286 18Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  chevron-up\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={4285756275}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={4285756275}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  circle\n                </Text>\n              </View>\n            </View>\n          </View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={4285756275}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={4285756275}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  close\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={4285756275}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={4285756275}\n                    vbHeight={16}\n                    vbWidth={16}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M9.41 8l2.29-2.29c.19-.18.3-.43.3-.71a1.003 1.003 0 0 0-1.71-.71L8 6.59l-2.29-2.3a1.003 1.003 0 0 0-1.42 1.42L6.59 8 4.3 10.29c-.19.18-.3.43-.3.71a1.003 1.003 0 0 0 1.71.71L8 9.41l2.29 2.29c.18.19.43.3.71.3a1.003 1.003 0 0 0 .71-1.71L9.41 8z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          fillRule={0}\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"fillRule\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  small-close\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={4285756275}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={4285756275}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M22 5H2V7.47961H22V5ZM22 10.4795H2V12.9591H22V10.4795ZM2 15.959H22V18.4386H2V15.959Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  menu\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={4285756275}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={4285756275}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M12 0C9.62663 0 7.30655 0.703788 5.33316 2.02236C3.35977 3.34094 1.8217 5.21509 0.913451 7.4078C0.00519948 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6689 1.83649 18.807 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0865C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6935 24 14.3734 24 12C23.9966 8.81846 22.7312 5.76821 20.4815 3.51852C18.2318 1.26883 15.1815 0.00344108 12 0ZM12.25 5C12.5467 5 12.8367 5.08797 13.0834 5.25279C13.33 5.41762 13.5223 5.65189 13.6358 5.92597C13.7494 6.20006 13.7791 6.50166 13.7212 6.79263C13.6633 7.08361 13.5204 7.35088 13.3107 7.56066C13.1009 7.77044 12.8336 7.9133 12.5426 7.97118C12.2517 8.02905 11.9501 7.99935 11.676 7.88582C11.4019 7.77229 11.1676 7.58003 11.0028 7.33335C10.838 7.08668 10.75 6.79667 10.75 6.5C10.75 6.10217 10.908 5.72064 11.1893 5.43934C11.4706 5.15803 11.8522 5 12.25 5ZM14.5 18.5H10.5C10.2348 18.5 9.98043 18.3946 9.7929 18.2071C9.60536 18.0196 9.5 17.7652 9.5 17.5C9.5 17.2348 9.60536 16.9804 9.7929 16.7929C9.98043 16.6054 10.2348 16.5 10.5 16.5H11.25C11.3163 16.5 11.3799 16.4737 11.4268 16.4268C11.4737 16.3799 11.5 16.3163 11.5 16.25V11.75C11.5 11.6837 11.4737 11.6201 11.4268 11.5732C11.3799 11.5263 11.3163 11.5 11.25 11.5H10.5C10.2348 11.5 9.98043 11.3946 9.7929 11.2071C9.60536 11.0196 9.5 10.7652 9.5 10.5C9.5 10.2348 9.60536 9.98043 9.7929 9.79289C9.98043 9.60536 10.2348 9.5 10.5 9.5H11.5C12.0304 9.5 12.5391 9.71071 12.9142 10.0858C13.2893 10.4609 13.5 10.9696 13.5 11.5V16.25C13.5 16.3163 13.5263 16.3799 13.5732 16.4268C13.6201 16.4737 13.6837 16.5 13.75 16.5H14.5C14.7652 16.5 15.0196 16.6054 15.2071 16.7929C15.3946 16.9804 15.5 17.2348 15.5 17.5C15.5 17.7652 15.3946 18.0196 15.2071 18.2071C15.0196 18.3946 14.7652 18.5 14.5 18.5Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  info\n                </Text>\n              </View>\n            </View>\n          </View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={4285756275}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={4285756275}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGGroup\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        >\n                          <RNSVGPath\n                            d=\"M11.9442 8.24C12.5628 8.24 13.0642 7.73856 13.0642 7.12C13.0642 6.50144 12.5628 6 11.9442 6C11.3257 6 10.8242 6.50144 10.8242 7.12C10.8242 7.73856 11.3257 8.24 11.9442 8.24Z\"\n                          />\n                          <RNSVGPath\n                            d=\"M14.4008 15.9996H12.8008V9.59961H10.4008C10.1886 9.59961 9.98513 9.68389 9.8351 9.83392C9.68507 9.98395 9.60078 10.1874 9.60078 10.3996C9.60078 10.6118 9.68507 10.8153 9.8351 10.9653C9.98513 11.1153 10.1886 11.1996 10.4008 11.1996H11.2008V15.9996H9.60078C9.38861 15.9996 9.18513 16.0839 9.0351 16.2339C8.88507 16.384 8.80078 16.5874 8.80078 16.7996C8.80078 17.0118 8.88507 17.2153 9.0351 17.3653C9.18513 17.5153 9.38861 17.5996 9.60078 17.5996H14.4008C14.613 17.5996 14.8164 17.5153 14.9665 17.3653C15.1165 17.2153 15.2008 17.0118 15.2008 16.7996C15.2008 16.5874 15.1165 16.384 14.9665 16.2339C14.8164 16.0839 14.613 15.9996 14.4008 15.9996Z\"\n                          />\n                          <RNSVGPath\n                            d=\"M12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17316C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8078C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 9.34783 20.9464 6.80429 19.0711 4.92893C17.1957 3.05357 14.6522 2 12 2ZM12 20.3333C10.3518 20.3333 8.74066 19.8446 7.37025 18.9289C5.99984 18.0132 4.93174 16.7117 4.30101 15.189C3.67028 13.6663 3.50525 11.9908 3.82679 10.3742C4.14834 8.75774 4.94201 7.27288 6.10745 6.10744C7.27288 4.942 8.75774 4.14833 10.3743 3.82679C11.9908 3.50525 13.6663 3.67027 15.189 4.301C16.7117 4.93173 18.0132 5.99984 18.9289 7.37025C19.8446 8.74066 20.3333 10.3518 20.3333 12C20.3333 13.0943 20.1178 14.178 19.699 15.189C19.2802 16.2001 18.6664 17.1187 17.8926 17.8926C17.1187 18.6664 16.2001 19.2802 15.189 19.699C14.178 20.1178 13.0944 20.3333 12 20.3333Z\"\n                          />\n                        </RNSVGGroup>\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  info-outline\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={4285756275}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={4285756275}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M22 10.5H2V13H22V10.5Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  minus\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={4285756275}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={4285756275}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  moon\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={4285756275}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={4285756275}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M12 0C9.62663 0 7.30655 0.703787 5.33316 2.02236C3.35977 3.34094 1.8217 5.21508 0.913451 7.4078C0.00519943 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6688 1.83649 18.807 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0865C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6934 24 14.3734 24 12C23.9966 8.81846 22.7312 5.76821 20.4815 3.51852C18.2318 1.26883 15.1815 0.00344108 12 0V0ZM12 19C11.7033 19 11.4133 18.912 11.1666 18.7472C10.92 18.5824 10.7277 18.3481 10.6142 18.074C10.5007 17.7999 10.4709 17.4983 10.5288 17.2074C10.5867 16.9164 10.7296 16.6491 10.9393 16.4393C11.1491 16.2296 11.4164 16.0867 11.7074 16.0288C11.9983 15.9709 12.2999 16.0006 12.574 16.1142C12.8481 16.2277 13.0824 16.42 13.2472 16.6666C13.412 16.9133 13.5 17.2033 13.5 17.5C13.5 17.8978 13.342 18.2794 13.0607 18.5607C12.7794 18.842 12.3978 19 12 19ZM13.6 12.92C13.4216 12.9979 13.2698 13.1261 13.1632 13.289C13.0566 13.4519 12.9999 13.6423 13 13.837C13 14.1022 12.8946 14.3566 12.7071 14.5441C12.5196 14.7316 12.2652 14.837 12 14.837C11.7348 14.837 11.4804 14.7316 11.2929 14.5441C11.1054 14.3566 11 14.1022 11 13.837C10.9999 13.2532 11.1702 12.682 11.4899 12.1936C11.8096 11.7051 12.2649 11.3205 12.8 11.087C13.1305 10.9427 13.4159 10.7118 13.6259 10.4186C13.8359 10.1255 13.9627 9.78099 13.993 9.42163C14.0232 9.06228 13.9557 8.70144 13.7976 8.37731C13.6396 8.05317 13.3968 7.77781 13.095 7.58037C12.7932 7.38292 12.4437 7.27074 12.0834 7.25571C11.7231 7.24067 11.3654 7.32333 11.0482 7.49495C10.7311 7.66656 10.4662 7.92074 10.2817 8.23057C10.0971 8.54041 9.99982 8.89437 10 9.255C10 9.52021 9.89465 9.77457 9.70711 9.9621C9.51957 10.1496 9.26522 10.255 9 10.255C8.73479 10.255 8.48043 10.1496 8.2929 9.9621C8.10536 9.77457 8 9.52021 8 9.255C7.99999 8.53384 8.19495 7.82608 8.56423 7.20665C8.93352 6.58721 9.4634 6.07913 10.0978 5.73618C10.7322 5.39324 11.4475 5.22817 12.168 5.25847C12.8886 5.28876 13.5875 5.51329 14.1909 5.90828C14.7942 6.30327 15.2796 6.85404 15.5956 7.50229C15.9116 8.15054 16.0464 8.87216 15.9859 9.59077C15.9253 10.3094 15.6716 10.9983 15.2516 11.5845C14.8316 12.1707 14.261 12.6325 13.6 12.921V12.92Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  question\n                </Text>\n              </View>\n            </View>\n          </View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={4285756275}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={4285756275}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGGroup\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        >\n                          <RNSVGPath\n                            d=\"M12 20.75C9.67936 20.75 7.45376 19.8281 5.81282 18.1872C4.17187 16.5462 3.25 14.3206 3.25 12C3.25 9.67936 4.17187 7.45376 5.81282 5.81282C7.45376 4.17187 9.67936 3.25 12 3.25C14.3206 3.25 16.5462 4.17187 18.1872 5.81282C19.8281 7.45376 20.75 9.67936 20.75 12C20.75 14.3206 19.8281 16.5462 18.1872 18.1872C16.5462 19.8281 14.3206 20.75 12 20.75ZM12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 9.34784 20.9464 6.8043 19.0711 4.92893C17.1957 3.05357 14.6522 2 12 2C9.34784 2 6.8043 3.05357 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C6.8043 20.9464 9.34784 22 12 22Z\"\n                          />\n                          <RNSVGPath\n                            d=\"M8.70533 9.34281C8.70369 9.38156 8.70999 9.42024 8.72385 9.45647C8.73771 9.4927 8.75883 9.52571 8.78592 9.55347C8.81301 9.58123 8.84549 9.60316 8.88136 9.6179C8.91724 9.63265 8.95575 9.6399 8.99453 9.63921H9.98453C10.1501 9.63921 10.2821 9.50361 10.3037 9.33921C10.4117 8.55201 10.9517 7.97841 11.9141 7.97841C12.7373 7.97841 13.4909 8.39001 13.4909 9.38001C13.4909 10.142 13.0421 10.4924 12.3329 11.0252C11.5253 11.612 10.8857 12.2972 10.9313 13.4096L10.9349 13.67C10.9362 13.7487 10.9684 13.8238 11.0245 13.879C11.0806 13.9343 11.1562 13.9652 11.2349 13.9652H12.2081C12.2877 13.9652 12.364 13.9336 12.4203 13.8773C12.4765 13.8211 12.5081 13.7448 12.5081 13.6652V13.5392C12.5081 12.6776 12.8357 12.4268 13.7201 11.756C14.4509 11.2004 15.2129 10.5836 15.2129 9.28881C15.2129 7.47561 13.6817 6.59961 12.0053 6.59961C10.4849 6.59961 8.81933 7.30761 8.70533 9.34281ZM10.5737 16.2584C10.5737 16.898 11.0837 17.3708 11.7857 17.3708C12.5165 17.3708 13.0193 16.898 13.0193 16.2584C13.0193 15.596 12.5153 15.1304 11.7845 15.1304C11.0837 15.1304 10.5737 15.596 10.5737 16.2584Z\"\n                          />\n                        </RNSVGGroup>\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  question-outline\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={4285756275}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={4285756275}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M21.9399 20.5624L15.4474 14.0699C16.4549 12.7675 16.9999 11.175 16.9999 9.49997C16.9999 7.49498 16.2174 5.61498 14.8024 4.19749C13.3874 2.78 11.5025 2 9.49997 2C7.49748 2 5.61248 2.7825 4.19749 4.19749C2.78 5.61248 2 7.49498 2 9.49997C2 11.5025 2.7825 13.3874 4.19749 14.8024C5.61248 16.2199 7.49498 16.9999 9.49997 16.9999C11.175 16.9999 12.765 16.4549 14.0674 15.4499L20.5599 21.9399C20.579 21.959 20.6016 21.9741 20.6264 21.9844C20.6513 21.9947 20.678 22 20.7049 22C20.7318 22 20.7585 21.9947 20.7834 21.9844C20.8083 21.9741 20.8309 21.959 20.8499 21.9399L21.9399 20.8524C21.959 20.8334 21.9741 20.8108 21.9844 20.7859C21.9947 20.761 22 20.7343 22 20.7074C22 20.6805 21.9947 20.6538 21.9844 20.6289C21.9741 20.6041 21.959 20.5815 21.9399 20.5624ZM13.46 13.46C12.4 14.5174 10.995 15.0999 9.49997 15.0999C8.00497 15.0999 6.59998 14.5174 5.53998 13.46C4.48249 12.4 3.89999 10.995 3.89999 9.49997C3.89999 8.00497 4.48249 6.59748 5.53998 5.53998C6.59998 4.48249 8.00497 3.89999 9.49997 3.89999C10.995 3.89999 12.4025 4.47999 13.46 5.53998C14.5174 6.59998 15.0999 8.00497 15.0999 9.49997C15.0999 10.995 14.5174 12.4025 13.46 13.46Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  search\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={4285756275}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={4285756275}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGGroup\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        >\n                          <RNSVGPath\n                            d=\"M11.9996 7.21094C9.36096 7.21094 7.22266 9.34924 7.22266 11.9879C7.22266 14.6265 9.36096 16.7648 11.9996 16.7648C14.6382 16.7648 16.7765 14.6265 16.7765 11.9879C16.7765 9.34924 14.6382 7.21094 11.9996 7.21094ZM11.9996 14.7715C10.462 14.7715 9.21437 13.5255 9.21437 11.9863C9.21437 10.4487 10.462 9.20265 11.9996 9.20265C13.5356 9.20265 14.7832 10.4487 14.7832 11.9863C14.7832 13.5255 13.5356 14.7715 11.9996 14.7715Z\"\n                          />\n                          <RNSVGPath\n                            d=\"M13.1236 2.46526C13.1236 2.20873 12.9149 2 12.6599 2H11.3422C11.0857 2 10.877 2.20873 10.877 2.46526V5.48789C10.877 5.74283 11.0857 5.95315 11.3422 5.95315H12.6599C12.9149 5.95315 13.1236 5.74283 13.1236 5.48789V2.46526Z\"\n                          />\n                          <RNSVGPath\n                            d=\"M6.05371 4.46121C5.87206 4.28116 5.5757 4.28116 5.39565 4.46121L4.46512 5.39174C4.28507 5.57338 4.28507 5.86975 4.46512 6.0498L6.60183 8.18651C6.78347 8.36816 7.07984 8.36816 7.25989 8.18651L8.19042 7.25598C8.37206 7.07434 8.37206 6.77797 8.19042 6.59792L6.05371 4.46121Z\"\n                          />\n                          <RNSVGPath\n                            d=\"M2.46526 10.875C2.342 10.8754 2.2239 10.9246 2.13674 11.0117C2.04957 11.0989 2.00042 11.217 2 11.3403V12.658C2 12.9145 2.21033 13.1232 2.46686 13.1232H5.48789C5.74442 13.1232 5.95475 12.9145 5.95475 12.658V11.3419C5.95475 11.0869 5.74602 10.8766 5.48948 10.8766H2.46526V10.875Z\"\n                          />\n                          <RNSVGPath\n                            d=\"M4.46316 17.9472C4.28311 18.1288 4.28311 18.4252 4.46316 18.6052L5.39369 19.5358C5.57374 19.7158 5.87011 19.7158 6.05175 19.5358L8.18847 17.3975C8.37011 17.2158 8.37011 16.9194 8.18847 16.7394L7.25794 15.8089C7.07629 15.6288 6.77993 15.6288 6.59987 15.8089L4.46316 17.9472Z\"\n                          />\n                          <RNSVGPath\n                            d=\"M10.877 21.5344C10.877 21.7909 11.0857 21.9997 11.3438 21.9997H12.6599C12.9149 21.9997 13.1236 21.7893 13.1236 21.5344V18.5102C13.1236 18.2552 12.9149 18.0449 12.6583 18.0449L11.3422 18.0465C11.0857 18.0465 10.877 18.2552 10.877 18.5118V21.5344Z\"\n                          />\n                          <RNSVGPath\n                            d=\"M17.9484 19.5342C18.13 19.7142 18.4264 19.7142 18.6064 19.5342L19.537 18.6036C19.6242 18.5164 19.6732 18.398 19.6732 18.2746C19.6732 18.1512 19.6242 18.0329 19.537 17.9456L17.3987 15.8089C17.2186 15.6288 16.9222 15.6288 16.7406 15.8089L15.8101 16.7394C15.6284 16.921 15.6284 17.2174 15.8101 17.3975L17.9484 19.5342Z\"\n                          />\n                          <RNSVGPath\n                            d=\"M21.5348 13.1236C21.658 13.1232 21.7761 13.074 21.8633 12.9869C21.9505 12.8997 21.9996 12.7816 22 12.6583V11.3422C21.9996 11.219 21.9505 11.1009 21.8633 11.0137C21.7761 10.9265 21.658 10.8774 21.5348 10.877H18.5121C18.3889 10.8774 18.2708 10.9265 18.1836 11.0137C18.0964 11.1009 18.0473 11.219 18.0469 11.3422V12.6599C18.0469 12.9149 18.2556 13.1252 18.5121 13.1252L21.5348 13.1236Z\"\n                          />\n                          <RNSVGPath\n                            d=\"M19.5358 6.05175C19.7174 5.87011 19.7174 5.57374 19.5358 5.39369L18.6036 4.46316C18.4236 4.28311 18.1256 4.28311 17.9472 4.46316L15.8089 6.60147C15.6288 6.78152 15.6288 7.07789 15.8089 7.25953L16.7394 8.19006C16.921 8.3717 17.2174 8.3717 17.3975 8.19006L19.5358 6.05175Z\"\n                          />\n                        </RNSVGGroup>\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  sun\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={4285756275}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={4285756275}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M11.9836 0.00267822C8.77744 0.0551662 5.72075 1.36728 3.47427 3.65538C2.35024 4.77447 1.46338 6.10869 0.866705 7.57831C0.270027 9.04793 -0.0242179 10.6228 0.00155827 12.2087C-0.000286057 13.7583 0.303697 15.2931 0.896087 16.7251C1.48848 18.1571 2.35763 19.458 3.45373 20.5535C4.54983 21.6489 5.85133 22.5173 7.28365 23.1089C8.71596 23.7004 10.2509 24.0035 11.8006 24.0007H12.0146C15.2217 23.9677 18.2847 22.6638 20.5316 20.3751C22.7785 18.0864 24.0257 14.9999 23.9996 11.7927C24.0033 10.2243 23.6933 8.6709 23.0879 7.22398C22.4825 5.77706 21.5939 4.4658 20.4744 3.36731C19.3548 2.26882 18.0269 1.40527 16.5688 0.827453C15.1106 0.249636 13.5517 -0.0307856 11.9836 0.00267822ZM10.5007 16.5433C10.4935 16.3473 10.5254 16.1517 10.5947 15.9682C10.6639 15.7846 10.7691 15.6167 10.904 15.4742C11.0389 15.3318 11.2009 15.2177 11.3804 15.1386C11.5599 15.0594 11.7534 15.0169 11.9496 15.0135H11.9766C12.3712 15.0142 12.7501 15.1677 13.034 15.4417C13.3179 15.7157 13.4847 16.089 13.4995 16.4833C13.5068 16.6794 13.4749 16.875 13.4057 17.0586C13.3365 17.2423 13.2314 17.4102 13.0965 17.5527C12.9615 17.6952 12.7995 17.8093 12.6199 17.8884C12.4403 17.9674 12.2468 18.0099 12.0506 18.0132H12.0236C11.6291 18.0119 11.2505 17.8583 10.9667 17.5844C10.6829 17.3105 10.5159 16.9375 10.5007 16.5433ZM11.0007 12.5017V6.50215C11.0007 6.23695 11.106 5.98262 11.2935 5.7951C11.481 5.60758 11.7354 5.50223 12.0006 5.50223C12.2658 5.50223 12.5201 5.60758 12.7076 5.7951C12.8951 5.98262 13.0005 6.23695 13.0005 6.50215V12.5017C13.0005 12.7669 12.8951 13.0212 12.7076 13.2087C12.5201 13.3962 12.2658 13.5016 12.0006 13.5016C11.7354 13.5016 11.481 13.3962 11.2935 13.2087C11.106 13.0212 11.0007 12.7669 11.0007 12.5017Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  warning-1\n                </Text>\n              </View>\n            </View>\n          </View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={4285756275}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={4285756275}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGGroup\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        >\n                          <RNSVGPath\n                            d=\"M13.9193 18.4271C13.8992 17.9392 13.6816 17.4813 13.3178 17.1478C12.9545 16.8148 12.4731 16.631 11.975 16.6304H11.9746H11.945V16.6304L11.9392 16.6305C11.6898 16.6348 11.4434 16.6864 11.2142 16.7827L11.333 17.0655L11.2142 16.7827C10.9851 16.879 10.7773 17.0183 10.6035 17.1931C10.4296 17.368 10.2932 17.5751 10.2031 17.8026C10.113 18.0302 10.0712 18.2732 10.0806 18.5171L10.0807 18.5176C10.1001 19.0055 10.3169 19.4638 10.6802 19.7979C11.043 20.1315 11.5241 20.3162 12.0222 20.3177H12.0233H12.0529V20.3178L12.058 20.3177C12.3081 20.3138 12.5552 20.2624 12.785 20.1661C13.0148 20.0698 13.2232 19.9303 13.3974 19.7549C13.5716 19.5795 13.7081 19.3718 13.7981 19.1436C13.8881 18.9153 13.9295 18.6716 13.9193 18.4271ZM13.9193 18.4271L13.5863 18.4408M13.9193 18.4271C13.9193 18.4271 13.9193 18.4271 13.9193 18.427L13.5863 18.4408M13.5863 18.4408C13.5945 18.6386 13.5611 18.836 13.488 19.0213C13.415 19.2066 13.3037 19.3762 13.1609 19.52C13.018 19.6638 12.8464 19.779 12.6561 19.8587C12.4658 19.9385 12.2607 19.9812 12.0529 19.9844H12.0233C11.6062 19.9831 11.2058 19.8284 10.9059 19.5525C10.6059 19.2767 10.4296 18.9011 10.4137 18.5043C10.4061 18.3069 10.4399 18.1101 10.513 17.9254C10.5862 17.7406 10.6973 17.5715 10.8399 17.4281C10.9824 17.2847 11.1536 17.1698 11.3434 17.09C11.5331 17.0103 11.7376 16.9674 11.945 16.9638H11.9746C12.3916 16.9642 12.7922 17.1182 13.0926 17.3936C13.393 17.6689 13.5699 18.0442 13.5863 18.4408ZM23.4665 20.2125L23.4665 20.2125C23.6068 20.4676 23.6751 20.7517 23.6658 21.0376C23.6566 21.3234 23.57 21.6033 23.4131 21.8501C23.2562 22.097 23.0337 22.3031 22.7658 22.4469C22.4978 22.5907 22.1942 22.6667 21.8847 22.6667H21.8846H2.11538H2.11533C1.80576 22.6667 1.50222 22.5907 1.23422 22.4469C0.96631 22.3031 0.743845 22.097 0.586879 21.8501L0.305565 22.0289L0.586879 21.8501C0.429998 21.6033 0.343434 21.3234 0.334166 21.0376C0.324898 20.7517 0.393165 20.4676 0.533517 20.2125L0.53353 20.2125L10.4192 2.23977C10.5681 1.96911 10.7933 1.74021 11.0721 1.5796C11.3511 1.41893 11.6722 1.33333 12.0005 1.33333C12.3289 1.33333 12.65 1.41893 12.9289 1.5796C13.2078 1.74021 13.4329 1.96911 13.5819 2.23977L23.4665 20.2125ZM11.0224 7.44182C10.7599 7.69176 10.6091 8.03434 10.6091 8.39521V14.4365C10.6091 14.7974 10.7599 15.1399 11.0224 15.3899C11.2843 15.6393 11.6363 15.7767 12 15.7767C12.3637 15.7767 12.7157 15.6393 12.9776 15.3899C13.2401 15.1399 13.3909 14.7974 13.3909 14.4365V8.39521C13.3909 8.03434 13.2401 7.69176 12.9776 7.44182C12.7157 7.19242 12.3637 7.05499 12 7.05499C11.6363 7.05499 11.2843 7.19242 11.0224 7.44182Z\"\n                            propList={\n                              Array [\n                                \"stroke\",\n                                \"strokeWidth\",\n                              ]\n                            }\n                            stroke={\n                              Array [\n                                2,\n                              ]\n                            }\n                            strokeWidth=\"0.666667\"\n                          />\n                        </RNSVGGroup>\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  warning-2\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={4285756275}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={4285756275}\n                    vbHeight={16}\n                    vbWidth={16}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M8 16C6.41775 16 4.87103 15.5308 3.55544 14.6518C2.23985 13.7727 1.21447 12.5233 0.608967 11.0615C0.00346627 9.59966 -0.15496 7.99113 0.153721 6.43928C0.462403 4.88743 1.22433 3.46197 2.34315 2.34315C3.46197 1.22433 4.88743 0.462403 6.43928 0.153721C7.99113 -0.15496 9.59966 0.00346627 11.0615 0.608967C12.5233 1.21447 13.7727 2.23985 14.6518 3.55544C15.5308 4.87103 16 6.41775 16 8C16 10.1217 15.1571 12.1566 13.6569 13.6569C12.1566 15.1571 10.1217 16 8 16ZM8 14.4C9.2658 14.4 10.5032 14.0246 11.5556 13.3214C12.6081 12.6182 13.4284 11.6186 13.9128 10.4492C14.3972 9.27973 14.524 7.9929 14.277 6.75142C14.0301 5.50995 13.4205 4.36958 12.5255 3.47452C11.6304 2.57946 10.4901 1.96992 9.24858 1.72298C8.0071 1.47603 6.72028 1.60277 5.55083 2.08717C4.38138 2.57158 3.38184 3.39188 2.6786 4.44435C1.97536 5.49683 1.6 6.7342 1.6 8C1.6 9.69739 2.27429 11.3253 3.47452 12.5255C4.67475 13.7257 6.30262 14.4 8 14.4ZM7.2 10.4H8.8V12H7.2V10.4ZM7.2 4H8.8V8.8H7.2V4Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  warning-outline\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={4285756275}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={4285756275}\n                    vbHeight={32.055}\n                    vbWidth={32.055}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGGroup\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        >\n                          <RNSVGPath\n                            d=\"M3.968,12.061C1.775,12.061,0,13.835,0,16.027c0,2.192,1.773,3.967,3.968,3.967c2.189,0,3.966-1.772,3.966-3.967   C7.934,13.835,6.157,12.061,3.968,12.061z M16.233,12.061c-2.188,0-3.968,1.773-3.968,3.965c0,2.192,1.778,3.967,3.968,3.967   s3.97-1.772,3.97-3.967C20.201,13.835,18.423,12.061,16.233,12.061z M28.09,12.061c-2.192,0-3.969,1.774-3.969,3.967   c0,2.19,1.774,3.965,3.969,3.965c2.188,0,3.965-1.772,3.965-3.965S30.278,12.061,28.09,12.061z\"\n                          />\n                        </RNSVGGroup>\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  three-dots\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={4285756275}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={4285756275}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M18.0621 16.1487C17.2993 16.1487 16.6113 16.4451 16.0895 16.9223L8.93445 12.7495C8.98988 12.523 9.02482 12.2868 9.02482 12.0458C9.02482 11.8048 8.98988 11.5698 8.93445 11.3433L16.0136 7.21147C16.5679 7.73368 17.3006 8.02461 18.0621 8.02482C19.7237 8.02482 21.0745 6.67406 21.0745 5.01241C21.0745 3.35076 19.7237 2 18.0621 2C16.4004 2 15.0496 3.35076 15.0496 5.01241C15.0496 5.2534 15.0846 5.48958 15.14 5.71491L8.06085 9.84673C7.50628 9.32504 6.7738 9.0342 6.01241 9.03338C4.35077 9.03338 3 10.3841 3 12.0458C3 13.7074 4.35077 15.0582 6.01241 15.0582C6.77392 15.058 7.50661 14.7671 8.06085 14.2449L15.2159 18.4176C15.1632 18.633 15.1361 18.8538 15.1352 19.0756C15.1354 19.6541 15.3072 20.2196 15.6288 20.7005C15.9503 21.1814 16.4073 21.5562 16.9418 21.7775C17.4764 21.9988 18.0645 22.0567 18.6319 21.9437C19.1993 21.8308 19.7205 21.5522 20.1296 21.1431C20.5387 20.734 20.8173 20.2128 20.9302 19.6454C21.0432 19.078 20.9853 18.4898 20.764 17.9553C20.5427 17.4208 20.1679 16.9638 19.687 16.6423C19.2061 16.3207 18.6406 16.1489 18.0621 16.1487Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  share\n                </Text>\n              </View>\n            </View>\n          </View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={4285756275}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={4285756275}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M12 0C5.376 0 0 5.376 0 12C0 18.624 5.376 24 12 24C18.624 24 24 18.624 24 12C24 5.376 18.624 0 12 0ZM9.6 17.4V6.6L16.8 12L9.6 17.4Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  play\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={4285756275}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={4285756275}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M1.75143 3.371C2.87321 2.22206 4.39447 1.57662 5.98067 1.57662C7.56686 1.57662 9.08812 2.22206 10.2099 3.371L11.9626 5.16516L13.7153 3.371C14.2671 2.78565 14.9272 2.31876 15.657 1.99756C16.3869 1.67637 17.1718 1.5073 17.9661 1.50023C18.7604 1.49316 19.5481 1.64823 20.2832 1.95638C21.0184 2.26453 21.6863 2.7196 22.2479 3.29504C22.8096 3.87047 23.2538 4.55474 23.5545 5.30793C23.8553 6.06112 24.0067 6.86813 23.9998 7.68189C23.9929 8.49564 23.8279 9.29984 23.5143 10.0476C23.2008 10.7953 22.7451 11.4715 22.1738 12.0369L11.9626 22.5L1.75143 12.0369C0.629991 10.8876 0 9.32904 0 7.70394C0 6.07885 0.629991 4.52029 1.75143 3.371Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  favourite\n                </Text>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": 76,\n                    \"marginBottom\": 12,\n                    \"marginLeft\": 8,\n                    \"marginRight\": 8,\n                    \"marginTop\": 12,\n                    \"paddingBottom\": 8,\n                    \"paddingTop\": 8,\n                    \"width\": 76,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={16}\n                    bbWidth={16}\n                    color={4285756275}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 16,\n                          \"width\": 16,\n                        },\n                      ]\n                    }\n                    tintColor={4285756275}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M5.11111 19.7778C5.11111 21 6.11111 22 7.33333 22H16.2222C17.4444 22 18.4444 21 18.4444 19.7778V6.44444H5.11111V19.7778ZM19.5556 3.11111H15.6667L14.5556 2H9L7.88889 3.11111H4V5.33333H19.5556V3.11111Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"height\": 8,\n                    }\n                  }\n                />\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#171717\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textAlign\": \"center\",\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  delete\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n      </RCTScrollView>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Icon Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"flexDirection\": \"row\",\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={20}\n        bbWidth={20}\n        color={4279286145}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#10b981\",\n              \"height\": 20,\n              \"marginTop\": 2,\n              \"width\": 20,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 20,\n              \"width\": 20,\n            },\n          ]\n        }\n        tintColor={4279286145}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 8,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#10b981\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 16,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 24,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Order Placed Successfully\n      </Text>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Icon CreateIcon 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <RNSVGSvgView\n      accessibilityRole=\"image\"\n      align=\"xMidYMid\"\n      bbHeight={48}\n      bbWidth={48}\n      color={4285756275}\n      dataSet={Object {}}\n      focusable={false}\n      meetOrSlice={0}\n      minX={0}\n      minY={0}\n      stroke=\"\"\n      style={\n        Array [\n          Object {\n            \"backgroundColor\": \"transparent\",\n            \"borderWidth\": 0,\n          },\n          Object {\n            \"color\": \"#737373\",\n            \"height\": 48,\n            \"width\": 48,\n          },\n          Object {\n            \"flex\": 0,\n            \"height\": 48,\n            \"width\": 48,\n          },\n        ]\n      }\n      tintColor={4285756275}\n      vbHeight={36}\n      vbWidth={36}\n    >\n      <RNSVGGroup\n        propList={\n          Array [\n            \"stroke\",\n          ]\n        }\n        stroke={null}\n      >\n        <RNSVGGroup>\n          <RNSVGCircle\n            cx=\"18\"\n            cy=\"18\"\n            fill={4278630100}\n            propList={\n              Array [\n                \"fill\",\n                \"stroke\",\n              ]\n            }\n            r=\"17.5\"\n            stroke={4279137424}\n          />\n          <RNSVGCircle\n            cx=\"18\"\n            cy=\"18\"\n            fill={4294967295}\n            propList={\n              Array [\n                \"fill\",\n                \"stroke\",\n              ]\n            }\n            r=\"13.5\"\n            stroke={4279137424}\n          />\n          <RNSVGCircle\n            cx=\"18\"\n            cy=\"18\"\n            fill={4278630100}\n            propList={\n              Array [\n                \"fill\",\n                \"stroke\",\n              ]\n            }\n            r=\"9.5\"\n            stroke={4279137424}\n          />\n          <RNSVGCircle\n            cx=\"18\"\n            cy=\"18\"\n            fill={4294967295}\n            propList={\n              Array [\n                \"fill\",\n                \"stroke\",\n              ]\n            }\n            r=\"5.5\"\n            stroke={4279137424}\n          />\n        </RNSVGGroup>\n      </RNSVGGroup>\n    </RNSVGSvgView>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Icon CustomIcon 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={40}\n        bbWidth={40}\n        color={4285756275}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#737373\",\n              \"height\": 40,\n              \"width\": 40,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 40,\n              \"width\": 40,\n            },\n          ]\n        }\n        tintColor={4285756275}\n        vbHeight={873}\n        vbWidth={870}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGGroup\n              fill={null}\n              fillRule={1}\n              propList={\n                Array [\n                  \"fill\",\n                  \"fillRule\",\n                  \"stroke\",\n                  \"strokeWidth\",\n                ]\n              }\n              stroke={null}\n              strokeWidth={1}\n            >\n              <RNSVGPath\n                d=\"M435 .1C194.8.1.1 194.8.1 435c0 187.3 118.4 346.9 284.4 408.1 3.3-29.9 15-57.2 32.7-79.6 12.1-15.4 26.9-28.5 43.9-38.4 2.1-5 4.6-10.6 7.1-16.6-50.3-26-84.7-78.1-84.7-138.6 0-51.7 25.3-97.7 64-125.9-10.9-20.6-21.3-40.2-31.8-58.2-18.1-31.5-46.7-59.7-68.4-78.9-21 11.9-47.8 4.7-59.7-16.3-11.9-21-4.7-47.8 16.3-59.7 21-11.9 47.4-4.7 59.7 15.9v.4c7.2 12.7 7.2 27.5 1.8 39.8 22.8 19.5 56.8 52.5 77.8 89 9.8 17 19.5 34.7 29.3 53.5 20.3-9.4 42.7-14.8 66.2-14.8 21.3 0 41.6 4.3 60.1 11.9 9.8-18.5 19.5-36.2 28.9-52.8 21-36.2 54.6-68.7 77.4-88.3-5.4-12.3-5.4-26.8 1.8-39.4v-.4c12.3-20.6 38.7-27.9 59.3-15.9 21 11.9 28.2 38.7 16.3 59.3-11.9 21-38.4 28.2-59.3 16.3-21.7 18.8-49.9 47.4-68 78.5-10.1 17.4-20.3 36.5-30.8 56.4 42 27.9 69.8 75.3 69.8 129.5 0 63-36.9 116.9-90.4 141.5.9 2.7 2 4.9 3 7.2 47 22.3 81.1 67.4 87.9 121.1C755.9 776 869.9 618.8 869.9 435 869.9 194.8 675.2.1 435 .1z\"\n                fill={4291428352}\n                propList={\n                  Array [\n                    \"fill\",\n                  ]\n                }\n              />\n              <RNSVGPath\n                d=\"M284.8 843.3h.1-.1zM284.8 843.3c-.1 0-.3-.1-.4-.1.2 0 .3 0 .4.1z\"\n                fill={4294967295}\n                propList={\n                  Array [\n                    \"fill\",\n                  ]\n                }\n              />\n              <RNSVGGroup\n                fill={4294967295}\n                propList={\n                  Array [\n                    \"fill\",\n                    \"stroke\",\n                    \"strokeWidth\",\n                  ]\n                }\n                stroke={4294967295}\n                strokeWidth={5}\n              >\n                <RNSVGPath\n                  d=\"M485.2 5.8c-20.6-11.9-47-4.7-59.3 15.9v.4c-7.2 12.7-7.2 27.1-1.8 39.4-22.8 19.5-56.4 52.1-77.4 88.3-9.4 16.6-19.2 34.4-28.9 52.8-18.5-7.6-38.7-11.9-60.1-11.9-23.5 0-45.9 5.4-66.2 14.8-9.8-18.8-19.5-36.5-29.3-53.5-21-36.5-55-69.5-77.8-89 5.4-12.3 5.4-27.1-1.8-39.8v-.4C70.3 2.2 43.9-5.1 22.9 6.9 1.9 18.8-5.3 45.6 6.6 66.6c11.9 21 38.7 28.2 59.7 16.3 21.7 19.2 50.3 47.4 68.4 78.9 10.5 18.1 21 37.6 31.8 58.2-38.7 28.2-64 74.2-64 125.9 0 60.4 34.4 112.5 84.7 138.6-2.5 6.2-5.1 11.9-7.2 17-41.6 24.4-70.8 67.4-76.4 117.6 46.9 17.3 97.6 26.8 150.6 26.8 56.2 0 109.9-10.7 159.2-30.1-7.1-52.8-40.5-97.3-86.8-119.8-1.1-2.9-2.5-5.4-3.6-8.7 53.5-24.6 90.4-78.5 90.4-141.5 0-54.3-27.9-101.7-69.8-129.5 10.5-19.9 20.6-39.1 30.8-56.4 18.1-31.1 46.3-59.7 68-78.5 21 11.9 47.4 4.7 59.3-16.3 11.7-20.5 4.5-47.3-16.5-59.3z\"\n                  matrix={\n                    Array [\n                      1,\n                      0,\n                      0,\n                      1,\n                      181,\n                      224,\n                    ]\n                  }\n                />\n              </RNSVGGroup>\n            </RNSVGGroup>\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Icon Integration with Third Party Icons 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"flexDirection\": \"row\",\n          }\n        }\n      >\n        <Text\n          allowFontScaling={false}\n          dataSet={Object {}}\n          style={\n            Array [\n              Object {\n                \"color\": undefined,\n                \"fontSize\": 12,\n              },\n              Object {\n                \"color\": \"#1f2937\",\n                \"fontSize\": 16,\n                \"height\": 16,\n                \"lineHeight\": 16,\n                \"width\": 16,\n              },\n              Object {\n                \"fontFamily\": \"anticon\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"normal\",\n              },\n              Object {},\n            ]\n          }\n        >\n          \n        </Text>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"width\": 12,\n            }\n          }\n        />\n        <Text />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"width\": 12,\n            }\n          }\n        />\n        <Text\n          allowFontScaling={false}\n          dataSet={Object {}}\n          style={\n            Array [\n              Object {\n                \"color\": undefined,\n                \"fontSize\": 12,\n              },\n              Object {\n                \"color\": \"#1f2937\",\n                \"fontSize\": 16,\n                \"height\": 16,\n                \"lineHeight\": 16,\n                \"width\": 16,\n              },\n              Object {\n                \"fontFamily\": \"material-community\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"normal\",\n              },\n              Object {},\n            ]\n          }\n        >\n          󰖟\n        </Text>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Icon Sizes 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 24,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 30,\n            \"marginBottom\": 40,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Sizes\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"justifyContent\": \"center\",\n          }\n        }\n      >\n        <Text\n          allowFontScaling={false}\n          dataSet={Object {}}\n          style={\n            Array [\n              Object {\n                \"color\": undefined,\n                \"fontSize\": 12,\n              },\n              Object {\n                \"alignSelf\": \"center\",\n                \"color\": \"#737373\",\n                \"fontSize\": 40,\n                \"height\": 40,\n                \"lineHeight\": 40,\n                \"width\": 40,\n              },\n              Object {\n                \"fontFamily\": \"ionicons\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"normal\",\n              },\n              Object {},\n            ]\n          }\n        >\n          \n        </Text>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <Text\n          allowFontScaling={false}\n          dataSet={Object {}}\n          style={\n            Array [\n              Object {\n                \"color\": undefined,\n                \"fontSize\": 12,\n              },\n              Object {\n                \"alignSelf\": \"center\",\n                \"color\": \"#737373\",\n                \"fontSize\": 50,\n                \"height\": 50,\n                \"lineHeight\": 50,\n                \"width\": 50,\n              },\n              Object {\n                \"fontFamily\": \"ionicons\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"normal\",\n              },\n              Object {},\n            ]\n          }\n        >\n          \n        </Text>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <Text\n          allowFontScaling={false}\n          dataSet={Object {}}\n          style={\n            Array [\n              Object {\n                \"color\": undefined,\n                \"fontSize\": 12,\n              },\n              Object {\n                \"alignSelf\": \"center\",\n                \"color\": \"#737373\",\n                \"fontSize\": 32,\n                \"height\": 32,\n                \"lineHeight\": 32,\n                \"width\": 32,\n              },\n              Object {\n                \"fontFamily\": \"ionicons\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"normal\",\n              },\n              Object {},\n            ]\n          }\n        >\n          \n        </Text>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots IconButton Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderRadius\": 9999,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 10,\n            \"paddingRight\": 10,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <Text\n          allowFontScaling={false}\n          dataSet={Object {}}\n          style={\n            Array [\n              Object {\n                \"color\": undefined,\n                \"fontSize\": 12,\n              },\n              Object {\n                \"color\": \"#f97316\",\n                \"fontSize\": 20,\n                \"height\": 20,\n                \"lineHeight\": 20,\n                \"width\": 20,\n              },\n              Object {\n                \"fontFamily\": \"entypo\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"normal\",\n              },\n              Object {},\n            ]\n          }\n        >\n          \n        </Text>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots IconButton SVGIcon 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 10,\n            \"paddingRight\": 10,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <RNSVGSvgView\n          accessibilityRole=\"image\"\n          align=\"xMidYMid\"\n          bbHeight={40}\n          bbWidth={40}\n          color={4294638330}\n          dataSet={Object {}}\n          focusable={false}\n          meetOrSlice={0}\n          minX={0}\n          minY={0}\n          stroke=\"\"\n          strokeWidth=\"10\"\n          style={\n            Array [\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"borderWidth\": 0,\n              },\n              Object {\n                \"color\": \"#fafafa\",\n                \"height\": 40,\n                \"width\": 40,\n              },\n              Object {\n                \"flex\": 0,\n                \"height\": 40,\n                \"width\": 40,\n              },\n            ]\n          }\n          tintColor={4294638330}\n          vbHeight={100}\n          vbWidth={100}\n        >\n          <RNSVGGroup\n            propList={\n              Array [\n                \"stroke\",\n                \"strokeWidth\",\n              ]\n            }\n            stroke={null}\n            strokeWidth=\"10\"\n          >\n            <RNSVGGroup>\n              <RNSVGPath\n                d=\"M46.667 90v-.008c-4.922 0-11.021-2.695-13.333-6.66V40c5.521 0 10-4.479 10-10V13.333A3.33 3.33 0 0 1 46.667 10C54.029 10 60 15.97 60 23.333v13.333A3.331 3.331 0 0 0 63.334 40H80c5.52 0 10 4.479 10 10v30h-.004c0 5.52-4.477 9.992-9.996 10H46.667zM10 40h16.666v43.333H10z\"\n                fill={\n                  Array [\n                    2,\n                  ]\n                }\n                propList={\n                  Array [\n                    \"fill\",\n                    \"stroke\",\n                  ]\n                }\n                stroke={null}\n              />\n            </RNSVGGroup>\n          </RNSVGGroup>\n        </RNSVGSvgView>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 10,\n            \"paddingRight\": 10,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <RNSVGSvgView\n          accessibilityRole=\"image\"\n          align=\"xMidYMid\"\n          bbHeight={40}\n          bbWidth={40}\n          color={4278355143}\n          dataSet={Object {}}\n          focusable={false}\n          meetOrSlice={0}\n          minX={0}\n          minY={0}\n          stroke=\"\"\n          strokeWidth=\"10\"\n          style={\n            Array [\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"borderWidth\": 0,\n              },\n              Object {\n                \"color\": \"#0284c7\",\n                \"height\": 40,\n                \"width\": 40,\n              },\n              Object {\n                \"flex\": 0,\n                \"height\": 40,\n                \"width\": 40,\n              },\n            ]\n          }\n          tintColor={4278355143}\n          vbHeight={100}\n          vbWidth={100}\n        >\n          <RNSVGGroup\n            propList={\n              Array [\n                \"stroke\",\n                \"strokeWidth\",\n              ]\n            }\n            stroke={null}\n            strokeWidth=\"10\"\n          >\n            <RNSVGGroup>\n              <RNSVGPath\n                d=\"M46.667 90v-.008c-4.922 0-11.021-2.695-13.333-6.66V40c5.521 0 10-4.479 10-10V13.333A3.33 3.33 0 0 1 46.667 10C54.029 10 60 15.97 60 23.333v13.333A3.331 3.331 0 0 0 63.334 40H80c5.52 0 10 4.479 10 10v30h-.004c0 5.52-4.477 9.992-9.996 10H46.667zM10 40h16.666v43.333H10z\"\n                fill={\n                  Array [\n                    2,\n                  ]\n                }\n                propList={\n                  Array [\n                    \"fill\",\n                    \"stroke\",\n                  ]\n                }\n                stroke={null}\n              />\n            </RNSVGGroup>\n          </RNSVGGroup>\n        </RNSVGSvgView>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots IconButton Sizes 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n          }\n        }\n      >\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 6,\n              \"paddingLeft\": 6,\n              \"paddingRight\": 6,\n              \"paddingTop\": 6,\n            }\n          }\n        >\n          <Text\n            allowFontScaling={false}\n            dataSet={Object {}}\n            style={\n              Array [\n                Object {\n                  \"color\": undefined,\n                  \"fontSize\": 12,\n                },\n                Object {\n                  \"color\": \"#fafafa\",\n                  \"fontSize\": 12,\n                  \"height\": 12,\n                  \"lineHeight\": 12,\n                  \"width\": 12,\n                },\n                Object {\n                  \"fontFamily\": \"material\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"normal\",\n                },\n                Object {},\n              ]\n            }\n          >\n            \n          </Text>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 8,\n              \"paddingRight\": 8,\n              \"paddingTop\": 8,\n            }\n          }\n        >\n          <Text\n            allowFontScaling={false}\n            dataSet={Object {}}\n            style={\n              Array [\n                Object {\n                  \"color\": undefined,\n                  \"fontSize\": 12,\n                },\n                Object {\n                  \"color\": \"#fafafa\",\n                  \"fontSize\": 16,\n                  \"height\": 16,\n                  \"lineHeight\": 16,\n                  \"width\": 16,\n                },\n                Object {\n                  \"fontFamily\": \"material\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"normal\",\n                },\n                Object {},\n              ]\n            }\n          >\n            \n          </Text>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 10,\n              \"paddingRight\": 10,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <Text\n            allowFontScaling={false}\n            dataSet={Object {}}\n            style={\n              Array [\n                Object {\n                  \"color\": undefined,\n                  \"fontSize\": 12,\n                },\n                Object {\n                  \"color\": \"#fafafa\",\n                  \"fontSize\": 20,\n                  \"height\": 20,\n                  \"lineHeight\": 20,\n                  \"width\": 20,\n                },\n                Object {\n                  \"fontFamily\": \"material\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"normal\",\n                },\n                Object {},\n              ]\n            }\n          >\n            \n          </Text>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 12,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 12,\n            }\n          }\n        >\n          <Text\n            allowFontScaling={false}\n            dataSet={Object {}}\n            style={\n              Array [\n                Object {\n                  \"color\": undefined,\n                  \"fontSize\": 12,\n                },\n                Object {\n                  \"color\": \"#fafafa\",\n                  \"fontSize\": 24,\n                  \"height\": 24,\n                  \"lineHeight\": 24,\n                  \"width\": 24,\n                },\n                Object {\n                  \"fontFamily\": \"material\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"normal\",\n                },\n                Object {},\n              ]\n            }\n          >\n            \n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots IconButton Variant 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n          }\n        }\n      >\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"indigo\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#4f46e5\",\n              \"borderRadius\": 4,\n              \"borderWidth\": 1,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 10,\n              \"paddingRight\": 10,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <Text\n            allowFontScaling={false}\n            dataSet={Object {}}\n            style={\n              Array [\n                Object {\n                  \"color\": undefined,\n                  \"fontSize\": 12,\n                },\n                Object {\n                  \"color\": \"#4f46e5\",\n                  \"fontSize\": 20,\n                  \"height\": 20,\n                  \"lineHeight\": 20,\n                  \"width\": 20,\n                },\n                Object {\n                  \"fontFamily\": \"anticon\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"normal\",\n                },\n                Object {},\n              ]\n            }\n          >\n            \n          </Text>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"indigo\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#4f46e5\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 10,\n              \"paddingRight\": 10,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <Text\n            allowFontScaling={false}\n            dataSet={Object {}}\n            style={\n              Array [\n                Object {\n                  \"color\": undefined,\n                  \"fontSize\": 12,\n                },\n                Object {\n                  \"color\": \"#fafafa\",\n                  \"fontSize\": 20,\n                  \"height\": 20,\n                  \"lineHeight\": 20,\n                  \"width\": 20,\n                },\n                Object {\n                  \"fontFamily\": \"anticon\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"normal\",\n                },\n                Object {},\n              ]\n            }\n          >\n            \n          </Text>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"indigo\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 10,\n              \"paddingRight\": 10,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <Text\n            allowFontScaling={false}\n            dataSet={Object {}}\n            style={\n              Array [\n                Object {\n                  \"color\": undefined,\n                  \"fontSize\": 12,\n                },\n                Object {\n                  \"color\": \"#4f46e5\",\n                  \"fontSize\": 20,\n                  \"height\": 20,\n                  \"lineHeight\": 20,\n                  \"width\": 20,\n                },\n                Object {\n                  \"fontFamily\": \"anticon\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"normal\",\n                },\n                Object {},\n              ]\n            }\n          >\n            \n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Image Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <Image\n        accessibilityLabel=\"Alternate Text\"\n        alt=\"Alternate Text\"\n        dataSet={Object {}}\n        onError={[Function]}\n        source={\n          Object {\n            \"uri\": \"https://wallpaperaccess.com/full/317501.jpg\",\n          }\n        }\n        style={\n          Object {\n            \"height\": 128,\n            \"maxWidth\": \"100%\",\n            \"width\": 128,\n          }\n        }\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Image BorderRadius 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <Image\n        accessibilityLabel=\"Alternate Text\"\n        alt=\"Alternate Text\"\n        dataSet={Object {}}\n        onError={[Function]}\n        source={\n          Object {\n            \"uri\": \"https://wallpaperaccess.com/full/317501.jpg\",\n          }\n        }\n        style={\n          Object {\n            \"borderRadius\": 100,\n            \"height\": 150,\n            \"maxWidth\": \"100%\",\n            \"width\": 150,\n          }\n        }\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Image FallbackElement 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <Image\n        accessibilityLabel=\"fallback text\"\n        alt=\"fallback text\"\n        dataSet={Object {}}\n        onError={[Function]}\n        source={\n          Object {\n            \"uri\": \"https://cdn.pixaba.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg\",\n          }\n        }\n        style={\n          Object {\n            \"borderRadius\": 2,\n            \"height\": 150,\n            \"maxWidth\": \"100%\",\n            \"width\": 150,\n          }\n        }\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Image FallbackSupport 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <Image\n        accessibilityLabel=\"fallback text\"\n        alt=\"fallback text\"\n        dataSet={Object {}}\n        onError={[Function]}\n        source={\n          Object {\n            \"uri\": \"https://-page-icon.png\",\n          }\n        }\n        style={\n          Object {\n            \"borderRadius\": 100,\n            \"height\": 150,\n            \"maxWidth\": \"100%\",\n            \"width\": 150,\n          }\n        }\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Image Sizes 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <Text\n      dataSet={Object {}}\n      style={\n        Object {\n          \"backgroundColor\": undefined,\n          \"color\": \"#171717\",\n          \"fontFamily\": undefined,\n          \"fontSize\": 24,\n          \"fontStyle\": \"normal\",\n          \"fontWeight\": \"700\",\n          \"letterSpacing\": 0,\n          \"lineHeight\": 30,\n          \"marginBottom\": 40,\n          \"marginTop\": 12,\n          \"textAlign\": \"center\",\n          \"textDecorationLine\": undefined,\n        }\n      }\n    >\n      Image Sizes\n    </Text>\n    <RCTScrollView\n      contentContainerStyle={\n        Array [\n          Object {},\n          Object {\n            \"dataSet\": Object {},\n          },\n          Object {},\n        ]\n      }\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"marginBottom\": 24,\n            }\n          }\n        >\n          <Image\n            accessibilityLabel=\"Alternate Text xs\"\n            alt=\"Alternate Text xs\"\n            dataSet={Object {}}\n            onError={[Function]}\n            resizeMode=\"cover\"\n            source={\n              Object {\n                \"uri\": \"https://wallpaperaccess.com/full/317501.jpg\",\n              }\n            }\n            style={\n              Object {\n                \"height\": 40,\n                \"maxWidth\": \"100%\",\n                \"width\": 40,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 8,\n              }\n            }\n          />\n          <Image\n            accessibilityLabel=\"Alternate Text sm\"\n            alt=\"Alternate Text sm\"\n            dataSet={Object {}}\n            onError={[Function]}\n            resizeMode=\"cover\"\n            source={\n              Object {\n                \"uri\": \"https://wallpaperaccess.com/full/317501.jpg\",\n              }\n            }\n            style={\n              Object {\n                \"height\": 64,\n                \"maxWidth\": \"100%\",\n                \"width\": 64,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 8,\n              }\n            }\n          />\n          <Image\n            accessibilityLabel=\"Alternate Text md\"\n            alt=\"Alternate Text md\"\n            dataSet={Object {}}\n            onError={[Function]}\n            resizeMode=\"cover\"\n            source={\n              Object {\n                \"uri\": \"https://wallpaperaccess.com/full/317501.jpg\",\n              }\n            }\n            style={\n              Object {\n                \"height\": 80,\n                \"maxWidth\": \"100%\",\n                \"width\": 80,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 8,\n              }\n            }\n          />\n          <Image\n            accessibilityLabel=\"Alternate Text lg\"\n            alt=\"Alternate Text lg\"\n            dataSet={Object {}}\n            onError={[Function]}\n            resizeMode=\"cover\"\n            source={\n              Object {\n                \"uri\": \"https://wallpaperaccess.com/full/317501.jpg\",\n              }\n            }\n            style={\n              Object {\n                \"height\": 96,\n                \"maxWidth\": \"100%\",\n                \"width\": 96,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 8,\n              }\n            }\n          />\n          <Image\n            accessibilityLabel=\"Alternate Text xl\"\n            alt=\"Alternate Text xl\"\n            dataSet={Object {}}\n            onError={[Function]}\n            resizeMode=\"cover\"\n            source={\n              Object {\n                \"uri\": \"https://wallpaperaccess.com/full/317501.jpg\",\n              }\n            }\n            style={\n              Object {\n                \"height\": 128,\n                \"maxWidth\": \"100%\",\n                \"width\": 128,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 8,\n              }\n            }\n          />\n          <Image\n            accessibilityLabel=\"Alternate Text 2xl\"\n            alt=\"Alternate Text 2xl\"\n            dataSet={Object {}}\n            onError={[Function]}\n            resizeMode=\"cover\"\n            source={\n              Object {\n                \"uri\": \"https://wallpaperaccess.com/full/317501.jpg\",\n              }\n            }\n            style={\n              Object {\n                \"height\": 256,\n                \"maxWidth\": \"100%\",\n                \"width\": 256,\n              }\n            }\n          />\n        </View>\n      </View>\n    </RCTScrollView>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Image WithRef 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <Image\n        accessibilityLabel=\"Alternate Text\"\n        alt=\"Alternate Text\"\n        dataSet={Object {}}\n        onError={[Function]}\n        source={\n          Object {\n            \"uri\": \"https://wallpaperaccess.com/full/317501.jpg\",\n          }\n        }\n        style={\n          Object {\n            \"height\": 128,\n            \"maxWidth\": \"100%\",\n            \"width\": 128,\n          }\n        }\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Input Addons 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"flexDirection\": \"row\",\n            \"width\": \"70%\",\n          }\n        }\n      >\n        <View\n          0=\"h\"\n          1=\"t\"\n          2=\"t\"\n          3=\"p\"\n          4=\"s\"\n          5=\":\"\n          6=\"/\"\n          7=\"/\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#fafafa\",\n              \"borderBottomLeftRadius\": 4,\n              \"borderBottomRightRadius\": 0,\n              \"borderColor\": \"#d4d4d4\",\n              \"borderRightWidth\": 0,\n              \"borderTopLeftRadius\": 4,\n              \"borderTopRightRadius\": 0,\n              \"borderWidth\": 1,\n              \"justifyContent\": \"center\",\n              \"marginRight\": 0,\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 8,\n              \"paddingRight\": 8,\n              \"paddingTop\": 8,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            https://\n          </Text>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        />\n        <View\n          dataSet={Object {}}\n          isFocused={false}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#d4d4d4\",\n              \"borderRadius\": 0,\n              \"borderWidth\": 1,\n              \"flexDirection\": \"row\",\n              \"marginLeft\": 0,\n              \"marginRight\": 0,\n              \"overflow\": \"hidden\",\n              \"width\": \"70%\",\n            }\n          }\n        >\n          <TextInput\n            accessible={true}\n            allowFontScaling={true}\n            dataSet={Object {}}\n            editable={true}\n            onBlur={[Function]}\n            onFocus={[Function]}\n            onKeyPress={[Function]}\n            placeholder=\"nativebase\"\n            placeholderTextColor=\"#a3a3a3\"\n            rejectResponderTermination={true}\n            secureTextEntry={false}\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"borderBottomLeftRadius\": 0,\n                \"borderBottomRightRadius\": 0,\n                \"borderTopLeftRadius\": 0,\n                \"borderTopRightRadius\": 0,\n                \"color\": \"#171717\",\n                \"flex\": 1,\n                \"fontFamily\": undefined,\n                \"fontSize\": 12,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"height\": \"100%\",\n                \"paddingBottom\": 8,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 8,\n                \"width\": \"100%\",\n              }\n            }\n            underlineColorAndroid=\"transparent\"\n          />\n        </View>\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        />\n        <View\n          0=\".\"\n          1=\"i\"\n          2=\"o\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#fafafa\",\n              \"borderBottomLeftRadius\": 0,\n              \"borderBottomRightRadius\": 4,\n              \"borderColor\": \"#d4d4d4\",\n              \"borderLeftWidth\": 0,\n              \"borderTopLeftRadius\": 0,\n              \"borderTopRightRadius\": 4,\n              \"borderWidth\": 1,\n              \"justifyContent\": \"center\",\n              \"marginLeft\": 0,\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 8,\n              \"paddingRight\": 8,\n              \"paddingTop\": 8,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            .io\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Input Elements 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        isFocused={false}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"overflow\": \"hidden\",\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <Text\n          allowFontScaling={false}\n          dataSet={Object {}}\n          style={\n            Array [\n              Object {\n                \"color\": undefined,\n                \"fontSize\": 12,\n              },\n              Object {\n                \"color\": \"#a3a3a3\",\n                \"fontSize\": 20,\n                \"height\": 20,\n                \"lineHeight\": 20,\n                \"marginLeft\": 8,\n                \"width\": 20,\n              },\n              Object {\n                \"fontFamily\": \"material\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"normal\",\n              },\n              Object {},\n            ]\n          }\n        >\n          \n        </Text>\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        />\n        <TextInput\n          accessible={true}\n          allowFontScaling={true}\n          dataSet={Object {}}\n          editable={true}\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyPress={[Function]}\n          placeholder=\"Name\"\n          placeholderTextColor=\"#a3a3a3\"\n          rejectResponderTermination={true}\n          secureTextEntry={false}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"color\": \"#171717\",\n              \"flex\": 1,\n              \"fontFamily\": undefined,\n              \"fontSize\": 12,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 8,\n              \"width\": \"100%\",\n            }\n          }\n          underlineColorAndroid=\"transparent\"\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        isFocused={false}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"overflow\": \"hidden\",\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <TextInput\n          accessible={true}\n          allowFontScaling={true}\n          dataSet={Object {}}\n          editable={true}\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyPress={[Function]}\n          placeholder=\"Password\"\n          placeholderTextColor=\"#a3a3a3\"\n          rejectResponderTermination={true}\n          secureTextEntry={true}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"color\": \"#171717\",\n              \"flex\": 1,\n              \"fontFamily\": undefined,\n              \"fontSize\": 12,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 8,\n              \"width\": \"100%\",\n            }\n          }\n          underlineColorAndroid=\"transparent\"\n        />\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        />\n        <View\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={Object {}}\n        >\n          <Text\n            allowFontScaling={false}\n            dataSet={Object {}}\n            style={\n              Array [\n                Object {\n                  \"color\": undefined,\n                  \"fontSize\": 12,\n                },\n                Object {\n                  \"color\": \"#a3a3a3\",\n                  \"fontSize\": 20,\n                  \"height\": 20,\n                  \"lineHeight\": 20,\n                  \"marginRight\": 8,\n                  \"width\": 20,\n                },\n                Object {\n                  \"fontFamily\": \"material\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"normal\",\n                },\n                Object {},\n              ]\n            }\n          >\n            \n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Input Form Controlled 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        isInvalid={true}\n        style={\n          Object {\n            \"maxWidth\": 300,\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          feedbackId=\"field-125-feedback\"\n          hasFeedbackText={false}\n          hasHelpText={false}\n          helpTextId=\"field-125-helptext\"\n          isDisabled={false}\n          isInvalid={true}\n          isReadOnly={false}\n          isRequired={false}\n          labelId=\"field-125-label\"\n          nativeID=\"field-125-label\"\n          setHasFeedbackText={[Function]}\n          setHasHelpText={[Function]}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"marginBottom\": 4,\n              \"marginTop\": 4,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#737373\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Password\n          </Text>\n        </View>\n        <View\n          dataSet={Object {}}\n          isFocused={false}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#d4d4d4\",\n              \"borderRadius\": 4,\n              \"borderWidth\": 1,\n              \"flexDirection\": \"row\",\n              \"overflow\": \"hidden\",\n            }\n          }\n        >\n          <TextInput\n            accessibilityInvalid={true}\n            accessible={true}\n            allowFontScaling={true}\n            dataSet={Object {}}\n            disabled={false}\n            editable={true}\n            isInvalid={true}\n            isRequired={false}\n            nativeID=\"field-125-input\"\n            onBlur={[Function]}\n            onFocus={[Function]}\n            onKeyPress={[Function]}\n            placeholder=\"Enter password\"\n            placeholderTextColor=\"#a3a3a3\"\n            readOnly={false}\n            rejectResponderTermination={true}\n            required={false}\n            secureTextEntry={false}\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"color\": \"#171717\",\n                \"flex\": 1,\n                \"fontFamily\": undefined,\n                \"fontSize\": 12,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"height\": \"100%\",\n                \"paddingBottom\": 8,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 8,\n                \"width\": \"100%\",\n              }\n            }\n            underlineColorAndroid=\"transparent\"\n          />\n        </View>\n        <View\n          dataSet={Object {}}\n          feedbackId=\"field-125-feedback\"\n          hasFeedbackText={false}\n          hasHelpText={false}\n          helpTextId=\"field-125-helptext\"\n          isDisabled={false}\n          isInvalid={true}\n          isReadOnly={false}\n          isRequired={false}\n          labelId=\"field-125-label\"\n          nativeID=\"field-125\"\n          setHasFeedbackText={[Function]}\n          setHasHelpText={[Function]}\n          style={\n            Object {\n              \"marginTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <RNSVGSvgView\n              accessibilityRole=\"image\"\n              align=\"xMidYMid\"\n              bbHeight={12}\n              bbWidth={12}\n              color={4292617766}\n              dataSet={Object {}}\n              focusable={false}\n              meetOrSlice={0}\n              minX={0}\n              minY={0}\n              stroke=\"\"\n              style={\n                Array [\n                  Object {\n                    \"backgroundColor\": \"transparent\",\n                    \"borderWidth\": 0,\n                  },\n                  Object {\n                    \"color\": \"#dc2626\",\n                    \"fontSize\": 12,\n                    \"height\": 12,\n                    \"width\": 12,\n                  },\n                  Object {\n                    \"flex\": 0,\n                    \"height\": 12,\n                    \"width\": 12,\n                  },\n                ]\n              }\n              tintColor={4292617766}\n              vbHeight={16}\n              vbWidth={16}\n            >\n              <RNSVGGroup\n                font={\n                  Object {\n                    \"fontSize\": 12,\n                  }\n                }\n                propList={\n                  Array [\n                    \"stroke\",\n                  ]\n                }\n                stroke={null}\n              >\n                <RNSVGGroup>\n                  <RNSVGPath\n                    d=\"M8 16C6.41775 16 4.87103 15.5308 3.55544 14.6518C2.23985 13.7727 1.21447 12.5233 0.608967 11.0615C0.00346627 9.59966 -0.15496 7.99113 0.153721 6.43928C0.462403 4.88743 1.22433 3.46197 2.34315 2.34315C3.46197 1.22433 4.88743 0.462403 6.43928 0.153721C7.99113 -0.15496 9.59966 0.00346627 11.0615 0.608967C12.5233 1.21447 13.7727 2.23985 14.6518 3.55544C15.5308 4.87103 16 6.41775 16 8C16 10.1217 15.1571 12.1566 13.6569 13.6569C12.1566 15.1571 10.1217 16 8 16ZM8 14.4C9.2658 14.4 10.5032 14.0246 11.5556 13.3214C12.6081 12.6182 13.4284 11.6186 13.9128 10.4492C14.3972 9.27973 14.524 7.9929 14.277 6.75142C14.0301 5.50995 13.4205 4.36958 12.5255 3.47452C11.6304 2.57946 10.4901 1.96992 9.24858 1.72298C8.0071 1.47603 6.72028 1.60277 5.55083 2.08717C4.38138 2.57158 3.38184 3.39188 2.6786 4.44435C1.97536 5.49683 1.6 6.7342 1.6 8C1.6 9.69739 2.27429 11.3253 3.47452 12.5255C4.67475 13.7257 6.30262 14.4 8 14.4ZM7.2 10.4H8.8V12H7.2V10.4ZM7.2 4H8.8V8.8H7.2V4Z\"\n                    fill={\n                      Array [\n                        2,\n                      ]\n                    }\n                    propList={\n                      Array [\n                        \"fill\",\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  />\n                </RNSVGGroup>\n              </RNSVGGroup>\n            </RNSVGSvgView>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 4,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#dc2626\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 18,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Try different from previous passwords.\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Input Password 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        isFocused={false}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"overflow\": \"hidden\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <TextInput\n          accessible={true}\n          allowFontScaling={true}\n          dataSet={Object {}}\n          editable={true}\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyPress={[Function]}\n          placeholder=\"Password\"\n          placeholderTextColor=\"#a3a3a3\"\n          rejectResponderTermination={true}\n          secureTextEntry={true}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"color\": \"#171717\",\n              \"flex\": 1,\n              \"fontFamily\": undefined,\n              \"fontSize\": 12,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"paddingBottom\": 0,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 0,\n              \"width\": \"100%\",\n            }\n          }\n          underlineColorAndroid=\"transparent\"\n        />\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 0,\n              \"flexDirection\": \"row\",\n              \"height\": \"100%\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 8,\n              \"width\": \"16.666%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 10,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 15,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Show\n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Input Primary 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        isFocused={false}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"marginLeft\": 12,\n            \"marginRight\": 12,\n            \"overflow\": \"hidden\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <TextInput\n          accessible={true}\n          allowFontScaling={true}\n          dataSet={Object {}}\n          editable={true}\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyPress={[Function]}\n          placeholder=\"Input\"\n          placeholderTextColor=\"#a3a3a3\"\n          rejectResponderTermination={true}\n          secureTextEntry={false}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"color\": \"#171717\",\n              \"flex\": 1,\n              \"fontFamily\": undefined,\n              \"fontSize\": 12,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 8,\n              \"width\": \"100%\",\n            }\n          }\n          underlineColorAndroid=\"transparent\"\n        />\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Input Size  1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"marginLeft\": \"auto\",\n          \"marginRight\": \"auto\",\n          \"maxWidth\": 300,\n          \"width\": \"75%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        isFocused={false}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"overflow\": \"hidden\",\n          }\n        }\n      >\n        <TextInput\n          accessible={true}\n          allowFontScaling={true}\n          dataSet={Object {}}\n          editable={true}\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyPress={[Function]}\n          placeholder=\"xs Input\"\n          placeholderTextColor=\"#a3a3a3\"\n          rejectResponderTermination={true}\n          secureTextEntry={false}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"color\": \"#171717\",\n              \"flex\": 1,\n              \"fontFamily\": undefined,\n              \"fontSize\": 10,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 8,\n              \"width\": \"100%\",\n            }\n          }\n          underlineColorAndroid=\"transparent\"\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        isFocused={false}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"overflow\": \"hidden\",\n          }\n        }\n      >\n        <TextInput\n          accessible={true}\n          allowFontScaling={true}\n          dataSet={Object {}}\n          editable={true}\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyPress={[Function]}\n          placeholder=\"sm Input\"\n          placeholderTextColor=\"#a3a3a3\"\n          rejectResponderTermination={true}\n          secureTextEntry={false}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"color\": \"#171717\",\n              \"flex\": 1,\n              \"fontFamily\": undefined,\n              \"fontSize\": 12,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 8,\n              \"width\": \"100%\",\n            }\n          }\n          underlineColorAndroid=\"transparent\"\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        isFocused={false}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"overflow\": \"hidden\",\n          }\n        }\n      >\n        <TextInput\n          accessible={true}\n          allowFontScaling={true}\n          dataSet={Object {}}\n          editable={true}\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyPress={[Function]}\n          placeholder=\"md Input\"\n          placeholderTextColor=\"#a3a3a3\"\n          rejectResponderTermination={true}\n          secureTextEntry={false}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"color\": \"#171717\",\n              \"flex\": 1,\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 8,\n              \"width\": \"100%\",\n            }\n          }\n          underlineColorAndroid=\"transparent\"\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        isFocused={false}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"overflow\": \"hidden\",\n          }\n        }\n      >\n        <TextInput\n          accessible={true}\n          allowFontScaling={true}\n          dataSet={Object {}}\n          editable={true}\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyPress={[Function]}\n          placeholder=\"lg Input\"\n          placeholderTextColor=\"#a3a3a3\"\n          rejectResponderTermination={true}\n          secureTextEntry={false}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"color\": \"#171717\",\n              \"flex\": 1,\n              \"fontFamily\": undefined,\n              \"fontSize\": 16,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 8,\n              \"width\": \"100%\",\n            }\n          }\n          underlineColorAndroid=\"transparent\"\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        isFocused={false}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"overflow\": \"hidden\",\n          }\n        }\n      >\n        <TextInput\n          accessible={true}\n          allowFontScaling={true}\n          dataSet={Object {}}\n          editable={true}\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyPress={[Function]}\n          placeholder=\"xl Input\"\n          placeholderTextColor=\"#a3a3a3\"\n          rejectResponderTermination={true}\n          secureTextEntry={false}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"color\": \"#171717\",\n              \"flex\": 1,\n              \"fontFamily\": undefined,\n              \"fontSize\": 18,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 8,\n              \"width\": \"100%\",\n            }\n          }\n          underlineColorAndroid=\"transparent\"\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        isFocused={false}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"overflow\": \"hidden\",\n          }\n        }\n      >\n        <TextInput\n          accessible={true}\n          allowFontScaling={true}\n          dataSet={Object {}}\n          editable={true}\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyPress={[Function]}\n          placeholder=\"2xl Input\"\n          placeholderTextColor=\"#a3a3a3\"\n          rejectResponderTermination={true}\n          secureTextEntry={false}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"color\": \"#171717\",\n              \"flex\": 1,\n              \"fontFamily\": undefined,\n              \"fontSize\": 20,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 8,\n              \"width\": \"100%\",\n            }\n          }\n          underlineColorAndroid=\"transparent\"\n        />\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Input Value Controlled 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        isFocused={false}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"overflow\": \"hidden\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <TextInput\n          accessible={true}\n          allowFontScaling={true}\n          dataSet={Object {}}\n          editable={true}\n          onBlur={[Function]}\n          onChangeText={[Function]}\n          onFocus={[Function]}\n          onKeyPress={[Function]}\n          placeholder=\"Value Controlled Input\"\n          placeholderTextColor=\"#a3a3a3\"\n          rejectResponderTermination={true}\n          secureTextEntry={false}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"color\": \"#171717\",\n              \"flex\": 1,\n              \"fontFamily\": undefined,\n              \"fontSize\": 12,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 8,\n              \"width\": \"100%\",\n            }\n          }\n          underlineColorAndroid=\"transparent\"\n          value=\"\"\n        />\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Input Variants 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"marginLeft\": \"auto\",\n          \"marginRight\": \"auto\",\n          \"maxWidth\": 300,\n          \"width\": \"75%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        isFocused={false}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"overflow\": \"hidden\",\n          }\n        }\n      >\n        <TextInput\n          accessible={true}\n          allowFontScaling={true}\n          dataSet={Object {}}\n          editable={true}\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyPress={[Function]}\n          placeholder=\"Outline\"\n          placeholderTextColor=\"#a3a3a3\"\n          rejectResponderTermination={true}\n          secureTextEntry={false}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"color\": \"#171717\",\n              \"flex\": 1,\n              \"fontFamily\": undefined,\n              \"fontSize\": 12,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 8,\n              \"width\": \"100%\",\n            }\n          }\n          underlineColorAndroid=\"transparent\"\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        isFocused={false}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#f5f5f5\",\n            \"borderColor\": \"#f5f5f5\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"overflow\": \"hidden\",\n          }\n        }\n      >\n        <TextInput\n          accessible={true}\n          allowFontScaling={true}\n          dataSet={Object {}}\n          editable={true}\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyPress={[Function]}\n          placeholder=\"Filled\"\n          placeholderTextColor=\"#a3a3a3\"\n          rejectResponderTermination={true}\n          secureTextEntry={false}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"color\": \"#171717\",\n              \"flex\": 1,\n              \"fontFamily\": undefined,\n              \"fontSize\": 12,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 8,\n              \"width\": \"100%\",\n            }\n          }\n          underlineColorAndroid=\"transparent\"\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        isFocused={false}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderBottomWidth\": 1,\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 0,\n            \"borderWidth\": 0,\n            \"flexDirection\": \"row\",\n            \"overflow\": \"hidden\",\n          }\n        }\n      >\n        <TextInput\n          accessible={true}\n          allowFontScaling={true}\n          dataSet={Object {}}\n          editable={true}\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyPress={[Function]}\n          placeholder=\"Underlined\"\n          placeholderTextColor=\"#a3a3a3\"\n          rejectResponderTermination={true}\n          secureTextEntry={false}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"color\": \"#171717\",\n              \"flex\": 1,\n              \"fontFamily\": undefined,\n              \"fontSize\": 12,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 0,\n              \"paddingRight\": 12,\n              \"paddingTop\": 8,\n              \"width\": \"100%\",\n            }\n          }\n          underlineColorAndroid=\"transparent\"\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        isFocused={false}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 0,\n            \"flexDirection\": \"row\",\n            \"overflow\": \"hidden\",\n          }\n        }\n      >\n        <TextInput\n          accessible={true}\n          allowFontScaling={true}\n          dataSet={Object {}}\n          editable={true}\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyPress={[Function]}\n          placeholder=\"Unstyled\"\n          placeholderTextColor=\"#a3a3a3\"\n          rejectResponderTermination={true}\n          secureTextEntry={false}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"color\": \"#171717\",\n              \"flex\": 1,\n              \"fontFamily\": undefined,\n              \"fontSize\": 12,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 8,\n              \"width\": \"100%\",\n            }\n          }\n          underlineColorAndroid=\"transparent\"\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        isFocused={false}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 9999,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"overflow\": \"hidden\",\n          }\n        }\n      >\n        <TextInput\n          accessible={true}\n          allowFontScaling={true}\n          dataSet={Object {}}\n          editable={true}\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyPress={[Function]}\n          placeholder=\"Round\"\n          placeholderTextColor=\"#a3a3a3\"\n          rejectResponderTermination={true}\n          secureTextEntry={false}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"color\": \"#171717\",\n              \"flex\": 1,\n              \"fontFamily\": undefined,\n              \"fontSize\": 12,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 8,\n              \"width\": \"100%\",\n            }\n          }\n          underlineColorAndroid=\"transparent\"\n        />\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots KeyboardAvoidingView Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      onLayout={[Function]}\n      style={\n        Array [\n          Object {\n            \"height\": 400,\n          },\n          Object {\n            \"paddingBottom\": 0,\n          },\n        ]\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"display\": \"flex\",\n            \"justifyContent\": \"center\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flex\": 1,\n              \"justifyContent\": \"flex-end\",\n              \"maxWidth\": 300,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 24,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 30,\n                \"marginBottom\": 12,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Forgot Password\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#a3a3a3\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Not to worry! Enter email address associated with your account and we’ll send a link to reset your password.\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          />\n          <View\n            dataSet={Object {}}\n            isFocused={false}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"borderColor\": \"#d4d4d4\",\n                \"borderRadius\": 4,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"marginBottom\": 16,\n                \"marginTop\": 40,\n                \"overflow\": \"hidden\",\n              }\n            }\n          >\n            <TextInput\n              accessible={true}\n              allowFontScaling={true}\n              dataSet={Object {}}\n              editable={true}\n              onBlur={[Function]}\n              onFocus={[Function]}\n              onKeyPress={[Function]}\n              placeholder=\"Email Address\"\n              placeholderTextColor=\"#a3a3a3\"\n              rejectResponderTermination={true}\n              secureTextEntry={false}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"color\": \"#171717\",\n                  \"flex\": 1,\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"100%\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                  \"width\": \"100%\",\n                }\n              }\n              underlineColorAndroid=\"transparent\"\n            />\n          </View>\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          />\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"primary\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#0891b2\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": 16,\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#fafafa\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Proceed\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Link Composite Link Example 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"link\"\n        accessible={true}\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"flexDirection\": \"row\",\n            \"height\": \"auto\",\n            \"width\": \"auto\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": \"#f3f4f6\",\n              \"borderColor\": \"#d1d5db\",\n              \"borderRadius\": 8,\n              \"borderWidth\": 1,\n              \"elevation\": 4,\n              \"paddingBottom\": 20,\n              \"paddingLeft\": 20,\n              \"paddingRight\": 20,\n              \"paddingTop\": 20,\n              \"shadowColor\": \"#000000\",\n              \"shadowOffset\": Object {\n                \"height\": 2,\n                \"width\": 0,\n              },\n              \"shadowOpacity\": 0.23,\n              \"shadowRadius\": 2.62,\n              \"width\": 384,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <View\n              colorScheme=\"darkBlue\"\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#005db4\",\n                  \"borderColor\": \"transparent\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 2,\n                  \"paddingLeft\": 8,\n                  \"paddingRight\": 8,\n                  \"paddingTop\": 2,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#FFFFFF\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 12,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"500\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 18,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Open Source\n                </Text>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"flexGrow\": 1,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#1f2937\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 10,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 15,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              2020\n            </Text>\n          </View>\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#1f2937\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 30,\n                \"marginTop\": 12,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            NativeBase v3\n          </Text>\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#374151\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"marginTop\": 8,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            NativeBase is a component library that enables devs to build universal design systems.\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"display\": \"flex\",\n                \"flexDirection\": \"column\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#005db4\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"500\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 18,\n                  \"marginTop\": 8,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Read More\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Link Custom Function onPress Link 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": \"#6366f1\",\n            \"height\": 100,\n            \"width\": 100,\n          }\n        }\n      />\n      <View\n        accessibilityRole=\"link\"\n        accessible={true}\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"flexDirection\": \"row\",\n            \"height\": \"auto\",\n            \"marginTop\": 32,\n            \"width\": \"auto\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": \"#22d3ee\",\n              \"borderRadius\": 4,\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 8,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#FFFFFF\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Change Color\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Link Default Link 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"link\"\n        accessible={true}\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"flexDirection\": \"row\",\n            \"height\": \"auto\",\n            \"width\": \"auto\",\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"textDecorationLine\": \"underline\",\n            }\n          }\n        >\n          Click here to open documentation.\n        </Text>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Link External Link 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 14,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 21,\n            \"marginLeft\": 64,\n            \"marginRight\": 64,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        NativeBase is a component library that enables devs to build universal design systems. It is built on top of React Native, allowing you to develop apps for Android, iOS and the Web.\n         \n        <View\n          accessibilityRole=\"link\"\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n              \"height\": \"auto\",\n              \"marginTop\": -2,\n              \"width\": \"auto\",\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#60a5fa\",\n                \"fontFamily\": undefined,\n                \"fontSize\": undefined,\n                \"fontStyle\": undefined,\n                \"fontWeight\": undefined,\n                \"textDecorationLine\": \"underline\",\n              }\n            }\n          >\n            Read More\n          </Text>\n        </View>\n      </Text>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Link Underline Link 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"link\"\n        accessible={true}\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"flexDirection\": \"row\",\n            \"height\": \"auto\",\n            \"width\": \"auto\",\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#06b6d4\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 20,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 30,\n              \"textDecorationLine\": \"underline\",\n            }\n          }\n        >\n          Click me to open NativeBase website.\n        </Text>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots List Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"width\": \"80%\",\n        }\n      }\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 24,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 30,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Topics (Plain List)\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"borderColor\": \"#d4d4d8\",\n            \"borderWidth\": 1,\n            \"marginBottom\": 8,\n            \"marginTop\": 8,\n            \"paddingBottom\": 8,\n            \"paddingTop\": 8,\n          }\n        }\n      >\n        <View\n          accessibilityLabel=\"List-Item-1\"\n          accessibilityRole=\"text\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#d4d4d8\",\n              \"borderTopWidth\": 0,\n              \"flexDirection\": \"row\",\n              \"paddingBottom\": 8,\n              \"paddingTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"paddingLeft\": 8,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Education\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityLabel=\"List-Item-2\"\n          accessibilityRole=\"text\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#d4d4d8\",\n              \"flexDirection\": \"row\",\n              \"paddingBottom\": 8,\n              \"paddingTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"paddingLeft\": 8,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Health\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityLabel=\"List-Item-3\"\n          accessibilityRole=\"text\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#d4d4d8\",\n              \"flexDirection\": \"row\",\n              \"paddingBottom\": 8,\n              \"paddingTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"paddingLeft\": 8,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Office\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityLabel=\"List-Item-4\"\n          accessibilityRole=\"text\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#d4d4d8\",\n              \"flexDirection\": \"row\",\n              \"paddingBottom\": 8,\n              \"paddingTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"paddingLeft\": 8,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Sports\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots List List with Icon 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"borderColor\": \"#d4d4d8\",\n          \"borderWidth\": 1,\n          \"marginBottom\": 8,\n          \"marginTop\": 8,\n          \"paddingBottom\": 8,\n          \"paddingTop\": 8,\n          \"width\": 320,\n        }\n      }\n    >\n      <View\n        accessibilityLabel=\"List-Item-1\"\n        accessibilityRole=\"text\"\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d8\",\n            \"borderTopWidth\": 0,\n            \"flexDirection\": \"row\",\n            \"paddingBottom\": 8,\n            \"paddingTop\": 8,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"paddingLeft\": 8,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flex\": 1,\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Inbox\n          </Text>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n      <View\n        accessibilityLabel=\"List-Item-2\"\n        accessibilityRole=\"text\"\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d8\",\n            \"flexDirection\": \"row\",\n            \"paddingBottom\": 8,\n            \"paddingTop\": 8,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"paddingLeft\": 8,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flex\": 1,\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <Text />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Drafts\n          </Text>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n      <View\n        accessibilityLabel=\"List-Item-3\"\n        accessibilityRole=\"text\"\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d8\",\n            \"flexDirection\": \"row\",\n            \"paddingBottom\": 8,\n            \"paddingTop\": 8,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"paddingLeft\": 8,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flex\": 1,\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <Text\n            allowFontScaling={false}\n            dataSet={Object {}}\n            style={\n              Array [\n                Object {\n                  \"color\": undefined,\n                  \"fontSize\": 12,\n                },\n                Object {\n                  \"color\": \"#737373\",\n                  \"fontSize\": 20,\n                  \"height\": 20,\n                  \"lineHeight\": 20,\n                  \"marginRight\": 32,\n                  \"width\": 20,\n                },\n                Object {\n                  \"fontFamily\": \"ionicons\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"normal\",\n                },\n                Object {},\n              ]\n            }\n          >\n            \n          </Text>\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Graphs and stats\n          </Text>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n      <View\n        accessibilityLabel=\"List-Item-4\"\n        accessibilityRole=\"text\"\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d8\",\n            \"flexDirection\": \"row\",\n            \"paddingBottom\": 8,\n            \"paddingTop\": 8,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"paddingLeft\": 8,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flex\": 1,\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <Text\n            allowFontScaling={false}\n            dataSet={Object {}}\n            style={\n              Array [\n                Object {\n                  \"color\": undefined,\n                  \"fontSize\": 12,\n                },\n                Object {\n                  \"color\": \"#737373\",\n                  \"fontSize\": 20,\n                  \"height\": 20,\n                  \"lineHeight\": 20,\n                  \"marginRight\": 32,\n                  \"width\": 20,\n                },\n                Object {\n                  \"fontFamily\": \"ionicons\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"normal\",\n                },\n                Object {},\n              ]\n            }\n          >\n            \n          </Text>\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Attachments\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots List OrderedList 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"width\": \"80%\",\n        }\n      }\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 24,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 30,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Bill-#187 (Ordered List)\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"borderColor\": \"#d4d4d8\",\n            \"borderWidth\": 1,\n            \"marginBottom\": 8,\n            \"marginTop\": 8,\n            \"paddingBottom\": 8,\n            \"paddingTop\": 8,\n          }\n        }\n      >\n        <View\n          accessibilityLabel=\"List-Item-1\"\n          accessibilityRole=\"text\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#d4d4d8\",\n              \"borderTopWidth\": 0,\n              \"flexDirection\": \"row\",\n              \"paddingBottom\": 8,\n              \"paddingTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"paddingLeft\": 8,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"marginRight\": 8,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                1.\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Fruit Juice x 2\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityLabel=\"List-Item-2\"\n          accessibilityRole=\"text\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#d4d4d8\",\n              \"flexDirection\": \"row\",\n              \"paddingBottom\": 8,\n              \"paddingTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"paddingLeft\": 8,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"marginRight\": 8,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                2.\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Cheddar cheese - 200g\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityLabel=\"List-Item-3\"\n          accessibilityRole=\"text\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#d4d4d8\",\n              \"flexDirection\": \"row\",\n              \"paddingBottom\": 8,\n              \"paddingTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"paddingLeft\": 8,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"marginRight\": 8,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                3.\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Milk 1L x 2\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityLabel=\"List-Item-4\"\n          accessibilityRole=\"text\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#d4d4d8\",\n              \"flexDirection\": \"row\",\n              \"paddingBottom\": 8,\n              \"paddingTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"paddingLeft\": 8,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"marginRight\": 8,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                4.\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Brown Bread - 400g\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots List Pressable List Items 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"width\": \"80%\",\n        }\n      }\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": \"#22d3ee\",\n            \"color\": \"#FFFFFF\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 24,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 30,\n            \"paddingBottom\": 16,\n            \"paddingLeft\": 8,\n            \"paddingRight\": 8,\n            \"paddingTop\": 16,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Default Theme Color (Pressable List Items)\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"borderColor\": \"#d4d4d8\",\n            \"borderWidth\": 1,\n            \"marginBottom\": 8,\n            \"marginTop\": 8,\n            \"paddingBottom\": 0,\n            \"paddingTop\": 0,\n          }\n        }\n      >\n        <View\n          accessibilityLabel=\"List-Item-1\"\n          accessibilityRole=\"button\"\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#22d3ee\",\n              \"borderColor\": \"#d4d4d8\",\n              \"borderTopWidth\": 0,\n              \"flexDirection\": \"row\",\n              \"paddingBottom\": 16,\n              \"paddingTop\": 16,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"paddingLeft\": 8,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              primary.400\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        />\n        <View\n          accessibilityLabel=\"List-Item-2\"\n          accessibilityRole=\"button\"\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#f472b6\",\n              \"borderColor\": \"#d4d4d8\",\n              \"flexDirection\": \"row\",\n              \"paddingBottom\": 16,\n              \"paddingTop\": 16,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"paddingLeft\": 8,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              secondary.400\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        />\n        <View\n          accessibilityLabel=\"List-Item-3\"\n          accessibilityRole=\"button\"\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#34d399\",\n              \"borderColor\": \"#d4d4d8\",\n              \"flexDirection\": \"row\",\n              \"paddingBottom\": 16,\n              \"paddingTop\": 16,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"paddingLeft\": 8,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              emerald.400\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        />\n        <View\n          accessibilityLabel=\"List-Item-4\"\n          accessibilityRole=\"button\"\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#60a5fa\",\n              \"borderColor\": \"#d4d4d8\",\n              \"flexDirection\": \"row\",\n              \"paddingBottom\": 16,\n              \"paddingTop\": 16,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"paddingLeft\": 8,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              blue.400\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots List StylingList 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"width\": \"80%\",\n        }\n      }\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 24,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 30,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Styled List\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"borderColor\": \"#d4d4d8\",\n            \"borderWidth\": 1,\n            \"marginBottom\": 8,\n            \"marginTop\": 8,\n            \"paddingBottom\": 8,\n            \"paddingTop\": 8,\n          }\n        }\n      >\n        <View\n          accessibilityLabel=\"List-Item-11\"\n          accessibilityRole=\"text\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#d4d4d8\",\n              \"borderTopWidth\": 0,\n              \"flexDirection\": \"row\",\n              \"paddingBottom\": 8,\n              \"paddingTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"paddingLeft\": 8,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"marginRight\": 8,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#d97706\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                11.\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#d97706\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Ocean's \n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityLabel=\"List-Item-12\"\n          accessibilityRole=\"text\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#d4d4d8\",\n              \"flexDirection\": \"row\",\n              \"paddingBottom\": 8,\n              \"paddingTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"paddingLeft\": 8,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"marginRight\": 8,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fecaca\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                12.\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fecaca\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Ocean's \n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityLabel=\"List-Item-13\"\n          accessibilityRole=\"text\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#d4d4d8\",\n              \"flexDirection\": \"row\",\n              \"paddingBottom\": 8,\n              \"paddingTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"paddingLeft\": 8,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"marginRight\": 8,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#2dd4bf\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                13.\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#2dd4bf\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Ocean's\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots List UnorderedList 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"width\": \"80%\",\n        }\n      }\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 24,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 30,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        My Todos (Unordered List)\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"borderColor\": \"#d4d4d8\",\n            \"borderWidth\": 1,\n            \"marginBottom\": 8,\n            \"marginTop\": 8,\n            \"paddingBottom\": 8,\n            \"paddingTop\": 8,\n          }\n        }\n      >\n        <View\n          accessibilityLabel=\"List-Item-1\"\n          accessibilityRole=\"text\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#d4d4d8\",\n              \"borderTopWidth\": 0,\n              \"flexDirection\": \"row\",\n              \"paddingBottom\": 8,\n              \"paddingTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"paddingLeft\": 8,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Array [\n                  Object {\n                    \"marginRight\": 8,\n                  },\n                  Object {\n                    \"transform\": Array [\n                      Object {\n                        \"scale\": 1.5,\n                      },\n                    ],\n                  },\n                ]\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                •\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Get groceries by Tomorrow.\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityLabel=\"List-Item-2\"\n          accessibilityRole=\"text\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#d4d4d8\",\n              \"flexDirection\": \"row\",\n              \"paddingBottom\": 8,\n              \"paddingTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"paddingLeft\": 8,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Array [\n                  Object {\n                    \"marginRight\": 8,\n                  },\n                  Object {\n                    \"transform\": Array [\n                      Object {\n                        \"scale\": 1.5,\n                      },\n                    ],\n                  },\n                ]\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                •\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Book appointment with the Doc.\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityLabel=\"List-Item-3\"\n          accessibilityRole=\"text\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#d4d4d8\",\n              \"flexDirection\": \"row\",\n              \"paddingBottom\": 8,\n              \"paddingTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"paddingLeft\": 8,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Array [\n                  Object {\n                    \"marginRight\": 8,\n                  },\n                  Object {\n                    \"transform\": Array [\n                      Object {\n                        \"scale\": 1.5,\n                      },\n                    ],\n                  },\n                ]\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                •\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Bill payment - Electricity.\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityLabel=\"List-Item-4\"\n          accessibilityRole=\"text\"\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#d4d4d8\",\n              \"flexDirection\": \"row\",\n              \"paddingBottom\": 8,\n              \"paddingTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"paddingLeft\": 8,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Array [\n                  Object {\n                    \"marginRight\": 8,\n                  },\n                  Object {\n                    \"transform\": Array [\n                      Object {\n                        \"scale\": 1.5,\n                      },\n                    ],\n                  },\n                ]\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                •\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Pay Telephone Bill\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots List VirtualizedList  1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <RCTScrollView\n      data={Array []}\n      disableVirtualization={false}\n      getItem={[Function]}\n      getItemCount={[Function]}\n      horizontal={false}\n      initialNumToRender={4}\n      keyExtractor={[Function]}\n      maxToRenderPerBatch={10}\n      onContentSizeChange={[Function]}\n      onEndReachedThreshold={2}\n      onLayout={[Function]}\n      onMomentumScrollEnd={[Function]}\n      onScroll={[Function]}\n      onScrollBeginDrag={[Function]}\n      onScrollEndDrag={[Function]}\n      renderItem={[Function]}\n      scrollEventThrottle={50}\n      stickyHeaderIndices={Array []}\n      updateCellsBatchingPeriod={50}\n      windowSize={21}\n    >\n      <View>\n        <View\n          onLayout={[Function]}\n          style={null}\n        >\n          <View\n            accessibilityLabel=\"List-Item-NaN\"\n            accessibilityRole=\"text\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#a7f3d0\",\n                \"borderColor\": \"#d4d4d8\",\n                \"borderRadius\": 6,\n                \"borderTopWidth\": 0,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": 8,\n                \"marginTop\": 8,\n                \"paddingBottom\": 8,\n                \"paddingLeft\": 16,\n                \"paddingRight\": 16,\n                \"paddingTop\": 8,\n                \"width\": 128,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"paddingLeft\": 8,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flex\": 1,\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 24,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 36,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Item 1\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          onLayout={[Function]}\n          style={null}\n        >\n          <View\n            accessibilityLabel=\"List-Item-NaN\"\n            accessibilityRole=\"text\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#a7f3d0\",\n                \"borderColor\": \"#d4d4d8\",\n                \"borderRadius\": 6,\n                \"borderTopWidth\": 0,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": 8,\n                \"marginTop\": 8,\n                \"paddingBottom\": 8,\n                \"paddingLeft\": 16,\n                \"paddingRight\": 16,\n                \"paddingTop\": 8,\n                \"width\": 128,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"paddingLeft\": 8,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flex\": 1,\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 24,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 36,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Item 2\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          onLayout={[Function]}\n          style={null}\n        >\n          <View\n            accessibilityLabel=\"List-Item-NaN\"\n            accessibilityRole=\"text\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#a7f3d0\",\n                \"borderColor\": \"#d4d4d8\",\n                \"borderRadius\": 6,\n                \"borderTopWidth\": 0,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": 8,\n                \"marginTop\": 8,\n                \"paddingBottom\": 8,\n                \"paddingLeft\": 16,\n                \"paddingRight\": 16,\n                \"paddingTop\": 8,\n                \"width\": 128,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"paddingLeft\": 8,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flex\": 1,\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 24,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 36,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Item 3\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          onLayout={[Function]}\n          style={null}\n        >\n          <View\n            accessibilityLabel=\"List-Item-NaN\"\n            accessibilityRole=\"text\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#a7f3d0\",\n                \"borderColor\": \"#d4d4d8\",\n                \"borderRadius\": 6,\n                \"borderTopWidth\": 0,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": 8,\n                \"marginTop\": 8,\n                \"paddingBottom\": 8,\n                \"paddingLeft\": 16,\n                \"paddingRight\": 16,\n                \"paddingTop\": 8,\n                \"width\": 128,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"paddingLeft\": 8,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flex\": 1,\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 24,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 36,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Item 4\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          style={\n            Object {\n              \"height\": 0,\n            }\n          }\n        />\n      </View>\n    </RCTScrollView>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Menu Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"width\": \"90%\",\n        }\n      }\n    >\n      <View\n        accessibilityLabel=\"More options menu\"\n        accessible={true}\n        aria-haspopup=\"menu\"\n        dataSet={Object {}}\n        focusable={true}\n        nativeID=\"139\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onKeyDownCapture={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={Object {}}\n      >\n        <RNSVGSvgView\n          accessibilityRole=\"image\"\n          align=\"xMidYMid\"\n          bbHeight={16}\n          bbWidth={16}\n          color={4285756275}\n          dataSet={Object {}}\n          focusable={false}\n          meetOrSlice={0}\n          minX={0}\n          minY={0}\n          stroke=\"\"\n          style={\n            Array [\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"borderWidth\": 0,\n              },\n              Object {\n                \"color\": \"#737373\",\n                \"height\": 16,\n                \"width\": 16,\n              },\n              Object {\n                \"flex\": 0,\n                \"height\": 16,\n                \"width\": 16,\n              },\n            ]\n          }\n          tintColor={4285756275}\n          vbHeight={24}\n          vbWidth={24}\n        >\n          <RNSVGGroup\n            propList={\n              Array [\n                \"stroke\",\n              ]\n            }\n            stroke={null}\n          >\n            <RNSVGGroup>\n              <RNSVGPath\n                d=\"M22 5H2V7.47961H22V5ZM22 10.4795H2V12.9591H22V10.4795ZM2 15.959H22V18.4386H2V15.959Z\"\n                fill={\n                  Array [\n                    2,\n                  ]\n                }\n                propList={\n                  Array [\n                    \"fill\",\n                    \"stroke\",\n                  ]\n                }\n                stroke={null}\n              />\n            </RNSVGGroup>\n          </RNSVGGroup>\n        </RNSVGSvgView>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Menu Group 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"width\": \"90%\",\n        }\n      }\n    >\n      <View\n        accessible={true}\n        aria-haspopup=\"menu\"\n        dataSet={Object {}}\n        focusable={true}\n        nativeID=\"141\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onKeyDownCapture={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={Object {}}\n      >\n        <RNSVGSvgView\n          accessibilityRole=\"image\"\n          align=\"xMidYMid\"\n          bbHeight={16}\n          bbWidth={16}\n          color={4285756275}\n          dataSet={Object {}}\n          focusable={false}\n          meetOrSlice={0}\n          minX={0}\n          minY={0}\n          stroke=\"\"\n          style={\n            Array [\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"borderWidth\": 0,\n              },\n              Object {\n                \"color\": \"#737373\",\n                \"height\": 16,\n                \"width\": 16,\n              },\n              Object {\n                \"flex\": 0,\n                \"height\": 16,\n                \"width\": 16,\n              },\n            ]\n          }\n          tintColor={4285756275}\n          vbHeight={24}\n          vbWidth={24}\n        >\n          <RNSVGGroup\n            propList={\n              Array [\n                \"stroke\",\n              ]\n            }\n            stroke={null}\n          >\n            <RNSVGGroup>\n              <RNSVGPath\n                d=\"M22 5H2V7.47961H22V5ZM22 10.4795H2V12.9591H22V10.4795ZM2 15.959H22V18.4386H2V15.959Z\"\n                fill={\n                  Array [\n                    2,\n                  ]\n                }\n                propList={\n                  Array [\n                    \"fill\",\n                    \"stroke\",\n                  ]\n                }\n                stroke={null}\n              />\n            </RNSVGGroup>\n          </RNSVGGroup>\n        </RNSVGSvgView>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Menu Menu positions 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignSelf\": \"flex-start\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        aria-haspopup=\"menu\"\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        nativeID=\"145\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onKeyDownCapture={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"alignSelf\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Menu\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 24,\n          }\n        }\n      />\n      <View\n        accessibilityLabel=\"Select a position for Menu\"\n        accessibilityRole=\"button\"\n        accessible={true}\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"marginLeft\": 0,\n            \"marginRight\": 0,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          isFocused={false}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#d4d4d4\",\n              \"borderRadius\": 4,\n              \"borderWidth\": 1,\n              \"flexDirection\": \"row\",\n              \"overflow\": \"hidden\",\n            }\n          }\n        >\n          <TextInput\n            accessible={true}\n            allowFontScaling={true}\n            aria-hidden={true}\n            dataSet={Object {}}\n            editable={false}\n            focusable={false}\n            importantForAccessibility=\"no\"\n            onBlur={[Function]}\n            onFocus={[Function]}\n            onKeyPress={[Function]}\n            placeholderTextColor=\"#a3a3a3\"\n            pointerEvents=\"none\"\n            rejectResponderTermination={true}\n            secureTextEntry={false}\n            selection={\n              Object {\n                \"start\": 0,\n              }\n            }\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"color\": \"#171717\",\n                \"flex\": 1,\n                \"fontFamily\": undefined,\n                \"fontSize\": 12,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"height\": \"100%\",\n                \"paddingBottom\": 8,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 8,\n                \"width\": \"100%\",\n              }\n            }\n            underlineColorAndroid=\"transparent\"\n            value=\"auto\"\n          />\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          />\n          <RNSVGSvgView\n            accessibilityRole=\"image\"\n            align=\"xMidYMid\"\n            bbHeight={24}\n            bbWidth={24}\n            color={4285756275}\n            dataSet={Object {}}\n            focusable={false}\n            meetOrSlice={0}\n            minX={0}\n            minY={0}\n            stroke=\"\"\n            style={\n              Array [\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderWidth\": 0,\n                },\n                Object {\n                  \"color\": \"#737373\",\n                  \"height\": 24,\n                  \"marginRight\": 12,\n                  \"paddingBottom\": 4,\n                  \"paddingLeft\": 4,\n                  \"paddingRight\": 4,\n                  \"paddingTop\": 4,\n                  \"width\": 24,\n                },\n                Object {\n                  \"flex\": 0,\n                  \"height\": 24,\n                  \"width\": 24,\n                },\n              ]\n            }\n            tintColor={4285756275}\n            vbHeight={24}\n            vbWidth={24}\n          >\n            <RNSVGGroup\n              propList={\n                Array [\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            >\n              <RNSVGGroup>\n                <RNSVGPath\n                  d=\"M20.2286 6L11.9973 14.3785L3.76862 6.00268L2 7.80293L12 18L22 7.80293L20.2286 6Z\"\n                  fill={\n                    Array [\n                      2,\n                    ]\n                  }\n                  propList={\n                    Array [\n                      \"fill\",\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                />\n              </RNSVGGroup>\n            </RNSVGGroup>\n          </RNSVGSvgView>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Menu MenuOptionsGroup 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"width\": \"90%\",\n        }\n      }\n    >\n      <View\n        accessible={true}\n        aria-haspopup=\"menu\"\n        dataSet={Object {}}\n        focusable={true}\n        nativeID=\"143\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onKeyDownCapture={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={Object {}}\n      >\n        <RNSVGSvgView\n          accessibilityRole=\"image\"\n          align=\"xMidYMid\"\n          bbHeight={16}\n          bbWidth={16}\n          color={4285756275}\n          dataSet={Object {}}\n          focusable={false}\n          meetOrSlice={0}\n          minX={0}\n          minY={0}\n          stroke=\"\"\n          style={\n            Array [\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"borderWidth\": 0,\n              },\n              Object {\n                \"color\": \"#737373\",\n                \"height\": 16,\n                \"width\": 16,\n              },\n              Object {\n                \"flex\": 0,\n                \"height\": 16,\n                \"width\": 16,\n              },\n            ]\n          }\n          tintColor={4285756275}\n          vbHeight={24}\n          vbWidth={24}\n        >\n          <RNSVGGroup\n            propList={\n              Array [\n                \"stroke\",\n              ]\n            }\n            stroke={null}\n          >\n            <RNSVGGroup>\n              <RNSVGPath\n                d=\"M22 5H2V7.47961H22V5ZM22 10.4795H2V12.9591H22V10.4795ZM2 15.959H22V18.4386H2V15.959Z\"\n                fill={\n                  Array [\n                    2,\n                  ]\n                }\n                propList={\n                  Array [\n                    \"fill\",\n                    \"stroke\",\n                  ]\n                }\n                stroke={null}\n              />\n            </RNSVGGroup>\n          </RNSVGGroup>\n        </RNSVGSvgView>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Modal Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Button\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Modal Modal Custom Backdrop 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Button\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Modal Modal Placement 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"flexDirection\": \"column\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Top\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Bottom\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Center\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Left\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Right\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Modal Modal Ref Examples 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Open Modal\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 16,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        isFocused={false}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"overflow\": \"hidden\",\n            \"width\": 128,\n          }\n        }\n      >\n        <TextInput\n          accessible={true}\n          allowFontScaling={true}\n          dataSet={Object {}}\n          editable={true}\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyPress={[Function]}\n          placeholder=\"Enter the OTP\"\n          placeholderTextColor=\"#334155\"\n          rejectResponderTermination={true}\n          secureTextEntry={false}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"color\": \"#171717\",\n              \"flex\": 1,\n              \"fontFamily\": undefined,\n              \"fontSize\": 12,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 8,\n              \"width\": \"100%\",\n            }\n          }\n          underlineColorAndroid=\"transparent\"\n        />\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Modal Modal Size Examples 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      >\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Open xs Modal\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Open sm Modal\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Open md Modal\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Open lg Modal\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Open xl Modal\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Open full Modal\n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Modal Modal with Keyboard Avoid view 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n            \"width\": 104,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Open Modal\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 32,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 14,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 21,\n            \"textAlign\": \"center\",\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Open modal and focus on the input element to see the effect.\n      </Text>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Modal Multiple modal 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Button\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Mode Basic 1`] = `\n<View\n  style={\n    Object {\n      \"bottom\": 0,\n      \"left\": 0,\n      \"position\": \"absolute\",\n      \"right\": 0,\n      \"top\": 0,\n    }\n  }\n>\n  <RNCSafeAreaProvider\n    onInsetsChange={[Function]}\n    style={\n      Array [\n        Object {\n          \"flex\": 1,\n        },\n        undefined,\n      ]\n    }\n  />\n</View>\n`;\n\nexports[`Storyshots Mode DefaultMode 1`] = `\n<View\n  style={\n    Object {\n      \"bottom\": 0,\n      \"left\": 0,\n      \"position\": \"absolute\",\n      \"right\": 0,\n      \"top\": 0,\n    }\n  }\n>\n  <RNCSafeAreaProvider\n    onInsetsChange={[Function]}\n    style={\n      Array [\n        Object {\n          \"flex\": 1,\n        },\n        undefined,\n      ]\n    }\n  />\n</View>\n`;\n\nexports[`Storyshots Mode Persistence 1`] = `\n<View\n  style={\n    Object {\n      \"bottom\": 0,\n      \"left\": 0,\n      \"position\": \"absolute\",\n      \"right\": 0,\n      \"top\": 0,\n    }\n  }\n>\n  <RNCSafeAreaProvider\n    onInsetsChange={[Function]}\n    style={\n      Array [\n        Object {\n          \"flex\": 1,\n        },\n        undefined,\n      ]\n    }\n  />\n</View>\n`;\n\nexports[`Storyshots Popover Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      >\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          aria-expanded={false}\n          aria-haspopup={true}\n          colorScheme=\"danger\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#e11d48\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Delete Customer\n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Popover Focus on Open 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      >\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          aria-expanded={false}\n          aria-haspopup={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Edit Info\n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Popover Popover positions 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignSelf\": \"flex-start\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            aria-expanded={false}\n            aria-haspopup={true}\n            colorScheme=\"danger\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"#e11d48\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#fafafa\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Delete Customer\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 24,\n            }\n          }\n        />\n        <View\n          accessibilityLabel=\"Select a position for Popover\"\n          accessibilityRole=\"button\"\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"marginLeft\": 0,\n              \"marginRight\": 0,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            isFocused={false}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"borderColor\": \"#d4d4d4\",\n                \"borderRadius\": 4,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"overflow\": \"hidden\",\n              }\n            }\n          >\n            <TextInput\n              accessible={true}\n              allowFontScaling={true}\n              aria-hidden={true}\n              dataSet={Object {}}\n              editable={false}\n              focusable={false}\n              importantForAccessibility=\"no\"\n              onBlur={[Function]}\n              onFocus={[Function]}\n              onKeyPress={[Function]}\n              placeholderTextColor=\"#a3a3a3\"\n              pointerEvents=\"none\"\n              rejectResponderTermination={true}\n              secureTextEntry={false}\n              selection={\n                Object {\n                  \"start\": 0,\n                }\n              }\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"color\": \"#171717\",\n                  \"flex\": 1,\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"100%\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                  \"width\": \"100%\",\n                }\n              }\n              underlineColorAndroid=\"transparent\"\n              value=\"auto\"\n            />\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <RNSVGSvgView\n              accessibilityRole=\"image\"\n              align=\"xMidYMid\"\n              bbHeight={24}\n              bbWidth={24}\n              color={4285756275}\n              dataSet={Object {}}\n              focusable={false}\n              meetOrSlice={0}\n              minX={0}\n              minY={0}\n              stroke=\"\"\n              style={\n                Array [\n                  Object {\n                    \"backgroundColor\": \"transparent\",\n                    \"borderWidth\": 0,\n                  },\n                  Object {\n                    \"color\": \"#737373\",\n                    \"height\": 24,\n                    \"marginRight\": 12,\n                    \"paddingBottom\": 4,\n                    \"paddingLeft\": 4,\n                    \"paddingRight\": 4,\n                    \"paddingTop\": 4,\n                    \"width\": 24,\n                  },\n                  Object {\n                    \"flex\": 0,\n                    \"height\": 24,\n                    \"width\": 24,\n                  },\n                ]\n              }\n              tintColor={4285756275}\n              vbHeight={24}\n              vbWidth={24}\n            >\n              <RNSVGGroup\n                propList={\n                  Array [\n                    \"stroke\",\n                  ]\n                }\n                stroke={null}\n              >\n                <RNSVGGroup>\n                  <RNSVGPath\n                    d=\"M20.2286 6L11.9973 14.3785L3.76862 6.00268L2 7.80293L12 18L22 7.80293L20.2286 6Z\"\n                    fill={\n                      Array [\n                        2,\n                      ]\n                    }\n                    propList={\n                      Array [\n                        \"fill\",\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  />\n                </RNSVGGroup>\n              </RNSVGGroup>\n            </RNSVGSvgView>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Pressable Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        accessible={true}\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"backgroundColor\": \"#f3f4f6\",\n            \"borderColor\": \"#d1d5db\",\n            \"borderRadius\": 8,\n            \"borderWidth\": 1,\n            \"elevation\": 4,\n            \"maxWidth\": 384,\n            \"overflow\": \"hidden\",\n            \"paddingBottom\": 20,\n            \"paddingLeft\": 20,\n            \"paddingRight\": 20,\n            \"paddingTop\": 20,\n            \"shadowColor\": \"#000000\",\n            \"shadowOffset\": Object {\n              \"height\": 2,\n              \"width\": 0,\n            },\n            \"shadowOpacity\": 0.23,\n            \"shadowRadius\": 2.62,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <View\n              colorScheme=\"darkBlue\"\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#005db4\",\n                  \"borderColor\": \"transparent\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 2,\n                  \"paddingLeft\": 8,\n                  \"paddingRight\": 8,\n                  \"paddingTop\": 2,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#FFFFFF\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 12,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"500\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 18,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Business\n                </Text>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"flexGrow\": 1,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#1f2937\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 10,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 15,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              1 month ago\n            </Text>\n          </View>\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#1f2937\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 30,\n                \"marginTop\": 12,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Marketing License\n          </Text>\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#374151\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"marginTop\": 8,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Unlock powerfull time-saving tools for creating email delivery and collecting marketing data\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"display\": \"flex\",\n                \"flexDirection\": \"column\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#005db4\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"500\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 18,\n                  \"marginTop\": 8,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Read More\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Pressable Events 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        accessible={true}\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"maxWidth\": 384,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Array [\n              Object {\n                \"backgroundColor\": \"#f3f4f6\",\n                \"borderColor\": \"#d1d5db\",\n                \"borderRadius\": 8,\n                \"borderWidth\": 1,\n                \"elevation\": 4,\n                \"paddingBottom\": 20,\n                \"paddingLeft\": 20,\n                \"paddingRight\": 20,\n                \"paddingTop\": 20,\n                \"shadowColor\": \"#000000\",\n                \"shadowOffset\": Object {\n                  \"height\": 2,\n                  \"width\": 0,\n                },\n                \"shadowOpacity\": 0.23,\n                \"shadowRadius\": 2.62,\n              },\n              Object {\n                \"transform\": Array [\n                  Object {\n                    \"scale\": 1,\n                  },\n                ],\n              },\n            ]\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <View\n              colorScheme=\"darkBlue\"\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#005db4\",\n                  \"borderColor\": \"transparent\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 2,\n                  \"paddingLeft\": 8,\n                  \"paddingRight\": 8,\n                  \"paddingTop\": 2,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#FFFFFF\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 12,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"500\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 18,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Business\n                </Text>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"flexGrow\": 1,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#1f2937\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 10,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 15,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              1 month ago\n            </Text>\n          </View>\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#1f2937\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 30,\n                \"marginTop\": 12,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Marketing License\n          </Text>\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#374151\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"marginTop\": 8,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Unlock powerfull time-saving tools for creating email delivery and collecting marketing data\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"display\": \"flex\",\n                \"flexDirection\": \"column\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#005db4\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"500\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 18,\n                  \"marginTop\": 8,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Read More\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Progress ColorSchemes 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"maxWidth\": 400,\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"marginLeft\": 16,\n                \"marginRight\": 16,\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"progressbar\"\n              accessibilityValue={\n                Object {\n                  \"max\": 100,\n                  \"min\": 0,\n                  \"now\": 35,\n                }\n              }\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              isIndeterminate={false}\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"borderRadius\": 9999,\n                  \"height\": 8,\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#0891b2\",\n                    \"borderRadius\": 9999,\n                    \"display\": \"flex\",\n                    \"elevation\": 1,\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"shadowColor\": \"#000000\",\n                    \"shadowOffset\": Object {\n                      \"height\": 1,\n                      \"width\": 0,\n                    },\n                    \"shadowOpacity\": 0.18,\n                    \"shadowRadius\": 1,\n                    \"width\": \"35%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 16,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"progressbar\"\n              accessibilityValue={\n                Object {\n                  \"max\": 100,\n                  \"min\": 0,\n                  \"now\": 45,\n                }\n              }\n              accessible={true}\n              colorScheme=\"secondary\"\n              dataSet={Object {}}\n              isIndeterminate={false}\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"borderRadius\": 9999,\n                  \"height\": 8,\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#db2777\",\n                    \"borderRadius\": 9999,\n                    \"display\": \"flex\",\n                    \"elevation\": 1,\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"shadowColor\": \"#000000\",\n                    \"shadowOffset\": Object {\n                      \"height\": 1,\n                      \"width\": 0,\n                    },\n                    \"shadowOpacity\": 0.18,\n                    \"shadowRadius\": 1,\n                    \"width\": \"45%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 16,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"progressbar\"\n              accessibilityValue={\n                Object {\n                  \"max\": 100,\n                  \"min\": 0,\n                  \"now\": 55.00000000000001,\n                }\n              }\n              accessible={true}\n              colorScheme=\"emerald\"\n              dataSet={Object {}}\n              isIndeterminate={false}\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"borderRadius\": 9999,\n                  \"height\": 8,\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#059669\",\n                    \"borderRadius\": 9999,\n                    \"display\": \"flex\",\n                    \"elevation\": 1,\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"shadowColor\": \"#000000\",\n                    \"shadowOffset\": Object {\n                      \"height\": 1,\n                      \"width\": 0,\n                    },\n                    \"shadowOpacity\": 0.18,\n                    \"shadowRadius\": 1,\n                    \"width\": \"55.00000000000001%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 16,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"progressbar\"\n              accessibilityValue={\n                Object {\n                  \"max\": 100,\n                  \"min\": 0,\n                  \"now\": 65,\n                }\n              }\n              accessible={true}\n              colorScheme=\"warning\"\n              dataSet={Object {}}\n              isIndeterminate={false}\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"borderRadius\": 9999,\n                  \"height\": 8,\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#ea580c\",\n                    \"borderRadius\": 9999,\n                    \"display\": \"flex\",\n                    \"elevation\": 1,\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"shadowColor\": \"#000000\",\n                    \"shadowOffset\": Object {\n                      \"height\": 1,\n                      \"width\": 0,\n                    },\n                    \"shadowOpacity\": 0.18,\n                    \"shadowRadius\": 1,\n                    \"width\": \"65%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 16,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"progressbar\"\n              accessibilityValue={\n                Object {\n                  \"max\": 100,\n                  \"min\": 0,\n                  \"now\": 75,\n                }\n              }\n              accessible={true}\n              colorScheme=\"light\"\n              dataSet={Object {}}\n              isIndeterminate={false}\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"borderRadius\": 9999,\n                  \"height\": 8,\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#57534e\",\n                    \"borderRadius\": 9999,\n                    \"display\": \"flex\",\n                    \"elevation\": 1,\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"shadowColor\": \"#000000\",\n                    \"shadowOffset\": Object {\n                      \"height\": 1,\n                      \"width\": 0,\n                    },\n                    \"shadowOpacity\": 0.18,\n                    \"shadowRadius\": 1,\n                    \"width\": \"75%\",\n                  }\n                }\n              />\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Progress Composition 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"width\": \"90%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"display\": \"flex\",\n            \"justifyContent\": \"center\",\n            \"marginBottom\": 40,\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 20,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 25,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Progress Composition\n        </Text>\n      </View>\n      <View\n        accessibilityRole=\"progressbar\"\n        accessibilityValue={\n          Object {\n            \"max\": 100,\n            \"min\": 0,\n            \"now\": 45,\n          }\n        }\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        isIndeterminate={false}\n        style={\n          Object {\n            \"backgroundColor\": \"#e5e5e5\",\n            \"borderRadius\": 9999,\n            \"height\": 20,\n            \"marginBottom\": 16,\n            \"overflow\": \"hidden\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 9999,\n              \"display\": \"flex\",\n              \"elevation\": 1,\n              \"height\": \"100%\",\n              \"justifyContent\": \"center\",\n              \"shadowColor\": \"#000000\",\n              \"shadowOffset\": Object {\n                \"height\": 1,\n                \"width\": 0,\n              },\n              \"shadowOpacity\": 0.18,\n              \"shadowRadius\": 1,\n              \"width\": \"45%\",\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#FFFFFF\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            45%\n          </Text>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"display\": \"flex\",\n            \"flexDirection\": \"row\",\n          }\n        }\n      >\n        <View\n          accessibilityRole=\"progressbar\"\n          accessibilityValue={\n            Object {\n              \"max\": 100,\n              \"min\": 0,\n              \"now\": 75,\n            }\n          }\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          isIndeterminate={false}\n          style={\n            Object {\n              \"backgroundColor\": \"#e5e5e5\",\n              \"borderRadius\": 9999,\n              \"flex\": 1,\n              \"height\": 20,\n              \"marginBottom\": 16,\n              \"overflow\": \"hidden\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#0891b2\",\n                \"borderRadius\": 9999,\n                \"display\": \"flex\",\n                \"elevation\": 1,\n                \"height\": \"100%\",\n                \"justifyContent\": \"center\",\n                \"shadowColor\": \"#000000\",\n                \"shadowOffset\": Object {\n                  \"height\": 1,\n                  \"width\": 0,\n                },\n                \"shadowOpacity\": 0.18,\n                \"shadowRadius\": 1,\n                \"width\": \"75%\",\n              }\n            }\n          />\n        </View>\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"marginLeft\": 8,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          75%\n        </Text>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Progress CustomBgColor 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"maxWidth\": 400,\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <View\n          accessibilityRole=\"progressbar\"\n          accessibilityValue={\n            Object {\n              \"max\": 100,\n              \"min\": 0,\n              \"now\": 75,\n            }\n          }\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          isIndeterminate={false}\n          style={\n            Object {\n              \"backgroundColor\": \"#f3f4f6\",\n              \"borderRadius\": 9999,\n              \"height\": 8,\n              \"marginLeft\": 16,\n              \"marginRight\": 16,\n              \"overflow\": \"hidden\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#84cc16\",\n                \"borderRadius\": 9999,\n                \"display\": \"flex\",\n                \"elevation\": 1,\n                \"height\": \"100%\",\n                \"justifyContent\": \"center\",\n                \"shadowColor\": \"#000000\",\n                \"shadowOffset\": Object {\n                  \"height\": 1,\n                  \"width\": 0,\n                },\n                \"shadowOpacity\": 0.18,\n                \"shadowRadius\": 1,\n                \"width\": \"75%\",\n              }\n            }\n          />\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Progress Default Progress Bar 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"maxWidth\": 400,\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <View\n          accessibilityRole=\"progressbar\"\n          accessibilityValue={\n            Object {\n              \"max\": 100,\n              \"min\": 0,\n              \"now\": 45,\n            }\n          }\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          isIndeterminate={false}\n          style={\n            Object {\n              \"backgroundColor\": \"#e5e5e5\",\n              \"borderRadius\": 9999,\n              \"height\": 8,\n              \"marginLeft\": 16,\n              \"marginRight\": 16,\n              \"overflow\": \"hidden\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#0891b2\",\n                \"borderRadius\": 9999,\n                \"display\": \"flex\",\n                \"elevation\": 1,\n                \"height\": \"100%\",\n                \"justifyContent\": \"center\",\n                \"shadowColor\": \"#000000\",\n                \"shadowOffset\": Object {\n                  \"height\": 1,\n                  \"width\": 0,\n                },\n                \"shadowOpacity\": 0.18,\n                \"shadowRadius\": 1,\n                \"width\": \"45%\",\n              }\n            }\n          />\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Progress Flat 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"maxWidth\": 400,\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <View\n          accessibilityRole=\"progressbar\"\n          accessibilityValue={\n            Object {\n              \"max\": 100,\n              \"min\": 0,\n              \"now\": 65,\n            }\n          }\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          isIndeterminate={false}\n          style={\n            Object {\n              \"backgroundColor\": \"#e5e5e5\",\n              \"borderRadius\": 0,\n              \"height\": 8,\n              \"marginLeft\": 16,\n              \"marginRight\": 16,\n              \"overflow\": \"hidden\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#0891b2\",\n                \"borderRadius\": 9999,\n                \"display\": \"flex\",\n                \"elevation\": 1,\n                \"height\": \"100%\",\n                \"justifyContent\": \"center\",\n                \"shadowColor\": \"#000000\",\n                \"shadowOffset\": Object {\n                  \"height\": 1,\n                  \"width\": 0,\n                },\n                \"shadowOpacity\": 0.18,\n                \"shadowRadius\": 1,\n                \"width\": \"65%\",\n              }\n            }\n          />\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Progress Sizes 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"maxWidth\": 400,\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"marginLeft\": 16,\n                \"marginRight\": 16,\n              }\n            }\n          >\n            <View\n              accessibilityRole=\"progressbar\"\n              accessibilityValue={\n                Object {\n                  \"max\": 100,\n                  \"min\": 0,\n                  \"now\": 25,\n                }\n              }\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              isIndeterminate={false}\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"borderRadius\": 9999,\n                  \"height\": 4,\n                  \"marginBottom\": 16,\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#0891b2\",\n                    \"borderRadius\": 9999,\n                    \"display\": \"flex\",\n                    \"elevation\": 1,\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"shadowColor\": \"#000000\",\n                    \"shadowOffset\": Object {\n                      \"height\": 1,\n                      \"width\": 0,\n                    },\n                    \"shadowOpacity\": 0.18,\n                    \"shadowRadius\": 1,\n                    \"width\": \"25%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 16,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"progressbar\"\n              accessibilityValue={\n                Object {\n                  \"max\": 100,\n                  \"min\": 0,\n                  \"now\": 35,\n                }\n              }\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              isIndeterminate={false}\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"borderRadius\": 9999,\n                  \"height\": 8,\n                  \"marginBottom\": 16,\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#0891b2\",\n                    \"borderRadius\": 9999,\n                    \"display\": \"flex\",\n                    \"elevation\": 1,\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"shadowColor\": \"#000000\",\n                    \"shadowOffset\": Object {\n                      \"height\": 1,\n                      \"width\": 0,\n                    },\n                    \"shadowOpacity\": 0.18,\n                    \"shadowRadius\": 1,\n                    \"width\": \"35%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 16,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"progressbar\"\n              accessibilityValue={\n                Object {\n                  \"max\": 100,\n                  \"min\": 0,\n                  \"now\": 45,\n                }\n              }\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              isIndeterminate={false}\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"borderRadius\": 9999,\n                  \"height\": 12,\n                  \"marginBottom\": 16,\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#0891b2\",\n                    \"borderRadius\": 9999,\n                    \"display\": \"flex\",\n                    \"elevation\": 1,\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"shadowColor\": \"#000000\",\n                    \"shadowOffset\": Object {\n                      \"height\": 1,\n                      \"width\": 0,\n                    },\n                    \"shadowOpacity\": 0.18,\n                    \"shadowRadius\": 1,\n                    \"width\": \"45%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 16,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"progressbar\"\n              accessibilityValue={\n                Object {\n                  \"max\": 100,\n                  \"min\": 0,\n                  \"now\": 55.00000000000001,\n                }\n              }\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              isIndeterminate={false}\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"borderRadius\": 9999,\n                  \"height\": 16,\n                  \"marginBottom\": 16,\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#0891b2\",\n                    \"borderRadius\": 9999,\n                    \"display\": \"flex\",\n                    \"elevation\": 1,\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"shadowColor\": \"#000000\",\n                    \"shadowOffset\": Object {\n                      \"height\": 1,\n                      \"width\": 0,\n                    },\n                    \"shadowOpacity\": 0.18,\n                    \"shadowRadius\": 1,\n                    \"width\": \"55.00000000000001%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 16,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"progressbar\"\n              accessibilityValue={\n                Object {\n                  \"max\": 100,\n                  \"min\": 0,\n                  \"now\": 65,\n                }\n              }\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              isIndeterminate={false}\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"borderRadius\": 9999,\n                  \"height\": 20,\n                  \"marginBottom\": 16,\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#0891b2\",\n                    \"borderRadius\": 9999,\n                    \"display\": \"flex\",\n                    \"elevation\": 1,\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"shadowColor\": \"#000000\",\n                    \"shadowOffset\": Object {\n                      \"height\": 1,\n                      \"width\": 0,\n                    },\n                    \"shadowOpacity\": 0.18,\n                    \"shadowRadius\": 1,\n                    \"width\": \"65%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 16,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"progressbar\"\n              accessibilityValue={\n                Object {\n                  \"max\": 100,\n                  \"min\": 0,\n                  \"now\": 75,\n                }\n              }\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              isIndeterminate={false}\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"borderRadius\": 9999,\n                  \"height\": 24,\n                  \"marginBottom\": 16,\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#0891b2\",\n                    \"borderRadius\": 9999,\n                    \"display\": \"flex\",\n                    \"elevation\": 1,\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"shadowColor\": \"#000000\",\n                    \"shadowOffset\": Object {\n                      \"height\": 1,\n                      \"width\": 0,\n                    },\n                    \"shadowOpacity\": 0.18,\n                    \"shadowRadius\": 1,\n                    \"width\": \"75%\",\n                  }\n                }\n              />\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Radio Controlled Radio 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      accessibilityLabel=\"favorite number\"\n      accessibilityRole=\"radiogroup\"\n      accessibilityState={\n        Object {\n          \"disabled\": undefined,\n        }\n      }\n      dataSet={Object {}}\n      name=\"myRadioGroup\"\n      onChange={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"flex-start\",\n        }\n      }\n      value=\"one\"\n    >\n      <View\n        accessibilityRole=\"radio\"\n        accessibilityState={\n          Object {\n            \"checked\": true,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        checked={true}\n        dataSet={Object {}}\n        focusable={true}\n        formControlContext={Object {}}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        state={\n          Object {\n            \"lastFocusedValue\": null,\n            \"name\": \"myRadioGroup\",\n            \"selectedValue\": \"one\",\n            \"setLastFocusedValue\": [Function],\n            \"setSelectedValue\": [Function],\n          }\n        }\n        style={Object {}}\n        value=\"one\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              formControlContext={Object {}}\n              state={\n                Object {\n                  \"lastFocusedValue\": null,\n                  \"name\": \"myRadioGroup\",\n                  \"selectedValue\": \"one\",\n                  \"setLastFocusedValue\": [Function],\n                  \"setSelectedValue\": [Function],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#0891b2\",\n                  \"borderRadius\": 9999,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                  \"paddingBottom\": 4,\n                  \"paddingLeft\": 4,\n                  \"paddingRight\": 4,\n                  \"paddingTop\": 4,\n                }\n              }\n              value=\"one\"\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={4278751666}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#0891b2\",\n                      \"height\": 12,\n                      \"opacity\": 1,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={4278751666}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  opacity={1}\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            One\n          </Text>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n      <View\n        accessibilityRole=\"radio\"\n        accessibilityState={\n          Object {\n            \"checked\": false,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        checked={false}\n        dataSet={Object {}}\n        focusable={true}\n        formControlContext={Object {}}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        state={\n          Object {\n            \"lastFocusedValue\": null,\n            \"name\": \"myRadioGroup\",\n            \"selectedValue\": \"one\",\n            \"setLastFocusedValue\": [Function],\n            \"setSelectedValue\": [Function],\n          }\n        }\n        style={Object {}}\n        value=\"two\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              formControlContext={Object {}}\n              state={\n                Object {\n                  \"lastFocusedValue\": null,\n                  \"name\": \"myRadioGroup\",\n                  \"selectedValue\": \"one\",\n                  \"setLastFocusedValue\": [Function],\n                  \"setSelectedValue\": [Function],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#a3a3a3\",\n                  \"borderRadius\": 9999,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                  \"paddingBottom\": 4,\n                  \"paddingLeft\": 4,\n                  \"paddingRight\": 4,\n                  \"paddingTop\": 4,\n                }\n              }\n              value=\"two\"\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={4285756275}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#737373\",\n                      \"height\": 12,\n                      \"opacity\": 0,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={4285756275}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  opacity={0}\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Two\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Radio Custom Color 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      accessibilityLabel=\"favorite colorscheme\"\n      accessibilityRole=\"radiogroup\"\n      accessibilityState={\n        Object {\n          \"disabled\": undefined,\n        }\n      }\n      dataSet={Object {}}\n      defaultValue=\"1\"\n      name=\"exampleGroup\"\n      style={\n        Object {\n          \"alignItems\": \"flex-start\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"radio\"\n        accessibilityState={\n          Object {\n            \"checked\": true,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        checked={true}\n        colorScheme=\"emerald\"\n        dataSet={Object {}}\n        focusable={true}\n        formControlContext={Object {}}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        state={\n          Object {\n            \"lastFocusedValue\": null,\n            \"name\": \"exampleGroup\",\n            \"selectedValue\": \"1\",\n            \"setLastFocusedValue\": [Function],\n            \"setSelectedValue\": [Function],\n          }\n        }\n        style={Object {}}\n        value=\"1\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              colorScheme=\"emerald\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              formControlContext={Object {}}\n              state={\n                Object {\n                  \"lastFocusedValue\": null,\n                  \"name\": \"exampleGroup\",\n                  \"selectedValue\": \"1\",\n                  \"setLastFocusedValue\": [Function],\n                  \"setSelectedValue\": [Function],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#059669\",\n                  \"borderRadius\": 9999,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                  \"paddingBottom\": 4,\n                  \"paddingLeft\": 4,\n                  \"paddingRight\": 4,\n                  \"paddingTop\": 4,\n                }\n              }\n              value=\"1\"\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={4278556265}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#059669\",\n                      \"height\": 12,\n                      \"opacity\": 1,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={4278556265}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  opacity={1}\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            emerald\n          </Text>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n      <View\n        accessibilityRole=\"radio\"\n        accessibilityState={\n          Object {\n            \"checked\": false,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        checked={false}\n        colorScheme=\"secondary\"\n        dataSet={Object {}}\n        focusable={true}\n        formControlContext={Object {}}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        state={\n          Object {\n            \"lastFocusedValue\": null,\n            \"name\": \"exampleGroup\",\n            \"selectedValue\": \"1\",\n            \"setLastFocusedValue\": [Function],\n            \"setSelectedValue\": [Function],\n          }\n        }\n        style={Object {}}\n        value=\"2\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              colorScheme=\"secondary\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              formControlContext={Object {}}\n              state={\n                Object {\n                  \"lastFocusedValue\": null,\n                  \"name\": \"exampleGroup\",\n                  \"selectedValue\": \"1\",\n                  \"setLastFocusedValue\": [Function],\n                  \"setSelectedValue\": [Function],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#a3a3a3\",\n                  \"borderRadius\": 9999,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                  \"paddingBottom\": 4,\n                  \"paddingLeft\": 4,\n                  \"paddingRight\": 4,\n                  \"paddingTop\": 4,\n                }\n              }\n              value=\"2\"\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={4285756275}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#737373\",\n                      \"height\": 12,\n                      \"opacity\": 0,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={4285756275}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  opacity={0}\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            secondary\n          </Text>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n      <View\n        accessibilityRole=\"radio\"\n        accessibilityState={\n          Object {\n            \"checked\": false,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        checked={false}\n        colorScheme=\"warning\"\n        dataSet={Object {}}\n        focusable={true}\n        formControlContext={Object {}}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        state={\n          Object {\n            \"lastFocusedValue\": null,\n            \"name\": \"exampleGroup\",\n            \"selectedValue\": \"1\",\n            \"setLastFocusedValue\": [Function],\n            \"setSelectedValue\": [Function],\n          }\n        }\n        style={Object {}}\n        value=\"3\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              colorScheme=\"warning\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              formControlContext={Object {}}\n              state={\n                Object {\n                  \"lastFocusedValue\": null,\n                  \"name\": \"exampleGroup\",\n                  \"selectedValue\": \"1\",\n                  \"setLastFocusedValue\": [Function],\n                  \"setSelectedValue\": [Function],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#a3a3a3\",\n                  \"borderRadius\": 9999,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                  \"paddingBottom\": 4,\n                  \"paddingLeft\": 4,\n                  \"paddingRight\": 4,\n                  \"paddingTop\": 4,\n                }\n              }\n              value=\"3\"\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={4285756275}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#737373\",\n                      \"height\": 12,\n                      \"opacity\": 0,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={4285756275}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  opacity={0}\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            warning\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Radio Custom Icon 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      accessibilityLabel=\"pick a choice\"\n      accessibilityRole=\"radiogroup\"\n      accessibilityState={\n        Object {\n          \"disabled\": undefined,\n        }\n      }\n      dataSet={Object {}}\n      defaultValue=\"1\"\n      name=\"exampleGroup\"\n      style={\n        Object {\n          \"alignItems\": \"flex-start\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"radio\"\n        accessibilityState={\n          Object {\n            \"checked\": true,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        checked={true}\n        colorScheme=\"green\"\n        dataSet={Object {}}\n        focusable={true}\n        formControlContext={Object {}}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        state={\n          Object {\n            \"lastFocusedValue\": null,\n            \"name\": \"exampleGroup\",\n            \"selectedValue\": \"1\",\n            \"setLastFocusedValue\": [Function],\n            \"setSelectedValue\": [Function],\n          }\n        }\n        style={Object {}}\n        value=\"1\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              colorScheme=\"green\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              formControlContext={Object {}}\n              state={\n                Object {\n                  \"lastFocusedValue\": null,\n                  \"name\": \"exampleGroup\",\n                  \"selectedValue\": \"1\",\n                  \"setLastFocusedValue\": [Function],\n                  \"setSelectedValue\": [Function],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#16a34a\",\n                  \"borderRadius\": 9999,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                  \"paddingBottom\": 4,\n                  \"paddingLeft\": 4,\n                  \"paddingRight\": 4,\n                  \"paddingTop\": 4,\n                }\n              }\n              value=\"1\"\n            >\n              <Text\n                allowFontScaling={false}\n                dataSet={Object {}}\n                style={\n                  Array [\n                    Object {\n                      \"color\": undefined,\n                      \"fontSize\": 12,\n                    },\n                    Object {\n                      \"color\": \"#16a34a\",\n                      \"fontSize\": 12,\n                      \"height\": 12,\n                      \"lineHeight\": 12,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"fontFamily\": \"material-community\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"normal\",\n                    },\n                    Object {},\n                  ]\n                }\n              >\n                󰢚\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"marginLeft\": 8,\n                \"marginRight\": 8,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Alien\n          </Text>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n      <View\n        accessibilityRole=\"radio\"\n        accessibilityState={\n          Object {\n            \"checked\": false,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        checked={false}\n        colorScheme=\"red\"\n        dataSet={Object {}}\n        focusable={true}\n        formControlContext={Object {}}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        state={\n          Object {\n            \"lastFocusedValue\": null,\n            \"name\": \"exampleGroup\",\n            \"selectedValue\": \"1\",\n            \"setLastFocusedValue\": [Function],\n            \"setSelectedValue\": [Function],\n          }\n        }\n        style={Object {}}\n        value=\"2\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              colorScheme=\"red\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              formControlContext={Object {}}\n              state={\n                Object {\n                  \"lastFocusedValue\": null,\n                  \"name\": \"exampleGroup\",\n                  \"selectedValue\": \"1\",\n                  \"setLastFocusedValue\": [Function],\n                  \"setSelectedValue\": [Function],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#a3a3a3\",\n                  \"borderRadius\": 9999,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                  \"paddingBottom\": 4,\n                  \"paddingLeft\": 4,\n                  \"paddingRight\": 4,\n                  \"paddingTop\": 4,\n                }\n              }\n              value=\"2\"\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={4285756275}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#737373\",\n                      \"height\": 12,\n                      \"opacity\": 0,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={4285756275}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  opacity={0}\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"marginLeft\": 8,\n                \"marginRight\": 8,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Fire\n          </Text>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n      <View\n        accessibilityRole=\"radio\"\n        accessibilityState={\n          Object {\n            \"checked\": false,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        checked={false}\n        colorScheme=\"warning\"\n        dataSet={Object {}}\n        focusable={true}\n        formControlContext={Object {}}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        state={\n          Object {\n            \"lastFocusedValue\": null,\n            \"name\": \"exampleGroup\",\n            \"selectedValue\": \"1\",\n            \"setLastFocusedValue\": [Function],\n            \"setSelectedValue\": [Function],\n          }\n        }\n        style={Object {}}\n        value=\"3\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              colorScheme=\"warning\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              formControlContext={Object {}}\n              state={\n                Object {\n                  \"lastFocusedValue\": null,\n                  \"name\": \"exampleGroup\",\n                  \"selectedValue\": \"1\",\n                  \"setLastFocusedValue\": [Function],\n                  \"setSelectedValue\": [Function],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#a3a3a3\",\n                  \"borderRadius\": 9999,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                  \"paddingBottom\": 4,\n                  \"paddingLeft\": 4,\n                  \"paddingRight\": 4,\n                  \"paddingTop\": 4,\n                }\n              }\n              value=\"3\"\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={4285756275}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#737373\",\n                      \"height\": 12,\n                      \"opacity\": 0,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={4285756275}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  opacity={0}\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"marginLeft\": 8,\n                \"marginRight\": 8,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Warning\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Radio Disabled 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      accessibilityLabel=\"select prize\"\n      accessibilityRole=\"radiogroup\"\n      accessibilityState={\n        Object {\n          \"disabled\": undefined,\n        }\n      }\n      dataSet={Object {}}\n      defaultValue=\"2\"\n      name=\"exampleGroup\"\n      style={\n        Object {\n          \"alignItems\": \"flex-start\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"radio\"\n        accessibilityState={\n          Object {\n            \"checked\": false,\n            \"disabled\": true,\n          }\n        }\n        accessible={true}\n        checked={false}\n        dataSet={Object {}}\n        focusable={true}\n        formControlContext={Object {}}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        state={\n          Object {\n            \"lastFocusedValue\": null,\n            \"name\": \"exampleGroup\",\n            \"selectedValue\": \"2\",\n            \"setLastFocusedValue\": [Function],\n            \"setSelectedValue\": [Function],\n          }\n        }\n        style={Object {}}\n        value=\"1\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"opacity\": 0.6,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              formControlContext={Object {}}\n              isDisabled={true}\n              state={\n                Object {\n                  \"lastFocusedValue\": null,\n                  \"name\": \"exampleGroup\",\n                  \"selectedValue\": \"2\",\n                  \"setLastFocusedValue\": [Function],\n                  \"setSelectedValue\": [Function],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#a3a3a3\",\n                  \"borderRadius\": 9999,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                  \"opacity\": 0.6,\n                  \"paddingBottom\": 4,\n                  \"paddingLeft\": 4,\n                  \"paddingRight\": 4,\n                  \"paddingTop\": 4,\n                }\n              }\n              value=\"1\"\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={4285756275}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"color\": \"#737373\",\n                      \"height\": 12,\n                      \"opacity\": 0,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={4285756275}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  opacity={0}\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            First\n          </Text>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n      <View\n        accessibilityRole=\"radio\"\n        accessibilityState={\n          Object {\n            \"checked\": true,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        checked={true}\n        dataSet={Object {}}\n        focusable={true}\n        formControlContext={Object {}}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        state={\n          Object {\n            \"lastFocusedValue\": null,\n            \"name\": \"exampleGroup\",\n            \"selectedValue\": \"2\",\n            \"setLastFocusedValue\": [Function],\n            \"setSelectedValue\": [Function],\n          }\n        }\n        style={Object {}}\n        value=\"2\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              formControlContext={Object {}}\n              state={\n                Object {\n                  \"lastFocusedValue\": null,\n                  \"name\": \"exampleGroup\",\n                  \"selectedValue\": \"2\",\n                  \"setLastFocusedValue\": [Function],\n                  \"setSelectedValue\": [Function],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#0891b2\",\n                  \"borderRadius\": 9999,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                  \"paddingBottom\": 4,\n                  \"paddingLeft\": 4,\n                  \"paddingRight\": 4,\n                  \"paddingTop\": 4,\n                }\n              }\n              value=\"2\"\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={4278751666}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#0891b2\",\n                      \"height\": 12,\n                      \"opacity\": 1,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={4278751666}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  opacity={1}\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Second\n          </Text>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n      <View\n        accessibilityRole=\"radio\"\n        accessibilityState={\n          Object {\n            \"checked\": false,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        checked={false}\n        dataSet={Object {}}\n        focusable={true}\n        formControlContext={Object {}}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        state={\n          Object {\n            \"lastFocusedValue\": null,\n            \"name\": \"exampleGroup\",\n            \"selectedValue\": \"2\",\n            \"setLastFocusedValue\": [Function],\n            \"setSelectedValue\": [Function],\n          }\n        }\n        style={Object {}}\n        value=\"3\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              formControlContext={Object {}}\n              state={\n                Object {\n                  \"lastFocusedValue\": null,\n                  \"name\": \"exampleGroup\",\n                  \"selectedValue\": \"2\",\n                  \"setLastFocusedValue\": [Function],\n                  \"setSelectedValue\": [Function],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#a3a3a3\",\n                  \"borderRadius\": 9999,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                  \"paddingBottom\": 4,\n                  \"paddingLeft\": 4,\n                  \"paddingRight\": 4,\n                  \"paddingTop\": 4,\n                }\n              }\n              value=\"3\"\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={4285756275}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#737373\",\n                      \"height\": 12,\n                      \"opacity\": 0,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={4285756275}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  opacity={0}\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Third\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Radio Form Controlled 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"flex-start\",\n          \"maxWidth\": \"80%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        isInvalid={true}\n        style={\n          Object {\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          feedbackId=\"field-174-feedback\"\n          hasFeedbackText={false}\n          hasHelpText={false}\n          helpTextId=\"field-174-helptext\"\n          isDisabled={false}\n          isInvalid={true}\n          isReadOnly={false}\n          isRequired={false}\n          labelId=\"field-174-label\"\n          nativeID=\"field-174-label\"\n          setHasFeedbackText={[Function]}\n          setHasHelpText={[Function]}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"marginBottom\": 4,\n              \"marginTop\": 4,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#737373\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 18,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 27,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Select Prize\n          </Text>\n        </View>\n        <View\n          accessibilityLabel=\"select prize\"\n          accessibilityRole=\"radiogroup\"\n          accessibilityState={\n            Object {\n              \"disabled\": false,\n            }\n          }\n          dataSet={Object {}}\n          defaultValue=\"1\"\n          name=\"exampleGroup\"\n          onChange={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"flex-start\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"radio\"\n            accessibilityState={\n              Object {\n                \"checked\": true,\n                \"disabled\": false,\n              }\n            }\n            accessible={true}\n            checked={true}\n            dataSet={Object {}}\n            feedbackId=\"field-174-feedback\"\n            focusable={true}\n            formControlContext={\n              Object {\n                \"feedbackId\": \"field-174-feedback\",\n                \"hasFeedbackText\": false,\n                \"hasHelpText\": false,\n                \"helpTextId\": \"field-174-helptext\",\n                \"isDisabled\": false,\n                \"isInvalid\": true,\n                \"isReadOnly\": false,\n                \"isRequired\": false,\n                \"labelId\": \"field-174-label\",\n                \"nativeID\": \"field-174\",\n                \"setHasFeedbackText\": [Function],\n                \"setHasHelpText\": [Function],\n              }\n            }\n            hasFeedbackText={false}\n            hasHelpText={false}\n            helpTextId=\"field-174-helptext\"\n            isInvalid={true}\n            isReadOnly={false}\n            isRequired={false}\n            labelId=\"field-174-label\"\n            nativeID=\"field-174\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            setHasFeedbackText={[Function]}\n            setHasHelpText={[Function]}\n            state={\n              Object {\n                \"lastFocusedValue\": null,\n                \"name\": \"exampleGroup\",\n                \"selectedValue\": \"1\",\n                \"setLastFocusedValue\": [Function],\n                \"setSelectedValue\": [Function],\n              }\n            }\n            style={Object {}}\n            value=\"1\"\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                />\n                <View\n                  colorScheme=\"primary\"\n                  dataSet={Object {}}\n                  defaultIsChecked={false}\n                  feedbackId=\"field-174-feedback\"\n                  formControlContext={\n                    Object {\n                      \"feedbackId\": \"field-174-feedback\",\n                      \"hasFeedbackText\": false,\n                      \"hasHelpText\": false,\n                      \"helpTextId\": \"field-174-helptext\",\n                      \"isDisabled\": false,\n                      \"isInvalid\": true,\n                      \"isReadOnly\": false,\n                      \"isRequired\": false,\n                      \"labelId\": \"field-174-label\",\n                      \"nativeID\": \"field-174\",\n                      \"setHasFeedbackText\": [Function],\n                      \"setHasHelpText\": [Function],\n                    }\n                  }\n                  hasFeedbackText={false}\n                  hasHelpText={false}\n                  helpTextId=\"field-174-helptext\"\n                  isDisabled={false}\n                  isInvalid={true}\n                  isReadOnly={false}\n                  isRequired={false}\n                  labelId=\"field-174-label\"\n                  nativeID=\"field-174\"\n                  setHasFeedbackText={[Function]}\n                  setHasHelpText={[Function]}\n                  state={\n                    Object {\n                      \"lastFocusedValue\": null,\n                      \"name\": \"exampleGroup\",\n                      \"selectedValue\": \"1\",\n                      \"setLastFocusedValue\": [Function],\n                      \"setSelectedValue\": [Function],\n                    }\n                  }\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"#fafafa\",\n                      \"borderColor\": \"#dc2626\",\n                      \"borderRadius\": 9999,\n                      \"borderWidth\": 2,\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"marginBottom\": 4,\n                      \"marginTop\": 4,\n                      \"paddingBottom\": 4,\n                      \"paddingLeft\": 4,\n                      \"paddingRight\": 4,\n                      \"paddingTop\": 4,\n                    }\n                  }\n                  value=\"1\"\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={12}\n                    bbWidth={12}\n                    color={4278751666}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#0891b2\",\n                          \"height\": 12,\n                          \"opacity\": 1,\n                          \"width\": 12,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 12,\n                          \"width\": 12,\n                        },\n                      ]\n                    }\n                    tintColor={4278751666}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      opacity={1}\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 16,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 24,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                First\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          />\n          <View\n            accessibilityRole=\"radio\"\n            accessibilityState={\n              Object {\n                \"checked\": false,\n                \"disabled\": false,\n              }\n            }\n            accessible={true}\n            checked={false}\n            dataSet={Object {}}\n            feedbackId=\"field-174-feedback\"\n            focusable={true}\n            formControlContext={\n              Object {\n                \"feedbackId\": \"field-174-feedback\",\n                \"hasFeedbackText\": false,\n                \"hasHelpText\": false,\n                \"helpTextId\": \"field-174-helptext\",\n                \"isDisabled\": false,\n                \"isInvalid\": true,\n                \"isReadOnly\": false,\n                \"isRequired\": false,\n                \"labelId\": \"field-174-label\",\n                \"nativeID\": \"field-174\",\n                \"setHasFeedbackText\": [Function],\n                \"setHasHelpText\": [Function],\n              }\n            }\n            hasFeedbackText={false}\n            hasHelpText={false}\n            helpTextId=\"field-174-helptext\"\n            isInvalid={true}\n            isReadOnly={false}\n            isRequired={false}\n            labelId=\"field-174-label\"\n            nativeID=\"field-174\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            setHasFeedbackText={[Function]}\n            setHasHelpText={[Function]}\n            state={\n              Object {\n                \"lastFocusedValue\": null,\n                \"name\": \"exampleGroup\",\n                \"selectedValue\": \"1\",\n                \"setLastFocusedValue\": [Function],\n                \"setSelectedValue\": [Function],\n              }\n            }\n            style={Object {}}\n            value=\"2\"\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                />\n                <View\n                  colorScheme=\"primary\"\n                  dataSet={Object {}}\n                  defaultIsChecked={false}\n                  feedbackId=\"field-174-feedback\"\n                  formControlContext={\n                    Object {\n                      \"feedbackId\": \"field-174-feedback\",\n                      \"hasFeedbackText\": false,\n                      \"hasHelpText\": false,\n                      \"helpTextId\": \"field-174-helptext\",\n                      \"isDisabled\": false,\n                      \"isInvalid\": true,\n                      \"isReadOnly\": false,\n                      \"isRequired\": false,\n                      \"labelId\": \"field-174-label\",\n                      \"nativeID\": \"field-174\",\n                      \"setHasFeedbackText\": [Function],\n                      \"setHasHelpText\": [Function],\n                    }\n                  }\n                  hasFeedbackText={false}\n                  hasHelpText={false}\n                  helpTextId=\"field-174-helptext\"\n                  isDisabled={false}\n                  isInvalid={true}\n                  isReadOnly={false}\n                  isRequired={false}\n                  labelId=\"field-174-label\"\n                  nativeID=\"field-174\"\n                  setHasFeedbackText={[Function]}\n                  setHasHelpText={[Function]}\n                  state={\n                    Object {\n                      \"lastFocusedValue\": null,\n                      \"name\": \"exampleGroup\",\n                      \"selectedValue\": \"1\",\n                      \"setLastFocusedValue\": [Function],\n                      \"setSelectedValue\": [Function],\n                    }\n                  }\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"#fafafa\",\n                      \"borderColor\": \"#dc2626\",\n                      \"borderRadius\": 9999,\n                      \"borderWidth\": 2,\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"marginBottom\": 4,\n                      \"marginTop\": 4,\n                      \"paddingBottom\": 4,\n                      \"paddingLeft\": 4,\n                      \"paddingRight\": 4,\n                      \"paddingTop\": 4,\n                    }\n                  }\n                  value=\"2\"\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={12}\n                    bbWidth={12}\n                    color={4285756275}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 12,\n                          \"opacity\": 0,\n                          \"width\": 12,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 12,\n                          \"width\": 12,\n                        },\n                      ]\n                    }\n                    tintColor={4285756275}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      opacity={0}\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 16,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 24,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Second\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          />\n          <View\n            accessibilityRole=\"radio\"\n            accessibilityState={\n              Object {\n                \"checked\": false,\n                \"disabled\": false,\n              }\n            }\n            accessible={true}\n            checked={false}\n            dataSet={Object {}}\n            feedbackId=\"field-174-feedback\"\n            focusable={true}\n            formControlContext={\n              Object {\n                \"feedbackId\": \"field-174-feedback\",\n                \"hasFeedbackText\": false,\n                \"hasHelpText\": false,\n                \"helpTextId\": \"field-174-helptext\",\n                \"isDisabled\": false,\n                \"isInvalid\": true,\n                \"isReadOnly\": false,\n                \"isRequired\": false,\n                \"labelId\": \"field-174-label\",\n                \"nativeID\": \"field-174\",\n                \"setHasFeedbackText\": [Function],\n                \"setHasHelpText\": [Function],\n              }\n            }\n            hasFeedbackText={false}\n            hasHelpText={false}\n            helpTextId=\"field-174-helptext\"\n            isInvalid={true}\n            isReadOnly={false}\n            isRequired={false}\n            labelId=\"field-174-label\"\n            nativeID=\"field-174\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            setHasFeedbackText={[Function]}\n            setHasHelpText={[Function]}\n            state={\n              Object {\n                \"lastFocusedValue\": null,\n                \"name\": \"exampleGroup\",\n                \"selectedValue\": \"1\",\n                \"setLastFocusedValue\": [Function],\n                \"setSelectedValue\": [Function],\n              }\n            }\n            style={Object {}}\n            value=\"3\"\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                />\n                <View\n                  colorScheme=\"primary\"\n                  dataSet={Object {}}\n                  defaultIsChecked={false}\n                  feedbackId=\"field-174-feedback\"\n                  formControlContext={\n                    Object {\n                      \"feedbackId\": \"field-174-feedback\",\n                      \"hasFeedbackText\": false,\n                      \"hasHelpText\": false,\n                      \"helpTextId\": \"field-174-helptext\",\n                      \"isDisabled\": false,\n                      \"isInvalid\": true,\n                      \"isReadOnly\": false,\n                      \"isRequired\": false,\n                      \"labelId\": \"field-174-label\",\n                      \"nativeID\": \"field-174\",\n                      \"setHasFeedbackText\": [Function],\n                      \"setHasHelpText\": [Function],\n                    }\n                  }\n                  hasFeedbackText={false}\n                  hasHelpText={false}\n                  helpTextId=\"field-174-helptext\"\n                  isDisabled={false}\n                  isInvalid={true}\n                  isReadOnly={false}\n                  isRequired={false}\n                  labelId=\"field-174-label\"\n                  nativeID=\"field-174\"\n                  setHasFeedbackText={[Function]}\n                  setHasHelpText={[Function]}\n                  state={\n                    Object {\n                      \"lastFocusedValue\": null,\n                      \"name\": \"exampleGroup\",\n                      \"selectedValue\": \"1\",\n                      \"setLastFocusedValue\": [Function],\n                      \"setSelectedValue\": [Function],\n                    }\n                  }\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"#fafafa\",\n                      \"borderColor\": \"#dc2626\",\n                      \"borderRadius\": 9999,\n                      \"borderWidth\": 2,\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"marginBottom\": 4,\n                      \"marginTop\": 4,\n                      \"paddingBottom\": 4,\n                      \"paddingLeft\": 4,\n                      \"paddingRight\": 4,\n                      \"paddingTop\": 4,\n                    }\n                  }\n                  value=\"3\"\n                >\n                  <RNSVGSvgView\n                    accessibilityRole=\"image\"\n                    align=\"xMidYMid\"\n                    bbHeight={12}\n                    bbWidth={12}\n                    color={4285756275}\n                    dataSet={Object {}}\n                    focusable={false}\n                    meetOrSlice={0}\n                    minX={0}\n                    minY={0}\n                    stroke=\"\"\n                    style={\n                      Array [\n                        Object {\n                          \"backgroundColor\": \"transparent\",\n                          \"borderWidth\": 0,\n                        },\n                        Object {\n                          \"color\": \"#737373\",\n                          \"height\": 12,\n                          \"opacity\": 0,\n                          \"width\": 12,\n                        },\n                        Object {\n                          \"flex\": 0,\n                          \"height\": 12,\n                          \"width\": 12,\n                        },\n                      ]\n                    }\n                    tintColor={4285756275}\n                    vbHeight={24}\n                    vbWidth={24}\n                  >\n                    <RNSVGGroup\n                      opacity={0}\n                      propList={\n                        Array [\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    >\n                      <RNSVGGroup>\n                        <RNSVGPath\n                          d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                          fill={\n                            Array [\n                              2,\n                            ]\n                          }\n                          propList={\n                            Array [\n                              \"fill\",\n                              \"stroke\",\n                            ]\n                          }\n                          stroke={null}\n                        />\n                      </RNSVGGroup>\n                    </RNSVGGroup>\n                  </RNSVGSvgView>\n                </View>\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 16,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 24,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Third\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          feedbackId=\"field-174-feedback\"\n          hasFeedbackText={false}\n          hasHelpText={false}\n          helpTextId=\"field-174-helptext\"\n          isDisabled={false}\n          isInvalid={true}\n          isReadOnly={false}\n          isRequired={false}\n          labelId=\"field-174-label\"\n          nativeID=\"field-174\"\n          setHasFeedbackText={[Function]}\n          setHasHelpText={[Function]}\n          style={\n            Object {\n              \"marginTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <RNSVGSvgView\n              accessibilityRole=\"image\"\n              align=\"xMidYMid\"\n              bbHeight={12}\n              bbWidth={12}\n              color={4292617766}\n              dataSet={Object {}}\n              focusable={false}\n              meetOrSlice={0}\n              minX={0}\n              minY={0}\n              stroke=\"\"\n              style={\n                Array [\n                  Object {\n                    \"backgroundColor\": \"transparent\",\n                    \"borderWidth\": 0,\n                  },\n                  Object {\n                    \"color\": \"#dc2626\",\n                    \"fontSize\": 12,\n                    \"height\": 12,\n                    \"width\": 12,\n                  },\n                  Object {\n                    \"flex\": 0,\n                    \"height\": 12,\n                    \"width\": 12,\n                  },\n                ]\n              }\n              tintColor={4292617766}\n              vbHeight={16}\n              vbWidth={16}\n            >\n              <RNSVGGroup\n                font={\n                  Object {\n                    \"fontSize\": 12,\n                  }\n                }\n                propList={\n                  Array [\n                    \"stroke\",\n                  ]\n                }\n                stroke={null}\n              >\n                <RNSVGGroup>\n                  <RNSVGPath\n                    d=\"M8 16C6.41775 16 4.87103 15.5308 3.55544 14.6518C2.23985 13.7727 1.21447 12.5233 0.608967 11.0615C0.00346627 9.59966 -0.15496 7.99113 0.153721 6.43928C0.462403 4.88743 1.22433 3.46197 2.34315 2.34315C3.46197 1.22433 4.88743 0.462403 6.43928 0.153721C7.99113 -0.15496 9.59966 0.00346627 11.0615 0.608967C12.5233 1.21447 13.7727 2.23985 14.6518 3.55544C15.5308 4.87103 16 6.41775 16 8C16 10.1217 15.1571 12.1566 13.6569 13.6569C12.1566 15.1571 10.1217 16 8 16ZM8 14.4C9.2658 14.4 10.5032 14.0246 11.5556 13.3214C12.6081 12.6182 13.4284 11.6186 13.9128 10.4492C14.3972 9.27973 14.524 7.9929 14.277 6.75142C14.0301 5.50995 13.4205 4.36958 12.5255 3.47452C11.6304 2.57946 10.4901 1.96992 9.24858 1.72298C8.0071 1.47603 6.72028 1.60277 5.55083 2.08717C4.38138 2.57158 3.38184 3.39188 2.6786 4.44435C1.97536 5.49683 1.6 6.7342 1.6 8C1.6 9.69739 2.27429 11.3253 3.47452 12.5255C4.67475 13.7257 6.30262 14.4 8 14.4ZM7.2 10.4H8.8V12H7.2V10.4ZM7.2 4H8.8V8.8H7.2V4Z\"\n                    fill={\n                      Array [\n                        2,\n                      ]\n                    }\n                    propList={\n                      Array [\n                        \"fill\",\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  />\n                </RNSVGGroup>\n              </RNSVGGroup>\n            </RNSVGSvgView>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 4,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#dc2626\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 18,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              You must select a Prize.\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Radio Invalid 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      accessibilityLabel=\"select an option\"\n      accessibilityRole=\"radiogroup\"\n      accessibilityState={\n        Object {\n          \"disabled\": undefined,\n        }\n      }\n      dataSet={Object {}}\n      name=\"exampleGroup\"\n      style={\n        Object {\n          \"alignItems\": \"flex-start\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"radio\"\n        accessibilityState={\n          Object {\n            \"checked\": false,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        checked={false}\n        dataSet={Object {}}\n        focusable={true}\n        formControlContext={Object {}}\n        isInvalid={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        state={\n          Object {\n            \"lastFocusedValue\": null,\n            \"name\": \"exampleGroup\",\n            \"selectedValue\": undefined,\n            \"setLastFocusedValue\": [Function],\n            \"setSelectedValue\": [Function],\n          }\n        }\n        style={Object {}}\n        value=\"test\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              formControlContext={Object {}}\n              isInvalid={true}\n              state={\n                Object {\n                  \"lastFocusedValue\": null,\n                  \"name\": \"exampleGroup\",\n                  \"selectedValue\": undefined,\n                  \"setLastFocusedValue\": [Function],\n                  \"setSelectedValue\": [Function],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#dc2626\",\n                  \"borderRadius\": 9999,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 4,\n                  \"paddingLeft\": 4,\n                  \"paddingRight\": 4,\n                  \"paddingTop\": 4,\n                }\n              }\n              value=\"test\"\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={4285756275}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#737373\",\n                      \"height\": 12,\n                      \"opacity\": 0,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={4285756275}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  opacity={0}\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Others\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Radio Playground 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"space-between\",\n        }\n      }\n    >\n      <View\n        accessibilityLabel=\"pick an option from below\"\n        accessibilityRole=\"radiogroup\"\n        accessibilityState={\n          Object {\n            \"disabled\": undefined,\n          }\n        }\n        dataSet={Object {}}\n        name=\"exampleGroup\"\n        onChange={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"flex-start\",\n          }\n        }\n        value=\"\"\n      >\n        <View\n          accessibilityRole=\"radio\"\n          accessibilityState={\n            Object {\n              \"checked\": false,\n              \"disabled\": false,\n            }\n          }\n          accessible={true}\n          checked={false}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          formControlContext={Object {}}\n          isInvalid={false}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          state={\n            Object {\n              \"lastFocusedValue\": null,\n              \"name\": \"exampleGroup\",\n              \"selectedValue\": \"\",\n              \"setLastFocusedValue\": [Function],\n              \"setSelectedValue\": [Function],\n            }\n          }\n          style={Object {}}\n          value=\"cool\"\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                colorScheme=\"primary\"\n                dataSet={Object {}}\n                defaultIsChecked={false}\n                formControlContext={Object {}}\n                isDisabled={false}\n                isInvalid={false}\n                state={\n                  Object {\n                    \"lastFocusedValue\": null,\n                    \"name\": \"exampleGroup\",\n                    \"selectedValue\": \"\",\n                    \"setLastFocusedValue\": [Function],\n                    \"setSelectedValue\": [Function],\n                  }\n                }\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#fafafa\",\n                    \"borderColor\": \"#a3a3a3\",\n                    \"borderRadius\": 9999,\n                    \"borderWidth\": 2,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": 4,\n                    \"marginTop\": 4,\n                    \"paddingBottom\": 4,\n                    \"paddingLeft\": 4,\n                    \"paddingRight\": 4,\n                    \"paddingTop\": 4,\n                  }\n                }\n                value=\"cool\"\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={12}\n                  bbWidth={12}\n                  color={4285756275}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#737373\",\n                        \"height\": 12,\n                        \"opacity\": 0,\n                        \"width\": 12,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 12,\n                        \"width\": 12,\n                      },\n                    ]\n                  }\n                  tintColor={4285756275}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    opacity={0}\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 16,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 24,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              UX Research\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        />\n        <View\n          accessibilityRole=\"radio\"\n          accessibilityState={\n            Object {\n              \"checked\": false,\n              \"disabled\": false,\n            }\n          }\n          accessible={true}\n          checked={false}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          formControlContext={Object {}}\n          isInvalid={false}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          state={\n            Object {\n              \"lastFocusedValue\": null,\n              \"name\": \"exampleGroup\",\n              \"selectedValue\": \"\",\n              \"setLastFocusedValue\": [Function],\n              \"setSelectedValue\": [Function],\n            }\n          }\n          style={Object {}}\n          value=\"awesome\"\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                colorScheme=\"primary\"\n                dataSet={Object {}}\n                defaultIsChecked={false}\n                formControlContext={Object {}}\n                isDisabled={false}\n                isInvalid={false}\n                state={\n                  Object {\n                    \"lastFocusedValue\": null,\n                    \"name\": \"exampleGroup\",\n                    \"selectedValue\": \"\",\n                    \"setLastFocusedValue\": [Function],\n                    \"setSelectedValue\": [Function],\n                  }\n                }\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#fafafa\",\n                    \"borderColor\": \"#a3a3a3\",\n                    \"borderRadius\": 9999,\n                    \"borderWidth\": 2,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": 4,\n                    \"marginTop\": 4,\n                    \"paddingBottom\": 4,\n                    \"paddingLeft\": 4,\n                    \"paddingRight\": 4,\n                    \"paddingTop\": 4,\n                  }\n                }\n                value=\"awesome\"\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={12}\n                  bbWidth={12}\n                  color={4285756275}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#737373\",\n                        \"height\": 12,\n                        \"opacity\": 0,\n                        \"width\": 12,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 12,\n                        \"width\": 12,\n                      },\n                    ]\n                  }\n                  tintColor={4285756275}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    opacity={0}\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 16,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 24,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Software Development\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Radio Size 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      accessibilityLabel=\"pick a size\"\n      accessibilityRole=\"radiogroup\"\n      accessibilityState={\n        Object {\n          \"disabled\": undefined,\n        }\n      }\n      dataSet={Object {}}\n      defaultValue=\"1\"\n      name=\"exampleGroup\"\n      style={\n        Object {\n          \"alignItems\": \"flex-start\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"flex-start\",\n            \"flexDirection\": \"column\",\n            \"maxWidth\": 300,\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <View\n          accessibilityRole=\"radio\"\n          accessibilityState={\n            Object {\n              \"checked\": true,\n              \"disabled\": false,\n            }\n          }\n          accessible={true}\n          checked={true}\n          colorScheme=\"red\"\n          dataSet={Object {}}\n          focusable={true}\n          formControlContext={Object {}}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          state={\n            Object {\n              \"lastFocusedValue\": null,\n              \"name\": \"exampleGroup\",\n              \"selectedValue\": \"1\",\n              \"setLastFocusedValue\": [Function],\n              \"setSelectedValue\": [Function],\n            }\n          }\n          style={Object {}}\n          value=\"1\"\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                colorScheme=\"red\"\n                dataSet={Object {}}\n                defaultIsChecked={false}\n                formControlContext={Object {}}\n                state={\n                  Object {\n                    \"lastFocusedValue\": null,\n                    \"name\": \"exampleGroup\",\n                    \"selectedValue\": \"1\",\n                    \"setLastFocusedValue\": [Function],\n                    \"setSelectedValue\": [Function],\n                  }\n                }\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#fafafa\",\n                    \"borderColor\": \"#dc2626\",\n                    \"borderRadius\": 9999,\n                    \"borderWidth\": 2,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": 4,\n                    \"marginTop\": 4,\n                    \"paddingBottom\": 4,\n                    \"paddingLeft\": 4,\n                    \"paddingRight\": 4,\n                    \"paddingTop\": 4,\n                  }\n                }\n                value=\"1\"\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={8}\n                  bbWidth={8}\n                  color={4292617766}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#dc2626\",\n                        \"height\": 8,\n                        \"opacity\": 1,\n                        \"width\": 8,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 8,\n                        \"width\": 8,\n                      },\n                    ]\n                  }\n                  tintColor={4292617766}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    opacity={1}\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Small\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"radio\"\n          accessibilityState={\n            Object {\n              \"checked\": false,\n              \"disabled\": false,\n            }\n          }\n          accessible={true}\n          checked={false}\n          colorScheme=\"green\"\n          dataSet={Object {}}\n          focusable={true}\n          formControlContext={Object {}}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          state={\n            Object {\n              \"lastFocusedValue\": null,\n              \"name\": \"exampleGroup\",\n              \"selectedValue\": \"1\",\n              \"setLastFocusedValue\": [Function],\n              \"setSelectedValue\": [Function],\n            }\n          }\n          style={Object {}}\n          value=\"2\"\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                colorScheme=\"green\"\n                dataSet={Object {}}\n                defaultIsChecked={false}\n                formControlContext={Object {}}\n                state={\n                  Object {\n                    \"lastFocusedValue\": null,\n                    \"name\": \"exampleGroup\",\n                    \"selectedValue\": \"1\",\n                    \"setLastFocusedValue\": [Function],\n                    \"setSelectedValue\": [Function],\n                  }\n                }\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#fafafa\",\n                    \"borderColor\": \"#a3a3a3\",\n                    \"borderRadius\": 9999,\n                    \"borderWidth\": 2,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": 4,\n                    \"marginTop\": 4,\n                    \"paddingBottom\": 4,\n                    \"paddingLeft\": 4,\n                    \"paddingRight\": 4,\n                    \"paddingTop\": 4,\n                  }\n                }\n                value=\"2\"\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={12}\n                  bbWidth={12}\n                  color={4285756275}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#737373\",\n                        \"height\": 12,\n                        \"opacity\": 0,\n                        \"width\": 12,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 12,\n                        \"width\": 12,\n                      },\n                    ]\n                  }\n                  tintColor={4285756275}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    opacity={0}\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 16,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 24,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Medium\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"radio\"\n          accessibilityState={\n            Object {\n              \"checked\": false,\n              \"disabled\": false,\n            }\n          }\n          accessible={true}\n          checked={false}\n          colorScheme=\"yellow\"\n          dataSet={Object {}}\n          focusable={true}\n          formControlContext={Object {}}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          state={\n            Object {\n              \"lastFocusedValue\": null,\n              \"name\": \"exampleGroup\",\n              \"selectedValue\": \"1\",\n              \"setLastFocusedValue\": [Function],\n              \"setSelectedValue\": [Function],\n            }\n          }\n          style={Object {}}\n          value=\"3\"\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                colorScheme=\"yellow\"\n                dataSet={Object {}}\n                defaultIsChecked={false}\n                formControlContext={Object {}}\n                state={\n                  Object {\n                    \"lastFocusedValue\": null,\n                    \"name\": \"exampleGroup\",\n                    \"selectedValue\": \"1\",\n                    \"setLastFocusedValue\": [Function],\n                    \"setSelectedValue\": [Function],\n                  }\n                }\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#fafafa\",\n                    \"borderColor\": \"#a3a3a3\",\n                    \"borderRadius\": 9999,\n                    \"borderWidth\": 2,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": 4,\n                    \"marginTop\": 4,\n                    \"paddingBottom\": 4,\n                    \"paddingLeft\": 4,\n                    \"paddingRight\": 4,\n                    \"paddingTop\": 4,\n                  }\n                }\n                value=\"3\"\n              >\n                <RNSVGSvgView\n                  accessibilityRole=\"image\"\n                  align=\"xMidYMid\"\n                  bbHeight={16}\n                  bbWidth={16}\n                  color={4285756275}\n                  dataSet={Object {}}\n                  focusable={false}\n                  meetOrSlice={0}\n                  minX={0}\n                  minY={0}\n                  stroke=\"\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"borderWidth\": 0,\n                      },\n                      Object {\n                        \"color\": \"#737373\",\n                        \"height\": 16,\n                        \"opacity\": 0,\n                        \"width\": 16,\n                      },\n                      Object {\n                        \"flex\": 0,\n                        \"height\": 16,\n                        \"width\": 16,\n                      },\n                    ]\n                  }\n                  tintColor={4285756275}\n                  vbHeight={24}\n                  vbWidth={24}\n                >\n                  <RNSVGGroup\n                    opacity={0}\n                    propList={\n                      Array [\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  >\n                    <RNSVGGroup>\n                      <RNSVGPath\n                        d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                        fill={\n                          Array [\n                            2,\n                          ]\n                        }\n                        propList={\n                          Array [\n                            \"fill\",\n                            \"stroke\",\n                          ]\n                        }\n                        stroke={null}\n                      />\n                    </RNSVGGroup>\n                  </RNSVGGroup>\n                </RNSVGSvgView>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 18,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 27,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Large\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Radio Uncontrolled Radio 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      accessibilityLabel=\"Pick your favorite number\"\n      accessibilityRole=\"radiogroup\"\n      accessibilityState={\n        Object {\n          \"disabled\": undefined,\n        }\n      }\n      dataSet={Object {}}\n      defaultValue=\"1\"\n      name=\"myRadioGroup\"\n      style={\n        Object {\n          \"alignItems\": \"flex-start\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"radio\"\n        accessibilityState={\n          Object {\n            \"checked\": true,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        checked={true}\n        dataSet={Object {}}\n        focusable={true}\n        formControlContext={Object {}}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        state={\n          Object {\n            \"lastFocusedValue\": null,\n            \"name\": \"myRadioGroup\",\n            \"selectedValue\": \"1\",\n            \"setLastFocusedValue\": [Function],\n            \"setSelectedValue\": [Function],\n          }\n        }\n        style={Object {}}\n        value=\"1\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              formControlContext={Object {}}\n              state={\n                Object {\n                  \"lastFocusedValue\": null,\n                  \"name\": \"myRadioGroup\",\n                  \"selectedValue\": \"1\",\n                  \"setLastFocusedValue\": [Function],\n                  \"setSelectedValue\": [Function],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#0891b2\",\n                  \"borderRadius\": 9999,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                  \"paddingBottom\": 4,\n                  \"paddingLeft\": 4,\n                  \"paddingRight\": 4,\n                  \"paddingTop\": 4,\n                }\n              }\n              value=\"1\"\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={4278751666}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#0891b2\",\n                      \"height\": 12,\n                      \"opacity\": 1,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={4278751666}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  opacity={1}\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            First\n          </Text>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n      <View\n        accessibilityRole=\"radio\"\n        accessibilityState={\n          Object {\n            \"checked\": false,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        checked={false}\n        dataSet={Object {}}\n        focusable={true}\n        formControlContext={Object {}}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        state={\n          Object {\n            \"lastFocusedValue\": null,\n            \"name\": \"myRadioGroup\",\n            \"selectedValue\": \"1\",\n            \"setLastFocusedValue\": [Function],\n            \"setSelectedValue\": [Function],\n          }\n        }\n        style={Object {}}\n        value=\"2\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              formControlContext={Object {}}\n              state={\n                Object {\n                  \"lastFocusedValue\": null,\n                  \"name\": \"myRadioGroup\",\n                  \"selectedValue\": \"1\",\n                  \"setLastFocusedValue\": [Function],\n                  \"setSelectedValue\": [Function],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#a3a3a3\",\n                  \"borderRadius\": 9999,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                  \"paddingBottom\": 4,\n                  \"paddingLeft\": 4,\n                  \"paddingRight\": 4,\n                  \"paddingTop\": 4,\n                }\n              }\n              value=\"2\"\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={4285756275}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#737373\",\n                      \"height\": 12,\n                      \"opacity\": 0,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={4285756275}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  opacity={0}\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Second\n          </Text>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n      <View\n        accessibilityRole=\"radio\"\n        accessibilityState={\n          Object {\n            \"checked\": false,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        checked={false}\n        dataSet={Object {}}\n        focusable={true}\n        formControlContext={Object {}}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        state={\n          Object {\n            \"lastFocusedValue\": null,\n            \"name\": \"myRadioGroup\",\n            \"selectedValue\": \"1\",\n            \"setLastFocusedValue\": [Function],\n            \"setSelectedValue\": [Function],\n          }\n        }\n        style={Object {}}\n        value=\"3\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              formControlContext={Object {}}\n              state={\n                Object {\n                  \"lastFocusedValue\": null,\n                  \"name\": \"myRadioGroup\",\n                  \"selectedValue\": \"1\",\n                  \"setLastFocusedValue\": [Function],\n                  \"setSelectedValue\": [Function],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#a3a3a3\",\n                  \"borderRadius\": 9999,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                  \"paddingBottom\": 4,\n                  \"paddingLeft\": 4,\n                  \"paddingRight\": 4,\n                  \"paddingTop\": 4,\n                }\n              }\n              value=\"3\"\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={4285756275}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#737373\",\n                      \"height\": 12,\n                      \"opacity\": 0,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={4285756275}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  opacity={0}\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Third\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Radio With Ref 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      accessibilityLabel=\"pick an option\"\n      accessibilityRole=\"radiogroup\"\n      accessibilityState={\n        Object {\n          \"disabled\": undefined,\n        }\n      }\n      dataSet={Object {}}\n      name=\"exampleGroup\"\n      onChange={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"flex-start\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"radio\"\n        accessibilityState={\n          Object {\n            \"checked\": false,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        checked={false}\n        colorScheme=\"success\"\n        dataSet={Object {}}\n        focusable={true}\n        formControlContext={Object {}}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        state={\n          Object {\n            \"lastFocusedValue\": null,\n            \"name\": \"exampleGroup\",\n            \"selectedValue\": undefined,\n            \"setLastFocusedValue\": [Function],\n            \"setSelectedValue\": [Function],\n          }\n        }\n        style={Object {}}\n        value=\"1\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              colorScheme=\"success\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              formControlContext={Object {}}\n              state={\n                Object {\n                  \"lastFocusedValue\": null,\n                  \"name\": \"exampleGroup\",\n                  \"selectedValue\": undefined,\n                  \"setLastFocusedValue\": [Function],\n                  \"setSelectedValue\": [Function],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#a3a3a3\",\n                  \"borderRadius\": 9999,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                  \"paddingBottom\": 4,\n                  \"paddingLeft\": 4,\n                  \"paddingRight\": 4,\n                  \"paddingTop\": 4,\n                }\n              }\n              value=\"1\"\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={4285756275}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#737373\",\n                      \"height\": 12,\n                      \"opacity\": 0,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={4285756275}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  opacity={0}\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Wrong\n          </Text>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n      <View\n        accessibilityRole=\"radio\"\n        accessibilityState={\n          Object {\n            \"checked\": false,\n            \"disabled\": false,\n          }\n        }\n        accessible={true}\n        checked={false}\n        colorScheme=\"success\"\n        dataSet={Object {}}\n        focusable={true}\n        formControlContext={Object {}}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        state={\n          Object {\n            \"lastFocusedValue\": null,\n            \"name\": \"exampleGroup\",\n            \"selectedValue\": undefined,\n            \"setLastFocusedValue\": [Function],\n            \"setSelectedValue\": [Function],\n          }\n        }\n        style={Object {}}\n        value=\"2\"\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <View\n              colorScheme=\"success\"\n              dataSet={Object {}}\n              defaultIsChecked={false}\n              formControlContext={Object {}}\n              state={\n                Object {\n                  \"lastFocusedValue\": null,\n                  \"name\": \"exampleGroup\",\n                  \"selectedValue\": undefined,\n                  \"setLastFocusedValue\": [Function],\n                  \"setSelectedValue\": [Function],\n                }\n              }\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fafafa\",\n                  \"borderColor\": \"#a3a3a3\",\n                  \"borderRadius\": 9999,\n                  \"borderWidth\": 2,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": 4,\n                  \"marginTop\": 4,\n                  \"paddingBottom\": 4,\n                  \"paddingLeft\": 4,\n                  \"paddingRight\": 4,\n                  \"paddingTop\": 4,\n                }\n              }\n              value=\"2\"\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={4285756275}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#737373\",\n                      \"height\": 12,\n                      \"opacity\": 0,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={4285756275}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  opacity={0}\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 16,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 24,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Right\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Responsive Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"backgroundColor\": \"#fecaca\",\n          \"width\": 400,\n        }\n      }\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 14,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 21,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        This is a box\n      </Text>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Responsive Demo 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"backgroundColor\": \"#fafafa\",\n          \"borderColor\": \"#e5e7eb\",\n          \"borderRadius\": 8,\n          \"borderWidth\": 1,\n          \"flexDirection\": \"column\",\n          \"overflow\": \"hidden\",\n          \"width\": 288,\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      >\n        <Image\n          accessibilityLabel=\"image\"\n          alt=\"image\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://www.holidify.com/images/cmsuploads/compressed/Bangalore_citycover_20190613234056.jpg\",\n            }\n          }\n          style={\n            Object {\n              \"height\": 160,\n              \"maxWidth\": \"100%\",\n              \"width\": \"100%\",\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#8b5cf6\",\n              \"bottom\": 0,\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 6,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 6,\n              \"position\": \"absolute\",\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#FFFFFF\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 12,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 18,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            PHOTOS\n          </Text>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"paddingBottom\": 16,\n            \"paddingLeft\": 16,\n            \"paddingRight\": 16,\n            \"paddingTop\": 16,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"marginLeft\": -4,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            The Garden City\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 8,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#8b5cf6\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 12,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 18,\n                \"marginLeft\": -2,\n                \"marginTop\": -4,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            The Silicon Valley of India.\n          </Text>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 12,\n            }\n          }\n        />\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Bengaluru (also called Bangalore) is the center of India's high-tech industry. The city is also known for its parks and nightlife.\n        </Text>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 12,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"space-between\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#4b5563\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              6 mins ago\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Responsive Direction 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"flexDirection\": \"column\",\n          \"justifyContent\": \"space-between\",\n          \"paddingBottom\": 16,\n          \"paddingLeft\": 16,\n          \"paddingRight\": 16,\n          \"paddingTop\": 16,\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#a1a1aa\",\n            \"borderColor\": \"#27272a\",\n            \"borderRadius\": 9999,\n            \"borderWidth\": 1,\n            \"height\": 96,\n            \"justifyContent\": \"center\",\n            \"marginBottom\": 8,\n            \"marginLeft\": 8,\n            \"marginRight\": 8,\n            \"marginTop\": 8,\n            \"position\": \"relative\",\n            \"width\": 96,\n          }\n        }\n      >\n        <Image\n          accessibilityLabel=\"--\"\n          alt=\"--\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://pbs.twimg.com/profile_images/1188747996843761665/8CiUdKZW_400x400.jpg\",\n            }\n          }\n          style={\n            Array [\n              Object {\n                \"borderRadius\": 9999,\n                \"maxWidth\": \"100%\",\n              },\n              Object {\n                \"height\": \"100%\",\n                \"width\": \"100%\",\n              },\n            ]\n          }\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#a1a1aa\",\n            \"borderColor\": \"#27272a\",\n            \"borderRadius\": 9999,\n            \"borderWidth\": 1,\n            \"height\": 96,\n            \"justifyContent\": \"center\",\n            \"marginBottom\": 8,\n            \"marginLeft\": 8,\n            \"marginRight\": 8,\n            \"marginTop\": 8,\n            \"position\": \"relative\",\n            \"width\": 96,\n          }\n        }\n      >\n        <Image\n          accessibilityLabel=\"--\"\n          alt=\"--\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://pbs.twimg.com/profile_images/1177303899243343872/B0sUJIH0_400x400.jpg\",\n            }\n          }\n          style={\n            Array [\n              Object {\n                \"borderRadius\": 9999,\n                \"maxWidth\": \"100%\",\n              },\n              Object {\n                \"height\": \"100%\",\n                \"width\": \"100%\",\n              },\n            ]\n          }\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#a1a1aa\",\n            \"borderColor\": \"#27272a\",\n            \"borderRadius\": 9999,\n            \"borderWidth\": 1,\n            \"height\": 96,\n            \"justifyContent\": \"center\",\n            \"marginBottom\": 8,\n            \"marginLeft\": 8,\n            \"marginRight\": 8,\n            \"marginTop\": 8,\n            \"position\": \"relative\",\n            \"width\": 96,\n          }\n        }\n      >\n        <Image\n          accessibilityLabel=\"--\"\n          alt=\"--\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://pbs.twimg.com/profile_images/1260766060401188864/ySJfMIbZ_400x400.jpg\",\n            }\n          }\n          style={\n            Array [\n              Object {\n                \"borderRadius\": 9999,\n                \"maxWidth\": \"100%\",\n              },\n              Object {\n                \"height\": \"100%\",\n                \"width\": \"100%\",\n              },\n            ]\n          }\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#a1a1aa\",\n            \"borderColor\": \"#27272a\",\n            \"borderRadius\": 9999,\n            \"borderWidth\": 1,\n            \"height\": 96,\n            \"justifyContent\": \"center\",\n            \"marginBottom\": 8,\n            \"marginLeft\": 8,\n            \"marginRight\": 8,\n            \"marginTop\": 8,\n            \"position\": \"relative\",\n            \"width\": 96,\n          }\n        }\n      >\n        <Image\n          accessibilityLabel=\"--\"\n          alt=\"--\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://pbs.twimg.com/profile_images/1309797238651060226/18cm6VhQ_400x400.jpg\",\n            }\n          }\n          style={\n            Array [\n              Object {\n                \"borderRadius\": 9999,\n                \"maxWidth\": \"100%\",\n              },\n              Object {\n                \"height\": \"100%\",\n                \"width\": \"100%\",\n              },\n            ]\n          }\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#a1a1aa\",\n            \"borderColor\": \"#27272a\",\n            \"borderRadius\": 9999,\n            \"borderWidth\": 1,\n            \"height\": 96,\n            \"justifyContent\": \"center\",\n            \"marginBottom\": 8,\n            \"marginLeft\": 8,\n            \"marginRight\": 8,\n            \"marginTop\": 8,\n            \"position\": \"relative\",\n            \"width\": 96,\n          }\n        }\n      >\n        <Image\n          accessibilityLabel=\"--\"\n          alt=\"--\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://pbs.twimg.com/profile_images/983582580372004864/h9ccP0Ea_400x400.jpg\",\n            }\n          }\n          style={\n            Array [\n              Object {\n                \"borderRadius\": 9999,\n                \"maxWidth\": \"100%\",\n              },\n              Object {\n                \"height\": \"100%\",\n                \"width\": \"100%\",\n              },\n            ]\n          }\n        />\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#a1a1aa\",\n            \"borderColor\": \"#27272a\",\n            \"borderRadius\": 9999,\n            \"borderWidth\": 1,\n            \"height\": 96,\n            \"justifyContent\": \"center\",\n            \"marginBottom\": 8,\n            \"marginLeft\": 8,\n            \"marginRight\": 8,\n            \"marginTop\": 8,\n            \"position\": \"relative\",\n            \"width\": 96,\n          }\n        }\n      >\n        <Image\n          accessibilityLabel=\"--\"\n          alt=\"--\"\n          dataSet={Object {}}\n          onError={[Function]}\n          source={\n            Object {\n              \"uri\": \"https://pbs.twimg.com/profile_images/1320985200663293952/lE_Kg6vr_400x400.jpg\",\n            }\n          }\n          style={\n            Array [\n              Object {\n                \"borderRadius\": 9999,\n                \"maxWidth\": \"100%\",\n              },\n              Object {\n                \"height\": \"100%\",\n                \"width\": \"100%\",\n              },\n            ]\n          }\n        />\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Responsive FontSize 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <Text\n      dataSet={Object {}}\n      style={\n        Object {\n          \"backgroundColor\": undefined,\n          \"color\": \"#171717\",\n          \"fontFamily\": undefined,\n          \"fontSize\": 24,\n          \"fontStyle\": \"normal\",\n          \"fontWeight\": \"400\",\n          \"letterSpacing\": 0,\n          \"lineHeight\": 36,\n          \"textDecorationLine\": undefined,\n        }\n      }\n    >\n      This is responsive text\n    </Text>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Responsive More 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"backgroundColor\": \"#2dd4bf\",\n          \"height\": \"75%\",\n          \"width\": \"50%\",\n        }\n      }\n    />\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"fontSize\": 16,\n        }\n      }\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 14,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 21,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Font Size\n      </Text>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"backgroundColor\": \"#4ade80\",\n          \"height\": 24,\n          \"marginTop\": 16,\n          \"width\": \"100%\",\n        }\n      }\n    />\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"backgroundColor\": \"#fecaca\",\n          \"paddingBottom\": 16,\n          \"paddingLeft\": 16,\n          \"paddingRight\": 16,\n          \"paddingTop\": 16,\n        }\n      }\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 14,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 21,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Padding\n      </Text>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Row Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"flexDirection\": \"row\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#22d3ee\",\n            \"borderRadius\": 6,\n            \"display\": \"flex\",\n            \"elevation\": 4,\n            \"height\": 64,\n            \"justifyContent\": \"center\",\n            \"shadowColor\": \"#000000\",\n            \"shadowOffset\": Object {\n              \"height\": 2,\n              \"width\": 0,\n            },\n            \"shadowOpacity\": 0.23,\n            \"shadowRadius\": 2.62,\n            \"width\": 64,\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#FFFFFF\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Box 1\n        </Text>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 8,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#f472b6\",\n            \"borderRadius\": 6,\n            \"display\": \"flex\",\n            \"elevation\": 4,\n            \"height\": 64,\n            \"justifyContent\": \"center\",\n            \"shadowColor\": \"#000000\",\n            \"shadowOffset\": Object {\n              \"height\": 2,\n              \"width\": 0,\n            },\n            \"shadowOpacity\": 0.23,\n            \"shadowRadius\": 2.62,\n            \"width\": 64,\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#FFFFFF\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Box 2\n        </Text>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 8,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#34d399\",\n            \"borderRadius\": 6,\n            \"display\": \"flex\",\n            \"elevation\": 4,\n            \"height\": 64,\n            \"justifyContent\": \"center\",\n            \"shadowColor\": \"#000000\",\n            \"shadowOffset\": Object {\n              \"height\": 2,\n              \"width\": 0,\n            },\n            \"shadowOpacity\": 0.23,\n            \"shadowRadius\": 2.62,\n            \"width\": 64,\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#FFFFFF\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Box 3\n        </Text>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots ScrollView Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <RCTScrollView\n      contentContainerStyle={\n        Array [\n          Object {},\n          Object {\n            \"dataSet\": Object {},\n          },\n          Object {},\n        ]\n      }\n      dataSet={Object {}}\n      style={\n        Object {\n          \"height\": 320,\n          \"width\": 300,\n        }\n      }\n    >\n      <View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n              \"marginBottom\": 16,\n              \"marginTop\": 12,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Cyan\n          </Text>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flex\": 1,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#cffafe\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 16,\n                \"paddingTop\": 16,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              100\n            </Text>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#a5f3fc\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 16,\n                \"paddingTop\": 16,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              200\n            </Text>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#67e8f9\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 16,\n                \"paddingTop\": 16,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              300\n            </Text>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#22d3ee\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 16,\n                \"paddingTop\": 16,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              400\n            </Text>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#06b6d4\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 16,\n                \"paddingTop\": 16,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              500\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n              \"marginBottom\": 16,\n              \"marginTop\": 32,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Yellow\n          </Text>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flex\": 1,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#fef9c3\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 16,\n                \"paddingTop\": 16,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              100\n            </Text>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#fef08a\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 16,\n                \"paddingTop\": 16,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              200\n            </Text>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#fde047\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 16,\n                \"paddingTop\": 16,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              300\n            </Text>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#facc15\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 16,\n                \"paddingTop\": 16,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              400\n            </Text>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#eab308\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 16,\n                \"paddingTop\": 16,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              500\n            </Text>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n              \"marginBottom\": 16,\n              \"marginTop\": 32,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n             Violet\n          </Text>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flex\": 1,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#ede9fe\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 16,\n                \"paddingTop\": 16,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              100\n            </Text>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#ddd6fe\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 16,\n                \"paddingTop\": 16,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              200\n            </Text>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#c4b5fd\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 16,\n                \"paddingTop\": 16,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              300\n            </Text>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#a78bfa\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 16,\n                \"paddingTop\": 16,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              400\n            </Text>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#8b5cf6\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 16,\n                \"paddingTop\": 16,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              500\n            </Text>\n          </View>\n        </View>\n      </View>\n    </RCTScrollView>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots SectionList Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"height\": 320,\n          \"justifyContent\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <RCTScrollView\n        data={\n          Array [\n            Object {\n              \"data\": Array [\n                \"cyan.100\",\n                \"cyan.200\",\n                \"cyan.300\",\n                \"cyan.400\",\n                \"cyan.500\",\n              ],\n              \"title\": \"Cyan\",\n            },\n            Object {\n              \"data\": Array [\n                \"yellow.100\",\n                \"yellow.200\",\n                \"yellow.300\",\n                \"yellow.400\",\n                \"yellow.500\",\n              ],\n              \"title\": \"Yellow\",\n            },\n            Object {\n              \"data\": Array [\n                \"violet.100\",\n                \"violet.200\",\n                \"violet.300\",\n                \"violet.400\",\n                \"violet.500\",\n              ],\n              \"title\": \"Violet\",\n            },\n          ]\n        }\n        dataSet={Object {}}\n        disableVirtualization={false}\n        getItem={[Function]}\n        getItemCount={[Function]}\n        horizontal={false}\n        initialNumToRender={10}\n        keyExtractor={[Function]}\n        maxToRenderPerBatch={10}\n        onContentSizeChange={[Function]}\n        onEndReachedThreshold={2}\n        onLayout={[Function]}\n        onMomentumScrollEnd={[Function]}\n        onScroll={[Function]}\n        onScrollBeginDrag={[Function]}\n        onScrollEndDrag={[Function]}\n        renderItem={[Function]}\n        scrollEventThrottle={50}\n        stickyHeaderIndices={\n          Array [\n            0,\n            7,\n          ]\n        }\n        style={\n          Object {\n            \"marginBottom\": 16,\n            \"maxWidth\": 300,\n            \"width\": \"100%\",\n          }\n        }\n        updateCellsBatchingPeriod={50}\n        windowSize={21}\n      >\n        <View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 20,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 25,\n                    \"marginTop\": 32,\n                    \"paddingBottom\": 16,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Cyan\n              </Text>\n            </View>\n          </View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#cffafe\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 16,\n                  \"paddingTop\": 16,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                100\n              </Text>\n            </View>\n          </View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#a5f3fc\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 16,\n                  \"paddingTop\": 16,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                200\n              </Text>\n            </View>\n          </View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#67e8f9\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 16,\n                  \"paddingTop\": 16,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                300\n              </Text>\n            </View>\n          </View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#22d3ee\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 16,\n                  \"paddingTop\": 16,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                400\n              </Text>\n            </View>\n          </View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#06b6d4\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 16,\n                  \"paddingTop\": 16,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                500\n              </Text>\n            </View>\n          </View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          />\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 20,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 25,\n                    \"marginTop\": 32,\n                    \"paddingBottom\": 16,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Yellow\n              </Text>\n            </View>\n          </View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fef9c3\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 16,\n                  \"paddingTop\": 16,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                100\n              </Text>\n            </View>\n          </View>\n          <View\n            onLayout={[Function]}\n            style={null}\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#fef08a\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 16,\n                  \"paddingTop\": 16,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                200\n              </Text>\n            </View>\n          </View>\n          <View\n            style={\n              Object {\n                \"height\": 0,\n              }\n            }\n          />\n        </View>\n      </RCTScrollView>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Select Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"maxWidth\": 300,\n          }\n        }\n      >\n        <View\n          accessibilityLabel=\"Choose Service\"\n          accessibilityRole=\"button\"\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"marginTop\": 4,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            isFocused={false}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"borderColor\": \"#d4d4d4\",\n                \"borderRadius\": 4,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"minWidth\": 200,\n                \"overflow\": \"hidden\",\n              }\n            }\n          >\n            <TextInput\n              accessible={true}\n              allowFontScaling={true}\n              aria-hidden={true}\n              dataSet={Object {}}\n              editable={false}\n              focusable={false}\n              importantForAccessibility=\"no\"\n              onBlur={[Function]}\n              onFocus={[Function]}\n              onKeyPress={[Function]}\n              placeholder=\"Choose Service\"\n              placeholderTextColor=\"#a3a3a3\"\n              pointerEvents=\"none\"\n              rejectResponderTermination={true}\n              secureTextEntry={false}\n              selection={\n                Object {\n                  \"start\": 0,\n                }\n              }\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"color\": \"#171717\",\n                  \"flex\": 1,\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"100%\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                  \"width\": \"100%\",\n                }\n              }\n              underlineColorAndroid=\"transparent\"\n              value=\"\"\n            />\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <RNSVGSvgView\n              accessibilityRole=\"image\"\n              align=\"xMidYMid\"\n              bbHeight={24}\n              bbWidth={24}\n              color={4285756275}\n              dataSet={Object {}}\n              focusable={false}\n              meetOrSlice={0}\n              minX={0}\n              minY={0}\n              stroke=\"\"\n              style={\n                Array [\n                  Object {\n                    \"backgroundColor\": \"transparent\",\n                    \"borderWidth\": 0,\n                  },\n                  Object {\n                    \"color\": \"#737373\",\n                    \"height\": 24,\n                    \"marginRight\": 12,\n                    \"paddingBottom\": 4,\n                    \"paddingLeft\": 4,\n                    \"paddingRight\": 4,\n                    \"paddingTop\": 4,\n                    \"width\": 24,\n                  },\n                  Object {\n                    \"flex\": 0,\n                    \"height\": 24,\n                    \"width\": 24,\n                  },\n                ]\n              }\n              tintColor={4285756275}\n              vbHeight={24}\n              vbWidth={24}\n            >\n              <RNSVGGroup\n                propList={\n                  Array [\n                    \"stroke\",\n                  ]\n                }\n                stroke={null}\n              >\n                <RNSVGGroup>\n                  <RNSVGPath\n                    d=\"M20.2286 6L11.9973 14.3785L3.76862 6.00268L2 7.80293L12 18L22 7.80293L20.2286 6Z\"\n                    fill={\n                      Array [\n                        2,\n                      ]\n                    }\n                    propList={\n                      Array [\n                        \"fill\",\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  />\n                </RNSVGGroup>\n              </RNSVGGroup>\n            </RNSVGSvgView>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Select FormControlled 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        isInvalid={true}\n        isRequired={true}\n        style={\n          Object {\n            \"maxWidth\": 300,\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          feedbackId=\"field-179-feedback\"\n          hasFeedbackText={false}\n          hasHelpText={false}\n          helpTextId=\"field-179-helptext\"\n          isDisabled={false}\n          isInvalid={true}\n          isReadOnly={false}\n          isRequired={true}\n          labelId=\"field-179-label\"\n          nativeID=\"field-179-label\"\n          setHasFeedbackText={[Function]}\n          setHasHelpText={[Function]}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"marginBottom\": 4,\n              \"marginTop\": 4,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#737373\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Choose service\n          </Text>\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#dc2626\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            *\n          </Text>\n        </View>\n        <View\n          accessibilityLabel=\"Choose Service\"\n          accessibilityRole=\"button\"\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"marginTop\": 4,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            isFocused={false}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"borderColor\": \"#d4d4d4\",\n                \"borderRadius\": 4,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"minWidth\": 200,\n                \"overflow\": \"hidden\",\n              }\n            }\n          >\n            <TextInput\n              accessibilityInvalid={true}\n              accessibilityRequired={true}\n              accessible={true}\n              allowFontScaling={true}\n              aria-hidden={true}\n              dataSet={Object {}}\n              disabled={false}\n              editable={false}\n              focusable={false}\n              importantForAccessibility=\"no\"\n              isInvalid={true}\n              isRequired={true}\n              nativeID=\"field-179-input\"\n              onBlur={[Function]}\n              onFocus={[Function]}\n              onKeyPress={[Function]}\n              placeholder=\"Choose Service\"\n              placeholderTextColor=\"#a3a3a3\"\n              pointerEvents=\"none\"\n              readOnly={false}\n              rejectResponderTermination={true}\n              required={true}\n              secureTextEntry={false}\n              selection={\n                Object {\n                  \"start\": 0,\n                }\n              }\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"color\": \"#171717\",\n                  \"flex\": 1,\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"100%\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                  \"width\": \"100%\",\n                }\n              }\n              underlineColorAndroid=\"transparent\"\n              value=\"\"\n            />\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <RNSVGSvgView\n              accessibilityRole=\"image\"\n              align=\"xMidYMid\"\n              bbHeight={24}\n              bbWidth={24}\n              color={4285756275}\n              dataSet={Object {}}\n              focusable={false}\n              meetOrSlice={0}\n              minX={0}\n              minY={0}\n              stroke=\"\"\n              style={\n                Array [\n                  Object {\n                    \"backgroundColor\": \"transparent\",\n                    \"borderWidth\": 0,\n                  },\n                  Object {\n                    \"color\": \"#737373\",\n                    \"height\": 24,\n                    \"marginRight\": 12,\n                    \"paddingBottom\": 4,\n                    \"paddingLeft\": 4,\n                    \"paddingRight\": 4,\n                    \"paddingTop\": 4,\n                    \"width\": 24,\n                  },\n                  Object {\n                    \"flex\": 0,\n                    \"height\": 24,\n                    \"width\": 24,\n                  },\n                ]\n              }\n              tintColor={4285756275}\n              vbHeight={24}\n              vbWidth={24}\n            >\n              <RNSVGGroup\n                propList={\n                  Array [\n                    \"stroke\",\n                  ]\n                }\n                stroke={null}\n              >\n                <RNSVGGroup>\n                  <RNSVGPath\n                    d=\"M20.2286 6L11.9973 14.3785L3.76862 6.00268L2 7.80293L12 18L22 7.80293L20.2286 6Z\"\n                    fill={\n                      Array [\n                        2,\n                      ]\n                    }\n                    propList={\n                      Array [\n                        \"fill\",\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  />\n                </RNSVGGroup>\n              </RNSVGGroup>\n            </RNSVGSvgView>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          feedbackId=\"field-179-feedback\"\n          hasFeedbackText={false}\n          hasHelpText={false}\n          helpTextId=\"field-179-helptext\"\n          isDisabled={false}\n          isInvalid={true}\n          isReadOnly={false}\n          isRequired={true}\n          labelId=\"field-179-label\"\n          nativeID=\"field-179\"\n          setHasFeedbackText={[Function]}\n          setHasHelpText={[Function]}\n          style={\n            Object {\n              \"marginTop\": 8,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <RNSVGSvgView\n              accessibilityRole=\"image\"\n              align=\"xMidYMid\"\n              bbHeight={12}\n              bbWidth={12}\n              color={4292617766}\n              dataSet={Object {}}\n              focusable={false}\n              meetOrSlice={0}\n              minX={0}\n              minY={0}\n              stroke=\"\"\n              style={\n                Array [\n                  Object {\n                    \"backgroundColor\": \"transparent\",\n                    \"borderWidth\": 0,\n                  },\n                  Object {\n                    \"color\": \"#dc2626\",\n                    \"fontSize\": 12,\n                    \"height\": 12,\n                    \"width\": 12,\n                  },\n                  Object {\n                    \"flex\": 0,\n                    \"height\": 12,\n                    \"width\": 12,\n                  },\n                ]\n              }\n              tintColor={4292617766}\n              vbHeight={16}\n              vbWidth={16}\n            >\n              <RNSVGGroup\n                font={\n                  Object {\n                    \"fontSize\": 12,\n                  }\n                }\n                propList={\n                  Array [\n                    \"stroke\",\n                  ]\n                }\n                stroke={null}\n              >\n                <RNSVGGroup>\n                  <RNSVGPath\n                    d=\"M8 16C6.41775 16 4.87103 15.5308 3.55544 14.6518C2.23985 13.7727 1.21447 12.5233 0.608967 11.0615C0.00346627 9.59966 -0.15496 7.99113 0.153721 6.43928C0.462403 4.88743 1.22433 3.46197 2.34315 2.34315C3.46197 1.22433 4.88743 0.462403 6.43928 0.153721C7.99113 -0.15496 9.59966 0.00346627 11.0615 0.608967C12.5233 1.21447 13.7727 2.23985 14.6518 3.55544C15.5308 4.87103 16 6.41775 16 8C16 10.1217 15.1571 12.1566 13.6569 13.6569C12.1566 15.1571 10.1217 16 8 16ZM8 14.4C9.2658 14.4 10.5032 14.0246 11.5556 13.3214C12.6081 12.6182 13.4284 11.6186 13.9128 10.4492C14.3972 9.27973 14.524 7.9929 14.277 6.75142C14.0301 5.50995 13.4205 4.36958 12.5255 3.47452C11.6304 2.57946 10.4901 1.96992 9.24858 1.72298C8.0071 1.47603 6.72028 1.60277 5.55083 2.08717C4.38138 2.57158 3.38184 3.39188 2.6786 4.44435C1.97536 5.49683 1.6 6.7342 1.6 8C1.6 9.69739 2.27429 11.3253 3.47452 12.5255C4.67475 13.7257 6.30262 14.4 8 14.4ZM7.2 10.4H8.8V12H7.2V10.4ZM7.2 4H8.8V8.8H7.2V4Z\"\n                    fill={\n                      Array [\n                        2,\n                      ]\n                    }\n                    propList={\n                      Array [\n                        \"fill\",\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  />\n                </RNSVGGroup>\n              </RNSVGGroup>\n            </RNSVGSvgView>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 4,\n                }\n              }\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#dc2626\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 18,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Please make a selection!\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Select Select Long list 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"flex-start\",\n          \"maxWidth\": \"80%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          feedbackId=\"field-181-feedback\"\n          hasFeedbackText={false}\n          hasHelpText={false}\n          helpTextId=\"field-181-helptext\"\n          isDisabled={false}\n          isInvalid={false}\n          isReadOnly={false}\n          isRequired={false}\n          labelId=\"field-181-label\"\n          nativeID=\"field-181-label\"\n          setHasFeedbackText={[Function]}\n          setHasHelpText={[Function]}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"marginBottom\": 4,\n              \"marginTop\": 4,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#737373\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Select Color\n          </Text>\n        </View>\n        <View\n          accessibilityLabel=\"Select a Color\"\n          accessibilityRole=\"button\"\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"marginTop\": 4,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            isFocused={false}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"borderColor\": \"#d4d4d4\",\n                \"borderRadius\": 4,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"minWidth\": 100,\n                \"overflow\": \"hidden\",\n              }\n            }\n          >\n            <TextInput\n              accessible={true}\n              allowFontScaling={true}\n              aria-hidden={true}\n              dataSet={Object {}}\n              disabled={false}\n              editable={false}\n              focusable={false}\n              importantForAccessibility=\"no\"\n              isRequired={false}\n              nativeID=\"field-181-input\"\n              onBlur={[Function]}\n              onFocus={[Function]}\n              onKeyPress={[Function]}\n              placeholder=\"Select a Color\"\n              placeholderTextColor=\"#a3a3a3\"\n              pointerEvents=\"none\"\n              readOnly={false}\n              rejectResponderTermination={true}\n              required={false}\n              secureTextEntry={false}\n              selection={\n                Object {\n                  \"start\": 0,\n                }\n              }\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"color\": \"#171717\",\n                  \"flex\": 1,\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"100%\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                  \"width\": \"100%\",\n                }\n              }\n              underlineColorAndroid=\"transparent\"\n              value=\"\"\n            />\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <RNSVGSvgView\n              accessibilityRole=\"image\"\n              align=\"xMidYMid\"\n              bbHeight={24}\n              bbWidth={24}\n              color={4285756275}\n              dataSet={Object {}}\n              focusable={false}\n              meetOrSlice={0}\n              minX={0}\n              minY={0}\n              stroke=\"\"\n              style={\n                Array [\n                  Object {\n                    \"backgroundColor\": \"transparent\",\n                    \"borderWidth\": 0,\n                  },\n                  Object {\n                    \"color\": \"#737373\",\n                    \"height\": 24,\n                    \"marginRight\": 12,\n                    \"paddingBottom\": 4,\n                    \"paddingLeft\": 4,\n                    \"paddingRight\": 4,\n                    \"paddingTop\": 4,\n                    \"width\": 24,\n                  },\n                  Object {\n                    \"flex\": 0,\n                    \"height\": 24,\n                    \"width\": 24,\n                  },\n                ]\n              }\n              tintColor={4285756275}\n              vbHeight={24}\n              vbWidth={24}\n            >\n              <RNSVGGroup\n                propList={\n                  Array [\n                    \"stroke\",\n                  ]\n                }\n                stroke={null}\n              >\n                <RNSVGGroup>\n                  <RNSVGPath\n                    d=\"M20.2286 6L11.9973 14.3785L3.76862 6.00268L2 7.80293L12 18L22 7.80293L20.2286 6Z\"\n                    fill={\n                      Array [\n                        2,\n                      ]\n                    }\n                    propList={\n                      Array [\n                        \"fill\",\n                        \"stroke\",\n                      ]\n                    }\n                    stroke={null}\n                  />\n                </RNSVGGroup>\n              </RNSVGGroup>\n            </RNSVGSvgView>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Skeleton Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"borderColor\": \"#e5e7eb\",\n            \"borderRadius\": 6,\n            \"borderWidth\": 1,\n            \"maxWidth\": 400,\n            \"overflow\": \"hidden\",\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          fadeDuration={0.1}\n          speed={1}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"height\": 160,\n              \"overflow\": \"hidden\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            style={\n              Object {\n                \"backgroundColor\": \"#e5e5e5\",\n                \"height\": \"100%\",\n                \"opacity\": 0,\n                \"width\": \"100%\",\n              }\n            }\n          />\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 32,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          fadeDuration={0.1}\n          speed={1}\n          style={\n            Object {\n              \"flexDirection\": \"column\",\n              \"paddingLeft\": 16,\n              \"paddingRight\": 16,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            speed={1}\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"borderRadius\": 9999,\n                \"height\": 12,\n                \"overflow\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            speed={1}\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"borderRadius\": 9999,\n                \"height\": 12,\n                \"overflow\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            speed={1}\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"borderRadius\": 9999,\n                \"height\": 12,\n                \"overflow\": \"hidden\",\n                \"width\": \"75%\",\n              }\n            }\n          >\n            <View\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 32,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          fadeDuration={0.1}\n          speed={1}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderRadius\": 6,\n              \"height\": 40,\n              \"marginBottom\": 16,\n              \"marginTop\": 16,\n              \"overflow\": \"hidden\",\n              \"paddingLeft\": 16,\n              \"paddingRight\": 16,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            style={\n              Object {\n                \"backgroundColor\": \"#cffafe\",\n                \"height\": \"100%\",\n                \"opacity\": 0,\n                \"width\": \"100%\",\n              }\n            }\n          />\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Skeleton Color 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"borderColor\": \"#e5e7eb\",\n            \"borderRadius\": 6,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"maxWidth\": 400,\n            \"paddingBottom\": 16,\n            \"paddingLeft\": 16,\n            \"paddingRight\": 16,\n            \"paddingTop\": 16,\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          fadeDuration={0.1}\n          speed={1}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderRadius\": 6,\n              \"flex\": 1,\n              \"height\": 150,\n              \"overflow\": \"hidden\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            style={\n              Object {\n                \"backgroundColor\": \"#f3f4f6\",\n                \"height\": \"100%\",\n                \"opacity\": 0,\n                \"width\": \"100%\",\n              }\n            }\n          />\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"width\": 32,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flex\": 3,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            speed={1}\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"height\": 40,\n                \"overflow\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              style={\n                Object {\n                  \"backgroundColor\": \"#fcd34d\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            speed={1}\n            style={\n              Object {\n                \"flexDirection\": \"column\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"75%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"height\": 20,\n                  \"overflow\": \"hidden\",\n                  \"width\": 20,\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"flex\": 2,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"flex\": 1,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#a5b4fc\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Skeleton Composition 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#e5e7eb\",\n            \"borderRadius\": 6,\n            \"borderWidth\": 1,\n            \"maxWidth\": 400,\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          fadeDuration={0.1}\n          speed={1}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"height\": 160,\n              \"overflow\": \"hidden\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            style={\n              Object {\n                \"backgroundColor\": \"#e5e5e5\",\n                \"height\": \"100%\",\n                \"opacity\": 0,\n                \"width\": \"100%\",\n              }\n            }\n          />\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 24,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          fadeDuration={0.1}\n          speed={1}\n          style={\n            Object {\n              \"backgroundColor\": \"#fafaf9\",\n              \"borderColor\": \"#e5e7eb\",\n              \"borderRadius\": 9999,\n              \"borderWidth\": 1,\n              \"height\": 80,\n              \"marginTop\": -70,\n              \"overflow\": \"hidden\",\n              \"width\": 80,\n            }\n          }\n        >\n          <View\n            style={\n              Object {\n                \"backgroundColor\": \"#e5e5e5\",\n                \"height\": \"100%\",\n                \"opacity\": 0,\n                \"width\": \"100%\",\n              }\n            }\n          />\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 24,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            speed={1}\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"borderRadius\": 9999,\n                \"height\": 20,\n                \"overflow\": \"hidden\",\n                \"width\": 20,\n              }\n            }\n          >\n            <View\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            speed={1}\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"borderRadius\": 9999,\n                \"height\": 20,\n                \"overflow\": \"hidden\",\n                \"width\": 20,\n              }\n            }\n          >\n            <View\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            speed={1}\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"borderRadius\": 9999,\n                \"height\": 20,\n                \"overflow\": \"hidden\",\n                \"width\": 20,\n              }\n            }\n          >\n            <View\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            speed={1}\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"borderRadius\": 9999,\n                \"height\": 20,\n                \"overflow\": \"hidden\",\n                \"width\": 20,\n              }\n            }\n          >\n            <View\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 8,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            speed={1}\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"borderRadius\": 9999,\n                \"height\": 20,\n                \"overflow\": \"hidden\",\n                \"width\": 20,\n              }\n            }\n          >\n            <View\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 24,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          fadeDuration={0.1}\n          speed={1}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"column\",\n              \"paddingLeft\": 48,\n              \"paddingRight\": 48,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            speed={1}\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"borderRadius\": 9999,\n                \"height\": 12,\n                \"overflow\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            speed={1}\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"borderRadius\": 9999,\n                \"height\": 12,\n                \"overflow\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            speed={1}\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"borderRadius\": 9999,\n                \"height\": 12,\n                \"overflow\": \"hidden\",\n                \"width\": \"75%\",\n              }\n            }\n          >\n            <View\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 24,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          fadeDuration={0.1}\n          speed={1}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderRadius\": 20,\n              \"height\": 40,\n              \"marginBottom\": 12,\n              \"overflow\": \"hidden\",\n              \"width\": 160,\n            }\n          }\n        >\n          <View\n            style={\n              Object {\n                \"backgroundColor\": \"#e5e5e5\",\n                \"height\": \"100%\",\n                \"opacity\": 0,\n                \"width\": \"100%\",\n              }\n            }\n          />\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Skeleton FadeDuration 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"width\": \"50%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        fadeDuration={0.9}\n        speed={10}\n        style={\n          Object {\n            \"backgroundColor\": \"#22c55e\",\n            \"height\": 80,\n            \"overflow\": \"hidden\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <View\n          style={\n            Object {\n              \"backgroundColor\": \"#db2777\",\n              \"height\": \"100%\",\n              \"opacity\": 0,\n              \"width\": \"100%\",\n            }\n          }\n        />\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Skeleton isLoaded 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"maxWidth\": 400,\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"borderColor\": \"#e5e7eb\",\n              \"borderRadius\": 6,\n              \"borderWidth\": 1,\n              \"maxWidth\": 400,\n              \"overflow\": \"hidden\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            isLoaded={false}\n            speed={1}\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"height\": 160,\n                \"overflow\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 32,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            speed={1}\n            style={\n              Object {\n                \"flexDirection\": \"column\",\n                \"paddingLeft\": 16,\n                \"paddingRight\": 16,\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"75%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 32,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            isLoaded={false}\n            speed={1}\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"borderRadius\": 6,\n                \"height\": 40,\n                \"marginBottom\": 16,\n                \"overflow\": \"hidden\",\n                \"paddingLeft\": 16,\n                \"paddingRight\": 16,\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              style={\n                Object {\n                  \"backgroundColor\": \"#cffafe\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Slider Color 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"maxWidth\": 300,\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <View\n          _interactionBox={\n            Object {\n              \"p\": \"2\",\n            }\n          }\n          aria-label=\"Slider\"\n          colorScheme=\"orange\"\n          dataSet={Object {}}\n          defaultValue={\n            Array [\n              70,\n            ]\n          }\n          sliderTrackHeight={4}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"width\": \"100%\",\n            }\n          }\n          thumbSize={4}\n        >\n          <View\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onLayout={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"height\": 16,\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 12,\n                \"paddingTop\": 12,\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              colorScheme=\"orange\"\n              dataSet={Object {}}\n              isVertical={false}\n              style={\n                Array [\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"borderRadius\": 8,\n                    \"height\": 16,\n                    \"overflow\": \"hidden\",\n                    \"width\": 16,\n                  },\n                  Object {\n                    \"height\": 4,\n                    \"width\": \"100%\",\n                  },\n                ]\n              }\n            >\n              <View\n                colorScheme=\"orange\"\n                dataSet={Object {}}\n                sliderTrackPosition=\"70%\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"#ea580c\",\n                      \"height\": 16,\n                      \"left\": 0,\n                      \"position\": \"absolute\",\n                      \"width\": 16,\n                    },\n                    Object {\n                      \"height\": 4,\n                      \"width\": \"70%\",\n                    },\n                  ]\n                }\n              />\n            </View>\n          </View>\n          <View\n            colorScheme=\"orange\"\n            dataSet={Object {}}\n            onBlur={[Function]}\n            onFocus={[Function]}\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            scaleOnPressed={1}\n            style={\n              Array [\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#ea580c\",\n                  \"borderRadius\": 9999,\n                  \"height\": 16,\n                  \"justifyContent\": \"center\",\n                  \"position\": \"absolute\",\n                  \"width\": 16,\n                  \"zIndex\": 999,\n                },\n                Array [\n                  Object {\n                    \"bottom\": undefined,\n                    \"left\": \"70%\",\n                    \"transform\": Array [\n                      Object {\n                        \"translateX\": -8,\n                      },\n                      Object {\n                        \"scale\": 1,\n                      },\n                    ],\n                  },\n                  undefined,\n                ],\n              ]\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"borderRadius\": 9999,\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 8,\n                    \"paddingRight\": 8,\n                    \"paddingTop\": 8,\n                    \"position\": \"absolute\",\n                    \"zIndex\": -1,\n                  }\n                }\n              />\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <View\n                colorScheme=\"orange\"\n                dataSet={Object {}}\n                scaleOnPressed={1}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#ea580c\",\n                    \"borderRadius\": 9999,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                  }\n                }\n              />\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <View\n          _interactionBox={\n            Object {\n              \"p\": \"2\",\n            }\n          }\n          aria-label=\"Slider\"\n          colorScheme=\"emerald\"\n          dataSet={Object {}}\n          defaultValue={\n            Array [\n              70,\n            ]\n          }\n          sliderTrackHeight={4}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"width\": \"100%\",\n            }\n          }\n          thumbSize={4}\n        >\n          <View\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onLayout={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"height\": 16,\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 12,\n                \"paddingTop\": 12,\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              colorScheme=\"emerald\"\n              dataSet={Object {}}\n              isVertical={false}\n              style={\n                Array [\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"borderRadius\": 8,\n                    \"height\": 16,\n                    \"overflow\": \"hidden\",\n                    \"width\": 16,\n                  },\n                  Object {\n                    \"height\": 4,\n                    \"width\": \"100%\",\n                  },\n                ]\n              }\n            >\n              <View\n                colorScheme=\"emerald\"\n                dataSet={Object {}}\n                sliderTrackPosition=\"70%\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"#059669\",\n                      \"height\": 16,\n                      \"left\": 0,\n                      \"position\": \"absolute\",\n                      \"width\": 16,\n                    },\n                    Object {\n                      \"height\": 4,\n                      \"width\": \"70%\",\n                    },\n                  ]\n                }\n              />\n            </View>\n          </View>\n          <View\n            colorScheme=\"emerald\"\n            dataSet={Object {}}\n            onBlur={[Function]}\n            onFocus={[Function]}\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            scaleOnPressed={1}\n            style={\n              Array [\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#059669\",\n                  \"borderRadius\": 9999,\n                  \"height\": 16,\n                  \"justifyContent\": \"center\",\n                  \"position\": \"absolute\",\n                  \"width\": 16,\n                  \"zIndex\": 999,\n                },\n                Array [\n                  Object {\n                    \"bottom\": undefined,\n                    \"left\": \"70%\",\n                    \"transform\": Array [\n                      Object {\n                        \"translateX\": -8,\n                      },\n                      Object {\n                        \"scale\": 1,\n                      },\n                    ],\n                  },\n                  undefined,\n                ],\n              ]\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"borderRadius\": 9999,\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 8,\n                    \"paddingRight\": 8,\n                    \"paddingTop\": 8,\n                    \"position\": \"absolute\",\n                    \"zIndex\": -1,\n                  }\n                }\n              />\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <View\n                colorScheme=\"emerald\"\n                dataSet={Object {}}\n                scaleOnPressed={1}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#059669\",\n                    \"borderRadius\": 9999,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                  }\n                }\n              />\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <View\n          _interactionBox={\n            Object {\n              \"p\": \"2\",\n            }\n          }\n          aria-label=\"Slider\"\n          colorScheme=\"indigo\"\n          dataSet={Object {}}\n          defaultValue={\n            Array [\n              70,\n            ]\n          }\n          sliderTrackHeight={4}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"width\": \"100%\",\n            }\n          }\n          thumbSize={4}\n        >\n          <View\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onLayout={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"height\": 16,\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 12,\n                \"paddingTop\": 12,\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              colorScheme=\"indigo\"\n              dataSet={Object {}}\n              isVertical={false}\n              style={\n                Array [\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"borderRadius\": 8,\n                    \"height\": 16,\n                    \"overflow\": \"hidden\",\n                    \"width\": 16,\n                  },\n                  Object {\n                    \"height\": 4,\n                    \"width\": \"100%\",\n                  },\n                ]\n              }\n            >\n              <View\n                colorScheme=\"indigo\"\n                dataSet={Object {}}\n                sliderTrackPosition=\"70%\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"#4f46e5\",\n                      \"height\": 16,\n                      \"left\": 0,\n                      \"position\": \"absolute\",\n                      \"width\": 16,\n                    },\n                    Object {\n                      \"height\": 4,\n                      \"width\": \"70%\",\n                    },\n                  ]\n                }\n              />\n            </View>\n          </View>\n          <View\n            colorScheme=\"indigo\"\n            dataSet={Object {}}\n            onBlur={[Function]}\n            onFocus={[Function]}\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            scaleOnPressed={1}\n            style={\n              Array [\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#4f46e5\",\n                  \"borderRadius\": 9999,\n                  \"height\": 16,\n                  \"justifyContent\": \"center\",\n                  \"position\": \"absolute\",\n                  \"width\": 16,\n                  \"zIndex\": 999,\n                },\n                Array [\n                  Object {\n                    \"bottom\": undefined,\n                    \"left\": \"70%\",\n                    \"transform\": Array [\n                      Object {\n                        \"translateX\": -8,\n                      },\n                      Object {\n                        \"scale\": 1,\n                      },\n                    ],\n                  },\n                  undefined,\n                ],\n              ]\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"borderRadius\": 9999,\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 8,\n                    \"paddingRight\": 8,\n                    \"paddingTop\": 8,\n                    \"position\": \"absolute\",\n                    \"zIndex\": -1,\n                  }\n                }\n              />\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <View\n                colorScheme=\"indigo\"\n                dataSet={Object {}}\n                scaleOnPressed={1}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#4f46e5\",\n                    \"borderRadius\": 9999,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                  }\n                }\n              />\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Slider Customized 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        _interactionBox={\n          Object {\n            \"p\": \"2\",\n          }\n        }\n        aria-label=\"Slider\"\n        colorScheme=\"green\"\n        dataSet={Object {}}\n        defaultValue={\n          Array [\n            70,\n          ]\n        }\n        sliderTrackHeight={4}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"justifyContent\": \"center\",\n            \"maxWidth\": 300,\n            \"width\": \"75%\",\n          }\n        }\n        thumbSize={4}\n      >\n        <View\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onLayout={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"height\": 16,\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 12,\n              \"paddingTop\": 12,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            colorScheme=\"green\"\n            dataSet={Object {}}\n            isVertical={false}\n            style={\n              Array [\n                Object {\n                  \"backgroundColor\": \"#dcfce7\",\n                  \"borderRadius\": 8,\n                  \"height\": 16,\n                  \"overflow\": \"hidden\",\n                  \"width\": 16,\n                },\n                Object {\n                  \"height\": 4,\n                  \"width\": \"100%\",\n                },\n              ]\n            }\n          >\n            <View\n              colorScheme=\"green\"\n              dataSet={Object {}}\n              sliderTrackPosition=\"70%\"\n              style={\n                Array [\n                  Object {\n                    \"backgroundColor\": \"#16a34a\",\n                    \"height\": 16,\n                    \"left\": 0,\n                    \"position\": \"absolute\",\n                    \"width\": 16,\n                  },\n                  Object {\n                    \"height\": 4,\n                    \"width\": \"70%\",\n                  },\n                ]\n              }\n            />\n          </View>\n        </View>\n        <View\n          colorScheme=\"green\"\n          dataSet={Object {}}\n          onBlur={[Function]}\n          onFocus={[Function]}\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          scaleOnPressed={1}\n          style={\n            Array [\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"transparent\",\n                \"borderRadius\": 9999,\n                \"borderWidth\": 0,\n                \"height\": 16,\n                \"justifyContent\": \"center\",\n                \"position\": \"absolute\",\n                \"width\": 16,\n                \"zIndex\": 999,\n              },\n              Array [\n                Object {\n                  \"bottom\": undefined,\n                  \"left\": \"70%\",\n                  \"transform\": Array [\n                    Object {\n                      \"translateX\": -8,\n                    },\n                    Object {\n                      \"scale\": 1,\n                    },\n                  ],\n                },\n                undefined,\n              ],\n            ]\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"borderRadius\": 9999,\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 8,\n                  \"paddingRight\": 8,\n                  \"paddingTop\": 8,\n                  \"position\": \"absolute\",\n                  \"zIndex\": -1,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              colorScheme=\"green\"\n              dataSet={Object {}}\n              scaleOnPressed={1}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"borderWidth\": 0,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <Text\n                allowFontScaling={false}\n                dataSet={Object {}}\n                style={\n                  Array [\n                    Object {\n                      \"color\": undefined,\n                      \"fontSize\": 12,\n                    },\n                    Object {\n                      \"color\": \"#16a34a\",\n                      \"fontSize\": 16,\n                      \"height\": 16,\n                      \"lineHeight\": 16,\n                      \"width\": 16,\n                    },\n                    Object {\n                      \"fontFamily\": \"material\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"normal\",\n                    },\n                    Object {},\n                  ]\n                }\n              >\n                \n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Slider Disabled 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"marginLeft\": 20,\n          \"marginRight\": 20,\n          \"width\": \"80%\",\n        }\n      }\n    >\n      <View\n        _interactionBox={\n          Object {\n            \"p\": \"2\",\n          }\n        }\n        aria-label=\"Slider\"\n        colorScheme=\"indigo\"\n        dataSet={Object {}}\n        defaultValue={\n          Array [\n            50,\n          ]\n        }\n        maxValue={100}\n        minValue={0}\n        sliderTrackHeight={4}\n        step={1}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"justifyContent\": \"center\",\n            \"opacity\": 0.6,\n            \"width\": \"100%\",\n          }\n        }\n        thumbSize={4}\n      >\n        <View\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onLayout={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"height\": 16,\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 12,\n              \"paddingTop\": 12,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            colorScheme=\"indigo\"\n            dataSet={Object {}}\n            isVertical={false}\n            style={\n              Array [\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"borderRadius\": 8,\n                  \"height\": 16,\n                  \"overflow\": \"hidden\",\n                  \"width\": 16,\n                },\n                Object {\n                  \"height\": 4,\n                  \"width\": \"100%\",\n                },\n              ]\n            }\n          >\n            <View\n              colorScheme=\"indigo\"\n              dataSet={Object {}}\n              sliderTrackPosition=\"50%\"\n              style={\n                Array [\n                  Object {\n                    \"backgroundColor\": \"#4f46e5\",\n                    \"height\": 16,\n                    \"left\": 0,\n                    \"position\": \"absolute\",\n                    \"width\": 16,\n                  },\n                  Object {\n                    \"height\": 4,\n                    \"width\": \"50%\",\n                  },\n                ]\n              }\n            />\n          </View>\n        </View>\n        <View\n          colorScheme=\"indigo\"\n          dataSet={Object {}}\n          onBlur={[Function]}\n          onFocus={[Function]}\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          scaleOnPressed={1}\n          style={\n            Array [\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#4f46e5\",\n                \"borderRadius\": 9999,\n                \"height\": 16,\n                \"justifyContent\": \"center\",\n                \"position\": \"absolute\",\n                \"width\": 16,\n                \"zIndex\": 999,\n              },\n              Array [\n                Object {\n                  \"bottom\": undefined,\n                  \"left\": \"50%\",\n                  \"transform\": Array [\n                    Object {\n                      \"translateX\": -8,\n                    },\n                    Object {\n                      \"scale\": 1,\n                    },\n                  ],\n                },\n                undefined,\n              ],\n            ]\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"borderRadius\": 9999,\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 8,\n                  \"paddingRight\": 8,\n                  \"paddingTop\": 8,\n                  \"position\": \"absolute\",\n                  \"zIndex\": -1,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              colorScheme=\"indigo\"\n              dataSet={Object {}}\n              scaleOnPressed={1}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#4f46e5\",\n                  \"borderRadius\": 9999,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            />\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Slider Form Controlled 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"maxWidth\": 300,\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          isInvalid={true}\n          style={\n            Object {\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            feedbackId=\"field-197-feedback\"\n            hasFeedbackText={false}\n            hasHelpText={false}\n            helpTextId=\"field-197-helptext\"\n            isDisabled={false}\n            isInvalid={true}\n            isReadOnly={false}\n            isRequired={false}\n            labelId=\"field-197-label\"\n            nativeID=\"field-197-label\"\n            setHasFeedbackText={[Function]}\n            setHasHelpText={[Function]}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n                \"marginBottom\": 4,\n                \"marginTop\": 4,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#737373\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"500\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Set your budget\n            </Text>\n          </View>\n          <View\n            _interactionBox={\n              Object {\n                \"p\": \"2\",\n              }\n            }\n            aria-label=\"Slider\"\n            dataSet={Object {}}\n            defaultValue={\n              Array [\n                50,\n              ]\n            }\n            sliderTrackHeight={4}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"justifyContent\": \"center\",\n                \"width\": \"100%\",\n              }\n            }\n            thumbSize={4}\n          >\n            <View\n              accessible={true}\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onLayout={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"height\": 16,\n                  \"justifyContent\": \"center\",\n                  \"paddingBottom\": 12,\n                  \"paddingTop\": 12,\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                isVertical={false}\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"#e5e5e5\",\n                      \"borderRadius\": 8,\n                      \"height\": 16,\n                      \"overflow\": \"hidden\",\n                      \"width\": 16,\n                    },\n                    Object {\n                      \"height\": 4,\n                      \"width\": \"100%\",\n                    },\n                  ]\n                }\n              >\n                <View\n                  colorScheme=\"primary\"\n                  dataSet={Object {}}\n                  sliderTrackPosition=\"50%\"\n                  style={\n                    Array [\n                      Object {\n                        \"backgroundColor\": \"#0891b2\",\n                        \"height\": 16,\n                        \"left\": 0,\n                        \"position\": \"absolute\",\n                        \"width\": 16,\n                      },\n                      Object {\n                        \"height\": 4,\n                        \"width\": \"50%\",\n                      },\n                    ]\n                  }\n                />\n              </View>\n            </View>\n            <View\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              onBlur={[Function]}\n              onFocus={[Function]}\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              scaleOnPressed={1}\n              style={\n                Array [\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#0891b2\",\n                    \"borderRadius\": 9999,\n                    \"height\": 16,\n                    \"justifyContent\": \"center\",\n                    \"position\": \"absolute\",\n                    \"width\": 16,\n                    \"zIndex\": 999,\n                  },\n                  Array [\n                    Object {\n                      \"bottom\": undefined,\n                      \"left\": \"50%\",\n                      \"transform\": Array [\n                        Object {\n                          \"translateX\": -8,\n                        },\n                        Object {\n                          \"scale\": 1,\n                        },\n                      ],\n                    },\n                    undefined,\n                  ],\n                ]\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"center\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"borderRadius\": 9999,\n                      \"paddingBottom\": 8,\n                      \"paddingLeft\": 8,\n                      \"paddingRight\": 8,\n                      \"paddingTop\": 8,\n                      \"position\": \"absolute\",\n                      \"zIndex\": -1,\n                    }\n                  }\n                />\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 8,\n                    }\n                  }\n                />\n                <View\n                  colorScheme=\"primary\"\n                  dataSet={Object {}}\n                  scaleOnPressed={1}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"#0891b2\",\n                      \"borderRadius\": 9999,\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                    }\n                  }\n                />\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            feedbackId=\"field-197-feedback\"\n            hasFeedbackText={false}\n            hasHelpText={false}\n            helpTextId=\"field-197-helptext\"\n            isDisabled={false}\n            isInvalid={true}\n            isReadOnly={false}\n            isRequired={false}\n            labelId=\"field-197-label\"\n            nativeID=\"field-197\"\n            setHasFeedbackText={[Function]}\n            setHasHelpText={[Function]}\n            style={\n              Object {\n                \"marginTop\": 8,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={4292617766}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#dc2626\",\n                      \"fontSize\": 12,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={4292617766}\n                vbHeight={16}\n                vbWidth={16}\n              >\n                <RNSVGGroup\n                  font={\n                    Object {\n                      \"fontSize\": 12,\n                    }\n                  }\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M8 16C6.41775 16 4.87103 15.5308 3.55544 14.6518C2.23985 13.7727 1.21447 12.5233 0.608967 11.0615C0.00346627 9.59966 -0.15496 7.99113 0.153721 6.43928C0.462403 4.88743 1.22433 3.46197 2.34315 2.34315C3.46197 1.22433 4.88743 0.462403 6.43928 0.153721C7.99113 -0.15496 9.59966 0.00346627 11.0615 0.608967C12.5233 1.21447 13.7727 2.23985 14.6518 3.55544C15.5308 4.87103 16 6.41775 16 8C16 10.1217 15.1571 12.1566 13.6569 13.6569C12.1566 15.1571 10.1217 16 8 16ZM8 14.4C9.2658 14.4 10.5032 14.0246 11.5556 13.3214C12.6081 12.6182 13.4284 11.6186 13.9128 10.4492C14.3972 9.27973 14.524 7.9929 14.277 6.75142C14.0301 5.50995 13.4205 4.36958 12.5255 3.47452C11.6304 2.57946 10.4901 1.96992 9.24858 1.72298C8.0071 1.47603 6.72028 1.60277 5.55083 2.08717C4.38138 2.57158 3.38184 3.39188 2.6786 4.44435C1.97536 5.49683 1.6 6.7342 1.6 8C1.6 9.69739 2.27429 11.3253 3.47452 12.5255C4.67475 13.7257 6.30262 14.4 8 14.4ZM7.2 10.4H8.8V12H7.2V10.4ZM7.2 4H8.8V8.8H7.2V4Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 4,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#dc2626\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 18,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Something is wrong.\n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Slider Playground 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"marginLeft\": 20,\n          \"marginRight\": 20,\n          \"width\": \"80%\",\n        }\n      }\n    >\n      <View\n        _interactionBox={\n          Object {\n            \"p\": \"2\",\n          }\n        }\n        aria-label=\"Slider\"\n        dataSet={Object {}}\n        defaultValue={\n          Array [\n            50,\n          ]\n        }\n        maxValue={100}\n        minValue={0}\n        sliderTrackHeight={4}\n        step={1}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"justifyContent\": \"center\",\n            \"width\": \"100%\",\n          }\n        }\n        thumbSize={4}\n      >\n        <View\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onLayout={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"height\": 16,\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 12,\n              \"paddingTop\": 12,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            isVertical={false}\n            style={\n              Array [\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"borderRadius\": 8,\n                  \"height\": 16,\n                  \"overflow\": \"hidden\",\n                  \"width\": 16,\n                },\n                Object {\n                  \"height\": 4,\n                  \"width\": \"100%\",\n                },\n              ]\n            }\n          >\n            <View\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              sliderTrackPosition=\"50%\"\n              style={\n                Array [\n                  Object {\n                    \"backgroundColor\": \"#0891b2\",\n                    \"height\": 16,\n                    \"left\": 0,\n                    \"position\": \"absolute\",\n                    \"width\": 16,\n                  },\n                  Object {\n                    \"height\": 4,\n                    \"width\": \"50%\",\n                  },\n                ]\n              }\n            />\n          </View>\n        </View>\n        <View\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          onBlur={[Function]}\n          onFocus={[Function]}\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          scaleOnPressed={1}\n          style={\n            Array [\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#0891b2\",\n                \"borderRadius\": 9999,\n                \"height\": 16,\n                \"justifyContent\": \"center\",\n                \"position\": \"absolute\",\n                \"width\": 16,\n                \"zIndex\": 999,\n              },\n              Array [\n                Object {\n                  \"bottom\": undefined,\n                  \"left\": \"50%\",\n                  \"transform\": Array [\n                    Object {\n                      \"translateX\": -8,\n                    },\n                    Object {\n                      \"scale\": 1,\n                    },\n                  ],\n                },\n                undefined,\n              ],\n            ]\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"borderRadius\": 9999,\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 8,\n                  \"paddingRight\": 8,\n                  \"paddingTop\": 8,\n                  \"position\": \"absolute\",\n                  \"zIndex\": -1,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              scaleOnPressed={1}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#0891b2\",\n                  \"borderRadius\": 9999,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            />\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Slider ReadOnly 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"marginLeft\": 20,\n          \"marginRight\": 20,\n          \"width\": \"80%\",\n        }\n      }\n    >\n      <View\n        _interactionBox={\n          Object {\n            \"p\": \"2\",\n          }\n        }\n        aria-label=\"Slider\"\n        dataSet={Object {}}\n        defaultValue={\n          Array [\n            50,\n          ]\n        }\n        maxValue={100}\n        minValue={0}\n        sliderTrackHeight={4}\n        step={1}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"justifyContent\": \"center\",\n            \"width\": \"100%\",\n          }\n        }\n        thumbSize={4}\n      >\n        <View\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onLayout={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"height\": 16,\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 12,\n              \"paddingTop\": 12,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            isVertical={false}\n            style={\n              Array [\n                Object {\n                  \"backgroundColor\": \"#e0e7ff\",\n                  \"borderRadius\": 8,\n                  \"height\": 16,\n                  \"overflow\": \"hidden\",\n                  \"width\": 16,\n                },\n                Object {\n                  \"height\": 4,\n                  \"width\": \"100%\",\n                },\n              ]\n            }\n          >\n            <View\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              sliderTrackPosition=\"50%\"\n              style={\n                Array [\n                  Object {\n                    \"backgroundColor\": \"#4f46e5\",\n                    \"height\": 16,\n                    \"left\": 0,\n                    \"position\": \"absolute\",\n                    \"width\": 16,\n                  },\n                  Object {\n                    \"height\": 4,\n                    \"width\": \"50%\",\n                  },\n                ]\n              }\n            />\n          </View>\n        </View>\n        <View\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          onBlur={[Function]}\n          onFocus={[Function]}\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          scaleOnPressed={1}\n          style={\n            Array [\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#4f46e5\",\n                \"borderRadius\": 9999,\n                \"height\": 16,\n                \"justifyContent\": \"center\",\n                \"position\": \"absolute\",\n                \"width\": 16,\n                \"zIndex\": 999,\n              },\n              Array [\n                Object {\n                  \"bottom\": undefined,\n                  \"left\": \"50%\",\n                  \"transform\": Array [\n                    Object {\n                      \"translateX\": -8,\n                    },\n                    Object {\n                      \"scale\": 1,\n                    },\n                  ],\n                },\n                undefined,\n              ],\n            ]\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"borderRadius\": 9999,\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 8,\n                  \"paddingRight\": 8,\n                  \"paddingTop\": 8,\n                  \"position\": \"absolute\",\n                  \"zIndex\": -1,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              scaleOnPressed={1}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#4f46e5\",\n                  \"borderRadius\": 9999,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            />\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Slider Size 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"maxWidth\": 300,\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <View\n          _interactionBox={\n            Object {\n              \"p\": \"2\",\n            }\n          }\n          aria-label=\"Slider\"\n          dataSet={Object {}}\n          defaultValue={\n            Array [\n              40,\n            ]\n          }\n          sliderTrackHeight={4}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"width\": \"100%\",\n            }\n          }\n          thumbSize={4}\n        >\n          <View\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onLayout={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"height\": 16,\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 12,\n                \"paddingTop\": 12,\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              isVertical={false}\n              style={\n                Array [\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"borderRadius\": 8,\n                    \"height\": 16,\n                    \"overflow\": \"hidden\",\n                    \"width\": 16,\n                  },\n                  Object {\n                    \"height\": 4,\n                    \"width\": \"100%\",\n                  },\n                ]\n              }\n            >\n              <View\n                colorScheme=\"primary\"\n                dataSet={Object {}}\n                sliderTrackPosition=\"40%\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"#0891b2\",\n                      \"height\": 16,\n                      \"left\": 0,\n                      \"position\": \"absolute\",\n                      \"width\": 16,\n                    },\n                    Object {\n                      \"height\": 4,\n                      \"width\": \"40%\",\n                    },\n                  ]\n                }\n              />\n            </View>\n          </View>\n          <View\n            colorScheme=\"primary\"\n            dataSet={Object {}}\n            onBlur={[Function]}\n            onFocus={[Function]}\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            scaleOnPressed={1}\n            style={\n              Array [\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#0891b2\",\n                  \"borderRadius\": 9999,\n                  \"height\": 16,\n                  \"justifyContent\": \"center\",\n                  \"position\": \"absolute\",\n                  \"width\": 16,\n                  \"zIndex\": 999,\n                },\n                Array [\n                  Object {\n                    \"bottom\": undefined,\n                    \"left\": \"40%\",\n                    \"transform\": Array [\n                      Object {\n                        \"translateX\": -8,\n                      },\n                      Object {\n                        \"scale\": 1,\n                      },\n                    ],\n                  },\n                  undefined,\n                ],\n              ]\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"borderRadius\": 9999,\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 8,\n                    \"paddingRight\": 8,\n                    \"paddingTop\": 8,\n                    \"position\": \"absolute\",\n                    \"zIndex\": -1,\n                  }\n                }\n              />\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <View\n                colorScheme=\"primary\"\n                dataSet={Object {}}\n                scaleOnPressed={1}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#0891b2\",\n                    \"borderRadius\": 9999,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                  }\n                }\n              />\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <View\n          _interactionBox={\n            Object {\n              \"p\": \"2.5\",\n            }\n          }\n          aria-label=\"Slider\"\n          dataSet={Object {}}\n          defaultValue={\n            Array [\n              60,\n            ]\n          }\n          sliderTrackHeight={5}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"width\": \"100%\",\n            }\n          }\n          thumbSize={5}\n        >\n          <View\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onLayout={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"height\": 20,\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 12,\n                \"paddingTop\": 12,\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              isVertical={false}\n              style={\n                Array [\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"borderRadius\": 8,\n                    \"height\": 20,\n                    \"overflow\": \"hidden\",\n                    \"width\": 20,\n                  },\n                  Object {\n                    \"height\": 5,\n                    \"width\": \"100%\",\n                  },\n                ]\n              }\n            >\n              <View\n                colorScheme=\"primary\"\n                dataSet={Object {}}\n                sliderTrackPosition=\"60%\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"#0891b2\",\n                      \"height\": 20,\n                      \"left\": 0,\n                      \"position\": \"absolute\",\n                      \"width\": 20,\n                    },\n                    Object {\n                      \"height\": 5,\n                      \"width\": \"60%\",\n                    },\n                  ]\n                }\n              />\n            </View>\n          </View>\n          <View\n            colorScheme=\"primary\"\n            dataSet={Object {}}\n            onBlur={[Function]}\n            onFocus={[Function]}\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            scaleOnPressed={1}\n            style={\n              Array [\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#0891b2\",\n                  \"borderRadius\": 9999,\n                  \"height\": 20,\n                  \"justifyContent\": \"center\",\n                  \"position\": \"absolute\",\n                  \"width\": 20,\n                  \"zIndex\": 999,\n                },\n                Array [\n                  Object {\n                    \"bottom\": undefined,\n                    \"left\": \"60%\",\n                    \"transform\": Array [\n                      Object {\n                        \"translateX\": -10,\n                      },\n                      Object {\n                        \"scale\": 1,\n                      },\n                    ],\n                  },\n                  undefined,\n                ],\n              ]\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"borderRadius\": 9999,\n                    \"paddingBottom\": 10,\n                    \"paddingLeft\": 10,\n                    \"paddingRight\": 10,\n                    \"paddingTop\": 10,\n                    \"position\": \"absolute\",\n                    \"zIndex\": -1,\n                  }\n                }\n              />\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <View\n                colorScheme=\"primary\"\n                dataSet={Object {}}\n                scaleOnPressed={1}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#0891b2\",\n                    \"borderRadius\": 9999,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                  }\n                }\n              />\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <View\n          _interactionBox={\n            Object {\n              \"p\": \"3\",\n            }\n          }\n          aria-label=\"Slider\"\n          dataSet={Object {}}\n          defaultValue={\n            Array [\n              80,\n            ]\n          }\n          sliderTrackHeight={6}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"width\": \"100%\",\n            }\n          }\n          thumbSize={6}\n        >\n          <View\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onLayout={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"height\": 24,\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 12,\n                \"paddingTop\": 12,\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              isVertical={false}\n              style={\n                Array [\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"borderRadius\": 8,\n                    \"height\": 24,\n                    \"overflow\": \"hidden\",\n                    \"width\": 24,\n                  },\n                  Object {\n                    \"height\": 6,\n                    \"width\": \"100%\",\n                  },\n                ]\n              }\n            >\n              <View\n                colorScheme=\"primary\"\n                dataSet={Object {}}\n                sliderTrackPosition=\"80%\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"#0891b2\",\n                      \"height\": 24,\n                      \"left\": 0,\n                      \"position\": \"absolute\",\n                      \"width\": 24,\n                    },\n                    Object {\n                      \"height\": 6,\n                      \"width\": \"80%\",\n                    },\n                  ]\n                }\n              />\n            </View>\n          </View>\n          <View\n            colorScheme=\"primary\"\n            dataSet={Object {}}\n            onBlur={[Function]}\n            onFocus={[Function]}\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            scaleOnPressed={1}\n            style={\n              Array [\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#0891b2\",\n                  \"borderRadius\": 9999,\n                  \"height\": 24,\n                  \"justifyContent\": \"center\",\n                  \"position\": \"absolute\",\n                  \"width\": 24,\n                  \"zIndex\": 999,\n                },\n                Array [\n                  Object {\n                    \"bottom\": undefined,\n                    \"left\": \"80%\",\n                    \"transform\": Array [\n                      Object {\n                        \"translateX\": -12,\n                      },\n                      Object {\n                        \"scale\": 1,\n                      },\n                    ],\n                  },\n                  undefined,\n                ],\n              ]\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"borderRadius\": 9999,\n                    \"paddingBottom\": 12,\n                    \"paddingLeft\": 12,\n                    \"paddingRight\": 12,\n                    \"paddingTop\": 12,\n                    \"position\": \"absolute\",\n                    \"zIndex\": -1,\n                  }\n                }\n              />\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <View\n                colorScheme=\"primary\"\n                dataSet={Object {}}\n                scaleOnPressed={1}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#0891b2\",\n                    \"borderRadius\": 9999,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                  }\n                }\n              />\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Slider Usage 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        _interactionBox={\n          Object {\n            \"p\": \"2\",\n          }\n        }\n        accessibilityLabel=\"hello world\"\n        aria-label=\"hello world\"\n        dataSet={Object {}}\n        defaultValue={\n          Array [\n            70,\n          ]\n        }\n        maxValue={100}\n        minValue={0}\n        sliderTrackHeight={4}\n        step={10}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"justifyContent\": \"center\",\n            \"maxWidth\": 300,\n            \"width\": \"75%\",\n          }\n        }\n        thumbSize={4}\n      >\n        <View\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onLayout={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"height\": 16,\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 12,\n              \"paddingTop\": 12,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            isVertical={false}\n            style={\n              Array [\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"borderRadius\": 8,\n                  \"height\": 16,\n                  \"overflow\": \"hidden\",\n                  \"width\": 16,\n                },\n                Object {\n                  \"height\": 4,\n                  \"width\": \"100%\",\n                },\n              ]\n            }\n          >\n            <View\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              sliderTrackPosition=\"70%\"\n              style={\n                Array [\n                  Object {\n                    \"backgroundColor\": \"#0891b2\",\n                    \"height\": 16,\n                    \"left\": 0,\n                    \"position\": \"absolute\",\n                    \"width\": 16,\n                  },\n                  Object {\n                    \"height\": 4,\n                    \"width\": \"70%\",\n                  },\n                ]\n              }\n            />\n          </View>\n        </View>\n        <View\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          onBlur={[Function]}\n          onFocus={[Function]}\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          scaleOnPressed={1}\n          style={\n            Array [\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#0891b2\",\n                \"borderRadius\": 9999,\n                \"height\": 16,\n                \"justifyContent\": \"center\",\n                \"position\": \"absolute\",\n                \"width\": 16,\n                \"zIndex\": 999,\n              },\n              Array [\n                Object {\n                  \"bottom\": undefined,\n                  \"left\": \"70%\",\n                  \"transform\": Array [\n                    Object {\n                      \"translateX\": -8,\n                    },\n                    Object {\n                      \"scale\": 1,\n                    },\n                  ],\n                },\n                undefined,\n              ],\n            ]\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"borderRadius\": 9999,\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 8,\n                  \"paddingRight\": 8,\n                  \"paddingTop\": 8,\n                  \"position\": \"absolute\",\n                  \"zIndex\": -1,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              scaleOnPressed={1}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#0891b2\",\n                  \"borderRadius\": 9999,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            />\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Slider Value 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"maxWidth\": 300,\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"textAlign\": \"center\",\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          onChangeValue - \n          70\n        </Text>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"textAlign\": \"center\",\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          onChangeEndValue - \n          70\n        </Text>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <View\n          _interactionBox={\n            Object {\n              \"p\": \"2\",\n            }\n          }\n          aria-label=\"Slider\"\n          colorScheme=\"cyan\"\n          dataSet={Object {}}\n          defaultValue={\n            Array [\n              70,\n            ]\n          }\n          onChange={[Function]}\n          onChangeEnd={[Function]}\n          sliderTrackHeight={4}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"width\": \"100%\",\n            }\n          }\n          thumbSize={4}\n        >\n          <View\n            accessible={true}\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onLayout={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"height\": 16,\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 12,\n                \"paddingTop\": 12,\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              colorScheme=\"cyan\"\n              dataSet={Object {}}\n              isVertical={false}\n              style={\n                Array [\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"borderRadius\": 8,\n                    \"height\": 16,\n                    \"overflow\": \"hidden\",\n                    \"width\": 16,\n                  },\n                  Object {\n                    \"height\": 4,\n                    \"width\": \"100%\",\n                  },\n                ]\n              }\n            >\n              <View\n                colorScheme=\"cyan\"\n                dataSet={Object {}}\n                sliderTrackPosition=\"70%\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"#0891b2\",\n                      \"height\": 16,\n                      \"left\": 0,\n                      \"position\": \"absolute\",\n                      \"width\": 16,\n                    },\n                    Object {\n                      \"height\": 4,\n                      \"width\": \"70%\",\n                    },\n                  ]\n                }\n              />\n            </View>\n          </View>\n          <View\n            colorScheme=\"cyan\"\n            dataSet={Object {}}\n            onBlur={[Function]}\n            onFocus={[Function]}\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            scaleOnPressed={1}\n            style={\n              Array [\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#0891b2\",\n                  \"borderRadius\": 9999,\n                  \"height\": 16,\n                  \"justifyContent\": \"center\",\n                  \"position\": \"absolute\",\n                  \"width\": 16,\n                  \"zIndex\": 999,\n                },\n                Array [\n                  Object {\n                    \"bottom\": undefined,\n                    \"left\": \"70%\",\n                    \"transform\": Array [\n                      Object {\n                        \"translateX\": -8,\n                      },\n                      Object {\n                        \"scale\": 1,\n                      },\n                    ],\n                  },\n                  undefined,\n                ],\n              ]\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"borderRadius\": 9999,\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 8,\n                    \"paddingRight\": 8,\n                    \"paddingTop\": 8,\n                    \"position\": \"absolute\",\n                    \"zIndex\": -1,\n                  }\n                }\n              />\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 8,\n                  }\n                }\n              />\n              <View\n                colorScheme=\"cyan\"\n                dataSet={Object {}}\n                scaleOnPressed={1}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"#0891b2\",\n                    \"borderRadius\": 9999,\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                  }\n                }\n              />\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Slider Vertical 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"marginLeft\": 20,\n          \"marginRight\": 20,\n          \"width\": \"80%\",\n        }\n      }\n    >\n      <View\n        _interactionBox={\n          Object {\n            \"p\": \"2\",\n          }\n        }\n        aria-label=\"Slider\"\n        colorScheme=\"teal\"\n        dataSet={Object {}}\n        defaultValue={\n          Array [\n            70,\n          ]\n        }\n        orientation=\"vertical\"\n        sliderTrackHeight={4}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"height\": 192,\n            \"justifyContent\": \"center\",\n          }\n        }\n        thumbSize={4}\n      >\n        <View\n          accessible={true}\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onLayout={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"height\": \"100%\",\n              \"justifyContent\": \"center\",\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"width\": 16,\n            }\n          }\n        >\n          <View\n            colorScheme=\"teal\"\n            dataSet={Object {}}\n            isVertical={true}\n            style={\n              Array [\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"borderRadius\": 8,\n                  \"height\": 16,\n                  \"overflow\": \"hidden\",\n                  \"width\": 16,\n                },\n                Object {\n                  \"height\": \"100%\",\n                  \"width\": 4,\n                },\n              ]\n            }\n          >\n            <View\n              colorScheme=\"teal\"\n              dataSet={Object {}}\n              orientation=\"vertical\"\n              sliderTrackPosition=\"70%\"\n              style={\n                Array [\n                  Object {\n                    \"backgroundColor\": \"#0d9488\",\n                    \"bottom\": 0,\n                    \"height\": 16,\n                    \"position\": \"absolute\",\n                    \"width\": 16,\n                  },\n                  Object {\n                    \"height\": \"70%\",\n                    \"width\": 4,\n                  },\n                ]\n              }\n            />\n          </View>\n        </View>\n        <View\n          colorScheme=\"teal\"\n          dataSet={Object {}}\n          onBlur={[Function]}\n          onFocus={[Function]}\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          scaleOnPressed={1}\n          style={\n            Array [\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#0d9488\",\n                \"borderRadius\": 9999,\n                \"height\": 16,\n                \"justifyContent\": \"center\",\n                \"position\": \"absolute\",\n                \"width\": 16,\n                \"zIndex\": 999,\n              },\n              Array [\n                Object {\n                  \"bottom\": \"70%\",\n                  \"left\": undefined,\n                  \"transform\": Array [\n                    Object {\n                      \"translateY\": 8,\n                    },\n                    Object {\n                      \"scale\": 1,\n                    },\n                  ],\n                },\n                undefined,\n              ],\n            ]\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"borderRadius\": 9999,\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 8,\n                  \"paddingRight\": 8,\n                  \"paddingTop\": 8,\n                  \"position\": \"absolute\",\n                  \"zIndex\": -1,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              colorScheme=\"teal\"\n              dataSet={Object {}}\n              scaleOnPressed={1}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#0d9488\",\n                  \"borderRadius\": 9999,\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                }\n              }\n            />\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Spinner Color 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <ActivityIndicator\n        accessibilityLabel=\"loading\"\n        accessible={true}\n        animating={true}\n        color=\"#10b981\"\n        hidesWhenStopped={true}\n        size=\"small\"\n        style={\n          Array [\n            Array [\n              Object {},\n              Object {\n                \"dataSet\": Object {},\n              },\n              Object {},\n            ],\n            undefined,\n          ]\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 32,\n          }\n        }\n      />\n      <ActivityIndicator\n        accessibilityLabel=\"loading\"\n        accessible={true}\n        animating={true}\n        color=\"#f97316\"\n        hidesWhenStopped={true}\n        size=\"small\"\n        style={\n          Array [\n            Array [\n              Object {},\n              Object {\n                \"dataSet\": Object {},\n              },\n              Object {},\n            ],\n            undefined,\n          ]\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 32,\n          }\n        }\n      />\n      <ActivityIndicator\n        accessibilityLabel=\"loading\"\n        accessible={true}\n        animating={true}\n        color=\"#6366f1\"\n        hidesWhenStopped={true}\n        size=\"small\"\n        style={\n          Array [\n            Array [\n              Object {},\n              Object {\n                \"dataSet\": Object {},\n              },\n              Object {},\n            ],\n            undefined,\n          ]\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 32,\n          }\n        }\n      />\n      <ActivityIndicator\n        accessibilityLabel=\"loading\"\n        accessible={true}\n        animating={true}\n        color=\"#06b6d4\"\n        hidesWhenStopped={true}\n        size=\"small\"\n        style={\n          Array [\n            Array [\n              Object {},\n              Object {\n                \"dataSet\": Object {},\n              },\n              Object {},\n            ],\n            undefined,\n          ]\n        }\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Spinner Playground 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"space-between\",\n        }\n      }\n    >\n      <ActivityIndicator\n        accessibilityLabel=\"loading\"\n        accessible={true}\n        animating={true}\n        color=\"#67e8f9\"\n        hidesWhenStopped={true}\n        size=\"large\"\n        style={\n          Array [\n            Array [\n              Object {},\n              Object {\n                \"dataSet\": Object {},\n              },\n              Object {},\n            ],\n            undefined,\n          ]\n        }\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Spinner Size 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <ActivityIndicator\n        accessibilityLabel=\"loading\"\n        accessible={true}\n        animating={true}\n        color=\"#0891b2\"\n        hidesWhenStopped={true}\n        size=\"small\"\n        style={\n          Array [\n            Array [\n              Object {},\n              Object {\n                \"dataSet\": Object {},\n              },\n              Object {},\n            ],\n            undefined,\n          ]\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 32,\n          }\n        }\n      />\n      <ActivityIndicator\n        accessibilityLabel=\"loading\"\n        accessible={true}\n        animating={true}\n        color=\"#0891b2\"\n        hidesWhenStopped={true}\n        size=\"large\"\n        style={\n          Array [\n            Array [\n              Object {},\n              Object {\n                \"dataSet\": Object {},\n              },\n              Object {},\n            ],\n            undefined,\n          ]\n        }\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Spinner Usage 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <ActivityIndicator\n        accessibilityLabel=\"loading\"\n        accessible={true}\n        animating={true}\n        color=\"#0891b2\"\n        hidesWhenStopped={true}\n        size=\"small\"\n        style={\n          Array [\n            Array [\n              Object {},\n              Object {\n                \"accessibilityLabel\": \"Loading posts\",\n                \"dataSet\": Object {},\n              },\n              Object {},\n            ],\n            undefined,\n          ]\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 8,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#06b6d4\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 16,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 20,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Loading\n      </Text>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Stack Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <RCTScrollView\n      contentContainerStyle={\n        Array [\n          Object {},\n          Object {\n            \"dataSet\": Object {},\n          },\n          Object {},\n        ]\n      }\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"marginTop\": 16,\n              \"paddingLeft\": 32,\n              \"paddingRight\": 32,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            row\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"marginBottom\": 10,\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#22d3ee\",\n                  \"borderRadius\": 4,\n                  \"display\": \"flex\",\n                  \"elevation\": 4,\n                  \"height\": 64,\n                  \"justifyContent\": \"center\",\n                  \"shadowColor\": \"#000000\",\n                  \"shadowOffset\": Object {\n                    \"height\": 2,\n                    \"width\": 0,\n                  },\n                  \"shadowOpacity\": 0.23,\n                  \"shadowRadius\": 2.62,\n                  \"width\": 64,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafaf9\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Box 1\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#06b6d4\",\n                  \"borderRadius\": 4,\n                  \"display\": \"flex\",\n                  \"elevation\": 4,\n                  \"height\": 64,\n                  \"justifyContent\": \"center\",\n                  \"shadowColor\": \"#000000\",\n                  \"shadowOffset\": Object {\n                    \"height\": 2,\n                    \"width\": 0,\n                  },\n                  \"shadowOpacity\": 0.23,\n                  \"shadowRadius\": 2.62,\n                  \"width\": 64,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafaf9\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Box 2\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#0e7490\",\n                  \"borderRadius\": 4,\n                  \"display\": \"flex\",\n                  \"elevation\": 4,\n                  \"height\": 64,\n                  \"justifyContent\": \"center\",\n                  \"shadowColor\": \"#000000\",\n                  \"shadowOffset\": Object {\n                    \"height\": 2,\n                    \"width\": 0,\n                  },\n                  \"shadowOpacity\": 0.23,\n                  \"shadowRadius\": 2.62,\n                  \"width\": 64,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafaf9\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Box 3\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            column\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"column\",\n                \"marginBottom\": 10,\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#22d3ee\",\n                  \"borderRadius\": 4,\n                  \"display\": \"flex\",\n                  \"elevation\": 4,\n                  \"height\": 64,\n                  \"justifyContent\": \"center\",\n                  \"shadowColor\": \"#000000\",\n                  \"shadowOffset\": Object {\n                    \"height\": 2,\n                    \"width\": 0,\n                  },\n                  \"shadowOpacity\": 0.23,\n                  \"shadowRadius\": 2.62,\n                  \"width\": 64,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafaf9\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Box 1\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#06b6d4\",\n                  \"borderRadius\": 4,\n                  \"display\": \"flex\",\n                  \"elevation\": 4,\n                  \"height\": 64,\n                  \"justifyContent\": \"center\",\n                  \"shadowColor\": \"#000000\",\n                  \"shadowOffset\": Object {\n                    \"height\": 2,\n                    \"width\": 0,\n                  },\n                  \"shadowOpacity\": 0.23,\n                  \"shadowRadius\": 2.62,\n                  \"width\": 64,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafaf9\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Box 2\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#0e7490\",\n                  \"borderRadius\": 4,\n                  \"display\": \"flex\",\n                  \"elevation\": 4,\n                  \"height\": 64,\n                  \"justifyContent\": \"center\",\n                  \"shadowColor\": \"#000000\",\n                  \"shadowOffset\": Object {\n                    \"height\": 2,\n                    \"width\": 0,\n                  },\n                  \"shadowOpacity\": 0.23,\n                  \"shadowRadius\": 2.62,\n                  \"width\": 64,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafaf9\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Box 3\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            row-reverse\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"row\",\n                \"marginBottom\": 10,\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#0e7490\",\n                  \"borderRadius\": 4,\n                  \"display\": \"flex\",\n                  \"elevation\": 4,\n                  \"height\": 64,\n                  \"justifyContent\": \"center\",\n                  \"shadowColor\": \"#000000\",\n                  \"shadowOffset\": Object {\n                    \"height\": 2,\n                    \"width\": 0,\n                  },\n                  \"shadowOpacity\": 0.23,\n                  \"shadowRadius\": 2.62,\n                  \"width\": 64,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafaf9\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Box 3\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#06b6d4\",\n                  \"borderRadius\": 4,\n                  \"display\": \"flex\",\n                  \"elevation\": 4,\n                  \"height\": 64,\n                  \"justifyContent\": \"center\",\n                  \"shadowColor\": \"#000000\",\n                  \"shadowOffset\": Object {\n                    \"height\": 2,\n                    \"width\": 0,\n                  },\n                  \"shadowOpacity\": 0.23,\n                  \"shadowRadius\": 2.62,\n                  \"width\": 64,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafaf9\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Box 2\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#22d3ee\",\n                  \"borderRadius\": 4,\n                  \"display\": \"flex\",\n                  \"elevation\": 4,\n                  \"height\": 64,\n                  \"justifyContent\": \"center\",\n                  \"shadowColor\": \"#000000\",\n                  \"shadowOffset\": Object {\n                    \"height\": 2,\n                    \"width\": 0,\n                  },\n                  \"shadowOpacity\": 0.23,\n                  \"shadowRadius\": 2.62,\n                  \"width\": 64,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafaf9\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Box 1\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 20,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 25,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            column-reverse\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"flexDirection\": \"column-reverse\",\n                \"marginBottom\": 10,\n                \"marginTop\": 6,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#22d3ee\",\n                  \"borderRadius\": 4,\n                  \"display\": \"flex\",\n                  \"elevation\": 4,\n                  \"height\": 64,\n                  \"justifyContent\": \"center\",\n                  \"shadowColor\": \"#000000\",\n                  \"shadowOffset\": Object {\n                    \"height\": 2,\n                    \"width\": 0,\n                  },\n                  \"shadowOpacity\": 0.23,\n                  \"shadowRadius\": 2.62,\n                  \"width\": 64,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafaf9\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Box 1\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#06b6d4\",\n                  \"borderRadius\": 4,\n                  \"display\": \"flex\",\n                  \"elevation\": 4,\n                  \"height\": 64,\n                  \"justifyContent\": \"center\",\n                  \"shadowColor\": \"#000000\",\n                  \"shadowOffset\": Object {\n                    \"height\": 2,\n                    \"width\": 0,\n                  },\n                  \"shadowOpacity\": 0.23,\n                  \"shadowRadius\": 2.62,\n                  \"width\": 64,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafaf9\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Box 2\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#0e7490\",\n                  \"borderRadius\": 4,\n                  \"display\": \"flex\",\n                  \"elevation\": 4,\n                  \"height\": 64,\n                  \"justifyContent\": \"center\",\n                  \"shadowColor\": \"#000000\",\n                  \"shadowOffset\": Object {\n                    \"height\": 2,\n                    \"width\": 0,\n                  },\n                  \"shadowOpacity\": 0.23,\n                  \"shadowRadius\": 2.62,\n                  \"width\": 64,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafaf9\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Box 3\n              </Text>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 10,\n              }\n            }\n          />\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n        </View>\n      </View>\n    </RCTScrollView>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Stack Divider 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"marginBottom\": 12,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Simple\n            </Text>\n          </View>\n          <View\n            aria-orientation=\"vertical\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#e5e7eb\",\n                \"height\": \"100%\",\n                \"marginLeft\": 8,\n                \"marginRight\": 8,\n                \"width\": 2,\n              }\n            }\n            thickness=\"2\"\n          />\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Easy\n            </Text>\n          </View>\n          <View\n            aria-orientation=\"vertical\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#e5e7eb\",\n                \"height\": \"100%\",\n                \"marginLeft\": 8,\n                \"marginRight\": 8,\n                \"width\": 2,\n              }\n            }\n            thickness=\"2\"\n          />\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Beautiful\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots StatusBar Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"flex\": 1,\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 14,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 21,\n            \"marginBottom\": 12,\n            \"textAlign\": \"center\",\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        StatusBar Visibility:\n        \n\n        Visible\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"paddingBottom\": 40,\n            \"paddingLeft\": 40,\n            \"paddingRight\": 40,\n            \"paddingTop\": 40,\n          }\n        }\n      >\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Toggle StatusBar\n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Switch Accessibility 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"flexDirection\": \"row\",\n        }\n      }\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 18,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 27,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Accessibility\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 32,\n          }\n        }\n      />\n      <RCTSwitch\n        accessibilityHint=\"turn on or off\"\n        accessibilityLabel=\"switch-accessible\"\n        accessibilityRole=\"switch\"\n        activeThumbColor=\"#fafafa\"\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        onChange={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        onTintColor=\"#0891b2\"\n        style={\n          Array [\n            Object {\n              \"height\": 31,\n              \"width\": 51,\n            },\n            Array [\n              Object {},\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"borderRadius\": 16,\n              },\n            ],\n          ]\n        }\n        thumbTintColor=\"#fafafa\"\n        tintColor=\"#d4d4d4\"\n        value={false}\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Switch Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"flexDirection\": \"row\",\n        }\n      }\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 14,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 21,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Bluetooth\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 16,\n          }\n        }\n      />\n      <RCTSwitch\n        accessibilityRole=\"switch\"\n        activeThumbColor=\"#fafafa\"\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        onChange={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        onTintColor=\"#0891b2\"\n        style={\n          Array [\n            Object {\n              \"height\": 31,\n              \"width\": 51,\n            },\n            Array [\n              Array [\n                Object {},\n                Object {\n                  \"transform\": Array [\n                    Object {\n                      \"scale\": 0.75,\n                    },\n                  ],\n                },\n              ],\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"borderRadius\": 16,\n              },\n            ],\n          ]\n        }\n        thumbTintColor=\"#fafafa\"\n        tintColor=\"#d4d4d4\"\n        value={false}\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Switch ColorSchemes 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <RCTSwitch\n        accessibilityRole=\"switch\"\n        activeThumbColor=\"#fafafa\"\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        onChange={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        onTintColor=\"#0891b2\"\n        style={\n          Array [\n            Object {\n              \"height\": 31,\n              \"width\": 51,\n            },\n            Array [\n              Object {},\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"borderRadius\": 16,\n              },\n            ],\n          ]\n        }\n        thumbTintColor=\"#fafafa\"\n        tintColor=\"#d4d4d4\"\n        value={true}\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <RCTSwitch\n        accessibilityRole=\"switch\"\n        activeThumbColor=\"#fafafa\"\n        colorScheme=\"secondary\"\n        dataSet={Object {}}\n        onChange={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        onTintColor=\"#db2777\"\n        style={\n          Array [\n            Object {\n              \"height\": 31,\n              \"width\": 51,\n            },\n            Array [\n              Object {},\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"borderRadius\": 16,\n              },\n            ],\n          ]\n        }\n        thumbTintColor=\"#fafafa\"\n        tintColor=\"#d4d4d4\"\n        value={true}\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <RCTSwitch\n        accessibilityRole=\"switch\"\n        activeThumbColor=\"#fafafa\"\n        colorScheme=\"emerald\"\n        dataSet={Object {}}\n        onChange={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        onTintColor=\"#059669\"\n        style={\n          Array [\n            Object {\n              \"height\": 31,\n              \"width\": 51,\n            },\n            Array [\n              Object {},\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"borderRadius\": 16,\n              },\n            ],\n          ]\n        }\n        thumbTintColor=\"#fafafa\"\n        tintColor=\"#d4d4d4\"\n        value={true}\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Switch Sizes 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <RCTSwitch\n        accessibilityRole=\"switch\"\n        activeThumbColor=\"#fafafa\"\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        onChange={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        onTintColor=\"#0891b2\"\n        style={\n          Array [\n            Object {\n              \"height\": 31,\n              \"width\": 51,\n            },\n            Array [\n              Array [\n                Object {},\n                Object {\n                  \"transform\": Array [\n                    Object {\n                      \"scale\": 0.75,\n                    },\n                  ],\n                },\n              ],\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"borderRadius\": 16,\n              },\n            ],\n          ]\n        }\n        thumbTintColor=\"#fafafa\"\n        tintColor=\"#d4d4d4\"\n        value={false}\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <RCTSwitch\n        accessibilityRole=\"switch\"\n        activeThumbColor=\"#fafafa\"\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        onChange={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        onTintColor=\"#0891b2\"\n        style={\n          Array [\n            Object {\n              \"height\": 31,\n              \"width\": 51,\n            },\n            Array [\n              Object {},\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"borderRadius\": 16,\n              },\n            ],\n          ]\n        }\n        thumbTintColor=\"#fafafa\"\n        tintColor=\"#d4d4d4\"\n        value={false}\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <RCTSwitch\n        accessibilityRole=\"switch\"\n        activeThumbColor=\"#fafafa\"\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        onChange={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        onTintColor=\"#0891b2\"\n        style={\n          Array [\n            Object {\n              \"height\": 31,\n              \"width\": 51,\n            },\n            Array [\n              Array [\n                Object {\n                  \"marginBottom\": 4,\n                  \"marginLeft\": 4,\n                  \"marginRight\": 4,\n                  \"marginTop\": 4,\n                },\n                Object {\n                  \"transform\": Array [\n                    Object {\n                      \"scale\": 1.25,\n                    },\n                  ],\n                },\n              ],\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"borderRadius\": 16,\n              },\n            ],\n          ]\n        }\n        thumbTintColor=\"#fafafa\"\n        tintColor=\"#d4d4d4\"\n        value={false}\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Switch Switch bgColor 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <RCTSwitch\n        accessibilityRole=\"switch\"\n        activeThumbColor=\"#fafafa\"\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        onChange={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        onTintColor=\"#0891b2\"\n        style={\n          Array [\n            Object {\n              \"height\": 31,\n              \"width\": 51,\n            },\n            Array [\n              Object {},\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"borderRadius\": 16,\n              },\n            ],\n          ]\n        }\n        thumbTintColor=\"#fafafa\"\n        tintColor=\"#d4d4d4\"\n        value={false}\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <RCTSwitch\n        accessibilityRole=\"switch\"\n        activeThumbColor=\"#f97316\"\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        onChange={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        onTintColor=\"#fed7aa\"\n        style={\n          Array [\n            Object {\n              \"height\": 31,\n              \"width\": 51,\n            },\n            Array [\n              Object {},\n              Object {\n                \"backgroundColor\": \"#ffedd5\",\n                \"borderRadius\": 16,\n              },\n            ],\n          ]\n        }\n        thumbTintColor=\"#fff7ed\"\n        tintColor=\"#ffedd5\"\n        value={false}\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <RCTSwitch\n        accessibilityRole=\"switch\"\n        activeThumbColor=\"#6366f1\"\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        onChange={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        onTintColor=\"#c7d2fe\"\n        style={\n          Array [\n            Object {\n              \"height\": 31,\n              \"width\": 51,\n            },\n            Array [\n              Object {},\n              Object {\n                \"backgroundColor\": \"#e0e7ff\",\n                \"borderRadius\": 16,\n              },\n            ],\n          ]\n        }\n        thumbTintColor=\"#eef2ff\"\n        tintColor=\"#e0e7ff\"\n        value={false}\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Text Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <Text\n      dataSet={Object {}}\n      style={\n        Object {\n          \"backgroundColor\": undefined,\n          \"color\": \"#171717\",\n          \"fontFamily\": undefined,\n          \"fontSize\": 14,\n          \"fontStyle\": \"normal\",\n          \"fontWeight\": \"400\",\n          \"letterSpacing\": 0,\n          \"lineHeight\": 21,\n          \"textDecorationLine\": undefined,\n        }\n      }\n    >\n      This is Text.\n    </Text>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Text Changing Font Size 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 12,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 18,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        xs\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 4,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 14,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 21,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        sm\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 4,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 16,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 24,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        md\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 4,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 18,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 27,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        lg\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 4,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 20,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 30,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        xl\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 4,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 24,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 36,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        2xl\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 4,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 30,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 45,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        3xl\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 4,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 36,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 54,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        4xl\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 4,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 48,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 72,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        5xl\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 4,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 60,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 90,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        6xl\n      </Text>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Text Nested 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <Text\n      dataSet={Object {}}\n      style={\n        Object {\n          \"backgroundColor\": undefined,\n          \"color\": \"#171717\",\n          \"fontFamily\": undefined,\n          \"fontSize\": 14,\n          \"fontStyle\": \"italic\",\n          \"fontWeight\": \"400\",\n          \"letterSpacing\": 0,\n          \"lineHeight\": 21,\n          \"textDecorationLine\": undefined,\n        }\n      }\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"fontFamily\": undefined,\n            \"fontSize\": undefined,\n            \"fontStyle\": undefined,\n            \"fontWeight\": \"700\",\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Taj Mahal\n      </Text>\n       is in Agra.\n    </Text>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Text Overriden 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 14,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 21,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Bold\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 14,\n            \"fontStyle\": \"italic\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 21,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Italic\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 14,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 21,\n            \"textDecorationLine\": \"underline\",\n          }\n        }\n      >\n        Underline\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": \"#fdba74\",\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 14,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 21,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        Highlighted\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 14,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 21,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        H\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"fontFamily\": undefined,\n              \"fontSize\": 10,\n              \"fontStyle\": undefined,\n              \"fontWeight\": undefined,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          2\n        </Text>\n        O\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 14,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 21,\n            \"textDecorationLine\": \"underline\",\n          }\n        }\n      >\n        Underline\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 14,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 21,\n            \"textDecorationLine\": \"line-through\",\n          }\n        }\n      >\n        StrikeThrough\n      </Text>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 14,\n            \"fontStyle\": \"italic\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 21,\n            \"textDecorationLine\": \"underline\",\n          }\n        }\n      >\n        Bold, Italic & Underline\n      </Text>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Text Truncated 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <Text\n      dataSet={Object {}}\n      numberOfLines={1}\n      style={\n        Object {\n          \"backgroundColor\": undefined,\n          \"color\": \"#171717\",\n          \"fontFamily\": undefined,\n          \"fontSize\": 14,\n          \"fontStyle\": \"normal\",\n          \"fontWeight\": \"400\",\n          \"letterSpacing\": 0,\n          \"lineHeight\": 21,\n          \"maxWidth\": 300,\n          \"textDecorationLine\": undefined,\n          \"width\": \"80%\",\n        }\n      }\n    >\n      NativeBase gives you a contrasting color based on your theme. You can also customise it using the useAccessibleColors hook.\n    </Text>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots TextArea Default 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        isFocused={false}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"height\": 80,\n            \"maxWidth\": 300,\n            \"overflow\": \"hidden\",\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <TextInput\n          accessible={true}\n          allowFontScaling={true}\n          dataSet={Object {}}\n          editable={true}\n          multiline={true}\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyPress={[Function]}\n          placeholder=\"Text Area Placeholder\"\n          placeholderTextColor=\"#a3a3a3\"\n          rejectResponderTermination={true}\n          secureTextEntry={false}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"color\": \"#171717\",\n              \"flex\": 1,\n              \"fontFamily\": undefined,\n              \"fontSize\": 12,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 8,\n              \"width\": \"100%\",\n            }\n          }\n          textAlignVertical=\"top\"\n          underlineColorAndroid=\"transparent\"\n        />\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots TextArea InValid and Disabled 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"maxWidth\": 300,\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 18,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 27,\n                \"marginBottom\": 16,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Invalid TextArea\n          </Text>\n          <View\n            dataSet={Object {}}\n            isFocused={false}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"borderColor\": \"#d4d4d4\",\n                \"borderRadius\": 4,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"height\": 80,\n                \"marginBottom\": 20,\n                \"overflow\": \"hidden\",\n              }\n            }\n          >\n            <TextInput\n              accessibilityInvalid={true}\n              accessible={true}\n              allowFontScaling={true}\n              aria-label=\"t1\"\n              dataSet={Object {}}\n              editable={true}\n              isInvalid={true}\n              multiline={true}\n              onBlur={[Function]}\n              onFocus={[Function]}\n              onKeyPress={[Function]}\n              placeholder=\"Invalid TextArea\"\n              placeholderTextColor=\"#a3a3a3\"\n              rejectResponderTermination={true}\n              secureTextEntry={false}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"color\": \"#171717\",\n                  \"flex\": 1,\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"100%\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                  \"width\": \"100%\",\n                }\n              }\n              textAlignVertical=\"top\"\n              underlineColorAndroid=\"transparent\"\n            />\n          </View>\n          <View\n            aria-orientation=\"horizontal\"\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#d4d4d4\",\n                \"height\": 1,\n                \"width\": \"100%\",\n              }\n            }\n            thickness=\"1\"\n          />\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 10,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 18,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 27,\n                \"marginBottom\": 16,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Disabled TextArea\n          </Text>\n          <View\n            dataSet={Object {}}\n            isFocused={false}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"borderColor\": \"#d4d4d4\",\n                \"borderRadius\": 4,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"height\": 80,\n                \"opacity\": 0.4,\n                \"overflow\": \"hidden\",\n              }\n            }\n          >\n            <TextInput\n              accessible={true}\n              allowFontScaling={true}\n              aria-label=\"t1Disabled\"\n              dataSet={Object {}}\n              disabled={true}\n              editable={false}\n              multiline={true}\n              onBlur={[Function]}\n              onFocus={[Function]}\n              onKeyPress={[Function]}\n              placeholder=\"Disabled TextArea\"\n              placeholderTextColor=\"#a3a3a3\"\n              rejectResponderTermination={true}\n              secureTextEntry={false}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"color\": \"#171717\",\n                  \"flex\": 1,\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"100%\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                  \"width\": \"100%\",\n                }\n              }\n              textAlignVertical=\"top\"\n              underlineColorAndroid=\"transparent\"\n            />\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots TextArea Sizes 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <RCTScrollView\n      contentContainerStyle={\n        Array [\n          Object {},\n          Object {\n            \"dataSet\": Object {},\n          },\n          Object {},\n        ]\n      }\n      dataSet={Object {}}\n      style={\n        Object {\n          \"width\": \"70%\",\n        }\n      }\n    >\n      <View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n              \"marginTop\": 16,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 24,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 30,\n                \"marginBottom\": 40,\n                \"textAlign\": \"center\",\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Sizes\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": \"90%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              isFocused={false}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"height\": 80,\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <TextInput\n                accessible={true}\n                allowFontScaling={true}\n                aria-label=\"t2\"\n                dataSet={Object {}}\n                editable={true}\n                multiline={true}\n                onBlur={[Function]}\n                onFocus={[Function]}\n                onKeyPress={[Function]}\n                placeholder=\"xs\"\n                placeholderTextColor=\"#a3a3a3\"\n                rejectResponderTermination={true}\n                secureTextEntry={false}\n                style={\n                  Object {\n                    \"backgroundColor\": \"transparent\",\n                    \"color\": \"#171717\",\n                    \"flex\": 1,\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 10,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 12,\n                    \"paddingRight\": 12,\n                    \"paddingTop\": 8,\n                    \"width\": \"100%\",\n                  }\n                }\n                textAlignVertical=\"top\"\n                underlineColorAndroid=\"transparent\"\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 16,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              isFocused={false}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"height\": 80,\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <TextInput\n                accessible={true}\n                allowFontScaling={true}\n                aria-label=\"t2\"\n                dataSet={Object {}}\n                editable={true}\n                multiline={true}\n                onBlur={[Function]}\n                onFocus={[Function]}\n                onKeyPress={[Function]}\n                placeholder=\"sm\"\n                placeholderTextColor=\"#a3a3a3\"\n                rejectResponderTermination={true}\n                secureTextEntry={false}\n                style={\n                  Object {\n                    \"backgroundColor\": \"transparent\",\n                    \"color\": \"#171717\",\n                    \"flex\": 1,\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 12,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 12,\n                    \"paddingRight\": 12,\n                    \"paddingTop\": 8,\n                    \"width\": \"100%\",\n                  }\n                }\n                textAlignVertical=\"top\"\n                underlineColorAndroid=\"transparent\"\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 16,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              isFocused={false}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"height\": 80,\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <TextInput\n                accessible={true}\n                allowFontScaling={true}\n                aria-label=\"t2\"\n                dataSet={Object {}}\n                editable={true}\n                multiline={true}\n                onBlur={[Function]}\n                onFocus={[Function]}\n                onKeyPress={[Function]}\n                placeholder=\"md\"\n                placeholderTextColor=\"#a3a3a3\"\n                rejectResponderTermination={true}\n                secureTextEntry={false}\n                style={\n                  Object {\n                    \"backgroundColor\": \"transparent\",\n                    \"color\": \"#171717\",\n                    \"flex\": 1,\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 12,\n                    \"paddingRight\": 12,\n                    \"paddingTop\": 8,\n                    \"width\": \"100%\",\n                  }\n                }\n                textAlignVertical=\"top\"\n                underlineColorAndroid=\"transparent\"\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 16,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              isFocused={false}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"height\": 80,\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <TextInput\n                accessible={true}\n                allowFontScaling={true}\n                aria-label=\"t2\"\n                dataSet={Object {}}\n                editable={true}\n                multiline={true}\n                onBlur={[Function]}\n                onFocus={[Function]}\n                onKeyPress={[Function]}\n                placeholder=\"lg\"\n                placeholderTextColor=\"#a3a3a3\"\n                rejectResponderTermination={true}\n                secureTextEntry={false}\n                style={\n                  Object {\n                    \"backgroundColor\": \"transparent\",\n                    \"color\": \"#171717\",\n                    \"flex\": 1,\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 16,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 12,\n                    \"paddingRight\": 12,\n                    \"paddingTop\": 8,\n                    \"width\": \"100%\",\n                  }\n                }\n                textAlignVertical=\"top\"\n                underlineColorAndroid=\"transparent\"\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 16,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              isFocused={false}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"height\": 80,\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <TextInput\n                accessible={true}\n                allowFontScaling={true}\n                aria-label=\"t2\"\n                dataSet={Object {}}\n                editable={true}\n                multiline={true}\n                onBlur={[Function]}\n                onFocus={[Function]}\n                onKeyPress={[Function]}\n                placeholder=\"xl\"\n                placeholderTextColor=\"#a3a3a3\"\n                rejectResponderTermination={true}\n                secureTextEntry={false}\n                style={\n                  Object {\n                    \"backgroundColor\": \"transparent\",\n                    \"color\": \"#171717\",\n                    \"flex\": 1,\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 18,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 12,\n                    \"paddingRight\": 12,\n                    \"paddingTop\": 8,\n                    \"width\": \"100%\",\n                  }\n                }\n                textAlignVertical=\"top\"\n                underlineColorAndroid=\"transparent\"\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 16,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              isFocused={false}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"borderColor\": \"#d4d4d4\",\n                  \"borderRadius\": 4,\n                  \"borderWidth\": 1,\n                  \"flexDirection\": \"row\",\n                  \"height\": 80,\n                  \"overflow\": \"hidden\",\n                }\n              }\n            >\n              <TextInput\n                accessible={true}\n                allowFontScaling={true}\n                aria-label=\"t2\"\n                dataSet={Object {}}\n                editable={true}\n                multiline={true}\n                onBlur={[Function]}\n                onFocus={[Function]}\n                onKeyPress={[Function]}\n                placeholder=\"2xl\"\n                placeholderTextColor=\"#a3a3a3\"\n                rejectResponderTermination={true}\n                secureTextEntry={false}\n                style={\n                  Object {\n                    \"backgroundColor\": \"transparent\",\n                    \"color\": \"#171717\",\n                    \"flex\": 1,\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 20,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"paddingBottom\": 8,\n                    \"paddingLeft\": 12,\n                    \"paddingRight\": 12,\n                    \"paddingTop\": 8,\n                    \"width\": \"100%\",\n                  }\n                }\n                textAlignVertical=\"top\"\n                underlineColorAndroid=\"transparent\"\n              />\n            </View>\n          </View>\n        </View>\n      </View>\n    </RCTScrollView>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots TextArea Value Controlled 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        isFocused={false}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"height\": 80,\n            \"maxWidth\": 300,\n            \"overflow\": \"hidden\",\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <TextInput\n          accessible={true}\n          allowFontScaling={true}\n          dataSet={Object {}}\n          editable={true}\n          multiline={true}\n          onBlur={[Function]}\n          onChange={[Function]}\n          onChangeText={[Function]}\n          onFocus={[Function]}\n          onKeyPress={[Function]}\n          placeholderTextColor=\"#a3a3a3\"\n          rejectResponderTermination={true}\n          secureTextEntry={false}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"color\": \"#171717\",\n              \"flex\": 1,\n              \"fontFamily\": undefined,\n              \"fontSize\": 12,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"paddingBottom\": 8,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 8,\n              \"width\": \"100%\",\n            }\n          }\n          textAlignVertical=\"top\"\n          underlineColorAndroid=\"transparent\"\n          value=\"Value Controlled\"\n        />\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Toast Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Show Toast\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Toast CloseToast 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"flexDirection\": \"column\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Toast\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#0891b2\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Close last toast\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 8,\n          }\n        }\n      />\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"borderColor\": \"#d4d4d4\",\n            \"borderRadius\": 4,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#0891b2\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Close all toasts\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Toast Custom Component 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Custom Toast\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Toast Custom Component with custom Id 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"#0891b2\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 10,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 10,\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n          }\n        }\n        test={true}\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#fafafa\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Custom Toast\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Toast Prevent Duplicate 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Click me!\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Toast Status Recipies 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      >\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"success\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#16a34a\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                success\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"error\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#dc2626\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                error\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"info\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0284c7\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                info\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"warning\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#ea580c\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                warning\n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Toast Toast Positions 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      >\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Bottom\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Top\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Top left\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Top right\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Bottom left\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Bottom right\n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Toast Toast Ref 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Show Toast\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Toast Variants Recipies 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      >\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                solid\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                subtle\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                left-accent\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                top-accent\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#0891b2\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#fafafa\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                outline\n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Tooltip Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onMouseEnter={[Function]}\n        onMouseLeave={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              More\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Tooltip Customizing 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onMouseEnter={[Function]}\n        onMouseLeave={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              More\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Tooltip Tooltip Positions 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignSelf\": \"flex-start\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onMouseEnter={[Function]}\n        onMouseLeave={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"alignSelf\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              ToolTip\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 24,\n          }\n        }\n      />\n      <View\n        accessibilityLabel=\"Select a position for Tooltip\"\n        accessibilityRole=\"button\"\n        accessible={true}\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"marginLeft\": 0,\n            \"marginRight\": 0,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          isFocused={false}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"borderColor\": \"#d4d4d4\",\n              \"borderRadius\": 4,\n              \"borderWidth\": 1,\n              \"flexDirection\": \"row\",\n              \"overflow\": \"hidden\",\n            }\n          }\n        >\n          <TextInput\n            accessible={true}\n            allowFontScaling={true}\n            aria-hidden={true}\n            dataSet={Object {}}\n            editable={false}\n            focusable={false}\n            importantForAccessibility=\"no\"\n            onBlur={[Function]}\n            onFocus={[Function]}\n            onKeyPress={[Function]}\n            placeholderTextColor=\"#a3a3a3\"\n            pointerEvents=\"none\"\n            rejectResponderTermination={true}\n            secureTextEntry={false}\n            selection={\n              Object {\n                \"start\": 0,\n              }\n            }\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"color\": \"#171717\",\n                \"flex\": 1,\n                \"fontFamily\": undefined,\n                \"fontSize\": 12,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"height\": \"100%\",\n                \"paddingBottom\": 8,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 8,\n                \"width\": \"100%\",\n              }\n            }\n            underlineColorAndroid=\"transparent\"\n            value=\"Top Left\"\n          />\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          />\n          <RNSVGSvgView\n            accessibilityRole=\"image\"\n            align=\"xMidYMid\"\n            bbHeight={24}\n            bbWidth={24}\n            color={4285756275}\n            dataSet={Object {}}\n            focusable={false}\n            meetOrSlice={0}\n            minX={0}\n            minY={0}\n            stroke=\"\"\n            style={\n              Array [\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderWidth\": 0,\n                },\n                Object {\n                  \"color\": \"#737373\",\n                  \"height\": 24,\n                  \"marginRight\": 12,\n                  \"paddingBottom\": 4,\n                  \"paddingLeft\": 4,\n                  \"paddingRight\": 4,\n                  \"paddingTop\": 4,\n                  \"width\": 24,\n                },\n                Object {\n                  \"flex\": 0,\n                  \"height\": 24,\n                  \"width\": 24,\n                },\n              ]\n            }\n            tintColor={4285756275}\n            vbHeight={24}\n            vbWidth={24}\n          >\n            <RNSVGGroup\n              propList={\n                Array [\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            >\n              <RNSVGGroup>\n                <RNSVGPath\n                  d=\"M20.2286 6L11.9973 14.3785L3.76862 6.00268L2 7.80293L12 18L22 7.80293L20.2286 6Z\"\n                  fill={\n                    Array [\n                      2,\n                    ]\n                  }\n                  propList={\n                    Array [\n                      \"fill\",\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                />\n              </RNSVGGroup>\n            </RNSVGGroup>\n          </RNSVGSvgView>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Transitions Fade 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Show\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        pointerEvents=\"none\"\n        style={\n          Object {\n            \"opacity\": 0,\n            \"transform\": Array [\n              Object {\n                \"translateY\": 0,\n              },\n              Object {\n                \"translateX\": 0,\n              },\n              Object {\n                \"scale\": 1,\n              },\n              Object {\n                \"scaleX\": 1,\n              },\n              Object {\n                \"scaleY\": 1,\n              },\n              Object {\n                \"rotate\": \"0deg\",\n              },\n            ],\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#14b8a6\",\n              \"borderRadius\": 6,\n              \"display\": \"flex\",\n              \"height\": 100,\n              \"justifyContent\": \"center\",\n              \"marginTop\": 28,\n              \"width\": 200,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#FFFFFF\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Fade\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Transitions ScaleFade 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Show\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        pointerEvents=\"none\"\n        style={\n          Object {\n            \"opacity\": 0,\n            \"transform\": Array [\n              Object {\n                \"translateY\": 0,\n              },\n              Object {\n                \"translateX\": 0,\n              },\n              Object {\n                \"scale\": 0,\n              },\n              Object {\n                \"scaleX\": 1,\n              },\n              Object {\n                \"scaleY\": 1,\n              },\n              Object {\n                \"rotate\": \"0deg\",\n              },\n            ],\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#14b8a6\",\n              \"borderRadius\": 6,\n              \"display\": \"flex\",\n              \"height\": 100,\n              \"justifyContent\": \"center\",\n              \"marginTop\": 28,\n              \"width\": 200,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            ScaleFade\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Transitions Slide 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"height\": 128,\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(55, 65, 81, 0.3)\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#000000\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Check Internet Connection\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Transitions Slide wrapped inside parent 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"justifyContent\": \"center\",\n            \"width\": 300,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"flex-end\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 24,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 30,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Order\n            </Text>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"space-between\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"500\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Sub Total\n            </Text>\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#94a3b8\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              $298.77\n            </Text>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"space-between\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"500\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Tax\n            </Text>\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#94a3b8\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              $38.84\n            </Text>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"space-between\",\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"500\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Total Amount\n            </Text>\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            />\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#059669\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              $337.61\n            </Text>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"marginTop\": 8,\n              }\n            }\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#171717\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Promo Code\n            </Text>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 8,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                isFocused={false}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"borderColor\": \"#d4d4d4\",\n                    \"borderRadius\": 4,\n                    \"borderWidth\": 1,\n                    \"flex\": 1,\n                    \"flexDirection\": \"row\",\n                    \"overflow\": \"hidden\",\n                  }\n                }\n              >\n                <TextInput\n                  accessible={true}\n                  allowFontScaling={true}\n                  dataSet={Object {}}\n                  editable={true}\n                  onBlur={[Function]}\n                  onFocus={[Function]}\n                  onKeyPress={[Function]}\n                  placeholderTextColor=\"#a3a3a3\"\n                  rejectResponderTermination={true}\n                  secureTextEntry={false}\n                  style={\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"color\": \"#171717\",\n                      \"flex\": 1,\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 12,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"height\": \"100%\",\n                      \"paddingBottom\": 8,\n                      \"paddingLeft\": 12,\n                      \"paddingRight\": 12,\n                      \"paddingTop\": 8,\n                      \"width\": \"100%\",\n                    }\n                  }\n                  underlineColorAndroid=\"transparent\"\n                />\n              </View>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"width\": 12,\n                  }\n                }\n              />\n              <View\n                accessibilityRole=\"button\"\n                accessible={true}\n                colorScheme=\"primary\"\n                dataSet={Object {}}\n                focusable={true}\n                onBlur={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onHoverIn={[Function]}\n                onHoverOut={[Function]}\n                onResponderGrant={[Function]}\n                onResponderMove={[Function]}\n                onResponderRelease={[Function]}\n                onResponderTerminate={[Function]}\n                onResponderTerminationRequest={[Function]}\n                onStartShouldSetResponder={[Function]}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"borderColor\": \"#d4d4d4\",\n                    \"borderRadius\": 4,\n                    \"borderWidth\": 1,\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"center\",\n                    \"paddingBottom\": 10,\n                    \"paddingLeft\": 12,\n                    \"paddingRight\": 12,\n                    \"paddingTop\": 10,\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                    }\n                  }\n                  test={true}\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={Object {}}\n                  >\n                    <Text\n                      dataSet={Object {}}\n                      style={\n                        Object {\n                          \"backgroundColor\": undefined,\n                          \"color\": \"#0891b2\",\n                          \"fontFamily\": undefined,\n                          \"fontSize\": 14,\n                          \"fontStyle\": \"normal\",\n                          \"fontWeight\": \"400\",\n                          \"letterSpacing\": 0,\n                          \"lineHeight\": 21,\n                          \"textDecorationLine\": undefined,\n                        }\n                      }\n                    >\n                      Apply\n                    </Text>\n                  </View>\n                </View>\n              </View>\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 12,\n              }\n            }\n          />\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"primary\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#0891b2\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": 8,\n                \"marginTop\": 8,\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#fafafa\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Place Order\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Transitions SlideComposition 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"width\": 300,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"flex-start\",\n              \"justifyContent\": \"center\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"flex-end\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 24,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 30,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Order\n              </Text>\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"flexGrow\": 1,\n                  }\n                }\n              />\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <RNSVGSvgView\n                accessibilityRole=\"image\"\n                align=\"xMidYMid\"\n                bbHeight={12}\n                bbWidth={12}\n                color={4293548044}\n                dataSet={Object {}}\n                focusable={false}\n                meetOrSlice={0}\n                minX={0}\n                minY={0}\n                stroke=\"\"\n                style={\n                  Array [\n                    Object {\n                      \"backgroundColor\": \"transparent\",\n                      \"borderWidth\": 0,\n                    },\n                    Object {\n                      \"color\": \"#ea580c\",\n                      \"height\": 12,\n                      \"marginBottom\": 6,\n                      \"width\": 12,\n                    },\n                    Object {\n                      \"flex\": 0,\n                      \"height\": 12,\n                      \"width\": 12,\n                    },\n                  ]\n                }\n                tintColor={4293548044}\n                vbHeight={24}\n                vbWidth={24}\n              >\n                <RNSVGGroup\n                  propList={\n                    Array [\n                      \"stroke\",\n                    ]\n                  }\n                  stroke={null}\n                >\n                  <RNSVGGroup>\n                    <RNSVGPath\n                      d=\"M11.9836 0.00267822C8.77744 0.0551662 5.72075 1.36728 3.47427 3.65538C2.35024 4.77447 1.46338 6.10869 0.866705 7.57831C0.270027 9.04793 -0.0242179 10.6228 0.00155827 12.2087C-0.000286057 13.7583 0.303697 15.2931 0.896087 16.7251C1.48848 18.1571 2.35763 19.458 3.45373 20.5535C4.54983 21.6489 5.85133 22.5173 7.28365 23.1089C8.71596 23.7004 10.2509 24.0035 11.8006 24.0007H12.0146C15.2217 23.9677 18.2847 22.6638 20.5316 20.3751C22.7785 18.0864 24.0257 14.9999 23.9996 11.7927C24.0033 10.2243 23.6933 8.6709 23.0879 7.22398C22.4825 5.77706 21.5939 4.4658 20.4744 3.36731C19.3548 2.26882 18.0269 1.40527 16.5688 0.827453C15.1106 0.249636 13.5517 -0.0307856 11.9836 0.00267822ZM10.5007 16.5433C10.4935 16.3473 10.5254 16.1517 10.5947 15.9682C10.6639 15.7846 10.7691 15.6167 10.904 15.4742C11.0389 15.3318 11.2009 15.2177 11.3804 15.1386C11.5599 15.0594 11.7534 15.0169 11.9496 15.0135H11.9766C12.3712 15.0142 12.7501 15.1677 13.034 15.4417C13.3179 15.7157 13.4847 16.089 13.4995 16.4833C13.5068 16.6794 13.4749 16.875 13.4057 17.0586C13.3365 17.2423 13.2314 17.4102 13.0965 17.5527C12.9615 17.6952 12.7995 17.8093 12.6199 17.8884C12.4403 17.9674 12.2468 18.0099 12.0506 18.0132H12.0236C11.6291 18.0119 11.2505 17.8583 10.9667 17.5844C10.6829 17.3105 10.5159 16.9375 10.5007 16.5433ZM11.0007 12.5017V6.50215C11.0007 6.23695 11.106 5.98262 11.2935 5.7951C11.481 5.60758 11.7354 5.50223 12.0006 5.50223C12.2658 5.50223 12.5201 5.60758 12.7076 5.7951C12.8951 5.98262 13.0005 6.23695 13.0005 6.50215V12.5017C13.0005 12.7669 12.8951 13.0212 12.7076 13.2087C12.5201 13.3962 12.2658 13.5016 12.0006 13.5016C11.7354 13.5016 11.481 13.3962 11.2935 13.2087C11.106 13.0212 11.0007 12.7669 11.0007 12.5017Z\"\n                      fill={\n                        Array [\n                          2,\n                        ]\n                      }\n                      propList={\n                        Array [\n                          \"fill\",\n                          \"stroke\",\n                        ]\n                      }\n                      stroke={null}\n                    />\n                  </RNSVGGroup>\n                </RNSVGGroup>\n              </RNSVGSvgView>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"space-between\",\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Sub Total\n              </Text>\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#94a3b8\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                $298.77\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"space-between\",\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Tax\n              </Text>\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#94a3b8\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                $38.84\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"space-between\",\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Total Amount\n              </Text>\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#22c55e\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                $337.61\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"marginTop\": 8,\n                }\n              }\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Promo Code\n              </Text>\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"height\": 8,\n                  }\n                }\n              />\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"flexDirection\": \"row\",\n                  }\n                }\n              >\n                <View\n                  dataSet={Object {}}\n                  isFocused={false}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"borderColor\": \"#d4d4d4\",\n                      \"borderRadius\": 4,\n                      \"borderWidth\": 1,\n                      \"flex\": 1,\n                      \"flexDirection\": \"row\",\n                      \"overflow\": \"hidden\",\n                    }\n                  }\n                >\n                  <TextInput\n                    accessible={true}\n                    allowFontScaling={true}\n                    dataSet={Object {}}\n                    editable={true}\n                    onBlur={[Function]}\n                    onFocus={[Function]}\n                    onKeyPress={[Function]}\n                    placeholderTextColor=\"#a3a3a3\"\n                    rejectResponderTermination={true}\n                    secureTextEntry={false}\n                    style={\n                      Object {\n                        \"backgroundColor\": \"transparent\",\n                        \"color\": \"#171717\",\n                        \"flex\": 1,\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 12,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"height\": \"100%\",\n                        \"paddingBottom\": 8,\n                        \"paddingLeft\": 12,\n                        \"paddingRight\": 12,\n                        \"paddingTop\": 8,\n                        \"width\": \"100%\",\n                      }\n                    }\n                    underlineColorAndroid=\"transparent\"\n                  />\n                </View>\n                <View\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"width\": 12,\n                    }\n                  }\n                />\n                <View\n                  accessibilityRole=\"button\"\n                  accessible={true}\n                  colorScheme=\"primary\"\n                  dataSet={Object {}}\n                  focusable={true}\n                  onBlur={[Function]}\n                  onClick={[Function]}\n                  onFocus={[Function]}\n                  onHoverIn={[Function]}\n                  onHoverOut={[Function]}\n                  onResponderGrant={[Function]}\n                  onResponderMove={[Function]}\n                  onResponderRelease={[Function]}\n                  onResponderTerminate={[Function]}\n                  onResponderTerminationRequest={[Function]}\n                  onStartShouldSetResponder={[Function]}\n                  style={\n                    Object {\n                      \"alignItems\": \"center\",\n                      \"borderColor\": \"#d4d4d4\",\n                      \"borderRadius\": 4,\n                      \"borderWidth\": 1,\n                      \"flexDirection\": \"row\",\n                      \"justifyContent\": \"center\",\n                      \"paddingBottom\": 10,\n                      \"paddingLeft\": 12,\n                      \"paddingRight\": 12,\n                      \"paddingTop\": 10,\n                    }\n                  }\n                >\n                  <View\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"alignItems\": \"center\",\n                        \"flexDirection\": \"row\",\n                      }\n                    }\n                    test={true}\n                  >\n                    <View\n                      dataSet={Object {}}\n                      style={Object {}}\n                    >\n                      <Text\n                        dataSet={Object {}}\n                        style={\n                          Object {\n                            \"backgroundColor\": undefined,\n                            \"color\": \"#0891b2\",\n                            \"fontFamily\": undefined,\n                            \"fontSize\": 14,\n                            \"fontStyle\": \"normal\",\n                            \"fontWeight\": \"400\",\n                            \"letterSpacing\": 0,\n                            \"lineHeight\": 21,\n                            \"textDecorationLine\": undefined,\n                          }\n                        }\n                      >\n                        Apply\n                      </Text>\n                    </View>\n                  </View>\n                </View>\n              </View>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 12,\n                }\n              }\n            />\n            <View\n              accessibilityRole=\"button\"\n              accessible={true}\n              colorScheme=\"primary\"\n              dataSet={Object {}}\n              focusable={true}\n              onBlur={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onHoverIn={[Function]}\n              onHoverOut={[Function]}\n              onResponderGrant={[Function]}\n              onResponderMove={[Function]}\n              onResponderRelease={[Function]}\n              onResponderTerminate={[Function]}\n              onResponderTerminationRequest={[Function]}\n              onStartShouldSetResponder={[Function]}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#0891b2\",\n                  \"borderRadius\": 4,\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": 8,\n                  \"marginTop\": 8,\n                  \"paddingBottom\": 10,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 10,\n                }\n              }\n            >\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                  }\n                }\n                test={true}\n              >\n                <View\n                  dataSet={Object {}}\n                  style={Object {}}\n                >\n                  <Text\n                    dataSet={Object {}}\n                    style={\n                      Object {\n                        \"backgroundColor\": undefined,\n                        \"color\": \"#fafafa\",\n                        \"fontFamily\": undefined,\n                        \"fontSize\": 14,\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": 0,\n                        \"lineHeight\": 21,\n                        \"textDecorationLine\": undefined,\n                      }\n                    }\n                  >\n                    Place Order\n                  </Text>\n                </View>\n              </View>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Transitions SlideFade 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Show\n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        pointerEvents=\"none\"\n        style={\n          Object {\n            \"opacity\": 0,\n            \"transform\": Array [\n              Object {\n                \"translateY\": 0,\n              },\n              Object {\n                \"translateX\": -200,\n              },\n              Object {\n                \"scale\": 1,\n              },\n              Object {\n                \"scaleX\": 1,\n              },\n              Object {\n                \"scaleY\": 1,\n              },\n              Object {\n                \"rotate\": \"0deg\",\n              },\n            ],\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#14b8a6\",\n              \"borderRadius\": 6,\n              \"display\": \"flex\",\n              \"height\": 100,\n              \"justifyContent\": \"center\",\n              \"marginTop\": 16,\n              \"position\": \"absolute\",\n              \"top\": 16,\n              \"width\": 200,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#FFFFFF\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            SlideFade\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots Transitions Stagger 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"minHeight\": 220,\n          }\n        }\n      >\n        <View\n          pointerEvents=\"none\"\n          style={\n            Object {\n              \"opacity\": 0,\n              \"transform\": Array [\n                Object {\n                  \"translateY\": 34,\n                },\n                Object {\n                  \"translateX\": 0,\n                },\n                Object {\n                  \"scale\": 0,\n                },\n                Object {\n                  \"scaleX\": 1,\n                },\n                Object {\n                  \"scaleY\": 1,\n                },\n                Object {\n                  \"rotate\": \"0deg\",\n                },\n              ],\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"indigo\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#6366f1\",\n                \"borderRadius\": 9999,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": 16,\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 10,\n                \"paddingRight\": 10,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <Text\n              allowFontScaling={false}\n              dataSet={Object {}}\n              style={\n                Array [\n                  Object {\n                    \"color\": undefined,\n                    \"fontSize\": 12,\n                  },\n                  Object {\n                    \"color\": \"#fafaf9\",\n                    \"fontSize\": 24,\n                    \"height\": 24,\n                    \"lineHeight\": 24,\n                    \"width\": 24,\n                  },\n                  Object {\n                    \"fontFamily\": \"material\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"normal\",\n                  },\n                  Object {},\n                ]\n              }\n            >\n              \n            </Text>\n          </View>\n        </View>\n        <View\n          pointerEvents=\"none\"\n          style={\n            Object {\n              \"opacity\": 0,\n              \"transform\": Array [\n                Object {\n                  \"translateY\": 34,\n                },\n                Object {\n                  \"translateX\": 0,\n                },\n                Object {\n                  \"scale\": 0,\n                },\n                Object {\n                  \"scaleX\": 1,\n                },\n                Object {\n                  \"scaleY\": 1,\n                },\n                Object {\n                  \"rotate\": \"0deg\",\n                },\n              ],\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"yellow\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#facc15\",\n                \"borderRadius\": 9999,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": 16,\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 10,\n                \"paddingRight\": 10,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <Text\n              allowFontScaling={false}\n              dataSet={Object {}}\n              style={\n                Array [\n                  Object {\n                    \"color\": undefined,\n                    \"fontSize\": 12,\n                  },\n                  Object {\n                    \"color\": \"#fafaf9\",\n                    \"fontSize\": 24,\n                    \"height\": 24,\n                    \"lineHeight\": 24,\n                    \"width\": 24,\n                  },\n                  Object {\n                    \"fontFamily\": \"material-community\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"normal\",\n                  },\n                  Object {},\n                ]\n              }\n            >\n              󰍬\n            </Text>\n          </View>\n        </View>\n        <View\n          pointerEvents=\"none\"\n          style={\n            Object {\n              \"opacity\": 0,\n              \"transform\": Array [\n                Object {\n                  \"translateY\": 34,\n                },\n                Object {\n                  \"translateX\": 0,\n                },\n                Object {\n                  \"scale\": 0,\n                },\n                Object {\n                  \"scaleX\": 1,\n                },\n                Object {\n                  \"scaleY\": 1,\n                },\n                Object {\n                  \"rotate\": \"0deg\",\n                },\n              ],\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"teal\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#2dd4bf\",\n                \"borderRadius\": 9999,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": 16,\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 10,\n                \"paddingRight\": 10,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <Text\n              allowFontScaling={false}\n              dataSet={Object {}}\n              style={\n                Array [\n                  Object {\n                    \"color\": undefined,\n                    \"fontSize\": 12,\n                  },\n                  Object {\n                    \"color\": \"#fafaf9\",\n                    \"fontSize\": 24,\n                    \"height\": 24,\n                    \"lineHeight\": 24,\n                    \"width\": 24,\n                  },\n                  Object {\n                    \"fontFamily\": \"material-community\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"normal\",\n                  },\n                  Object {},\n                ]\n              }\n            >\n              󰕧\n            </Text>\n          </View>\n        </View>\n        <View\n          pointerEvents=\"none\"\n          style={\n            Object {\n              \"opacity\": 0,\n              \"transform\": Array [\n                Object {\n                  \"translateY\": 34,\n                },\n                Object {\n                  \"translateX\": 0,\n                },\n                Object {\n                  \"scale\": 0,\n                },\n                Object {\n                  \"scaleX\": 1,\n                },\n                Object {\n                  \"scaleY\": 1,\n                },\n                Object {\n                  \"rotate\": \"0deg\",\n                },\n              ],\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"red\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#ef4444\",\n                \"borderRadius\": 9999,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": 16,\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 10,\n                \"paddingRight\": 10,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <Text\n              allowFontScaling={false}\n              dataSet={Object {}}\n              style={\n                Array [\n                  Object {\n                    \"color\": undefined,\n                    \"fontSize\": 12,\n                  },\n                  Object {\n                    \"color\": \"#fafaf9\",\n                    \"fontSize\": 24,\n                    \"height\": 24,\n                    \"lineHeight\": 24,\n                    \"width\": 24,\n                  },\n                  Object {\n                    \"fontFamily\": \"material\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"normal\",\n                  },\n                  Object {},\n                ]\n              }\n            >\n              \n            </Text>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n          }\n        }\n      >\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#22d3ee\",\n              \"borderRadius\": 9999,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 12,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 12,\n            }\n          }\n        >\n          <Text\n            allowFontScaling={false}\n            dataSet={Object {}}\n            style={\n              Array [\n                Object {\n                  \"color\": undefined,\n                  \"fontSize\": 12,\n                },\n                Object {\n                  \"color\": \"#fafaf9\",\n                  \"fontSize\": 24,\n                  \"height\": 24,\n                  \"lineHeight\": 24,\n                  \"width\": 24,\n                },\n                Object {\n                  \"fontFamily\": \"material-community\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"normal\",\n                },\n                Object {},\n              ]\n            }\n          >\n            󰇘\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots VStack Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#a5b4fc\",\n            \"borderRadius\": 6,\n            \"display\": \"flex\",\n            \"elevation\": 4,\n            \"height\": 80,\n            \"justifyContent\": \"center\",\n            \"shadowColor\": \"#000000\",\n            \"shadowOffset\": Object {\n              \"height\": 2,\n              \"width\": 0,\n            },\n            \"shadowOpacity\": 0.23,\n            \"shadowRadius\": 2.62,\n            \"width\": 256,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#6366f1\",\n            \"borderRadius\": 6,\n            \"display\": \"flex\",\n            \"elevation\": 4,\n            \"height\": 80,\n            \"justifyContent\": \"center\",\n            \"shadowColor\": \"#000000\",\n            \"shadowOffset\": Object {\n              \"height\": 2,\n              \"width\": 0,\n            },\n            \"shadowOpacity\": 0.23,\n            \"shadowRadius\": 2.62,\n            \"width\": 256,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"height\": 16,\n          }\n        }\n      />\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#4338ca\",\n            \"borderRadius\": 6,\n            \"display\": \"flex\",\n            \"elevation\": 4,\n            \"height\": 80,\n            \"justifyContent\": \"center\",\n            \"shadowColor\": \"#000000\",\n            \"shadowOffset\": Object {\n              \"height\": 2,\n              \"width\": 0,\n            },\n            \"shadowOpacity\": 0.23,\n            \"shadowRadius\": 2.62,\n            \"width\": 256,\n          }\n        }\n      />\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots View Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={Object {}}\n    >\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 24,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 30,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        A component library for the\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#10b981\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 24,\n              \"fontStyle\": undefined,\n              \"fontWeight\": \"700\",\n              \"lineHeight\": 30,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n           React Ecosystem\n        </Text>\n      </Text>\n      <Text\n        dataSet={Object {}}\n        style={\n          Object {\n            \"backgroundColor\": undefined,\n            \"color\": \"#171717\",\n            \"fontFamily\": undefined,\n            \"fontSize\": 14,\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"500\",\n            \"letterSpacing\": 0,\n            \"lineHeight\": 21,\n            \"marginTop\": 12,\n            \"textDecorationLine\": undefined,\n          }\n        }\n      >\n        NativeBase is a simple, modular and accessible component library that gives you building blocks to build you React applications.\n      </Text>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots ZStack Basic ZStack 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"height\": 160,\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"marginTop\": -128,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"marginLeft\": -50,\n              \"marginTop\": 12,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#0e7490\",\n                \"borderRadius\": 8,\n                \"elevation\": 4,\n                \"height\": 80,\n                \"position\": \"absolute\",\n                \"shadowColor\": \"#000000\",\n                \"shadowOffset\": Object {\n                  \"height\": 2,\n                  \"width\": 0,\n                },\n                \"shadowOpacity\": 0.23,\n                \"shadowRadius\": 2.62,\n                \"width\": 80,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#06b6d4\",\n                \"borderRadius\": 8,\n                \"elevation\": 6,\n                \"height\": 80,\n                \"marginLeft\": 20,\n                \"marginTop\": 20,\n                \"position\": \"absolute\",\n                \"shadowColor\": \"#000000\",\n                \"shadowOffset\": Object {\n                  \"height\": 3,\n                  \"width\": 0,\n                },\n                \"shadowOpacity\": 0.27,\n                \"shadowRadius\": 4.65,\n                \"width\": 80,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": \"#67e8f9\",\n                \"borderRadius\": 8,\n                \"elevation\": 8,\n                \"height\": 80,\n                \"marginLeft\": 40,\n                \"marginTop\": 40,\n                \"position\": \"absolute\",\n                \"shadowColor\": \"#000000\",\n                \"shadowOffset\": Object {\n                  \"height\": 4,\n                  \"width\": 0,\n                },\n                \"shadowOpacity\": 0.3,\n                \"shadowRadius\": 4.65,\n                \"width\": 80,\n              }\n            }\n          />\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots ZStack ZStack items centered 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"height\": 384,\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"justifyContent\": \"center\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": \"#4338ca\",\n              \"borderRadius\": 8,\n              \"height\": 256,\n              \"position\": \"absolute\",\n              \"width\": 256,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": \"#6366f1\",\n              \"borderRadius\": 8,\n              \"elevation\": 9,\n              \"height\": 192,\n              \"position\": \"absolute\",\n              \"shadowColor\": \"#000000\",\n              \"shadowOffset\": Object {\n                \"height\": 4,\n                \"width\": 0,\n              },\n              \"shadowOpacity\": 0.32,\n              \"shadowRadius\": 5.46,\n              \"width\": 192,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": \"#a5b4fc\",\n              \"borderRadius\": 8,\n              \"elevation\": 9,\n              \"height\": 128,\n              \"position\": \"absolute\",\n              \"shadowColor\": \"#000000\",\n              \"shadowOffset\": Object {\n                \"height\": 4,\n                \"width\": 0,\n              },\n              \"shadowOpacity\": 0.32,\n              \"shadowRadius\": 5.46,\n              \"width\": 128,\n            }\n          }\n        />\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots useAccessibleColors Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"flexDirection\": \"row\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"emerald\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#6ee7b7\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": 4,\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#FFFFFF\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Save\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"width\": 12,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"emerald\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#34d399\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": 4,\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#FFFFFF\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Save\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"width\": 12,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"emerald\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#10b981\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": 4,\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#FFFFFF\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Save\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"width\": 12,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"emerald\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#059669\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": 4,\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#FFFFFF\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Save\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"width\": 12,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"emerald\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#047857\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": 4,\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#FFFFFF\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Save\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"width\": 12,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n            }\n          }\n        >\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"emerald\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#065f46\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": 4,\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#FFFFFF\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Save\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n      </View>\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"flexDirection\": \"row\",\n            \"marginTop\": 24,\n          }\n        }\n      >\n        <Text\n          dataSet={Object {}}\n          style={\n            Object {\n              \"backgroundColor\": undefined,\n              \"color\": \"#171717\",\n              \"fontFamily\": undefined,\n              \"fontSize\": 14,\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": 0,\n              \"lineHeight\": 21,\n              \"textDecorationLine\": undefined,\n            }\n          }\n        >\n          Toggle Accessible Colors\n        </Text>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"width\": 12,\n            }\n          }\n        />\n        <RCTSwitch\n          accessibilityRole=\"switch\"\n          activeThumbColor=\"#fafafa\"\n          colorScheme=\"coolGray\"\n          dataSet={Object {}}\n          onChange={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          onTintColor=\"#4b5563\"\n          style={\n            Array [\n              Object {\n                \"height\": 31,\n                \"width\": 51,\n              },\n              Array [\n                Object {},\n                Object {\n                  \"backgroundColor\": \"#d4d4d4\",\n                  \"borderRadius\": 16,\n                },\n              ],\n            ]\n          }\n          thumbTintColor=\"#fafafa\"\n          tintColor=\"#d4d4d4\"\n          value={false}\n        />\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots useBreakpointValue Usage 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <RCTScrollView\n      contentContainerStyle={\n        Array [\n          Object {},\n          Object {\n            \"dataSet\": Object {},\n          },\n          Object {},\n        ]\n      }\n      dataSet={Object {}}\n      showsVerticalScrollIndicator={false}\n      style={Object {}}\n    >\n      <View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 32,\n              \"paddingTop\": 32,\n            }\n          }\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#171717\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 24,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 30,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Why us?\n          </Text>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 32,\n              }\n            }\n          />\n          <View\n            style={\n              Object {\n                \"flexDirection\": \"column\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#a5f3fc\",\n                  \"borderRadius\": 12,\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": 12,\n                  \"marginLeft\": 12,\n                  \"marginRight\": 12,\n                  \"marginTop\": 12,\n                  \"paddingBottom\": 12,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 12,\n                  \"width\": 140,\n                }\n              }\n            >\n              <Text />\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"height\": 8,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 18,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 27,\n                    \"textAlign\": \"center\",\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Secure Checkout\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#a5f3fc\",\n                  \"borderRadius\": 12,\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": 12,\n                  \"marginLeft\": 12,\n                  \"marginRight\": 12,\n                  \"marginTop\": 12,\n                  \"paddingBottom\": 12,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 12,\n                  \"width\": 140,\n                }\n              }\n            >\n              <Text />\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"height\": 8,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 18,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 27,\n                    \"textAlign\": \"center\",\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Secure Checkout\n              </Text>\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"#a5f3fc\",\n                  \"borderRadius\": 12,\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": 12,\n                  \"marginLeft\": 12,\n                  \"marginRight\": 12,\n                  \"marginTop\": 12,\n                  \"paddingBottom\": 12,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 12,\n                  \"width\": 140,\n                }\n              }\n            >\n              <Text />\n              <View\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"height\": 8,\n                  }\n                }\n              />\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#171717\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 18,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 27,\n                    \"textAlign\": \"center\",\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                Fast Turn Around\n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </RCTScrollView>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots useClipboard Usage 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"maxWidth\": 300,\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            isFocused={false}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"borderColor\": \"#d4d4d4\",\n                \"borderRadius\": 4,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"overflow\": \"hidden\",\n              }\n            }\n          >\n            <TextInput\n              accessible={true}\n              allowFontScaling={true}\n              dataSet={Object {}}\n              editable={true}\n              onBlur={[Function]}\n              onChangeText={[Function]}\n              onFocus={[Function]}\n              onKeyPress={[Function]}\n              placeholder=\"Copy From\"\n              placeholderTextColor=\"#a3a3a3\"\n              rejectResponderTermination={true}\n              secureTextEntry={false}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"color\": \"#171717\",\n                  \"flex\": 1,\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"100%\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                  \"width\": \"100%\",\n                }\n              }\n              underlineColorAndroid=\"transparent\"\n              value=\"Hello\"\n            />\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 12,\n              }\n            }\n          />\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"primary\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#0891b2\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#fafafa\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Copy\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 8,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flexDirection\": \"row\",\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            isFocused={false}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"borderColor\": \"#d4d4d4\",\n                \"borderRadius\": 4,\n                \"borderWidth\": 1,\n                \"flexDirection\": \"row\",\n                \"overflow\": \"hidden\",\n              }\n            }\n          >\n            <TextInput\n              accessible={true}\n              allowFontScaling={true}\n              dataSet={Object {}}\n              editable={true}\n              onBlur={[Function]}\n              onChangeText={[Function]}\n              onFocus={[Function]}\n              onKeyPress={[Function]}\n              placeholder=\"Paste Here\"\n              placeholderTextColor=\"#a3a3a3\"\n              rejectResponderTermination={true}\n              secureTextEntry={false}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"color\": \"#171717\",\n                  \"flex\": 1,\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 12,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"100%\",\n                  \"paddingBottom\": 8,\n                  \"paddingLeft\": 12,\n                  \"paddingRight\": 12,\n                  \"paddingTop\": 8,\n                  \"width\": \"100%\",\n                }\n              }\n              underlineColorAndroid=\"transparent\"\n              value=\"\"\n            />\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"width\": 12,\n              }\n            }\n          />\n          <View\n            accessibilityRole=\"button\"\n            accessible={true}\n            colorScheme=\"primary\"\n            dataSet={Object {}}\n            focusable={true}\n            onBlur={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onHoverIn={[Function]}\n            onHoverOut={[Function]}\n            onResponderGrant={[Function]}\n            onResponderMove={[Function]}\n            onResponderRelease={[Function]}\n            onResponderTerminate={[Function]}\n            onResponderTerminationRequest={[Function]}\n            onStartShouldSetResponder={[Function]}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"#0891b2\",\n                \"borderRadius\": 4,\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"paddingBottom\": 10,\n                \"paddingLeft\": 12,\n                \"paddingRight\": 12,\n                \"paddingTop\": 10,\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                }\n              }\n              test={true}\n            >\n              <View\n                dataSet={Object {}}\n                style={Object {}}\n              >\n                <Text\n                  dataSet={Object {}}\n                  style={\n                    Object {\n                      \"backgroundColor\": undefined,\n                      \"color\": \"#fafafa\",\n                      \"fontFamily\": undefined,\n                      \"fontSize\": 14,\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": 0,\n                      \"lineHeight\": 21,\n                      \"textDecorationLine\": undefined,\n                    }\n                  }\n                >\n                  Paste\n                </Text>\n              </View>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots useColorMode Basic 1`] = `\n<View\n  style={\n    Object {\n      \"flex\": 1,\n    }\n  }\n>\n  <RNCSafeAreaProvider\n    onInsetsChange={[Function]}\n    style={\n      Array [\n        Object {\n          \"flex\": 1,\n        },\n        undefined,\n      ]\n    }\n  />\n</View>\n`;\n\nexports[`Storyshots useColorModeValue Basic 1`] = `\n<View\n  style={\n    Object {\n      \"flex\": 1,\n    }\n  }\n>\n  <RNCSafeAreaProvider\n    onInsetsChange={[Function]}\n    style={\n      Array [\n        Object {\n          \"flex\": 1,\n        },\n        undefined,\n      ]\n    }\n  />\n</View>\n`;\n\nexports[`Storyshots useContrastText Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={Object {}}\n      >\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#18181b\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#FFFFFF\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                NativeBase\n              </Text>\n            </View>\n          </View>\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"height\": 16,\n            }\n          }\n        />\n        <View\n          accessibilityRole=\"button\"\n          accessible={true}\n          colorScheme=\"primary\"\n          dataSet={Object {}}\n          focusable={true}\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onHoverIn={[Function]}\n          onHoverOut={[Function]}\n          onResponderGrant={[Function]}\n          onResponderMove={[Function]}\n          onResponderRelease={[Function]}\n          onResponderTerminate={[Function]}\n          onResponderTerminationRequest={[Function]}\n          onStartShouldSetResponder={[Function]}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"#fafafa\",\n              \"borderRadius\": 4,\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"paddingBottom\": 10,\n              \"paddingLeft\": 12,\n              \"paddingRight\": 12,\n              \"paddingTop\": 10,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n            test={true}\n          >\n            <View\n              dataSet={Object {}}\n              style={Object {}}\n            >\n              <Text\n                dataSet={Object {}}\n                style={\n                  Object {\n                    \"backgroundColor\": undefined,\n                    \"color\": \"#000000\",\n                    \"fontFamily\": undefined,\n                    \"fontSize\": 14,\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": 0,\n                    \"lineHeight\": 21,\n                    \"textDecorationLine\": undefined,\n                  }\n                }\n              >\n                NativeBase\n              </Text>\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots useContrastText Variations 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"#ecfeff\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginBottom\": 4,\n          \"paddingBottom\": 10,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 10,\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n          }\n        }\n        test={true}\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#000000\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            NativeBase\n          </Text>\n        </View>\n      </View>\n    </View>\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"#cffafe\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginBottom\": 4,\n          \"paddingBottom\": 10,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 10,\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n          }\n        }\n        test={true}\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#000000\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            NativeBase\n          </Text>\n        </View>\n      </View>\n    </View>\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"#a5f3fc\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginBottom\": 4,\n          \"paddingBottom\": 10,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 10,\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n          }\n        }\n        test={true}\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#000000\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            NativeBase\n          </Text>\n        </View>\n      </View>\n    </View>\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"#67e8f9\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginBottom\": 4,\n          \"paddingBottom\": 10,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 10,\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n          }\n        }\n        test={true}\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#FFFFFF\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            NativeBase\n          </Text>\n        </View>\n      </View>\n    </View>\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"#22d3ee\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginBottom\": 4,\n          \"paddingBottom\": 10,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 10,\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n          }\n        }\n        test={true}\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#FFFFFF\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            NativeBase\n          </Text>\n        </View>\n      </View>\n    </View>\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"#06b6d4\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginBottom\": 4,\n          \"paddingBottom\": 10,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 10,\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n          }\n        }\n        test={true}\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#FFFFFF\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            NativeBase\n          </Text>\n        </View>\n      </View>\n    </View>\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"#0891b2\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginBottom\": 4,\n          \"paddingBottom\": 10,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 10,\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n          }\n        }\n        test={true}\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#FFFFFF\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            NativeBase\n          </Text>\n        </View>\n      </View>\n    </View>\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"#0e7490\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginBottom\": 4,\n          \"paddingBottom\": 10,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 10,\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n          }\n        }\n        test={true}\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#FFFFFF\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            NativeBase\n          </Text>\n        </View>\n      </View>\n    </View>\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"#155e75\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginBottom\": 4,\n          \"paddingBottom\": 10,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 10,\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n          }\n        }\n        test={true}\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#FFFFFF\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            NativeBase\n          </Text>\n        </View>\n      </View>\n    </View>\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"#164e63\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginBottom\": 4,\n          \"paddingBottom\": 10,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 10,\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n          }\n        }\n        test={true}\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#FFFFFF\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            NativeBase\n          </Text>\n        </View>\n      </View>\n    </View>\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"indigo\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"#4f46e5\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginTop\": 8,\n          \"paddingBottom\": 10,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 10,\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n          }\n        }\n        test={true}\n      >\n        <View\n          dataSet={Object {}}\n          style={Object {}}\n        >\n          <Text\n            dataSet={Object {}}\n            style={\n              Object {\n                \"backgroundColor\": undefined,\n                \"color\": \"#fafafa\",\n                \"fontFamily\": undefined,\n                \"fontSize\": 14,\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": 0,\n                \"lineHeight\": 21,\n                \"textDecorationLine\": undefined,\n              }\n            }\n          >\n            Toggle Accessible Colors\n          </Text>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots useDisclose Usage 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n        }\n      }\n    >\n      <View\n        accessibilityRole=\"button\"\n        accessible={true}\n        colorScheme=\"primary\"\n        dataSet={Object {}}\n        focusable={true}\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onHoverIn={[Function]}\n        onHoverOut={[Function]}\n        onResponderGrant={[Function]}\n        onResponderMove={[Function]}\n        onResponderRelease={[Function]}\n        onResponderTerminate={[Function]}\n        onResponderTerminationRequest={[Function]}\n        onStartShouldSetResponder={[Function]}\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"#0891b2\",\n            \"borderRadius\": 4,\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"paddingBottom\": 10,\n            \"paddingLeft\": 12,\n            \"paddingRight\": 12,\n            \"paddingTop\": 10,\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n            }\n          }\n          test={true}\n        >\n          <View\n            dataSet={Object {}}\n            style={Object {}}\n          >\n            <Text\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"backgroundColor\": undefined,\n                  \"color\": \"#fafafa\",\n                  \"fontFamily\": undefined,\n                  \"fontSize\": 14,\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": 0,\n                  \"lineHeight\": 21,\n                  \"textDecorationLine\": undefined,\n                }\n              }\n            >\n              Open Modal\n            </Text>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots useMediaQuery MaxHeight 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"borderColor\": \"#9ca3af\",\n            \"borderRadius\": 6,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"maxWidth\": 400,\n            \"paddingBottom\": 16,\n            \"paddingLeft\": 16,\n            \"paddingRight\": 16,\n            \"paddingTop\": 16,\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          fadeDuration={0.1}\n          speed={1}\n          style={\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderRadius\": 6,\n              \"flex\": 1,\n              \"height\": 150,\n              \"overflow\": \"hidden\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <View\n            style={\n              Object {\n                \"backgroundColor\": \"#e5e5e5\",\n                \"height\": \"100%\",\n                \"opacity\": 0,\n                \"width\": \"100%\",\n              }\n            }\n          />\n        </View>\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"width\": 32,\n            }\n          }\n        />\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flex\": 3,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            speed={1}\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"height\": 40,\n                \"overflow\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            speed={1}\n            style={\n              Object {\n                \"flexDirection\": \"column\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"75%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"height\": 20,\n                  \"overflow\": \"hidden\",\n                  \"width\": 20,\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"flex\": 2,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"flex\": 1,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots useMediaQuery MinWidth 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"borderColor\": \"#9ca3af\",\n            \"borderRadius\": 6,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"maxWidth\": 400,\n            \"paddingBottom\": 16,\n            \"paddingLeft\": 16,\n            \"paddingRight\": 16,\n            \"paddingTop\": 16,\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flex\": 3,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            speed={1}\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"height\": 40,\n                \"overflow\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            speed={1}\n            style={\n              Object {\n                \"flexDirection\": \"column\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"75%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"height\": 20,\n                  \"overflow\": \"hidden\",\n                  \"width\": 20,\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"flex\": 2,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"flex\": 1,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots useMediaQuery Orientation 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      dataSet={Object {}}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <View\n        dataSet={Object {}}\n        style={\n          Object {\n            \"borderColor\": \"#9ca3af\",\n            \"borderRadius\": 6,\n            \"borderWidth\": 1,\n            \"flexDirection\": \"row\",\n            \"maxWidth\": 400,\n            \"paddingBottom\": 16,\n            \"paddingLeft\": 16,\n            \"paddingRight\": 16,\n            \"paddingTop\": 16,\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <View\n          dataSet={Object {}}\n          style={\n            Object {\n              \"flex\": 3,\n            }\n          }\n        >\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            speed={1}\n            style={\n              Object {\n                \"backgroundColor\": \"transparent\",\n                \"height\": 40,\n                \"overflow\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              style={\n                Object {\n                  \"backgroundColor\": \"#e5e5e5\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            fadeDuration={0.1}\n            speed={1}\n            style={\n              Object {\n                \"flexDirection\": \"column\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"height\": 12,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"75%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n          </View>\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"height\": 16,\n              }\n            }\n          />\n          <View\n            dataSet={Object {}}\n            style={\n              Object {\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n              }\n            }\n          >\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"height\": 20,\n                  \"overflow\": \"hidden\",\n                  \"width\": 20,\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"flex\": 2,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n            <View\n              dataSet={Object {}}\n              style={\n                Object {\n                  \"width\": 8,\n                }\n              }\n            />\n            <View\n              dataSet={Object {}}\n              fadeDuration={0.1}\n              speed={1}\n              style={\n                Object {\n                  \"backgroundColor\": \"transparent\",\n                  \"borderRadius\": 9999,\n                  \"flex\": 1,\n                  \"height\": 12,\n                  \"overflow\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <View\n                style={\n                  Object {\n                    \"backgroundColor\": \"#e5e5e5\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n\nexports[`Storyshots useSafeArea Fixed 1`] = `\n<View>\n  <RNCSafeAreaProvider\n    onInsetsChange={[Function]}\n    style={\n      Array [\n        Object {\n          \"flex\": 1,\n        },\n        undefined,\n      ]\n    }\n  />\n</View>\n`;\n\nexports[`Storyshots useSafeArea Flexible 1`] = `\n<View>\n  <RNCSafeAreaProvider\n    onInsetsChange={[Function]}\n    style={\n      Array [\n        Object {\n          \"flex\": 1,\n        },\n        undefined,\n      ]\n    }\n  />\n</View>\n`;\n\nexports[`Storyshots useSafeArea Hook 1`] = `\n<View>\n  <RNCSafeAreaProvider\n    onInsetsChange={[Function]}\n    style={\n      Array [\n        Object {\n          \"flex\": 1,\n        },\n        undefined,\n      ]\n    }\n  />\n</View>\n`;\n\nexports[`Storyshots useSx Basic 1`] = `\n<RNCSafeAreaProvider\n  onInsetsChange={[Function]}\n  style={\n    Array [\n      Object {\n        \"flex\": 1,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    dataSet={Object {}}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#fafafa\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"paddingLeft\": 12,\n        \"paddingRight\": 12,\n      }\n    }\n  >\n    <View\n      accessibilityRole=\"button\"\n      accessible={true}\n      colorScheme=\"primary\"\n      dataSet={Object {}}\n      focusable={true}\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onHoverIn={[Function]}\n      onHoverOut={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"paddingBottom\": 12,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n          \"position\": \"absolute\",\n          \"right\": 32,\n          \"top\": 48,\n          \"zIndex\": 4,\n        }\n      }\n    >\n      <RNSVGSvgView\n        accessibilityRole=\"image\"\n        align=\"xMidYMid\"\n        bbHeight={24}\n        bbWidth={24}\n        color={4278751666}\n        dataSet={Object {}}\n        focusable={false}\n        meetOrSlice={0}\n        minX={0}\n        minY={0}\n        stroke=\"\"\n        style={\n          Array [\n            Object {\n              \"backgroundColor\": \"transparent\",\n              \"borderWidth\": 0,\n            },\n            Object {\n              \"color\": \"#0891b2\",\n              \"height\": 24,\n              \"width\": 24,\n            },\n            Object {\n              \"flex\": 0,\n              \"height\": 24,\n              \"width\": 24,\n            },\n          ]\n        }\n        tintColor={4278751666}\n        vbHeight={24}\n        vbWidth={24}\n      >\n        <RNSVGGroup\n          propList={\n            Array [\n              \"stroke\",\n            ]\n          }\n          stroke={null}\n        >\n          <RNSVGGroup>\n            <RNSVGPath\n              d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n              fill={\n                Array [\n                  2,\n                ]\n              }\n              propList={\n                Array [\n                  \"fill\",\n                  \"stroke\",\n                ]\n              }\n              stroke={null}\n            />\n          </RNSVGGroup>\n        </RNSVGGroup>\n      </RNSVGSvgView>\n    </View>\n    <View\n      style={\n        Array [\n          Object {\n            \"backgroundColor\": \"#a78bfa\",\n            \"height\": 192,\n            \"padding\": 8,\n            \"width\": 192,\n          },\n          Object {\n            \"alignItems\": \"center\",\n            \"justifyContent\": \"center\",\n          },\n        ]\n      }\n    >\n      <Text\n        style={\n          Object {\n            \"color\": \"#FFFFFF\",\n            \"height\": 48,\n            \"textAlign\": \"center\",\n            \"width\": 48,\n          }\n        }\n      >\n        New Feat useSx in NativeBase\n      </Text>\n    </View>\n  </View>\n</RNCSafeAreaProvider>\n`;\n"
  },
  {
    "path": "example/tests/storybook.test.js.snap.node",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Storyshots Actionsheet Composition 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Actionsheet\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Actionsheet Custom Backdrop 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"10px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"10px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(250,250,250,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            Actionsheet\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Actionsheet DisableOverlay 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Actionsheet\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Actionsheet Icon 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Actionsheet\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Actionsheet Usage 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Actionsheet\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Alert Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"start\",\n            \"WebkitJustifyContent\": \"flex-start\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(186,230,253,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"justifyContent\": \"flex-start\",\n            \"maxWidth\": \"400px\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"start\",\n            \"paddingBottom\": \"12px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"12px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexShrink\": 1,\n              \"flexShrink\": 1,\n              \"msFlexNegative\": 1,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"justify\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitFlexShrink\": 1,\n                \"WebkitJustifyContent\": \"space-between\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"flexShrink\": 1,\n                \"justifyContent\": \"space-between\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexNegative\": 1,\n                \"msFlexPack\": \"justify\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitFlexShrink\": 1,\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"flexShrink\": 1,\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexNegative\": 1,\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(3,105,161,1.00)\",\n                      \"height\": \"16px\",\n                      \"width\": \"16px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M12 0C9.62663 0 7.30655 0.703788 5.33316 2.02236C3.35977 3.34094 1.8217 5.21509 0.913451 7.4078C0.00519948 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6689 1.83649 18.807 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0865C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6935 24 14.3734 24 12C23.9966 8.81846 22.7312 5.76821 20.4815 3.51852C18.2318 1.26883 15.1815 0.00344108 12 0ZM12.25 5C12.5467 5 12.8367 5.08797 13.0834 5.25279C13.33 5.41762 13.5223 5.65189 13.6358 5.92597C13.7494 6.20006 13.7791 6.50166 13.7212 6.79263C13.6633 7.08361 13.5204 7.35088 13.3107 7.56066C13.1009 7.77044 12.8336 7.9133 12.5426 7.97118C12.2517 8.02905 11.9501 7.99935 11.676 7.88582C11.4019 7.77229 11.1676 7.58003 11.0028 7.33335C10.838 7.08668 10.75 6.79667 10.75 6.5C10.75 6.10217 10.908 5.72064 11.1893 5.43934C11.4706 5.15803 11.8522 5 12.25 5ZM14.5 18.5H10.5C10.2348 18.5 9.98043 18.3946 9.7929 18.2071C9.60536 18.0196 9.5 17.7652 9.5 17.5C9.5 17.2348 9.60536 16.9804 9.7929 16.7929C9.98043 16.6054 10.2348 16.5 10.5 16.5H11.25C11.3163 16.5 11.3799 16.4737 11.4268 16.4268C11.4737 16.3799 11.5 16.3163 11.5 16.25V11.75C11.5 11.6837 11.4737 11.6201 11.4268 11.5732C11.3799 11.5263 11.3163 11.5 11.25 11.5H10.5C10.2348 11.5 9.98043 11.3946 9.7929 11.2071C9.60536 11.0196 9.5 10.7652 9.5 10.5C9.5 10.2348 9.60536 9.98043 9.7929 9.79289C9.98043 9.60536 10.2348 9.5 10.5 9.5H11.5C12.0304 9.5 12.5391 9.71071 12.9142 10.0858C13.2893 10.4609 13.5 10.9696 13.5 11.5V16.25C13.5 16.3163 13.5263 16.3799 13.5732 16.4268C13.6201 16.4737 13.6837 16.5 13.75 16.5H14.5C14.7652 16.5 15.0196 16.6054 15.2071 16.7929C15.3946 16.9804 15.5 17.2348 15.5 17.5C15.5 17.7652 15.3946 18.0196 15.2071 18.2071C15.0196 18.3946 14.7652 18.5 14.5 18.5Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(31,41,55,1.00)\",\n                    \"fontSize\": \"16px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.25em\",\n                  }\n                }\n              >\n                We are going live in July!\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"10px\",\n                  \"paddingRight\": \"10px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <svg\n                role=\"img\"\n                stroke=\"\"\n                style={\n                  Object {\n                    \"color\": \"rgba(75,85,99,1.00)\",\n                    \"height\": \"12px\",\n                    \"width\": \"12px\",\n                  }\n                }\n                viewBox=\"0 0 24 24\"\n              >\n                <g>\n                  <path\n                    d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                    fill=\"currentColor\"\n                    stroke=\"\"\n                  />\n                </g>\n              </svg>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"4px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"paddingLeft\": \"24px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(75,85,99,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              We are happy to announce that we are going live on July 28th. Get ready!\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Alert ColorScheme 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"marginLeft\": \"12px\",\n          \"marginRight\": \"12px\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"start\",\n            \"WebkitJustifyContent\": \"flex-start\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(254,202,202,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"justifyContent\": \"flex-start\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"start\",\n            \"paddingBottom\": \"12px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"12px\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexShrink\": 1,\n              \"flexShrink\": 1,\n              \"msFlexNegative\": 1,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"justify\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitFlexShrink\": 1,\n                \"WebkitJustifyContent\": \"space-between\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"flexShrink\": 1,\n                \"justifyContent\": \"space-between\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexNegative\": 1,\n                \"msFlexPack\": \"justify\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitFlexShrink\": 1,\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"flexShrink\": 1,\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexNegative\": 1,\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(185,28,28,1.00)\",\n                      \"height\": \"16px\",\n                      \"width\": \"16px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M12 0C9.62663 0 7.30655 0.703788 5.33316 2.02236C3.35977 3.34094 1.8217 5.21509 0.913451 7.4078C0.00519948 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6689 1.83649 18.807 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0865C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6935 24 14.3734 24 12C23.9966 8.81846 22.7312 5.76821 20.4815 3.51852C18.2318 1.26883 15.1815 0.00344108 12 0ZM12.25 5C12.5467 5 12.8367 5.08797 13.0834 5.25279C13.33 5.41762 13.5223 5.65189 13.6358 5.92597C13.7494 6.20006 13.7791 6.50166 13.7212 6.79263C13.6633 7.08361 13.5204 7.35088 13.3107 7.56066C13.1009 7.77044 12.8336 7.9133 12.5426 7.97118C12.2517 8.02905 11.9501 7.99935 11.676 7.88582C11.4019 7.77229 11.1676 7.58003 11.0028 7.33335C10.838 7.08668 10.75 6.79667 10.75 6.5C10.75 6.10217 10.908 5.72064 11.1893 5.43934C11.4706 5.15803 11.8522 5 12.25 5ZM14.5 18.5H10.5C10.2348 18.5 9.98043 18.3946 9.7929 18.2071C9.60536 18.0196 9.5 17.7652 9.5 17.5C9.5 17.2348 9.60536 16.9804 9.7929 16.7929C9.98043 16.6054 10.2348 16.5 10.5 16.5H11.25C11.3163 16.5 11.3799 16.4737 11.4268 16.4268C11.4737 16.3799 11.5 16.3163 11.5 16.25V11.75C11.5 11.6837 11.4737 11.6201 11.4268 11.5732C11.3799 11.5263 11.3163 11.5 11.25 11.5H10.5C10.2348 11.5 9.98043 11.3946 9.7929 11.2071C9.60536 11.0196 9.5 10.7652 9.5 10.5C9.5 10.2348 9.60536 9.98043 9.7929 9.79289C9.98043 9.60536 10.2348 9.5 10.5 9.5H11.5C12.0304 9.5 12.5391 9.71071 12.9142 10.0858C13.2893 10.4609 13.5 10.9696 13.5 11.5V16.25C13.5 16.3163 13.5263 16.3799 13.5732 16.4268C13.6201 16.4737 13.6837 16.5 13.75 16.5H14.5C14.7652 16.5 15.0196 16.6054 15.2071 16.7929C15.3946 16.9804 15.5 17.2348 15.5 17.5C15.5 17.7652 15.3946 18.0196 15.2071 18.2071C15.0196 18.3946 14.7652 18.5 14.5 18.5Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(31,41,55,1.00)\",\n                    \"fontSize\": \"16px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Please try again later!\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"10px\",\n                  \"paddingRight\": \"10px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <svg\n                role=\"img\"\n                stroke=\"\"\n                style={\n                  Object {\n                    \"color\": \"rgba(75,85,99,1.00)\",\n                    \"height\": \"12px\",\n                    \"width\": \"12px\",\n                  }\n                }\n                viewBox=\"0 0 24 24\"\n              >\n                <g>\n                  <path\n                    d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                    fill=\"currentColor\"\n                    stroke=\"\"\n                  />\n                </g>\n              </svg>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"paddingLeft\": \"24px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(75,85,99,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Your coupon could not be processed at this time.\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"start\",\n            \"WebkitJustifyContent\": \"flex-start\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(254,215,170,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"justifyContent\": \"flex-start\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"start\",\n            \"paddingBottom\": \"12px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"12px\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexShrink\": 1,\n              \"flexShrink\": 1,\n              \"msFlexNegative\": 1,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"justify\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitFlexShrink\": 1,\n                \"WebkitJustifyContent\": \"space-between\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"flexShrink\": 1,\n                \"justifyContent\": \"space-between\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexNegative\": 1,\n                \"msFlexPack\": \"justify\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitFlexShrink\": 1,\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"flexShrink\": 1,\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexNegative\": 1,\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(194,65,12,1.00)\",\n                      \"height\": \"16px\",\n                      \"width\": \"16px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M12 0C9.62663 0 7.30655 0.703788 5.33316 2.02236C3.35977 3.34094 1.8217 5.21509 0.913451 7.4078C0.00519948 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6689 1.83649 18.807 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0865C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6935 24 14.3734 24 12C23.9966 8.81846 22.7312 5.76821 20.4815 3.51852C18.2318 1.26883 15.1815 0.00344108 12 0ZM12.25 5C12.5467 5 12.8367 5.08797 13.0834 5.25279C13.33 5.41762 13.5223 5.65189 13.6358 5.92597C13.7494 6.20006 13.7791 6.50166 13.7212 6.79263C13.6633 7.08361 13.5204 7.35088 13.3107 7.56066C13.1009 7.77044 12.8336 7.9133 12.5426 7.97118C12.2517 8.02905 11.9501 7.99935 11.676 7.88582C11.4019 7.77229 11.1676 7.58003 11.0028 7.33335C10.838 7.08668 10.75 6.79667 10.75 6.5C10.75 6.10217 10.908 5.72064 11.1893 5.43934C11.4706 5.15803 11.8522 5 12.25 5ZM14.5 18.5H10.5C10.2348 18.5 9.98043 18.3946 9.7929 18.2071C9.60536 18.0196 9.5 17.7652 9.5 17.5C9.5 17.2348 9.60536 16.9804 9.7929 16.7929C9.98043 16.6054 10.2348 16.5 10.5 16.5H11.25C11.3163 16.5 11.3799 16.4737 11.4268 16.4268C11.4737 16.3799 11.5 16.3163 11.5 16.25V11.75C11.5 11.6837 11.4737 11.6201 11.4268 11.5732C11.3799 11.5263 11.3163 11.5 11.25 11.5H10.5C10.2348 11.5 9.98043 11.3946 9.7929 11.2071C9.60536 11.0196 9.5 10.7652 9.5 10.5C9.5 10.2348 9.60536 9.98043 9.7929 9.79289C9.98043 9.60536 10.2348 9.5 10.5 9.5H11.5C12.0304 9.5 12.5391 9.71071 12.9142 10.0858C13.2893 10.4609 13.5 10.9696 13.5 11.5V16.25C13.5 16.3163 13.5263 16.3799 13.5732 16.4268C13.6201 16.4737 13.6837 16.5 13.75 16.5H14.5C14.7652 16.5 15.0196 16.6054 15.2071 16.7929C15.3946 16.9804 15.5 17.2348 15.5 17.5C15.5 17.7652 15.3946 18.0196 15.2071 18.2071C15.0196 18.3946 14.7652 18.5 14.5 18.5Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(31,41,55,1.00)\",\n                    \"fontSize\": \"16px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Please try again later!\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"10px\",\n                  \"paddingRight\": \"10px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <svg\n                role=\"img\"\n                stroke=\"\"\n                style={\n                  Object {\n                    \"color\": \"rgba(75,85,99,1.00)\",\n                    \"height\": \"12px\",\n                    \"width\": \"12px\",\n                  }\n                }\n                viewBox=\"0 0 24 24\"\n              >\n                <g>\n                  <path\n                    d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                    fill=\"currentColor\"\n                    stroke=\"\"\n                  />\n                </g>\n              </svg>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"paddingLeft\": \"24px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(75,85,99,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Your coupon could not be processed at this time.\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"start\",\n            \"WebkitJustifyContent\": \"flex-start\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(251,207,232,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"justifyContent\": \"flex-start\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"start\",\n            \"paddingBottom\": \"12px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"12px\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexShrink\": 1,\n              \"flexShrink\": 1,\n              \"msFlexNegative\": 1,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"justify\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitFlexShrink\": 1,\n                \"WebkitJustifyContent\": \"space-between\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"flexShrink\": 1,\n                \"justifyContent\": \"space-between\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexNegative\": 1,\n                \"msFlexPack\": \"justify\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitFlexShrink\": 1,\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"flexShrink\": 1,\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexNegative\": 1,\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(190,24,93,1.00)\",\n                      \"height\": \"16px\",\n                      \"width\": \"16px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M12 0C9.62663 0 7.30655 0.703788 5.33316 2.02236C3.35977 3.34094 1.8217 5.21509 0.913451 7.4078C0.00519948 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6689 1.83649 18.807 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0865C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6935 24 14.3734 24 12C23.9966 8.81846 22.7312 5.76821 20.4815 3.51852C18.2318 1.26883 15.1815 0.00344108 12 0ZM12.25 5C12.5467 5 12.8367 5.08797 13.0834 5.25279C13.33 5.41762 13.5223 5.65189 13.6358 5.92597C13.7494 6.20006 13.7791 6.50166 13.7212 6.79263C13.6633 7.08361 13.5204 7.35088 13.3107 7.56066C13.1009 7.77044 12.8336 7.9133 12.5426 7.97118C12.2517 8.02905 11.9501 7.99935 11.676 7.88582C11.4019 7.77229 11.1676 7.58003 11.0028 7.33335C10.838 7.08668 10.75 6.79667 10.75 6.5C10.75 6.10217 10.908 5.72064 11.1893 5.43934C11.4706 5.15803 11.8522 5 12.25 5ZM14.5 18.5H10.5C10.2348 18.5 9.98043 18.3946 9.7929 18.2071C9.60536 18.0196 9.5 17.7652 9.5 17.5C9.5 17.2348 9.60536 16.9804 9.7929 16.7929C9.98043 16.6054 10.2348 16.5 10.5 16.5H11.25C11.3163 16.5 11.3799 16.4737 11.4268 16.4268C11.4737 16.3799 11.5 16.3163 11.5 16.25V11.75C11.5 11.6837 11.4737 11.6201 11.4268 11.5732C11.3799 11.5263 11.3163 11.5 11.25 11.5H10.5C10.2348 11.5 9.98043 11.3946 9.7929 11.2071C9.60536 11.0196 9.5 10.7652 9.5 10.5C9.5 10.2348 9.60536 9.98043 9.7929 9.79289C9.98043 9.60536 10.2348 9.5 10.5 9.5H11.5C12.0304 9.5 12.5391 9.71071 12.9142 10.0858C13.2893 10.4609 13.5 10.9696 13.5 11.5V16.25C13.5 16.3163 13.5263 16.3799 13.5732 16.4268C13.6201 16.4737 13.6837 16.5 13.75 16.5H14.5C14.7652 16.5 15.0196 16.6054 15.2071 16.7929C15.3946 16.9804 15.5 17.2348 15.5 17.5C15.5 17.7652 15.3946 18.0196 15.2071 18.2071C15.0196 18.3946 14.7652 18.5 14.5 18.5Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(31,41,55,1.00)\",\n                    \"fontSize\": \"16px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Please try again later!\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"10px\",\n                  \"paddingRight\": \"10px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <svg\n                role=\"img\"\n                stroke=\"\"\n                style={\n                  Object {\n                    \"color\": \"rgba(75,85,99,1.00)\",\n                    \"height\": \"12px\",\n                    \"width\": \"12px\",\n                  }\n                }\n                viewBox=\"0 0 24 24\"\n              >\n                <g>\n                  <path\n                    d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                    fill=\"currentColor\"\n                    stroke=\"\"\n                  />\n                </g>\n              </svg>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"paddingLeft\": \"24px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(75,85,99,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Your coupon could not be processed at this time.\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Alert Composition 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"maxWidth\": \"400px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"start\",\n              \"WebkitJustifyContent\": \"flex-start\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(187,247,208,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"justifyContent\": \"flex-start\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"start\",\n              \"paddingBottom\": \"12px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"12px\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexShrink\": 1,\n                \"flexShrink\": 1,\n                \"msFlexNegative\": 1,\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"justify\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitFlexShrink\": 1,\n                  \"WebkitJustifyContent\": \"space-between\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"flexShrink\": 1,\n                  \"justifyContent\": \"space-between\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexNegative\": 1,\n                  \"msFlexPack\": \"justify\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitFlexShrink\": 1,\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"flexShrink\": 1,\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexNegative\": 1,\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(21,128,61,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"16px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"500\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Application received!\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"4px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n                onBlur={[Function]}\n                onClick={[Function]}\n                onContextMenu={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                role=\"button\"\n                style={\n                  Object {\n                    \"MozUserSelect\": \"none\",\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"WebkitUserSelect\": \"none\",\n                    \"alignItems\": \"center\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"cursor\": \"pointer\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexPack\": \"center\",\n                    \"msTouchAction\": \"manipulation\",\n                    \"msUserSelect\": \"none\",\n                    \"paddingBottom\": \"10px\",\n                    \"paddingLeft\": \"10px\",\n                    \"paddingRight\": \"10px\",\n                    \"paddingTop\": \"10px\",\n                    \"touchAction\": \"manipulation\",\n                    \"userSelect\": \"none\",\n                  }\n                }\n                tabIndex=\"0\"\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(75,85,99,1.00)\",\n                      \"height\": \"12px\",\n                      \"width\": \"12px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"paddingLeft\": \"24px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Your application has been received. We will review your application and respond within the next 48 hours.\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"20px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"start\",\n              \"WebkitJustifyContent\": \"flex-start\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(187,247,208,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"justifyContent\": \"flex-start\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"start\",\n              \"paddingBottom\": \"12px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"12px\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitFlexShrink\": 1,\n                \"alignItems\": \"center\",\n                \"flexShrink\": 1,\n                \"msFlexAlign\": \"center\",\n                \"msFlexNegative\": 1,\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <svg\n                role=\"img\"\n                stroke=\"\"\n                style={\n                  Object {\n                    \"color\": \"rgba(21,128,61,1.00)\",\n                    \"height\": \"20px\",\n                    \"width\": \"20px\",\n                  }\n                }\n                viewBox=\"0 0 24 24\"\n              >\n                <g>\n                  <path\n                    d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z\"\n                    fill=\"currentColor\"\n                    stroke=\"\"\n                  />\n                </g>\n              </svg>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"4px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"500\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Application received!\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"4px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                    \"textAlign\": \"center\",\n                  }\n                }\n              >\n                Your application has been received. We will review your application and respond within the next 48 hours.\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Alert Status 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"maxWidth\": \"400px\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"start\",\n            \"WebkitJustifyContent\": \"flex-start\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(187,247,208,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"justifyContent\": \"flex-start\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"start\",\n            \"paddingBottom\": \"12px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"12px\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexShrink\": 1,\n              \"flexShrink\": 1,\n              \"msFlexNegative\": 1,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"justify\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitFlexShrink\": 1,\n                \"WebkitJustifyContent\": \"space-between\",\n                \"flexDirection\": \"row\",\n                \"flexShrink\": 1,\n                \"justifyContent\": \"space-between\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexNegative\": 1,\n                \"msFlexPack\": \"justify\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitFlexShrink\": 1,\n                  \"flexDirection\": \"row\",\n                  \"flexShrink\": 1,\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexNegative\": 1,\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(21,128,61,1.00)\",\n                      \"height\": \"16px\",\n                      \"marginTop\": \"4px\",\n                      \"width\": \"16px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(31,41,55,1.00)\",\n                    \"fontSize\": \"16px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Selection successfully moved!\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"10px\",\n                  \"paddingRight\": \"10px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <svg\n                role=\"img\"\n                stroke=\"\"\n                style={\n                  Object {\n                    \"color\": \"rgba(75,85,99,1.00)\",\n                    \"height\": \"12px\",\n                    \"width\": \"12px\",\n                  }\n                }\n                viewBox=\"0 0 24 24\"\n              >\n                <g>\n                  <path\n                    d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                    fill=\"currentColor\"\n                    stroke=\"\"\n                  />\n                </g>\n              </svg>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"12px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"start\",\n            \"WebkitJustifyContent\": \"flex-start\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(254,202,202,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"justifyContent\": \"flex-start\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"start\",\n            \"paddingBottom\": \"12px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"12px\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexShrink\": 1,\n              \"flexShrink\": 1,\n              \"msFlexNegative\": 1,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"justify\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitFlexShrink\": 1,\n                \"WebkitJustifyContent\": \"space-between\",\n                \"flexDirection\": \"row\",\n                \"flexShrink\": 1,\n                \"justifyContent\": \"space-between\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexNegative\": 1,\n                \"msFlexPack\": \"justify\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitFlexShrink\": 1,\n                  \"flexDirection\": \"row\",\n                  \"flexShrink\": 1,\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexNegative\": 1,\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(185,28,28,1.00)\",\n                      \"height\": \"16px\",\n                      \"marginTop\": \"4px\",\n                      \"width\": \"16px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <g\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    >\n                      <path\n                        d=\"M13.9193 18.4271C13.8992 17.9392 13.6816 17.4813 13.3178 17.1478C12.9545 16.8148 12.4731 16.631 11.975 16.6304H11.9746H11.945V16.6304L11.9392 16.6305C11.6898 16.6348 11.4434 16.6864 11.2142 16.7827L11.333 17.0655L11.2142 16.7827C10.9851 16.879 10.7773 17.0183 10.6035 17.1931C10.4296 17.368 10.2932 17.5751 10.2031 17.8026C10.113 18.0302 10.0712 18.2732 10.0806 18.5171L10.0807 18.5176C10.1001 19.0055 10.3169 19.4638 10.6802 19.7979C11.043 20.1315 11.5241 20.3162 12.0222 20.3177H12.0233H12.0529V20.3178L12.058 20.3177C12.3081 20.3138 12.5552 20.2624 12.785 20.1661C13.0148 20.0698 13.2232 19.9303 13.3974 19.7549C13.5716 19.5795 13.7081 19.3718 13.7981 19.1436C13.8881 18.9153 13.9295 18.6716 13.9193 18.4271ZM13.9193 18.4271L13.5863 18.4408M13.9193 18.4271C13.9193 18.4271 13.9193 18.4271 13.9193 18.427L13.5863 18.4408M13.5863 18.4408C13.5945 18.6386 13.5611 18.836 13.488 19.0213C13.415 19.2066 13.3037 19.3762 13.1609 19.52C13.018 19.6638 12.8464 19.779 12.6561 19.8587C12.4658 19.9385 12.2607 19.9812 12.0529 19.9844H12.0233C11.6062 19.9831 11.2058 19.8284 10.9059 19.5525C10.6059 19.2767 10.4296 18.9011 10.4137 18.5043C10.4061 18.3069 10.4399 18.1101 10.513 17.9254C10.5862 17.7406 10.6973 17.5715 10.8399 17.4281C10.9824 17.2847 11.1536 17.1698 11.3434 17.09C11.5331 17.0103 11.7376 16.9674 11.945 16.9638H11.9746C12.3916 16.9642 12.7922 17.1182 13.0926 17.3936C13.393 17.6689 13.5699 18.0442 13.5863 18.4408ZM23.4665 20.2125L23.4665 20.2125C23.6068 20.4676 23.6751 20.7517 23.6658 21.0376C23.6566 21.3234 23.57 21.6033 23.4131 21.8501C23.2562 22.097 23.0337 22.3031 22.7658 22.4469C22.4978 22.5907 22.1942 22.6667 21.8847 22.6667H21.8846H2.11538H2.11533C1.80576 22.6667 1.50222 22.5907 1.23422 22.4469C0.96631 22.3031 0.743845 22.097 0.586879 21.8501L0.305565 22.0289L0.586879 21.8501C0.429998 21.6033 0.343434 21.3234 0.334166 21.0376C0.324898 20.7517 0.393165 20.4676 0.533517 20.2125L0.53353 20.2125L10.4192 2.23977C10.5681 1.96911 10.7933 1.74021 11.0721 1.5796C11.3511 1.41893 11.6722 1.33333 12.0005 1.33333C12.3289 1.33333 12.65 1.41893 12.9289 1.5796C13.2078 1.74021 13.4329 1.96911 13.5819 2.23977L23.4665 20.2125ZM11.0224 7.44182C10.7599 7.69176 10.6091 8.03434 10.6091 8.39521V14.4365C10.6091 14.7974 10.7599 15.1399 11.0224 15.3899C11.2843 15.6393 11.6363 15.7767 12 15.7767C12.3637 15.7767 12.7157 15.6393 12.9776 15.3899C13.2401 15.1399 13.3909 14.7974 13.3909 14.4365V8.39521C13.3909 8.03434 13.2401 7.69176 12.9776 7.44182C12.7157 7.19242 12.3637 7.05499 12 7.05499C11.6363 7.05499 11.2843 7.19242 11.0224 7.44182Z\"\n                        stroke=\"currentColor\"\n                        strokeWidth=\"0.666667\"\n                      />\n                    </g>\n                  </g>\n                </svg>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(31,41,55,1.00)\",\n                    \"fontSize\": \"16px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Please try again later!\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"10px\",\n                  \"paddingRight\": \"10px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <svg\n                role=\"img\"\n                stroke=\"\"\n                style={\n                  Object {\n                    \"color\": \"rgba(75,85,99,1.00)\",\n                    \"height\": \"12px\",\n                    \"width\": \"12px\",\n                  }\n                }\n                viewBox=\"0 0 24 24\"\n              >\n                <g>\n                  <path\n                    d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                    fill=\"currentColor\"\n                    stroke=\"\"\n                  />\n                </g>\n              </svg>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"12px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"start\",\n            \"WebkitJustifyContent\": \"flex-start\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(186,230,253,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"justifyContent\": \"flex-start\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"start\",\n            \"paddingBottom\": \"12px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"12px\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexShrink\": 1,\n              \"flexShrink\": 1,\n              \"msFlexNegative\": 1,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"justify\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitFlexShrink\": 1,\n                \"WebkitJustifyContent\": \"space-between\",\n                \"flexDirection\": \"row\",\n                \"flexShrink\": 1,\n                \"justifyContent\": \"space-between\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexNegative\": 1,\n                \"msFlexPack\": \"justify\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitFlexShrink\": 1,\n                  \"flexDirection\": \"row\",\n                  \"flexShrink\": 1,\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexNegative\": 1,\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(3,105,161,1.00)\",\n                      \"height\": \"16px\",\n                      \"marginTop\": \"4px\",\n                      \"width\": \"16px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M12 0C9.62663 0 7.30655 0.703788 5.33316 2.02236C3.35977 3.34094 1.8217 5.21509 0.913451 7.4078C0.00519948 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6689 1.83649 18.807 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0865C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6935 24 14.3734 24 12C23.9966 8.81846 22.7312 5.76821 20.4815 3.51852C18.2318 1.26883 15.1815 0.00344108 12 0ZM12.25 5C12.5467 5 12.8367 5.08797 13.0834 5.25279C13.33 5.41762 13.5223 5.65189 13.6358 5.92597C13.7494 6.20006 13.7791 6.50166 13.7212 6.79263C13.6633 7.08361 13.5204 7.35088 13.3107 7.56066C13.1009 7.77044 12.8336 7.9133 12.5426 7.97118C12.2517 8.02905 11.9501 7.99935 11.676 7.88582C11.4019 7.77229 11.1676 7.58003 11.0028 7.33335C10.838 7.08668 10.75 6.79667 10.75 6.5C10.75 6.10217 10.908 5.72064 11.1893 5.43934C11.4706 5.15803 11.8522 5 12.25 5ZM14.5 18.5H10.5C10.2348 18.5 9.98043 18.3946 9.7929 18.2071C9.60536 18.0196 9.5 17.7652 9.5 17.5C9.5 17.2348 9.60536 16.9804 9.7929 16.7929C9.98043 16.6054 10.2348 16.5 10.5 16.5H11.25C11.3163 16.5 11.3799 16.4737 11.4268 16.4268C11.4737 16.3799 11.5 16.3163 11.5 16.25V11.75C11.5 11.6837 11.4737 11.6201 11.4268 11.5732C11.3799 11.5263 11.3163 11.5 11.25 11.5H10.5C10.2348 11.5 9.98043 11.3946 9.7929 11.2071C9.60536 11.0196 9.5 10.7652 9.5 10.5C9.5 10.2348 9.60536 9.98043 9.7929 9.79289C9.98043 9.60536 10.2348 9.5 10.5 9.5H11.5C12.0304 9.5 12.5391 9.71071 12.9142 10.0858C13.2893 10.4609 13.5 10.9696 13.5 11.5V16.25C13.5 16.3163 13.5263 16.3799 13.5732 16.4268C13.6201 16.4737 13.6837 16.5 13.75 16.5H14.5C14.7652 16.5 15.0196 16.6054 15.2071 16.7929C15.3946 16.9804 15.5 17.2348 15.5 17.5C15.5 17.7652 15.3946 18.0196 15.2071 18.2071C15.0196 18.3946 14.7652 18.5 14.5 18.5Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(31,41,55,1.00)\",\n                    \"fontSize\": \"16px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                We are going live in July!\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"10px\",\n                  \"paddingRight\": \"10px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <svg\n                role=\"img\"\n                stroke=\"\"\n                style={\n                  Object {\n                    \"color\": \"rgba(75,85,99,1.00)\",\n                    \"height\": \"12px\",\n                    \"width\": \"12px\",\n                  }\n                }\n                viewBox=\"0 0 24 24\"\n              >\n                <g>\n                  <path\n                    d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                    fill=\"currentColor\"\n                    stroke=\"\"\n                  />\n                </g>\n              </svg>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"12px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"start\",\n            \"WebkitJustifyContent\": \"flex-start\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(254,215,170,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"justifyContent\": \"flex-start\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"start\",\n            \"paddingBottom\": \"12px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"12px\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexShrink\": 1,\n              \"flexShrink\": 1,\n              \"msFlexNegative\": 1,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"justify\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitFlexShrink\": 1,\n                \"WebkitJustifyContent\": \"space-between\",\n                \"flexDirection\": \"row\",\n                \"flexShrink\": 1,\n                \"justifyContent\": \"space-between\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexNegative\": 1,\n                \"msFlexPack\": \"justify\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitFlexShrink\": 1,\n                  \"flexDirection\": \"row\",\n                  \"flexShrink\": 1,\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexNegative\": 1,\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(194,65,12,1.00)\",\n                      \"height\": \"16px\",\n                      \"marginTop\": \"4px\",\n                      \"width\": \"16px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M11.9836 0.00267822C8.77744 0.0551662 5.72075 1.36728 3.47427 3.65538C2.35024 4.77447 1.46338 6.10869 0.866705 7.57831C0.270027 9.04793 -0.0242179 10.6228 0.00155827 12.2087C-0.000286057 13.7583 0.303697 15.2931 0.896087 16.7251C1.48848 18.1571 2.35763 19.458 3.45373 20.5535C4.54983 21.6489 5.85133 22.5173 7.28365 23.1089C8.71596 23.7004 10.2509 24.0035 11.8006 24.0007H12.0146C15.2217 23.9677 18.2847 22.6638 20.5316 20.3751C22.7785 18.0864 24.0257 14.9999 23.9996 11.7927C24.0033 10.2243 23.6933 8.6709 23.0879 7.22398C22.4825 5.77706 21.5939 4.4658 20.4744 3.36731C19.3548 2.26882 18.0269 1.40527 16.5688 0.827453C15.1106 0.249636 13.5517 -0.0307856 11.9836 0.00267822ZM10.5007 16.5433C10.4935 16.3473 10.5254 16.1517 10.5947 15.9682C10.6639 15.7846 10.7691 15.6167 10.904 15.4742C11.0389 15.3318 11.2009 15.2177 11.3804 15.1386C11.5599 15.0594 11.7534 15.0169 11.9496 15.0135H11.9766C12.3712 15.0142 12.7501 15.1677 13.034 15.4417C13.3179 15.7157 13.4847 16.089 13.4995 16.4833C13.5068 16.6794 13.4749 16.875 13.4057 17.0586C13.3365 17.2423 13.2314 17.4102 13.0965 17.5527C12.9615 17.6952 12.7995 17.8093 12.6199 17.8884C12.4403 17.9674 12.2468 18.0099 12.0506 18.0132H12.0236C11.6291 18.0119 11.2505 17.8583 10.9667 17.5844C10.6829 17.3105 10.5159 16.9375 10.5007 16.5433ZM11.0007 12.5017V6.50215C11.0007 6.23695 11.106 5.98262 11.2935 5.7951C11.481 5.60758 11.7354 5.50223 12.0006 5.50223C12.2658 5.50223 12.5201 5.60758 12.7076 5.7951C12.8951 5.98262 13.0005 6.23695 13.0005 6.50215V12.5017C13.0005 12.7669 12.8951 13.0212 12.7076 13.2087C12.5201 13.3962 12.2658 13.5016 12.0006 13.5016C11.7354 13.5016 11.481 13.3962 11.2935 13.2087C11.106 13.0212 11.0007 12.7669 11.0007 12.5017Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(31,41,55,1.00)\",\n                    \"fontSize\": \"16px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Poor internet connection.\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"10px\",\n                  \"paddingRight\": \"10px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <svg\n                role=\"img\"\n                stroke=\"\"\n                style={\n                  Object {\n                    \"color\": \"rgba(75,85,99,1.00)\",\n                    \"height\": \"12px\",\n                    \"width\": \"12px\",\n                  }\n                }\n                viewBox=\"0 0 24 24\"\n              >\n                <g>\n                  <path\n                    d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                    fill=\"currentColor\"\n                    stroke=\"\"\n                  />\n                </g>\n              </svg>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Alert Usage 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"start\",\n            \"WebkitJustifyContent\": \"flex-start\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(186,230,253,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"justifyContent\": \"flex-start\",\n            \"maxWidth\": \"400px\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"start\",\n            \"paddingBottom\": \"12px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"12px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexShrink\": 1,\n              \"flexShrink\": 1,\n              \"msFlexNegative\": 1,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"justify\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitFlexShrink\": 1,\n                \"WebkitJustifyContent\": \"space-between\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"flexShrink\": 1,\n                \"justifyContent\": \"space-between\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexNegative\": 1,\n                \"msFlexPack\": \"justify\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitFlexShrink\": 1,\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"flexShrink\": 1,\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexNegative\": 1,\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(3,105,161,1.00)\",\n                      \"height\": \"16px\",\n                      \"width\": \"16px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M12 0C9.62663 0 7.30655 0.703788 5.33316 2.02236C3.35977 3.34094 1.8217 5.21509 0.913451 7.4078C0.00519948 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6689 1.83649 18.807 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0865C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6935 24 14.3734 24 12C23.9966 8.81846 22.7312 5.76821 20.4815 3.51852C18.2318 1.26883 15.1815 0.00344108 12 0ZM12.25 5C12.5467 5 12.8367 5.08797 13.0834 5.25279C13.33 5.41762 13.5223 5.65189 13.6358 5.92597C13.7494 6.20006 13.7791 6.50166 13.7212 6.79263C13.6633 7.08361 13.5204 7.35088 13.3107 7.56066C13.1009 7.77044 12.8336 7.9133 12.5426 7.97118C12.2517 8.02905 11.9501 7.99935 11.676 7.88582C11.4019 7.77229 11.1676 7.58003 11.0028 7.33335C10.838 7.08668 10.75 6.79667 10.75 6.5C10.75 6.10217 10.908 5.72064 11.1893 5.43934C11.4706 5.15803 11.8522 5 12.25 5ZM14.5 18.5H10.5C10.2348 18.5 9.98043 18.3946 9.7929 18.2071C9.60536 18.0196 9.5 17.7652 9.5 17.5C9.5 17.2348 9.60536 16.9804 9.7929 16.7929C9.98043 16.6054 10.2348 16.5 10.5 16.5H11.25C11.3163 16.5 11.3799 16.4737 11.4268 16.4268C11.4737 16.3799 11.5 16.3163 11.5 16.25V11.75C11.5 11.6837 11.4737 11.6201 11.4268 11.5732C11.3799 11.5263 11.3163 11.5 11.25 11.5H10.5C10.2348 11.5 9.98043 11.3946 9.7929 11.2071C9.60536 11.0196 9.5 10.7652 9.5 10.5C9.5 10.2348 9.60536 9.98043 9.7929 9.79289C9.98043 9.60536 10.2348 9.5 10.5 9.5H11.5C12.0304 9.5 12.5391 9.71071 12.9142 10.0858C13.2893 10.4609 13.5 10.9696 13.5 11.5V16.25C13.5 16.3163 13.5263 16.3799 13.5732 16.4268C13.6201 16.4737 13.6837 16.5 13.75 16.5H14.5C14.7652 16.5 15.0196 16.6054 15.2071 16.7929C15.3946 16.9804 15.5 17.2348 15.5 17.5C15.5 17.7652 15.3946 18.0196 15.2071 18.2071C15.0196 18.3946 14.7652 18.5 14.5 18.5Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(31,41,55,1.00)\",\n                    \"fontSize\": \"16px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                We are going live in July!\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"10px\",\n                  \"paddingRight\": \"10px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <svg\n                role=\"img\"\n                stroke=\"\"\n                style={\n                  Object {\n                    \"color\": \"rgba(75,85,99,1.00)\",\n                    \"height\": \"12px\",\n                    \"width\": \"12px\",\n                  }\n                }\n                viewBox=\"0 0 24 24\"\n              >\n                <g>\n                  <path\n                    d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                    fill=\"currentColor\"\n                    stroke=\"\"\n                  />\n                </g>\n              </svg>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"paddingLeft\": \"24px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(75,85,99,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              We are happy to announce that we are going live on July 28th. Get ready!\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Alert Variant 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      onScroll={[Function]}\n      onTouchEnd={[Function]}\n      onTouchMove={[Function]}\n      onTouchStart={[Function]}\n      onWheel={[Function]}\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxFlex\": 1,\n          \"WebkitBoxOrient\": \"vertical\",\n          \"WebkitFlexDirection\": \"column\",\n          \"WebkitFlexGrow\": 1,\n          \"WebkitFlexShrink\": 1,\n          \"WebkitOverflowScrolling\": \"touch\",\n          \"WebkitTransform\": \"translateZ(0px)\",\n          \"flexDirection\": \"column\",\n          \"flexGrow\": 1,\n          \"flexShrink\": 1,\n          \"marginTop\": \"20px\",\n          \"msFlexDirection\": \"column\",\n          \"msFlexNegative\": 1,\n          \"msFlexPositive\": 1,\n          \"overflowX\": \"hidden\",\n          \"overflowY\": \"auto\",\n          \"transform\": \"translateZ(0px)\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"dataSet\": Object {},\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"vertical\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"column\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"column\",\n              \"justifyContent\": \"center\",\n              \"marginRight\": \"20px\",\n              \"maxWidth\": \"400px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"column\",\n              \"msFlexPack\": \"center\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginBottom\": \"16px\",\n                \"textAlign\": \"center\",\n              }\n            }\n          >\n            solid\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"start\",\n                \"WebkitJustifyContent\": \"flex-start\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(21,128,61,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"justifyContent\": \"flex-start\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"start\",\n                \"paddingBottom\": \"12px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"12px\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitFlexShrink\": 1,\n                  \"flexShrink\": 1,\n                  \"msFlexNegative\": 1,\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"justify\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitFlexShrink\": 1,\n                    \"WebkitJustifyContent\": \"space-between\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"flexShrink\": 1,\n                    \"justifyContent\": \"space-between\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexNegative\": 1,\n                    \"msFlexPack\": \"justify\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxDirection\": \"normal\",\n                      \"WebkitBoxOrient\": \"horizontal\",\n                      \"WebkitFlexDirection\": \"row\",\n                      \"WebkitFlexShrink\": 1,\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                      \"flexShrink\": 1,\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexDirection\": \"row\",\n                      \"msFlexNegative\": 1,\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                  >\n                    <svg\n                      role=\"img\"\n                      stroke=\"\"\n                      style={\n                        Object {\n                          \"color\": \"rgba(250,250,250,1.00)\",\n                          \"height\": \"16px\",\n                          \"width\": \"16px\",\n                        }\n                      }\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <g>\n                        <path\n                          d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z\"\n                          fill=\"currentColor\"\n                          stroke=\"\"\n                        />\n                      </g>\n                    </svg>\n                  </div>\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"width\": \"8px\",\n                      }\n                    }\n                  />\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(250,250,249,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Selection successfully moved!\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"marginBottom\": \"10px\",\n                \"marginTop\": \"20px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginBottom\": \"16px\",\n                \"textAlign\": \"center\",\n              }\n            }\n          >\n            left-accent\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"start\",\n                \"WebkitJustifyContent\": \"flex-start\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(187,247,208,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderLeftColor\": \"rgba(21,128,61,1.00)\",\n                \"borderLeftWidth\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"justifyContent\": \"flex-start\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"start\",\n                \"paddingBottom\": \"12px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"12px\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitFlexShrink\": 1,\n                  \"flexShrink\": 1,\n                  \"msFlexNegative\": 1,\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"justify\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitFlexShrink\": 1,\n                    \"WebkitJustifyContent\": \"space-between\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"flexShrink\": 1,\n                    \"justifyContent\": \"space-between\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexNegative\": 1,\n                    \"msFlexPack\": \"justify\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxDirection\": \"normal\",\n                      \"WebkitBoxOrient\": \"horizontal\",\n                      \"WebkitFlexDirection\": \"row\",\n                      \"WebkitFlexShrink\": 1,\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                      \"flexShrink\": 1,\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexDirection\": \"row\",\n                      \"msFlexNegative\": 1,\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                  >\n                    <svg\n                      role=\"img\"\n                      stroke=\"\"\n                      style={\n                        Object {\n                          \"color\": \"rgba(21,128,61,1.00)\",\n                          \"height\": \"16px\",\n                          \"width\": \"16px\",\n                        }\n                      }\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <g>\n                        <path\n                          d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z\"\n                          fill=\"currentColor\"\n                          stroke=\"\"\n                        />\n                      </g>\n                    </svg>\n                  </div>\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"width\": \"8px\",\n                      }\n                    }\n                  />\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(31,41,55,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Selection successfully moved!\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"marginBottom\": \"10px\",\n                \"marginTop\": \"20px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginBottom\": \"16px\",\n                \"textAlign\": \"center\",\n              }\n            }\n          >\n            top-accent\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"start\",\n                \"WebkitJustifyContent\": \"flex-start\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(187,247,208,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopColor\": \"rgba(21,128,61,1.00)\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"borderTopWidth\": \"4px\",\n                \"justifyContent\": \"flex-start\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"start\",\n                \"paddingBottom\": \"12px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"12px\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitFlexShrink\": 1,\n                  \"flexShrink\": 1,\n                  \"msFlexNegative\": 1,\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"justify\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitFlexShrink\": 1,\n                    \"WebkitJustifyContent\": \"space-between\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"flexShrink\": 1,\n                    \"justifyContent\": \"space-between\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexNegative\": 1,\n                    \"msFlexPack\": \"justify\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxDirection\": \"normal\",\n                      \"WebkitBoxOrient\": \"horizontal\",\n                      \"WebkitFlexDirection\": \"row\",\n                      \"WebkitFlexShrink\": 1,\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                      \"flexShrink\": 1,\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexDirection\": \"row\",\n                      \"msFlexNegative\": 1,\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                  >\n                    <svg\n                      role=\"img\"\n                      stroke=\"\"\n                      style={\n                        Object {\n                          \"color\": \"rgba(21,128,61,1.00)\",\n                          \"height\": \"16px\",\n                          \"width\": \"16px\",\n                        }\n                      }\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <g>\n                        <path\n                          d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z\"\n                          fill=\"currentColor\"\n                          stroke=\"\"\n                        />\n                      </g>\n                    </svg>\n                  </div>\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"width\": \"8px\",\n                      }\n                    }\n                  />\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(31,41,55,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Selection successfully moved!\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"marginBottom\": \"10px\",\n                \"marginTop\": \"20px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginBottom\": \"16px\",\n                \"textAlign\": \"center\",\n              }\n            }\n          >\n            outline\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"start\",\n                \"WebkitJustifyContent\": \"flex-start\",\n                \"alignItems\": \"center\",\n                \"borderBottomColor\": \"rgba(21,128,61,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(21,128,61,1.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(21,128,61,1.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(21,128,61,1.00)\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"borderTopWidth\": \"1px\",\n                \"justifyContent\": \"flex-start\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"start\",\n                \"paddingBottom\": \"12px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"12px\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitFlexShrink\": 1,\n                  \"flexShrink\": 1,\n                  \"msFlexNegative\": 1,\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"justify\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitFlexShrink\": 1,\n                    \"WebkitJustifyContent\": \"space-between\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"flexShrink\": 1,\n                    \"justifyContent\": \"space-between\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexNegative\": 1,\n                    \"msFlexPack\": \"justify\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxDirection\": \"normal\",\n                      \"WebkitBoxOrient\": \"horizontal\",\n                      \"WebkitFlexDirection\": \"row\",\n                      \"WebkitFlexShrink\": 1,\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                      \"flexShrink\": 1,\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexDirection\": \"row\",\n                      \"msFlexNegative\": 1,\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                  >\n                    <svg\n                      role=\"img\"\n                      stroke=\"\"\n                      style={\n                        Object {\n                          \"color\": \"rgba(21,128,61,1.00)\",\n                          \"height\": \"16px\",\n                          \"width\": \"16px\",\n                        }\n                      }\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <g>\n                        <path\n                          d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z\"\n                          fill=\"currentColor\"\n                          stroke=\"\"\n                        />\n                      </g>\n                    </svg>\n                  </div>\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"width\": \"8px\",\n                      }\n                    }\n                  />\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(23,23,23,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Selection successfully moved!\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"marginBottom\": \"10px\",\n                \"marginTop\": \"20px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginBottom\": \"16px\",\n                \"textAlign\": \"center\",\n              }\n            }\n          >\n            subtle\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"start\",\n                \"WebkitJustifyContent\": \"flex-start\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(187,247,208,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"justifyContent\": \"flex-start\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"start\",\n                \"paddingBottom\": \"12px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"12px\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitFlexShrink\": 1,\n                  \"flexShrink\": 1,\n                  \"msFlexNegative\": 1,\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"justify\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitFlexShrink\": 1,\n                    \"WebkitJustifyContent\": \"space-between\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"flexShrink\": 1,\n                    \"justifyContent\": \"space-between\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexNegative\": 1,\n                    \"msFlexPack\": \"justify\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxDirection\": \"normal\",\n                      \"WebkitBoxOrient\": \"horizontal\",\n                      \"WebkitFlexDirection\": \"row\",\n                      \"WebkitFlexShrink\": 1,\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                      \"flexShrink\": 1,\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexDirection\": \"row\",\n                      \"msFlexNegative\": 1,\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                  >\n                    <svg\n                      role=\"img\"\n                      stroke=\"\"\n                      style={\n                        Object {\n                          \"color\": \"rgba(21,128,61,1.00)\",\n                          \"height\": \"16px\",\n                          \"width\": \"16px\",\n                        }\n                      }\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <g>\n                        <path\n                          d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z\"\n                          fill=\"currentColor\"\n                          stroke=\"\"\n                        />\n                      </g>\n                    </svg>\n                  </div>\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"width\": \"8px\",\n                      }\n                    }\n                  />\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(31,41,55,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Selection successfully moved!\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"marginBottom\": \"10px\",\n                \"marginTop\": \"20px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginBottom\": \"16px\",\n                \"textAlign\": \"center\",\n              }\n            }\n          >\n            outline-light\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"start\",\n                \"WebkitJustifyContent\": \"flex-start\",\n                \"alignItems\": \"center\",\n                \"borderBottomColor\": \"rgba(21,128,61,0.40)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(21,128,61,0.40)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(21,128,61,0.40)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(21,128,61,0.40)\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"borderTopWidth\": \"1px\",\n                \"justifyContent\": \"flex-start\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"start\",\n                \"paddingBottom\": \"12px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"12px\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitFlexShrink\": 1,\n                  \"flexShrink\": 1,\n                  \"msFlexNegative\": 1,\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"justify\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitFlexShrink\": 1,\n                    \"WebkitJustifyContent\": \"space-between\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"flexShrink\": 1,\n                    \"justifyContent\": \"space-between\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexNegative\": 1,\n                    \"msFlexPack\": \"justify\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxDirection\": \"normal\",\n                      \"WebkitBoxOrient\": \"horizontal\",\n                      \"WebkitFlexDirection\": \"row\",\n                      \"WebkitFlexShrink\": 1,\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                      \"flexShrink\": 1,\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexDirection\": \"row\",\n                      \"msFlexNegative\": 1,\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                  >\n                    <svg\n                      role=\"img\"\n                      stroke=\"\"\n                      style={\n                        Object {\n                          \"color\": \"rgba(21,128,61,1.00)\",\n                          \"height\": \"16px\",\n                          \"width\": \"16px\",\n                        }\n                      }\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <g>\n                        <path\n                          d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z\"\n                          fill=\"currentColor\"\n                          stroke=\"\"\n                        />\n                      </g>\n                    </svg>\n                  </div>\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"width\": \"8px\",\n                      }\n                    }\n                  />\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(23,23,23,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Selection successfully moved!\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"marginBottom\": \"10px\",\n                \"marginTop\": \"20px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Alert action 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"MozTransition\": \"height 400ms\",\n            \"WebkitTransition\": \"height 400ms\",\n            \"height\": \"0px\",\n            \"overflowX\": \"hidden\",\n            \"overflowY\": \"hidden\",\n            \"transition\": \"height 400ms\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"overflowX\": \"auto\",\n              \"overflowY\": \"auto\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"start\",\n                \"WebkitJustifyContent\": \"flex-start\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(254,202,202,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"justifyContent\": \"flex-start\",\n                \"maxWidth\": \"400px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"start\",\n                \"paddingBottom\": \"12px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"12px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitFlexShrink\": 1,\n                  \"flexShrink\": 1,\n                  \"msFlexNegative\": 1,\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"justify\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitFlexShrink\": 1,\n                    \"WebkitJustifyContent\": \"space-between\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"flexShrink\": 1,\n                    \"justifyContent\": \"space-between\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexNegative\": 1,\n                    \"msFlexPack\": \"justify\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxDirection\": \"normal\",\n                      \"WebkitBoxOrient\": \"horizontal\",\n                      \"WebkitFlexDirection\": \"row\",\n                      \"WebkitFlexShrink\": 1,\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                      \"flexShrink\": 1,\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexDirection\": \"row\",\n                      \"msFlexNegative\": 1,\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                  >\n                    <svg\n                      role=\"img\"\n                      stroke=\"\"\n                      style={\n                        Object {\n                          \"color\": \"rgba(185,28,28,1.00)\",\n                          \"height\": \"16px\",\n                          \"width\": \"16px\",\n                        }\n                      }\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <g>\n                        <g\n                          fill=\"currentColor\"\n                          stroke=\"\"\n                        >\n                          <path\n                            d=\"M13.9193 18.4271C13.8992 17.9392 13.6816 17.4813 13.3178 17.1478C12.9545 16.8148 12.4731 16.631 11.975 16.6304H11.9746H11.945V16.6304L11.9392 16.6305C11.6898 16.6348 11.4434 16.6864 11.2142 16.7827L11.333 17.0655L11.2142 16.7827C10.9851 16.879 10.7773 17.0183 10.6035 17.1931C10.4296 17.368 10.2932 17.5751 10.2031 17.8026C10.113 18.0302 10.0712 18.2732 10.0806 18.5171L10.0807 18.5176C10.1001 19.0055 10.3169 19.4638 10.6802 19.7979C11.043 20.1315 11.5241 20.3162 12.0222 20.3177H12.0233H12.0529V20.3178L12.058 20.3177C12.3081 20.3138 12.5552 20.2624 12.785 20.1661C13.0148 20.0698 13.2232 19.9303 13.3974 19.7549C13.5716 19.5795 13.7081 19.3718 13.7981 19.1436C13.8881 18.9153 13.9295 18.6716 13.9193 18.4271ZM13.9193 18.4271L13.5863 18.4408M13.9193 18.4271C13.9193 18.4271 13.9193 18.4271 13.9193 18.427L13.5863 18.4408M13.5863 18.4408C13.5945 18.6386 13.5611 18.836 13.488 19.0213C13.415 19.2066 13.3037 19.3762 13.1609 19.52C13.018 19.6638 12.8464 19.779 12.6561 19.8587C12.4658 19.9385 12.2607 19.9812 12.0529 19.9844H12.0233C11.6062 19.9831 11.2058 19.8284 10.9059 19.5525C10.6059 19.2767 10.4296 18.9011 10.4137 18.5043C10.4061 18.3069 10.4399 18.1101 10.513 17.9254C10.5862 17.7406 10.6973 17.5715 10.8399 17.4281C10.9824 17.2847 11.1536 17.1698 11.3434 17.09C11.5331 17.0103 11.7376 16.9674 11.945 16.9638H11.9746C12.3916 16.9642 12.7922 17.1182 13.0926 17.3936C13.393 17.6689 13.5699 18.0442 13.5863 18.4408ZM23.4665 20.2125L23.4665 20.2125C23.6068 20.4676 23.6751 20.7517 23.6658 21.0376C23.6566 21.3234 23.57 21.6033 23.4131 21.8501C23.2562 22.097 23.0337 22.3031 22.7658 22.4469C22.4978 22.5907 22.1942 22.6667 21.8847 22.6667H21.8846H2.11538H2.11533C1.80576 22.6667 1.50222 22.5907 1.23422 22.4469C0.96631 22.3031 0.743845 22.097 0.586879 21.8501L0.305565 22.0289L0.586879 21.8501C0.429998 21.6033 0.343434 21.3234 0.334166 21.0376C0.324898 20.7517 0.393165 20.4676 0.533517 20.2125L0.53353 20.2125L10.4192 2.23977C10.5681 1.96911 10.7933 1.74021 11.0721 1.5796C11.3511 1.41893 11.6722 1.33333 12.0005 1.33333C12.3289 1.33333 12.65 1.41893 12.9289 1.5796C13.2078 1.74021 13.4329 1.96911 13.5819 2.23977L23.4665 20.2125ZM11.0224 7.44182C10.7599 7.69176 10.6091 8.03434 10.6091 8.39521V14.4365C10.6091 14.7974 10.7599 15.1399 11.0224 15.3899C11.2843 15.6393 11.6363 15.7767 12 15.7767C12.3637 15.7767 12.7157 15.6393 12.9776 15.3899C13.2401 15.1399 13.3909 14.7974 13.3909 14.4365V8.39521C13.3909 8.03434 13.2401 7.69176 12.9776 7.44182C12.7157 7.19242 12.3637 7.05499 12 7.05499C11.6363 7.05499 11.2843 7.19242 11.0224 7.44182Z\"\n                            stroke=\"currentColor\"\n                            strokeWidth=\"0.666667\"\n                          />\n                        </g>\n                      </g>\n                    </svg>\n                  </div>\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"width\": \"8px\",\n                      }\n                    }\n                  />\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(23,23,23,1.00)\",\n                        \"fontSize\": \"16px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"500\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Please try again later!\n                  </div>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n                  onBlur={[Function]}\n                  onClick={[Function]}\n                  onContextMenu={[Function]}\n                  onFocus={[Function]}\n                  onKeyDown={[Function]}\n                  role=\"button\"\n                  style={\n                    Object {\n                      \"MozUserSelect\": \"none\",\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxDirection\": \"normal\",\n                      \"WebkitBoxOrient\": \"horizontal\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitFlexDirection\": \"row\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"WebkitUserSelect\": \"none\",\n                      \"alignItems\": \"center\",\n                      \"borderBottomLeftRadius\": \"4px\",\n                      \"borderBottomRightRadius\": \"4px\",\n                      \"borderTopLeftRadius\": \"4px\",\n                      \"borderTopRightRadius\": \"4px\",\n                      \"cursor\": \"pointer\",\n                      \"flexDirection\": \"row\",\n                      \"justifyContent\": \"center\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexDirection\": \"row\",\n                      \"msFlexPack\": \"center\",\n                      \"msTouchAction\": \"manipulation\",\n                      \"msUserSelect\": \"none\",\n                      \"paddingBottom\": \"10px\",\n                      \"paddingLeft\": \"10px\",\n                      \"paddingRight\": \"10px\",\n                      \"paddingTop\": \"10px\",\n                      \"touchAction\": \"manipulation\",\n                      \"userSelect\": \"none\",\n                    }\n                  }\n                  tabIndex=\"0\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(75,85,99,1.00)\",\n                        \"height\": \"12px\",\n                        \"width\": \"12px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"height\": \"4px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"paddingLeft\": \"24px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Your coupon could not be processed at this time.\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"marginLeft\": \"auto\",\n            \"marginRight\": \"auto\",\n            \"marginTop\": \"32px\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"8px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"8px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Re-Open\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots AlertDialog Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(225,29,72,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Delete Customer\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots AlertDialog Transition 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Discard\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots AspectRatio Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"height\": \"200px\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"backgroundColor\": \"rgba(248,113,113,1.00)\",\n            \"bottom\": \"0px\",\n            \"left\": \"0px\",\n            \"position\": \"absolute\",\n            \"right\": \"0px\",\n            \"top\": \"0px\",\n          }\n        }\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots AspectRatio EmbedImage 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"height\": \"200px\",\n        }\n      }\n    >\n      <div\n        aria-label=\"Picture of a Flower\"\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitFlexBasis\": \"auto\",\n            \"bottom\": \"0px\",\n            \"flexBasis\": \"auto\",\n            \"left\": \"0px\",\n            \"maxWidth\": \"100%\",\n            \"msFlexPreferredSize\": \"auto\",\n            \"overflowX\": \"hidden\",\n            \"overflowY\": \"hidden\",\n            \"position\": \"absolute\",\n            \"right\": \"0px\",\n            \"top\": \"0px\",\n            \"zIndex\": 0,\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"backgroundPosition\": \"center\",\n              \"backgroundRepeat\": \"no-repeat\",\n              \"backgroundSize\": \"cover\",\n              \"bottom\": \"0px\",\n              \"height\": \"100%\",\n              \"left\": \"0px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"width\": \"100%\",\n              \"zIndex\": -1,\n            }\n          }\n          suppressHydrationWarning={true}\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Avatar AvatarBadge 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(56,189,248,1.00)\",\n            \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n            \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"height\": \"24px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"position\": \"relative\",\n            \"width\": \"24px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"--\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"100%\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(34,197,94,1.00)\",\n              \"borderBottomColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderBottomWidth\": \"2px\",\n              \"borderLeftColor\": \"rgba(250,250,250,1.00)\",\n              \"borderLeftWidth\": \"2px\",\n              \"borderRightColor\": \"rgba(250,250,250,1.00)\",\n              \"borderRightWidth\": \"2px\",\n              \"borderTopColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"borderTopWidth\": \"2px\",\n              \"bottom\": \"0px\",\n              \"height\": \"8px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"width\": \"8px\",\n            }\n          }\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(245,158,11,1.00)\",\n            \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n            \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"height\": \"32px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"position\": \"relative\",\n            \"width\": \"32px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"--\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"100%\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(34,197,94,1.00)\",\n              \"borderBottomColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderBottomWidth\": \"2px\",\n              \"borderLeftColor\": \"rgba(250,250,250,1.00)\",\n              \"borderLeftWidth\": \"2px\",\n              \"borderRightColor\": \"rgba(250,250,250,1.00)\",\n              \"borderRightWidth\": \"2px\",\n              \"borderTopColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"borderTopWidth\": \"2px\",\n              \"bottom\": \"0px\",\n              \"height\": \"12px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"width\": \"12px\",\n            }\n          }\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(245,158,11,1.00)\",\n            \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n            \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"height\": \"48px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"position\": \"relative\",\n            \"width\": \"48px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"--\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"100%\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(34,197,94,1.00)\",\n              \"borderBottomColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderBottomWidth\": \"2px\",\n              \"borderLeftColor\": \"rgba(250,250,250,1.00)\",\n              \"borderLeftWidth\": \"2px\",\n              \"borderRightColor\": \"rgba(250,250,250,1.00)\",\n              \"borderRightWidth\": \"2px\",\n              \"borderTopColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"borderTopWidth\": \"2px\",\n              \"bottom\": \"0px\",\n              \"height\": \"16px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"width\": \"16px\",\n            }\n          }\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(245,158,11,1.00)\",\n            \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n            \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"height\": \"64px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"position\": \"relative\",\n            \"width\": \"64px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"--\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"100%\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(34,197,94,1.00)\",\n              \"borderBottomColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderBottomWidth\": \"2px\",\n              \"borderLeftColor\": \"rgba(250,250,250,1.00)\",\n              \"borderLeftWidth\": \"2px\",\n              \"borderRightColor\": \"rgba(250,250,250,1.00)\",\n              \"borderRightWidth\": \"2px\",\n              \"borderTopColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"borderTopWidth\": \"2px\",\n              \"bottom\": \"0px\",\n              \"height\": \"20px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"width\": \"20px\",\n            }\n          }\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(245,158,11,1.00)\",\n            \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n            \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"height\": \"96px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"position\": \"relative\",\n            \"width\": \"96px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"--\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"100%\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(34,197,94,1.00)\",\n              \"borderBottomColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderBottomWidth\": \"2px\",\n              \"borderLeftColor\": \"rgba(250,250,250,1.00)\",\n              \"borderLeftWidth\": \"2px\",\n              \"borderRightColor\": \"rgba(250,250,250,1.00)\",\n              \"borderRightWidth\": \"2px\",\n              \"borderTopColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"borderTopWidth\": \"2px\",\n              \"bottom\": \"0px\",\n              \"height\": \"24px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"width\": \"24px\",\n            }\n          }\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(245,158,11,1.00)\",\n            \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n            \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"height\": \"128px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"position\": \"relative\",\n            \"width\": \"128px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"--\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"100%\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(34,197,94,1.00)\",\n              \"borderBottomColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderBottomWidth\": \"2px\",\n              \"borderLeftColor\": \"rgba(250,250,250,1.00)\",\n              \"borderLeftWidth\": \"2px\",\n              \"borderRightColor\": \"rgba(250,250,250,1.00)\",\n              \"borderRightWidth\": \"2px\",\n              \"borderTopColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"borderTopWidth\": \"2px\",\n              \"bottom\": \"0px\",\n              \"height\": \"28px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"width\": \"28px\",\n            }\n          }\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Avatar AvatarGroup 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"reverse\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row-reverse\",\n            \"flexDirection\": \"row-reverse\",\n            \"msFlexDirection\": \"row-reverse\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(82,82,91,1.00)\",\n              \"borderBottomColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderBottomWidth\": \"2px\",\n              \"borderLeftColor\": \"rgba(250,250,250,1.00)\",\n              \"borderLeftWidth\": \"2px\",\n              \"borderRightColor\": \"rgba(250,250,250,1.00)\",\n              \"borderRightWidth\": \"2px\",\n              \"borderTopColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"borderTopWidth\": \"2px\",\n              \"height\": \"64px\",\n              \"justifyContent\": \"center\",\n              \"marginLeft\": \"-16px\",\n              \"marginTop\": \"0px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"position\": \"relative\",\n              \"width\": \"64px\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(250,250,250,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"600\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            + 5\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(99,102,241,1.00)\",\n              \"borderBottomColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderBottomWidth\": \"2px\",\n              \"borderLeftColor\": \"rgba(250,250,250,1.00)\",\n              \"borderLeftWidth\": \"2px\",\n              \"borderRightColor\": \"rgba(250,250,250,1.00)\",\n              \"borderRightWidth\": \"2px\",\n              \"borderTopColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"borderTopWidth\": \"2px\",\n              \"height\": \"64px\",\n              \"justifyContent\": \"center\",\n              \"marginLeft\": \"-16px\",\n              \"marginTop\": \"0px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"position\": \"relative\",\n              \"width\": \"64px\",\n            }\n          }\n        >\n          <div\n            aria-label=\"--\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"100%\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(6,182,212,1.00)\",\n              \"borderBottomColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderBottomWidth\": \"2px\",\n              \"borderLeftColor\": \"rgba(250,250,250,1.00)\",\n              \"borderLeftWidth\": \"2px\",\n              \"borderRightColor\": \"rgba(250,250,250,1.00)\",\n              \"borderRightWidth\": \"2px\",\n              \"borderTopColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"borderTopWidth\": \"2px\",\n              \"height\": \"64px\",\n              \"justifyContent\": \"center\",\n              \"marginLeft\": \"-16px\",\n              \"marginTop\": \"0px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"position\": \"relative\",\n              \"width\": \"64px\",\n            }\n          }\n        >\n          <div\n            aria-label=\"--\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"100%\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(34,197,94,1.00)\",\n              \"borderBottomColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderBottomWidth\": \"2px\",\n              \"borderLeftColor\": \"rgba(250,250,250,1.00)\",\n              \"borderLeftWidth\": \"2px\",\n              \"borderRightColor\": \"rgba(250,250,250,1.00)\",\n              \"borderRightWidth\": \"2px\",\n              \"borderTopColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"borderTopWidth\": \"2px\",\n              \"height\": \"64px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"position\": \"relative\",\n              \"width\": \"64px\",\n            }\n          }\n        >\n          <div\n            aria-label=\"--\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"100%\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Avatar Fallback 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginLeft\": \"auto\",\n          \"marginRight\": \"auto\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(34,197,94,1.00)\",\n            \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n            \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"height\": \"48px\",\n            \"justifyContent\": \"center\",\n            \"marginRight\": \"4px\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"position\": \"relative\",\n            \"width\": \"48px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"--\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"100%\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(245,158,11,1.00)\",\n            \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n            \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"height\": \"48px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"position\": \"relative\",\n            \"width\": \"48px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"--\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"100%\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(56,189,248,1.00)\",\n            \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n            \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"height\": \"48px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"position\": \"relative\",\n            \"width\": \"48px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"--\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"100%\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Avatar Playground 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"rgba(13,148,136,1.00)\",\n          \"borderBottomColor\": \"rgba(0,0,0,1.00)\",\n          \"borderBottomLeftRadius\": \"999px\",\n          \"borderBottomRightRadius\": \"999px\",\n          \"borderBottomWidth\": \"2px\",\n          \"borderLeftColor\": \"rgba(0,0,0,1.00)\",\n          \"borderLeftWidth\": \"2px\",\n          \"borderRightColor\": \"rgba(0,0,0,1.00)\",\n          \"borderRightWidth\": \"2px\",\n          \"borderTopColor\": \"rgba(0,0,0,1.00)\",\n          \"borderTopLeftRadius\": \"999px\",\n          \"borderTopRightRadius\": \"999px\",\n          \"borderTopWidth\": \"2px\",\n          \"height\": \"48px\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"position\": \"relative\",\n          \"width\": \"48px\",\n        }\n      }\n    >\n      <div\n        aria-label=\"--\"\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitFlexBasis\": \"auto\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"flexBasis\": \"auto\",\n            \"height\": \"100%\",\n            \"maxWidth\": \"100%\",\n            \"msFlexPreferredSize\": \"auto\",\n            \"overflowX\": \"hidden\",\n            \"overflowY\": \"hidden\",\n            \"width\": \"100%\",\n            \"zIndex\": 0,\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"backgroundPosition\": \"center\",\n              \"backgroundRepeat\": \"no-repeat\",\n              \"backgroundSize\": \"cover\",\n              \"bottom\": \"0px\",\n              \"height\": \"100%\",\n              \"left\": \"0px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"width\": \"100%\",\n              \"zIndex\": -1,\n            }\n          }\n          suppressHydrationWarning={true}\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"backgroundColor\": \"rgba(254,202,202,1.00)\",\n            \"borderBottomColor\": \"rgba(250,250,250,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderBottomWidth\": \"2px\",\n            \"borderLeftColor\": \"rgba(250,250,250,1.00)\",\n            \"borderLeftWidth\": \"2px\",\n            \"borderRightColor\": \"rgba(250,250,250,1.00)\",\n            \"borderRightWidth\": \"2px\",\n            \"borderTopColor\": \"rgba(250,250,250,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"borderTopWidth\": \"2px\",\n            \"bottom\": \"0px\",\n            \"height\": \"16px\",\n            \"position\": \"absolute\",\n            \"right\": \"0px\",\n            \"width\": \"16px\",\n          }\n        }\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Avatar Size 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"alignItems\": \"center\",\n            \"msFlexAlign\": \"center\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitAlignSelf\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"alignSelf\": \"center\",\n              \"backgroundColor\": \"rgba(34,197,94,1.00)\",\n              \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n              \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n              \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"height\": \"24px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexItemAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"msGridRowAlign\": \"center\",\n              \"position\": \"relative\",\n              \"width\": \"24px\",\n            }\n          }\n        >\n          <div\n            aria-label=\"--\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"100%\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitAlignSelf\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"alignSelf\": \"center\",\n              \"backgroundColor\": \"rgba(6,182,212,1.00)\",\n              \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n              \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n              \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"height\": \"32px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexItemAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"msGridRowAlign\": \"center\",\n              \"position\": \"relative\",\n              \"width\": \"32px\",\n            }\n          }\n        >\n          <div\n            aria-label=\"--\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"100%\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitAlignSelf\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"alignSelf\": \"center\",\n              \"backgroundColor\": \"rgba(99,102,241,1.00)\",\n              \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n              \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n              \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"height\": \"48px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexItemAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"msGridRowAlign\": \"center\",\n              \"position\": \"relative\",\n              \"width\": \"48px\",\n            }\n          }\n        >\n          <div\n            aria-label=\"--\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"100%\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitAlignSelf\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"alignSelf\": \"center\",\n              \"backgroundColor\": \"rgba(245,158,11,1.00)\",\n              \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n              \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n              \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"height\": \"64px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexItemAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"msGridRowAlign\": \"center\",\n              \"position\": \"relative\",\n              \"width\": \"64px\",\n            }\n          }\n        >\n          <div\n            aria-label=\"--\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"100%\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitAlignSelf\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"alignSelf\": \"center\",\n              \"backgroundColor\": \"rgba(219,39,119,1.00)\",\n              \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n              \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n              \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"height\": \"96px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexItemAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"msGridRowAlign\": \"center\",\n              \"position\": \"relative\",\n              \"width\": \"96px\",\n            }\n          }\n        >\n          <div\n            aria-label=\"--\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"100%\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitAlignSelf\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"alignSelf\": \"center\",\n              \"backgroundColor\": \"rgba(147,51,234,1.00)\",\n              \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n              \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n              \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"height\": \"128px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexItemAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"msGridRowAlign\": \"center\",\n              \"position\": \"relative\",\n              \"width\": \"128px\",\n            }\n          }\n        >\n          <div\n            aria-label=\"--\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"100%\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Avatar Usage 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(34,197,94,1.00)\",\n            \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n            \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"height\": \"48px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"position\": \"relative\",\n            \"width\": \"48px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"--\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"100%\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(6,182,212,1.00)\",\n            \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n            \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"height\": \"48px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"position\": \"relative\",\n            \"width\": \"48px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"--\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"100%\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(99,102,241,1.00)\",\n            \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n            \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"height\": \"48px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"position\": \"relative\",\n            \"width\": \"48px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"--\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"100%\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(245,158,11,1.00)\",\n            \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n            \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"height\": \"48px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"position\": \"relative\",\n            \"width\": \"48px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"--\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"100%\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Badge Color 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitFlexDirection\": \"row\",\n          \"flexDirection\": \"row\",\n          \"marginLeft\": \"auto\",\n          \"marginRight\": \"auto\",\n          \"msFlexDirection\": \"row\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(220,252,231,1.00)\",\n            \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n            \"borderBottomLeftRadius\": \"2px\",\n            \"borderBottomRightRadius\": \"2px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n            \"borderTopLeftRadius\": \"2px\",\n            \"borderTopRightRadius\": \"2px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"paddingBottom\": \"2px\",\n            \"paddingLeft\": \"8px\",\n            \"paddingRight\": \"8px\",\n            \"paddingTop\": \"2px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(20,83,45,1.00)\",\n                \"fontSize\": \"12px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            SUCCESS\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(255,228,230,1.00)\",\n            \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n            \"borderBottomLeftRadius\": \"2px\",\n            \"borderBottomRightRadius\": \"2px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n            \"borderTopLeftRadius\": \"2px\",\n            \"borderTopRightRadius\": \"2px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"paddingBottom\": \"2px\",\n            \"paddingLeft\": \"8px\",\n            \"paddingRight\": \"8px\",\n            \"paddingTop\": \"2px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(136,19,55,1.00)\",\n                \"fontSize\": \"12px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            DANGER\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(224,242,254,1.00)\",\n            \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n            \"borderBottomLeftRadius\": \"2px\",\n            \"borderBottomRightRadius\": \"2px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n            \"borderTopLeftRadius\": \"2px\",\n            \"borderTopRightRadius\": \"2px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"paddingBottom\": \"2px\",\n            \"paddingLeft\": \"8px\",\n            \"paddingRight\": \"8px\",\n            \"paddingTop\": \"2px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(12,74,110,1.00)\",\n                \"fontSize\": \"12px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            INFO\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(243,244,246,1.00)\",\n            \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n            \"borderBottomLeftRadius\": \"2px\",\n            \"borderBottomRightRadius\": \"2px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n            \"borderTopLeftRadius\": \"2px\",\n            \"borderTopRightRadius\": \"2px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"paddingBottom\": \"2px\",\n            \"paddingLeft\": \"8px\",\n            \"paddingRight\": \"8px\",\n            \"paddingTop\": \"2px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(17,24,39,1.00)\",\n                \"fontSize\": \"12px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            DARK\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Badge Composition 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitAlignSelf\": \"flex-end\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"alignSelf\": \"flex-end\",\n              \"backgroundColor\": \"rgba(225,29,72,1.00)\",\n              \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderBottomWidth\": \"1px\",\n              \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n              \"borderLeftWidth\": \"1px\",\n              \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n              \"borderRightWidth\": \"1px\",\n              \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"borderTopWidth\": \"1px\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"marginBottom\": \"-16px\",\n              \"marginRight\": \"-16px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexItemAlign\": \"end\",\n              \"msFlexPack\": \"center\",\n              \"paddingBottom\": \"2px\",\n              \"paddingLeft\": \"8px\",\n              \"paddingRight\": \"8px\",\n              \"paddingTop\": \"2px\",\n              \"zIndex\": 1,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"500\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              2\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(6,182,212,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"marginLeft\": \"auto\",\n              \"marginRight\": \"auto\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"8px\",\n              \"paddingRight\": \"8px\",\n              \"paddingTop\": \"8px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Notifications\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Badge Icon 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"vertical\",\n          \"WebkitFlexDirection\": \"column\",\n          \"flexDirection\": \"column\",\n          \"msFlexDirection\": \"column\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(220,252,231,1.00)\",\n            \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n            \"borderBottomLeftRadius\": \"2px\",\n            \"borderBottomRightRadius\": \"2px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n            \"borderTopLeftRadius\": \"2px\",\n            \"borderTopRightRadius\": \"2px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"paddingBottom\": \"2px\",\n            \"paddingLeft\": \"8px\",\n            \"paddingRight\": \"8px\",\n            \"paddingTop\": \"2px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(20,83,45,1.00)\",\n                \"fontSize\": \"12px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            SUCCESS\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"width\": \"4px\",\n            }\n          }\n        />\n        <svg\n          role=\"img\"\n          stroke=\"\"\n          style={\n            Object {\n              \"color\": \"rgba(20,83,45,1.00)\",\n              \"height\": \"8px\",\n              \"width\": \"8px\",\n            }\n          }\n          viewBox=\"0 0 24 24\"\n        >\n          <g>\n            <path\n              d=\"M13.25 10.75V2H10.75V10.75H2V13.25H10.75V22H13.25V13.25H22V10.75H13.25Z\"\n              fill=\"currentColor\"\n              stroke=\"\"\n            />\n          </g>\n        </svg>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(234,88,12,1.00)\",\n            \"borderBottomLeftRadius\": \"2px\",\n            \"borderBottomRightRadius\": \"2px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(234,88,12,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(234,88,12,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(234,88,12,1.00)\",\n            \"borderTopLeftRadius\": \"2px\",\n            \"borderTopRightRadius\": \"2px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"paddingBottom\": \"2px\",\n            \"paddingLeft\": \"8px\",\n            \"paddingRight\": \"8px\",\n            \"paddingTop\": \"2px\",\n          }\n        }\n      >\n        <svg\n          role=\"img\"\n          stroke=\"\"\n          style={\n            Object {\n              \"color\": \"rgba(234,88,12,1.00)\",\n              \"height\": \"8px\",\n              \"width\": \"8px\",\n            }\n          }\n          viewBox=\"0 0 24 24\"\n        >\n          <g>\n            <path\n              d=\"M13.25 10.75V2H10.75V10.75H2V13.25H10.75V22H13.25V13.25H22V10.75H13.25Z\"\n              fill=\"currentColor\"\n              stroke=\"\"\n            />\n          </g>\n        </svg>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"width\": \"4px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(234,88,12,1.00)\",\n                \"fontSize\": \"12px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            SUCCESS\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Badge Playground 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"rgba(22,163,74,1.00)\",\n          \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n          \"borderBottomLeftRadius\": \"2px\",\n          \"borderBottomRightRadius\": \"2px\",\n          \"borderBottomWidth\": \"1px\",\n          \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n          \"borderLeftWidth\": \"1px\",\n          \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n          \"borderRightWidth\": \"1px\",\n          \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n          \"borderTopLeftRadius\": \"2px\",\n          \"borderTopRightRadius\": \"2px\",\n          \"borderTopWidth\": \"1px\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"paddingBottom\": \"2px\",\n          \"paddingLeft\": \"8px\",\n          \"paddingRight\": \"8px\",\n          \"paddingTop\": \"2px\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(250,250,250,1.00)\",\n              \"fontSize\": \"12px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"500\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          NATIVEBASE\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Badge Usage 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(245,245,245,1.00)\",\n            \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n            \"borderBottomLeftRadius\": \"2px\",\n            \"borderBottomRightRadius\": \"2px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n            \"borderTopLeftRadius\": \"2px\",\n            \"borderTopRightRadius\": \"2px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"paddingBottom\": \"2px\",\n            \"paddingLeft\": \"8px\",\n            \"paddingRight\": \"8px\",\n            \"paddingTop\": \"2px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"12px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            NEW FEATURE\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Badge Variants 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"flexDirection\": \"row\",\n            \"marginLeft\": \"auto\",\n            \"marginRight\": \"auto\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitAlignSelf\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"rgba(82,82,82,1.00)\",\n                \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"2px\",\n                \"borderBottomRightRadius\": \"2px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n                \"borderTopLeftRadius\": \"2px\",\n                \"borderTopRightRadius\": \"2px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexItemAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msGridRowAlign\": \"center\",\n                \"paddingBottom\": \"2px\",\n                \"paddingLeft\": \"8px\",\n                \"paddingRight\": \"8px\",\n                \"paddingTop\": \"2px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                DEFAULT\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitAlignSelf\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"rgba(22,163,74,1.00)\",\n                \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"2px\",\n                \"borderBottomRightRadius\": \"2px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n                \"borderTopLeftRadius\": \"2px\",\n                \"borderTopRightRadius\": \"2px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexItemAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msGridRowAlign\": \"center\",\n                \"paddingBottom\": \"2px\",\n                \"paddingLeft\": \"8px\",\n                \"paddingRight\": \"8px\",\n                \"paddingTop\": \"2px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                SUCCESS\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitAlignSelf\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"rgba(220,38,38,1.00)\",\n                \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"2px\",\n                \"borderBottomRightRadius\": \"2px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n                \"borderTopLeftRadius\": \"2px\",\n                \"borderTopRightRadius\": \"2px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexItemAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msGridRowAlign\": \"center\",\n                \"paddingBottom\": \"2px\",\n                \"paddingLeft\": \"8px\",\n                \"paddingRight\": \"8px\",\n                \"paddingTop\": \"2px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                ERROR\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitAlignSelf\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"rgba(2,132,199,1.00)\",\n                \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"2px\",\n                \"borderBottomRightRadius\": \"2px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n                \"borderTopLeftRadius\": \"2px\",\n                \"borderTopRightRadius\": \"2px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexItemAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msGridRowAlign\": \"center\",\n                \"paddingBottom\": \"2px\",\n                \"paddingLeft\": \"8px\",\n                \"paddingRight\": \"8px\",\n                \"paddingTop\": \"2px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                INFO\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitAlignSelf\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"rgba(234,88,12,1.00)\",\n                \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"2px\",\n                \"borderBottomRightRadius\": \"2px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n                \"borderTopLeftRadius\": \"2px\",\n                \"borderTopRightRadius\": \"2px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexItemAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msGridRowAlign\": \"center\",\n                \"paddingBottom\": \"2px\",\n                \"paddingLeft\": \"8px\",\n                \"paddingRight\": \"8px\",\n                \"paddingTop\": \"2px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                WARNING\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"width\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitAlignSelf\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"borderBottomColor\": \"rgba(82,82,82,1.00)\",\n                \"borderBottomLeftRadius\": \"2px\",\n                \"borderBottomRightRadius\": \"2px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(82,82,82,1.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(82,82,82,1.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(82,82,82,1.00)\",\n                \"borderTopLeftRadius\": \"2px\",\n                \"borderTopRightRadius\": \"2px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexItemAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msGridRowAlign\": \"center\",\n                \"paddingBottom\": \"2px\",\n                \"paddingLeft\": \"8px\",\n                \"paddingRight\": \"8px\",\n                \"paddingTop\": \"2px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(82,82,82,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                DEFAULT\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitAlignSelf\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"borderBottomColor\": \"rgba(22,163,74,1.00)\",\n                \"borderBottomLeftRadius\": \"2px\",\n                \"borderBottomRightRadius\": \"2px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(22,163,74,1.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(22,163,74,1.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(22,163,74,1.00)\",\n                \"borderTopLeftRadius\": \"2px\",\n                \"borderTopRightRadius\": \"2px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexItemAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msGridRowAlign\": \"center\",\n                \"paddingBottom\": \"2px\",\n                \"paddingLeft\": \"8px\",\n                \"paddingRight\": \"8px\",\n                \"paddingTop\": \"2px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(22,163,74,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                SUCCESS\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitAlignSelf\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"borderBottomColor\": \"rgba(220,38,38,1.00)\",\n                \"borderBottomLeftRadius\": \"2px\",\n                \"borderBottomRightRadius\": \"2px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(220,38,38,1.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(220,38,38,1.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(220,38,38,1.00)\",\n                \"borderTopLeftRadius\": \"2px\",\n                \"borderTopRightRadius\": \"2px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexItemAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msGridRowAlign\": \"center\",\n                \"paddingBottom\": \"2px\",\n                \"paddingLeft\": \"8px\",\n                \"paddingRight\": \"8px\",\n                \"paddingTop\": \"2px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(220,38,38,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                ERROR\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitAlignSelf\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"borderBottomColor\": \"rgba(2,132,199,1.00)\",\n                \"borderBottomLeftRadius\": \"2px\",\n                \"borderBottomRightRadius\": \"2px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(2,132,199,1.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(2,132,199,1.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(2,132,199,1.00)\",\n                \"borderTopLeftRadius\": \"2px\",\n                \"borderTopRightRadius\": \"2px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexItemAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msGridRowAlign\": \"center\",\n                \"paddingBottom\": \"2px\",\n                \"paddingLeft\": \"8px\",\n                \"paddingRight\": \"8px\",\n                \"paddingTop\": \"2px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(2,132,199,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                INFO\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitAlignSelf\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"borderBottomColor\": \"rgba(234,88,12,1.00)\",\n                \"borderBottomLeftRadius\": \"2px\",\n                \"borderBottomRightRadius\": \"2px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(234,88,12,1.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(234,88,12,1.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(234,88,12,1.00)\",\n                \"borderTopLeftRadius\": \"2px\",\n                \"borderTopRightRadius\": \"2px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexItemAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msGridRowAlign\": \"center\",\n                \"paddingBottom\": \"2px\",\n                \"paddingLeft\": \"8px\",\n                \"paddingRight\": \"8px\",\n                \"paddingTop\": \"2px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(234,88,12,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                WARNING\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"width\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitAlignSelf\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"rgba(245,245,245,1.00)\",\n                \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"2px\",\n                \"borderBottomRightRadius\": \"2px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n                \"borderTopLeftRadius\": \"2px\",\n                \"borderTopRightRadius\": \"2px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexItemAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msGridRowAlign\": \"center\",\n                \"paddingBottom\": \"2px\",\n                \"paddingLeft\": \"8px\",\n                \"paddingRight\": \"8px\",\n                \"paddingTop\": \"2px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                DEFAULT\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitAlignSelf\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"rgba(220,252,231,1.00)\",\n                \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"2px\",\n                \"borderBottomRightRadius\": \"2px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n                \"borderTopLeftRadius\": \"2px\",\n                \"borderTopRightRadius\": \"2px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexItemAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msGridRowAlign\": \"center\",\n                \"paddingBottom\": \"2px\",\n                \"paddingLeft\": \"8px\",\n                \"paddingRight\": \"8px\",\n                \"paddingTop\": \"2px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(20,83,45,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                SUCCESS\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitAlignSelf\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"rgba(254,226,226,1.00)\",\n                \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"2px\",\n                \"borderBottomRightRadius\": \"2px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n                \"borderTopLeftRadius\": \"2px\",\n                \"borderTopRightRadius\": \"2px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexItemAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msGridRowAlign\": \"center\",\n                \"paddingBottom\": \"2px\",\n                \"paddingLeft\": \"8px\",\n                \"paddingRight\": \"8px\",\n                \"paddingTop\": \"2px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(127,29,29,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                ERROR\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitAlignSelf\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"rgba(224,242,254,1.00)\",\n                \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"2px\",\n                \"borderBottomRightRadius\": \"2px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n                \"borderTopLeftRadius\": \"2px\",\n                \"borderTopRightRadius\": \"2px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexItemAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msGridRowAlign\": \"center\",\n                \"paddingBottom\": \"2px\",\n                \"paddingLeft\": \"8px\",\n                \"paddingRight\": \"8px\",\n                \"paddingTop\": \"2px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(12,74,110,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                INFO\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitAlignSelf\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"rgba(255,237,213,1.00)\",\n                \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"2px\",\n                \"borderBottomRightRadius\": \"2px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n                \"borderTopLeftRadius\": \"2px\",\n                \"borderTopRightRadius\": \"2px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexItemAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msGridRowAlign\": \"center\",\n                \"paddingBottom\": \"2px\",\n                \"paddingLeft\": \"8px\",\n                \"paddingRight\": \"8px\",\n                \"paddingTop\": \"2px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(124,45,18,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                WARNING\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Box Basic Box 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignSelf\": \"center\",\n            \"alignSelf\": \"center\",\n            \"backgroundColor\": \"rgba(6,182,212,1.00)\",\n            \"msFlexItemAlign\": \"center\",\n            \"msGridRowAlign\": \"center\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(250,250,249,1.00)\",\n              \"fontSize\": \"16px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"500\",\n              \"letterSpacing\": \"0.025em\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          This is a Box\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Box Composition 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n            \"borderBottomColor\": \"rgba(229,231,235,1.00)\",\n            \"borderBottomLeftRadius\": \"8px\",\n            \"borderBottomRightRadius\": \"8px\",\n            \"borderBottomWidth\": \"0px\",\n            \"borderLeftColor\": \"rgba(229,231,235,1.00)\",\n            \"borderLeftWidth\": \"0px\",\n            \"borderRightColor\": \"rgba(229,231,235,1.00)\",\n            \"borderRightWidth\": \"0px\",\n            \"borderTopColor\": \"rgba(229,231,235,1.00)\",\n            \"borderTopLeftRadius\": \"8px\",\n            \"borderTopRightRadius\": \"8px\",\n            \"borderTopWidth\": \"0px\",\n            \"boxShadow\": \"0px 1px 2.22px rgba(0,0,0,0.22)\",\n            \"maxWidth\": \"320px\",\n            \"overflowX\": \"hidden\",\n            \"overflowY\": \"hidden\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              aria-label=\"image\"\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitFlexBasis\": \"auto\",\n                  \"bottom\": \"0px\",\n                  \"flexBasis\": \"auto\",\n                  \"left\": \"0px\",\n                  \"maxWidth\": \"100%\",\n                  \"msFlexPreferredSize\": \"auto\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"zIndex\": 0,\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                    \"backgroundPosition\": \"center\",\n                    \"backgroundRepeat\": \"no-repeat\",\n                    \"backgroundSize\": \"cover\",\n                    \"bottom\": \"0px\",\n                    \"height\": \"100%\",\n                    \"left\": \"0px\",\n                    \"position\": \"absolute\",\n                    \"right\": \"0px\",\n                    \"top\": \"0px\",\n                    \"width\": \"100%\",\n                    \"zIndex\": -1,\n                  }\n                }\n                suppressHydrationWarning={true}\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(139,92,246,1.00)\",\n                \"bottom\": \"0px\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"paddingBottom\": \"6px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"6px\",\n                \"position\": \"absolute\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,249,1.00)\",\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              PHOTOS\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"paddingBottom\": \"16px\",\n              \"paddingLeft\": \"16px\",\n              \"paddingRight\": \"16px\",\n              \"paddingTop\": \"16px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"20px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.25em\",\n                  \"marginLeft\": \"-4px\",\n                }\n              }\n            >\n              The Garden City\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(139,92,246,1.00)\",\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"500\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginLeft\": \"-2px\",\n                  \"marginTop\": \"-4px\",\n                }\n              }\n            >\n              The Silicon Valley of India.\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            Bengaluru (also called Bangalore) is the center of India's high-tech industry. The city is also known for its parks and nightlife.\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"justify\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"space-between\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"space-between\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"justify\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(75,85,99,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                6 mins ago\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Box LinearGradient Box 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"backgroundImage\": \"linear-gradient(90deg, rgba(125,211,252,1.00),rgba(91,33,182,1.00))\",\n          \"borderBottomLeftRadius\": \"12px\",\n          \"borderBottomRightRadius\": \"12px\",\n          \"borderTopLeftRadius\": \"12px\",\n          \"borderTopRightRadius\": \"12px\",\n          \"paddingBottom\": \"48px\",\n          \"paddingLeft\": \"48px\",\n          \"paddingRight\": \"48px\",\n          \"paddingTop\": \"48px\",\n          \"width\": \"288px\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(250,250,249,1.00)\",\n            \"fontSize\": \"16px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"500\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n            \"textAlign\": \"center\",\n          }\n        }\n      >\n        This is a Box with Linear Gradient\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Box With Ref 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"backgroundColor\": \"rgba(6,182,212,1.00)\",\n          \"boxShadow\": \"0px 1px 2.22px rgba(0,0,0,0.22)\",\n          \"paddingBottom\": \"16px\",\n          \"paddingLeft\": \"16px\",\n          \"paddingRight\": \"16px\",\n          \"paddingTop\": \"16px\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(255,255,255,1.00)\",\n            \"fontSize\": \"16px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        This is a Box\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Breadcrumb Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"24px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n            \"marginBottom\": \"16px\",\n          }\n        }\n      >\n        Default Breadcrumb\n      </div>\n      <nav\n        aria-label=\"Breadcrumb\"\n        className=\"css-view-1dbjc4n\"\n        role=\"navigation\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxLines\": \"multiple\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitFlexWrap\": \"wrap\",\n            \"display\": \"flex\",\n            \"flexDirection\": \"row\",\n            \"flexWrap\": \"wrap\",\n            \"height\": \"auto\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexWrap\": \"wrap\",\n            \"width\": \"auto\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"flexDirection\": \"row\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <a\n            aria-current=\"page\"\n            className=\"css-reset-4rbku5 css-cursor-18t94o4 css-view-1dbjc4n\"\n            href=\"https://github.com/GeekyAnts/nativebase\"\n            role=\"link\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"msFlexDirection\": \"row\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"color\": \"rgba(239,68,68,1.00)\",\n                  \"display\": \"flex\",\n                  \"flexDirection\": \"row\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"height\": \"auto\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"msFlexDirection\": \"row\",\n                  \"width\": \"auto\",\n                }\n              }\n            >\n              Home (This is currently active)\n            </div>\n          </a>\n        </div>\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          role=\"presentation\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n              \"marginLeft\": \"8px\",\n              \"marginRight\": \"8px\",\n            }\n          }\n        >\n          /\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"flexDirection\": \"row\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <a\n            className=\"css-reset-4rbku5 css-cursor-18t94o4 css-view-1dbjc4n\"\n            href=\"https://alpha.nativebase.io/\"\n            role=\"link\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"msFlexDirection\": \"row\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"display\": \"flex\",\n                  \"flexDirection\": \"row\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"auto\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"msFlexDirection\": \"row\",\n                  \"width\": \"auto\",\n                }\n              }\n            >\n              Docs\n            </div>\n          </a>\n        </div>\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          role=\"presentation\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n              \"marginLeft\": \"8px\",\n              \"marginRight\": \"8px\",\n            }\n          }\n        >\n          /\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"flexDirection\": \"row\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <a\n            className=\"css-reset-4rbku5 css-cursor-18t94o4 css-view-1dbjc4n\"\n            href=\"https://github.com/GeekyAnts/nativebase\"\n            role=\"link\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"msFlexDirection\": \"row\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"display\": \"flex\",\n                  \"flexDirection\": \"row\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"auto\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"msFlexDirection\": \"row\",\n                  \"width\": \"auto\",\n                }\n              }\n            >\n              Github\n            </div>\n          </a>\n        </div>\n      </nav>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Breadcrumb Collapsible 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"24px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n            \"marginBottom\": \"16px\",\n          }\n        }\n      >\n        Breadcrumb Collapsible\n      </div>\n      <nav\n        aria-label=\"Breadcrumb\"\n        className=\"css-view-1dbjc4n\"\n        role=\"navigation\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxLines\": \"multiple\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitFlexWrap\": \"wrap\",\n            \"display\": \"flex\",\n            \"flexDirection\": \"row\",\n            \"flexWrap\": \"wrap\",\n            \"height\": \"auto\",\n            \"marginTop\": \"12px\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexWrap\": \"wrap\",\n            \"width\": \"auto\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"flexDirection\": \"row\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            role=\"link\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"msFlexDirection\": \"row\",\n                \"width\": \"auto\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"display\": \"flex\",\n                    \"flexDirection\": \"row\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"auto\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                    \"msFlexDirection\": \"row\",\n                    \"width\": \"auto\",\n                  }\n                }\n              >\n                Home\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          role=\"presentation\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n              \"marginLeft\": \"8px\",\n              \"marginRight\": \"8px\",\n            }\n          }\n        >\n          /\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"cursor\": \"pointer\",\n              \"msTouchAction\": \"manipulation\",\n              \"touchAction\": \"manipulation\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <svg\n            role=\"img\"\n            stroke=\"\"\n            style={\n              Object {\n                \"color\": \"rgba(115,115,115,1.00)\",\n                \"height\": \"16px\",\n                \"width\": \"16px\",\n              }\n            }\n            viewBox=\"0 0 32.055 32.055\"\n          >\n            <g>\n              <g\n                fill=\"currentColor\"\n                stroke=\"\"\n              >\n                <path\n                  d=\"M3.968,12.061C1.775,12.061,0,13.835,0,16.027c0,2.192,1.773,3.967,3.968,3.967c2.189,0,3.966-1.772,3.966-3.967   C7.934,13.835,6.157,12.061,3.968,12.061z M16.233,12.061c-2.188,0-3.968,1.773-3.968,3.965c0,2.192,1.778,3.967,3.968,3.967   s3.97-1.772,3.97-3.967C20.201,13.835,18.423,12.061,16.233,12.061z M28.09,12.061c-2.192,0-3.969,1.774-3.969,3.967   c0,2.19,1.774,3.965,3.969,3.965c2.188,0,3.965-1.772,3.965-3.965S30.278,12.061,28.09,12.061z\"\n                />\n              </g>\n            </g>\n          </svg>\n        </div>\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          role=\"presentation\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n              \"marginLeft\": \"8px\",\n              \"marginRight\": \"8px\",\n            }\n          }\n        >\n          /\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"flexDirection\": \"row\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <a\n            aria-current=\"page\"\n            className=\"css-reset-4rbku5 css-cursor-18t94o4 css-view-1dbjc4n\"\n            href=\"https://github.com/GeekyAnts/nativebase\"\n            role=\"link\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"msFlexDirection\": \"row\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"color\": \"rgba(239,68,68,1.00)\",\n                    \"display\": \"flex\",\n                    \"flexDirection\": \"row\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"height\": \"auto\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                    \"msFlexDirection\": \"row\",\n                    \"width\": \"auto\",\n                  }\n                }\n              >\n                Github (This is currently active)\n              </div>\n            </div>\n          </a>\n        </div>\n      </nav>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"marginTop\": \"12px\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"0px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"0px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"0px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"0px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"12px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"12px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(82,82,91,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Expand\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Breadcrumb ComponentSeparator 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"24px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n            \"marginBottom\": \"16px\",\n          }\n        }\n      >\n        Breadcrumb with Custom Separator\n      </div>\n      <nav\n        aria-label=\"Breadcrumb\"\n        className=\"css-view-1dbjc4n\"\n        role=\"navigation\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxLines\": \"multiple\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitFlexWrap\": \"wrap\",\n            \"display\": \"flex\",\n            \"flexDirection\": \"row\",\n            \"flexWrap\": \"wrap\",\n            \"height\": \"auto\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexWrap\": \"wrap\",\n            \"width\": \"auto\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"flexDirection\": \"row\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            aria-current=\"page\"\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            role=\"link\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"msFlexDirection\": \"row\",\n                \"width\": \"auto\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"textDecoration\": \"none\",\n                }\n              }\n            >\n              Home (This is currently active)\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"flexDirection\": \"row\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <a\n            className=\"css-reset-4rbku5 css-cursor-18t94o4 css-view-1dbjc4n\"\n            href=\"https://alpha.nativebase.io/\"\n            role=\"link\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"msFlexDirection\": \"row\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"textDecoration\": \"none\",\n                }\n              }\n            >\n              Docs\n            </div>\n          </a>\n        </div>\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"flexDirection\": \"row\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <a\n            className=\"css-reset-4rbku5 css-cursor-18t94o4 css-view-1dbjc4n\"\n            href=\"https://github.com/GeekyAnts/nativebase\"\n            role=\"link\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"msFlexDirection\": \"row\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"textDecoration\": \"none\",\n                }\n              }\n            >\n              Github\n            </div>\n          </a>\n        </div>\n      </nav>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Breadcrumb Composition 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"24px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n            \"marginBottom\": \"16px\",\n          }\n        }\n      >\n        Breadcrumb Composition\n      </div>\n      <nav\n        aria-label=\"Breadcrumb\"\n        className=\"css-view-1dbjc4n\"\n        role=\"navigation\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxLines\": \"multiple\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitFlexWrap\": \"wrap\",\n            \"display\": \"flex\",\n            \"flexDirection\": \"row\",\n            \"flexWrap\": \"wrap\",\n            \"height\": \"auto\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexWrap\": \"wrap\",\n            \"width\": \"auto\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"flexDirection\": \"row\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            role=\"link\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"msFlexDirection\": \"row\",\n                \"width\": \"auto\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"display\": \"flex\",\n                    \"flexDirection\": \"row\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"auto\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                    \"msFlexDirection\": \"row\",\n                    \"width\": \"auto\",\n                  }\n                }\n              >\n                Home\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          role=\"presentation\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n              \"marginLeft\": \"8px\",\n              \"marginRight\": \"8px\",\n            }\n          }\n        >\n          /\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"flexDirection\": \"row\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <a\n            className=\"css-reset-4rbku5 css-cursor-18t94o4 css-view-1dbjc4n\"\n            href=\"https://alpha.nativebase.io/\"\n            role=\"link\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"msFlexDirection\": \"row\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"display\": \"flex\",\n                    \"flexDirection\": \"row\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"auto\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                    \"msFlexDirection\": \"row\",\n                    \"width\": \"auto\",\n                  }\n                }\n              >\n                Docs\n              </div>\n            </div>\n          </a>\n        </div>\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          role=\"presentation\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n              \"marginLeft\": \"8px\",\n              \"marginRight\": \"8px\",\n            }\n          }\n        >\n          /\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"flexDirection\": \"row\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <a\n            aria-current=\"page\"\n            className=\"css-reset-4rbku5 css-cursor-18t94o4 css-view-1dbjc4n\"\n            href=\"https://github.com/GeekyAnts/nativebase\"\n            role=\"link\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"msFlexDirection\": \"row\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"display\": \"flex\",\n                    \"flexDirection\": \"row\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"height\": \"auto\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                    \"msFlexDirection\": \"row\",\n                    \"width\": \"auto\",\n                  }\n                }\n              >\n                Github (This is currently active)\n              </div>\n            </div>\n          </a>\n        </div>\n      </nav>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Breadcrumb Separators 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"24px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n            \"marginBottom\": \"16px\",\n          }\n        }\n      >\n        Breadcrumb with String Separator\n      </div>\n      <nav\n        aria-label=\"Breadcrumb\"\n        className=\"css-view-1dbjc4n\"\n        role=\"navigation\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxLines\": \"multiple\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitFlexWrap\": \"wrap\",\n            \"display\": \"flex\",\n            \"flexDirection\": \"row\",\n            \"flexWrap\": \"wrap\",\n            \"height\": \"auto\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexWrap\": \"wrap\",\n            \"width\": \"auto\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"flexDirection\": \"row\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            aria-current=\"page\"\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            role=\"link\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"msFlexDirection\": \"row\",\n                \"width\": \"auto\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"color\": \"rgba(239,68,68,1.00)\",\n                  \"display\": \"flex\",\n                  \"flexDirection\": \"row\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"height\": \"auto\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"msFlexDirection\": \"row\",\n                  \"width\": \"auto\",\n                }\n              }\n            >\n              Home (This is currently active)\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          role=\"presentation\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n              \"marginLeft\": \"8px\",\n              \"marginRight\": \"8px\",\n            }\n          }\n        >\n          -\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"flexDirection\": \"row\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <a\n            className=\"css-reset-4rbku5 css-cursor-18t94o4 css-view-1dbjc4n\"\n            href=\"https://alpha.nativebase.io/\"\n            role=\"link\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"msFlexDirection\": \"row\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"textDecoration\": \"none\",\n                }\n              }\n            >\n              Docs\n            </div>\n          </a>\n        </div>\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          role=\"presentation\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n              \"marginLeft\": \"8px\",\n              \"marginRight\": \"8px\",\n            }\n          }\n        >\n          -\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"flexDirection\": \"row\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <a\n            className=\"css-reset-4rbku5 css-cursor-18t94o4 css-view-1dbjc4n\"\n            href=\"https://github.com/GeekyAnts/nativebase\"\n            role=\"link\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"msFlexDirection\": \"row\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"textDecoration\": \"none\",\n                }\n              }\n            >\n              Github\n            </div>\n          </a>\n        </div>\n      </nav>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Button Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Click Me\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Button Composition 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n          \"borderBottomLeftRadius\": \"999px\",\n          \"borderBottomRightRadius\": \"999px\",\n          \"borderBottomWidth\": \"2px\",\n          \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n          \"borderLeftWidth\": \"2px\",\n          \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n          \"borderRightWidth\": \"2px\",\n          \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n          \"borderTopLeftRadius\": \"999px\",\n          \"borderTopRightRadius\": \"999px\",\n          \"borderTopWidth\": \"2px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"height\": \"48px\",\n          \"justifyContent\": \"center\",\n          \"marginLeft\": \"auto\",\n          \"marginRight\": \"auto\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"10px\",\n          \"paddingLeft\": \"20px\",\n          \"paddingRight\": \"20px\",\n          \"paddingTop\": \"10px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(8,145,178,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            SHOP NOW\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Button Icons 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"vertical\",\n          \"WebkitFlexDirection\": \"column\",\n          \"flexDirection\": \"column\",\n          \"msFlexDirection\": \"column\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"6px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Upload\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(207,250,254,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(22,78,99,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Download\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"6px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Button Loading 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"vertical\",\n          \"WebkitFlexDirection\": \"column\",\n          \"alignItems\": \"center\",\n          \"flexDirection\": \"column\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"column\",\n        }\n      }\n    >\n      <div\n        aria-disabled={true}\n        className=\"css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"not-allowed\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msUserSelect\": \"none\",\n            \"opacity\": 0.4,\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"-1\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            aria-label=\"loading\"\n            aria-valuemax={1}\n            aria-valuemin={0}\n            className=\"css-view-1dbjc4n\"\n            role=\"progressbar\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"dataSet\": Object {},\n                \"focusable\": false,\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n r-animationKeyframes-127358a\"\n              style={\n                Object {\n                  \"WebkitAnimationDuration\": \"0.75s\",\n                  \"WebkitAnimationIterationCount\": \"infinite\",\n                  \"WebkitAnimationTimingFunction\": \"linear\",\n                  \"animationDuration\": \"0.75s\",\n                  \"animationIterationCount\": \"infinite\",\n                  \"animationTimingFunction\": \"linear\",\n                  \"height\": \"20px\",\n                  \"width\": \"20px\",\n                }\n              }\n            >\n              <svg\n                height=\"100%\"\n                viewBox=\"0 0 32 32\"\n                width=\"100%\"\n              >\n                <circle\n                  cx=\"16\"\n                  cy=\"16\"\n                  fill=\"none\"\n                  r=\"14\"\n                  strokeWidth=\"4\"\n                  style={\n                    Object {\n                      \"opacity\": 0.2,\n                      \"stroke\": \"#fafafa\",\n                    }\n                  }\n                />\n                <circle\n                  cx=\"16\"\n                  cy=\"16\"\n                  fill=\"none\"\n                  r=\"14\"\n                  strokeWidth=\"4\"\n                  style={\n                    Object {\n                      \"stroke\": \"#fafafa\",\n                      \"strokeDasharray\": 80,\n                      \"strokeDashoffset\": 60,\n                    }\n                  }\n                />\n              </svg>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        aria-disabled={true}\n        className=\"css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"not-allowed\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msUserSelect\": \"none\",\n            \"opacity\": 0.4,\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"-1\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            aria-label=\"loading\"\n            aria-valuemax={1}\n            aria-valuemin={0}\n            className=\"css-view-1dbjc4n\"\n            role=\"progressbar\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"dataSet\": Object {},\n                \"focusable\": false,\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n r-animationKeyframes-127358a\"\n              style={\n                Object {\n                  \"WebkitAnimationDuration\": \"0.75s\",\n                  \"WebkitAnimationIterationCount\": \"infinite\",\n                  \"WebkitAnimationTimingFunction\": \"linear\",\n                  \"animationDuration\": \"0.75s\",\n                  \"animationIterationCount\": \"infinite\",\n                  \"animationTimingFunction\": \"linear\",\n                  \"height\": \"20px\",\n                  \"width\": \"20px\",\n                }\n              }\n            >\n              <svg\n                height=\"100%\"\n                viewBox=\"0 0 32 32\"\n                width=\"100%\"\n              >\n                <circle\n                  cx=\"16\"\n                  cy=\"16\"\n                  fill=\"none\"\n                  r=\"14\"\n                  strokeWidth=\"4\"\n                  style={\n                    Object {\n                      \"opacity\": 0.2,\n                      \"stroke\": \"#fafafa\",\n                    }\n                  }\n                />\n                <circle\n                  cx=\"16\"\n                  cy=\"16\"\n                  fill=\"none\"\n                  r=\"14\"\n                  strokeWidth=\"4\"\n                  style={\n                    Object {\n                      \"stroke\": \"#fafafa\",\n                      \"strokeDasharray\": 80,\n                      \"strokeDashoffset\": 60,\n                    }\n                  }\n                />\n              </svg>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"6px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Submitting\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        aria-disabled={true}\n        className=\"css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"not-allowed\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msUserSelect\": \"none\",\n            \"opacity\": 0.4,\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"-1\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Submitting\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"6px\",\n              }\n            }\n          />\n          <div\n            aria-label=\"loading\"\n            aria-valuemax={1}\n            aria-valuemin={0}\n            className=\"css-view-1dbjc4n\"\n            role=\"progressbar\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"dataSet\": Object {},\n                \"focusable\": false,\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n r-animationKeyframes-127358a\"\n              style={\n                Object {\n                  \"WebkitAnimationDuration\": \"0.75s\",\n                  \"WebkitAnimationIterationCount\": \"infinite\",\n                  \"WebkitAnimationTimingFunction\": \"linear\",\n                  \"animationDuration\": \"0.75s\",\n                  \"animationIterationCount\": \"infinite\",\n                  \"animationTimingFunction\": \"linear\",\n                  \"height\": \"20px\",\n                  \"width\": \"20px\",\n                }\n              }\n            >\n              <svg\n                height=\"100%\"\n                viewBox=\"0 0 32 32\"\n                width=\"100%\"\n              >\n                <circle\n                  cx=\"16\"\n                  cy=\"16\"\n                  fill=\"none\"\n                  r=\"14\"\n                  strokeWidth=\"4\"\n                  style={\n                    Object {\n                      \"opacity\": 0.2,\n                      \"stroke\": \"#fafafa\",\n                    }\n                  }\n                />\n                <circle\n                  cx=\"16\"\n                  cy=\"16\"\n                  fill=\"none\"\n                  r=\"14\"\n                  strokeWidth=\"4\"\n                  style={\n                    Object {\n                      \"stroke\": \"#fafafa\",\n                      \"strokeDasharray\": 80,\n                      \"strokeDashoffset\": 60,\n                    }\n                  }\n                />\n              </svg>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        aria-disabled={true}\n        className=\"css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(251,191,36,0.70)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"not-allowed\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msUserSelect\": \"none\",\n            \"opacity\": 0.4,\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"-1\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            aria-label=\"loading\"\n            aria-valuemax={1}\n            aria-valuemin={0}\n            className=\"css-view-1dbjc4n\"\n            role=\"progressbar\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"dataSet\": Object {},\n                \"focusable\": false,\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n r-animationKeyframes-127358a\"\n              style={\n                Object {\n                  \"WebkitAnimationDuration\": \"0.75s\",\n                  \"WebkitAnimationIterationCount\": \"infinite\",\n                  \"WebkitAnimationTimingFunction\": \"linear\",\n                  \"animationDuration\": \"0.75s\",\n                  \"animationIterationCount\": \"infinite\",\n                  \"animationTimingFunction\": \"linear\",\n                  \"height\": \"20px\",\n                  \"width\": \"20px\",\n                }\n              }\n            >\n              <svg\n                height=\"100%\"\n                viewBox=\"0 0 32 32\"\n                width=\"100%\"\n              >\n                <circle\n                  cx=\"16\"\n                  cy=\"16\"\n                  fill=\"none\"\n                  r=\"14\"\n                  strokeWidth=\"4\"\n                  style={\n                    Object {\n                      \"opacity\": 0.2,\n                      \"stroke\": \"#FFFFFF\",\n                    }\n                  }\n                />\n                <circle\n                  cx=\"16\"\n                  cy=\"16\"\n                  fill=\"none\"\n                  r=\"14\"\n                  strokeWidth=\"4\"\n                  style={\n                    Object {\n                      \"stroke\": \"#FFFFFF\",\n                      \"strokeDasharray\": 80,\n                      \"strokeDashoffset\": 60,\n                    }\n                  }\n                />\n              </svg>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"6px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(55,65,81,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Submitting\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        aria-disabled={true}\n        className=\"css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"1px\",\n            \"cursor\": \"not-allowed\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msUserSelect\": \"none\",\n            \"opacity\": 0.4,\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"-1\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            aria-label=\"loading\"\n            aria-valuemax={1}\n            aria-valuemin={0}\n            className=\"css-view-1dbjc4n\"\n            role=\"progressbar\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"dataSet\": Object {},\n                \"focusable\": false,\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n r-animationKeyframes-127358a\"\n              style={\n                Object {\n                  \"WebkitAnimationDuration\": \"0.75s\",\n                  \"WebkitAnimationIterationCount\": \"infinite\",\n                  \"WebkitAnimationTimingFunction\": \"linear\",\n                  \"animationDuration\": \"0.75s\",\n                  \"animationIterationCount\": \"infinite\",\n                  \"animationTimingFunction\": \"linear\",\n                  \"height\": \"20px\",\n                  \"width\": \"20px\",\n                }\n              }\n            >\n              <svg\n                height=\"100%\"\n                viewBox=\"0 0 32 32\"\n                width=\"100%\"\n              >\n                <circle\n                  cx=\"16\"\n                  cy=\"16\"\n                  fill=\"none\"\n                  r=\"14\"\n                  strokeWidth=\"4\"\n                  style={\n                    Object {\n                      \"opacity\": 0.2,\n                      \"stroke\": \"#0891b2\",\n                    }\n                  }\n                />\n                <circle\n                  cx=\"16\"\n                  cy=\"16\"\n                  fill=\"none\"\n                  r=\"14\"\n                  strokeWidth=\"4\"\n                  style={\n                    Object {\n                      \"stroke\": \"#0891b2\",\n                      \"strokeDasharray\": 80,\n                      \"strokeDashoffset\": 60,\n                    }\n                  }\n                />\n              </svg>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"6px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(8,145,178,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Submitting\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Button Sizes 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"8px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"8px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"10px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              BUTTON\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"8px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"8px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              BUTTON\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              BUTTON\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"12px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"12px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              BUTTON\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Button Variants 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n r-scrollbarWidth-2eszeu\"\n      onScroll={[Function]}\n      onTouchEnd={[Function]}\n      onTouchMove={[Function]}\n      onTouchStart={[Function]}\n      onWheel={[Function]}\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxFlex\": 1,\n          \"WebkitBoxOrient\": \"vertical\",\n          \"WebkitFlexDirection\": \"column\",\n          \"WebkitFlexGrow\": 1,\n          \"WebkitFlexShrink\": 1,\n          \"WebkitOverflowScrolling\": \"touch\",\n          \"WebkitTransform\": \"translateZ(0px)\",\n          \"flexDirection\": \"column\",\n          \"flexGrow\": 1,\n          \"flexShrink\": 1,\n          \"msFlexDirection\": \"column\",\n          \"msFlexNegative\": 1,\n          \"msFlexPositive\": 1,\n          \"overflowX\": \"hidden\",\n          \"overflowY\": \"auto\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"transform\": \"translateZ(0px)\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"dataSet\": Object {},\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"marginTop\": \"16px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"paddingLeft\": \"8px\",\n              \"paddingRight\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Solid\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"vertical\",\n                \"WebkitFlexDirection\": \"column\",\n                \"flexDirection\": \"column\",\n                \"marginBottom\": \"10px\",\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"column\",\n              }\n            }\n          >\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(250,250,250,1.00)\",\n                        \"fontSize\": \"12px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    PRIMARY\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(219,39,119,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(250,250,250,1.00)\",\n                        \"fontSize\": \"12px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    SECONDARY\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"8px\",\n                }\n              }\n            />\n            <div\n              aria-disabled={true}\n              className=\"css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"not-allowed\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msUserSelect\": \"none\",\n                  \"opacity\": 0.4,\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"-1\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(250,250,250,1.00)\",\n                        \"fontSize\": \"12px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    DISABLED\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Subtle\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"vertical\",\n                \"WebkitFlexDirection\": \"column\",\n                \"flexDirection\": \"column\",\n                \"marginBottom\": \"10px\",\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"column\",\n              }\n            }\n          >\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(207,250,254,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(22,78,99,1.00)\",\n                        \"fontSize\": \"12px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    PRIMARY\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(252,231,243,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(131,24,67,1.00)\",\n                        \"fontSize\": \"12px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    SECONDARY\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"8px\",\n                }\n              }\n            />\n            <div\n              aria-disabled={true}\n              className=\"css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(207,250,254,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"not-allowed\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msUserSelect\": \"none\",\n                  \"opacity\": 0.4,\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"-1\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(22,78,99,1.00)\",\n                        \"fontSize\": \"12px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    DISABLED\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Outline\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"vertical\",\n                \"WebkitFlexDirection\": \"column\",\n                \"flexDirection\": \"column\",\n                \"marginBottom\": \"10px\",\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"column\",\n              }\n            }\n          >\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(8,145,178,1.00)\",\n                        \"fontSize\": \"12px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    PRIMARY\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(219,39,119,1.00)\",\n                        \"fontSize\": \"12px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    SECONDARY\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"8px\",\n                }\n              }\n            />\n            <div\n              aria-disabled={true}\n              className=\"css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"cursor\": \"not-allowed\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msUserSelect\": \"none\",\n                  \"opacity\": 0.4,\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"-1\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(8,145,178,1.00)\",\n                        \"fontSize\": \"12px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    DISABLED\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Link\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"vertical\",\n                \"WebkitFlexDirection\": \"column\",\n                \"flexDirection\": \"column\",\n                \"marginBottom\": \"10px\",\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"column\",\n              }\n            }\n          >\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(8,145,178,1.00)\",\n                        \"fontSize\": \"12px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    PRIMARY\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(219,39,119,1.00)\",\n                        \"fontSize\": \"12px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    SECONDARY\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"8px\",\n                }\n              }\n            />\n            <div\n              aria-disabled={true}\n              className=\"css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"not-allowed\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msUserSelect\": \"none\",\n                  \"opacity\": 0.4,\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"-1\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(8,145,178,1.00)\",\n                        \"fontSize\": \"12px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    DISABLED\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Ghost\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"vertical\",\n                \"WebkitFlexDirection\": \"column\",\n                \"flexDirection\": \"column\",\n                \"marginBottom\": \"10px\",\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"column\",\n              }\n            }\n          >\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(8,145,178,1.00)\",\n                        \"fontSize\": \"12px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    PRIMARY\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(219,39,119,1.00)\",\n                        \"fontSize\": \"12px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    SECONDARY\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"8px\",\n                }\n              }\n            />\n            <div\n              aria-disabled={true}\n              className=\"css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"not-allowed\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msUserSelect\": \"none\",\n                  \"opacity\": 0.4,\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"-1\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(8,145,178,1.00)\",\n                        \"fontSize\": \"12px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    DISABLED\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Unstyled\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"vertical\",\n                \"WebkitFlexDirection\": \"column\",\n                \"flexDirection\": \"column\",\n                \"marginBottom\": \"10px\",\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"column\",\n              }\n            }\n          >\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(23,23,23,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Unstyled\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Button WithRef 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"8px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"8px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(31,41,55,1.00)\",\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Send\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots ButtonGroup Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitFlexDirection\": \"row\",\n          \"flexDirection\": \"row\",\n          \"marginLeft\": \"auto\",\n          \"marginRight\": \"auto\",\n          \"msFlexDirection\": \"row\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(37,99,235,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"0px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"0px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"8px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"8px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Edit\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"0px\",\n          }\n        }\n      />\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"0px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"0px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"0px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"1px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"8px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"8px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(37,99,235,1.00)\",\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Save\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots ButtonGroup Sizes 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"20px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n            \"marginBottom\": \"40px\",\n          }\n        }\n      >\n        Sizes\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"vertical\",\n            \"WebkitFlexDirection\": \"column\",\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"column\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"column\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"8px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"8px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontSize\": \"10px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  BUTTON\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"12px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"8px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"8px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontSize\": \"12px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  BUTTON\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"12px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  BUTTON\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"12px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"12px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"12px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontSize\": \"16px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  BUTTON\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots ButtonGroup Variants 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      onScroll={[Function]}\n      onTouchEnd={[Function]}\n      onTouchMove={[Function]}\n      onTouchStart={[Function]}\n      onWheel={[Function]}\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxFlex\": 1,\n          \"WebkitBoxOrient\": \"vertical\",\n          \"WebkitFlexDirection\": \"column\",\n          \"WebkitFlexGrow\": 1,\n          \"WebkitFlexShrink\": 1,\n          \"WebkitOverflowScrolling\": \"touch\",\n          \"WebkitTransform\": \"translateZ(0px)\",\n          \"flexDirection\": \"column\",\n          \"flexGrow\": 1,\n          \"flexShrink\": 1,\n          \"msFlexDirection\": \"column\",\n          \"msFlexNegative\": 1,\n          \"msFlexPositive\": 1,\n          \"overflowX\": \"hidden\",\n          \"overflowY\": \"auto\",\n          \"transform\": \"translateZ(0px)\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"dataSet\": Object {},\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"marginTop\": \"16px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Solid\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"marginBottom\": \"10px\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(13,148,136,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(250,250,250,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Save\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(225,29,72,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(250,250,250,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Cancel\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Subtle\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"marginBottom\": \"10px\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(204,251,241,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(19,78,74,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Save\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(255,228,230,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(136,19,55,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Cancel\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Outline\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"marginBottom\": \"10px\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(13,148,136,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Save\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(225,29,72,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Cancel\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Link\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"marginBottom\": \"10px\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(13,148,136,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Save\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(225,29,72,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Cancel\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Ghost\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"marginBottom\": \"10px\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(13,148,136,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Save\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(225,29,72,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Cancel\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Unstyled\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"marginBottom\": \"10px\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(23,23,23,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Save\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(23,23,23,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Cancel\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots ButtonGroup direction 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"paddingLeft\": \"8px\",\n          \"paddingRight\": \"8px\",\n          \"width\": \"50%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"display\": \"flex\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"20px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.25em\",\n              \"marginBottom\": \"16px\",\n            }\n          }\n        >\n          Row\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"flexDirection\": \"row\",\n              \"marginLeft\": \"auto\",\n              \"marginRight\": \"auto\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(13,148,136,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Save\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(225,29,72,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Cancel\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          aria-orientation=\"horizontal\"\n          className=\"css-view-1dbjc4n\"\n          role=\"separator\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n              \"height\": \"1px\",\n              \"marginTop\": \"20px\",\n              \"width\": \"100%\",\n            }\n          }\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"10px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"display\": \"flex\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"20px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.25em\",\n              \"marginBottom\": \"16px\",\n            }\n          }\n        >\n          Column\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"vertical\",\n              \"WebkitFlexDirection\": \"column\",\n              \"flexDirection\": \"column\",\n              \"marginLeft\": \"auto\",\n              \"marginRight\": \"auto\",\n              \"msFlexDirection\": \"column\",\n            }\n          }\n        >\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(13,148,136,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Save\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(225,29,72,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Cancel\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots ButtonGroup isAttached 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      onScroll={[Function]}\n      onTouchEnd={[Function]}\n      onTouchMove={[Function]}\n      onTouchStart={[Function]}\n      onWheel={[Function]}\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxFlex\": 1,\n          \"WebkitBoxOrient\": \"vertical\",\n          \"WebkitFlexDirection\": \"column\",\n          \"WebkitFlexGrow\": 1,\n          \"WebkitFlexShrink\": 1,\n          \"WebkitOverflowScrolling\": \"touch\",\n          \"WebkitTransform\": \"translateZ(0px)\",\n          \"flexDirection\": \"column\",\n          \"flexGrow\": 1,\n          \"flexShrink\": 1,\n          \"msFlexDirection\": \"column\",\n          \"msFlexNegative\": 1,\n          \"msFlexPositive\": 1,\n          \"overflowX\": \"hidden\",\n          \"overflowY\": \"auto\",\n          \"transform\": \"translateZ(0px)\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"dataSet\": Object {},\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"marginTop\": \"16px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Solid\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"marginBottom\": \"10px\",\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(13,148,136,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"0px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"0px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(250,250,250,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Save\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"0px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(225,29,72,1.00)\",\n                  \"borderBottomLeftRadius\": \"0px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderLeftWidth\": \"0px\",\n                  \"borderTopLeftRadius\": \"0px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(250,250,250,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Cancel\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Outline\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"marginBottom\": \"10px\",\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"0px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"0px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(13,148,136,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Save\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"0px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"0px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderLeftWidth\": \"0px\",\n                  \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderTopLeftRadius\": \"0px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(225,29,72,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Cancel\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Link\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"marginBottom\": \"10px\",\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"0px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"0px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(13,148,136,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Save\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"0px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"0px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderLeftWidth\": \"0px\",\n                  \"borderTopLeftRadius\": \"0px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(225,29,72,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Cancel\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Ghost\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"marginBottom\": \"10px\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(13,148,136,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Save\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(225,29,72,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Cancel\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Unstyled\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"marginBottom\": \"10px\",\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"0px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"0px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(23,23,23,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Save\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"0px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"0px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderLeftWidth\": \"0px\",\n                  \"borderTopLeftRadius\": \"0px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(23,23,23,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Cancel\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Card Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"backgroundColor\": \"rgba(14,116,144,1.00)\",\n          \"borderBottomLeftRadius\": \"6px\",\n          \"borderBottomRightRadius\": \"6px\",\n          \"borderTopLeftRadius\": \"6px\",\n          \"borderTopRightRadius\": \"6px\",\n          \"boxShadow\": \"0px 2px 3.84px rgba(0,0,0,0.25)\",\n          \"overflowX\": \"hidden\",\n          \"overflowY\": \"hidden\",\n          \"paddingBottom\": \"16px\",\n          \"paddingLeft\": \"16px\",\n          \"paddingRight\": \"16px\",\n          \"paddingTop\": \"16px\",\n          \"width\": \"296px\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"flex-start\",\n            \"WebkitBoxAlign\": \"start\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"flex-start\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"start\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(236,254,255,1.00)\",\n              \"fontSize\": \"12px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"500\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          Open Source\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxFlex\": 1,\n              \"WebkitFlexGrow\": 1,\n              \"flexGrow\": 1,\n              \"msFlexPositive\": 1,\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n        />\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(207,250,254,1.00)\",\n              \"fontSize\": \"10px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          1 month ago\n        </div>\n      </div>\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(236,254,255,1.00)\",\n            \"fontSize\": \"18px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"500\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n            \"marginTop\": \"8px\",\n          }\n        }\n      >\n        NativeBase\n      </div>\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(255,255,255,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n            \"marginTop\": \"4px\",\n          }\n        }\n      >\n        NativeBase is a component library that enables devs to build universal design systems.\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"vertical\",\n            \"WebkitFlexDirection\": \"column\",\n            \"display\": \"flex\",\n            \"flexDirection\": \"column\",\n            \"msFlexDirection\": \"column\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(34,211,238,1.00)\",\n              \"fontSize\": \"12px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"500\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n              \"marginTop\": \"8px\",\n            }\n          }\n        >\n          Read More\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Center Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(34,211,238,1.00)\",\n            \"display\": \"flex\",\n            \"height\": \"200px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"200px\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(255,255,255,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          This is the Center\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Center SquareCircle 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitFlexDirection\": \"row\",\n          \"flexDirection\": \"row\",\n          \"msFlexDirection\": \"row\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(244,114,182,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"height\": \"40px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"40px\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"12px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(34,211,238,1.00)\",\n            \"height\": \"40px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"40px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(255,255,255,1.00)\",\n                \"fontSize\": \"18px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            20\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Center WithIcons 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitFlexDirection\": \"row\",\n          \"flexDirection\": \"row\",\n          \"msFlexDirection\": \"row\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(34,211,238,1.00)\",\n            \"display\": \"flex\",\n            \"height\": \"40px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"40px\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"4px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(244,114,182,1.00)\",\n            \"display\": \"flex\",\n            \"height\": \"40px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"40px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(255,255,255,1.00)\",\n                \"fontSize\": \"18px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            20\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Checkbox Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitFlexDirection\": \"row\",\n          \"flexDirection\": \"row\",\n          \"msFlexDirection\": \"row\",\n        }\n      }\n    >\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          style={\n            Object {\n              \"border\": 0,\n              \"clip\": \"rect(0 0 0 0)\",\n              \"clipPath\": \"inset(50%)\",\n              \"height\": 1,\n              \"margin\": \"0 -1px -1px 0\",\n              \"overflow\": \"hidden\",\n              \"padding\": 0,\n              \"position\": \"absolute\",\n              \"whiteSpace\": \"nowrap\",\n              \"width\": 1,\n            }\n          }\n        >\n          <input\n            aria-checked={false}\n            aria-label=\"This is a dummy checkbox\"\n            checked={false}\n            disabled={false}\n            onBlur={[Function]}\n            onChange={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onKeyUp={[Function]}\n            onMouseDown={[Function]}\n            onMouseEnter={[Function]}\n            onMouseLeave={[Function]}\n            onMouseUp={[Function]}\n            onTouchCancel={[Function]}\n            onTouchEnd={[Function]}\n            onTouchMove={[Function]}\n            onTouchStart={[Function]}\n            type=\"checkbox\"\n            value=\"test\"\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"start\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"flex-start\",\n              \"alignItems\": \"center\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"start\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              aria-label=\"This is a dummy checkbox\"\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                  \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"2px\",\n                  \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderLeftWidth\": \"2px\",\n                  \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderRightWidth\": \"2px\",\n                  \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"2px\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"opacity\": 1,\n                  \"paddingBottom\": \"2px\",\n                  \"paddingLeft\": \"2px\",\n                  \"paddingRight\": \"2px\",\n                  \"paddingTop\": \"2px\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"height\": \"12px\",\n                    \"width\": \"12px\",\n                  }\n                }\n              />\n            </div>\n          </div>\n        </div>\n      </label>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"24px\",\n          }\n        }\n      />\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          style={\n            Object {\n              \"border\": 0,\n              \"clip\": \"rect(0 0 0 0)\",\n              \"clipPath\": \"inset(50%)\",\n              \"height\": 1,\n              \"margin\": \"0 -1px -1px 0\",\n              \"overflow\": \"hidden\",\n              \"padding\": 0,\n              \"position\": \"absolute\",\n              \"whiteSpace\": \"nowrap\",\n              \"width\": 1,\n            }\n          }\n        >\n          <input\n            aria-checked={true}\n            aria-label=\"This is a dummy checkbox\"\n            checked={true}\n            disabled={false}\n            onBlur={[Function]}\n            onChange={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onKeyUp={[Function]}\n            onMouseDown={[Function]}\n            onMouseEnter={[Function]}\n            onMouseLeave={[Function]}\n            onMouseUp={[Function]}\n            onTouchCancel={[Function]}\n            onTouchEnd={[Function]}\n            onTouchMove={[Function]}\n            onTouchStart={[Function]}\n            type=\"checkbox\"\n            value=\"test\"\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"start\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"flex-start\",\n              \"alignItems\": \"center\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"start\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              aria-label=\"This is a dummy checkbox\"\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderBottomColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"2px\",\n                  \"borderLeftColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderLeftWidth\": \"2px\",\n                  \"borderRightColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderRightWidth\": \"2px\",\n                  \"borderTopColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"2px\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"opacity\": 1,\n                  \"paddingBottom\": \"2px\",\n                  \"paddingLeft\": \"2px\",\n                  \"paddingRight\": \"2px\",\n                  \"paddingTop\": \"2px\",\n                }\n              }\n            >\n              <svg\n                role=\"img\"\n                stroke=\"\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"height\": \"12px\",\n                    \"width\": \"12px\",\n                  }\n                }\n                viewBox=\"0 0 24 24\"\n              >\n                <g>\n                  <path\n                    d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                    fill=\"currentColor\"\n                    stroke=\"\"\n                  />\n                </g>\n              </svg>\n            </div>\n          </div>\n        </div>\n      </label>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Checkbox Checkbox Group 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"baseline\",\n              \"WebkitBoxAlign\": \"baseline\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"baseline\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"baseline\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"18px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Hobbies\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Selected: (\n              2\n              )\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          aria-label=\"pick an item\"\n          className=\"css-view-1dbjc4n\"\n          id=\"react-aria-0-1\"\n          role=\"group\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"flex-start\",\n              \"WebkitBoxAlign\": \"start\",\n              \"alignItems\": \"flex-start\",\n              \"msFlexAlign\": \"start\",\n            }\n          }\n        >\n          <label\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              style={\n                Object {\n                  \"border\": 0,\n                  \"clip\": \"rect(0 0 0 0)\",\n                  \"clipPath\": \"inset(50%)\",\n                  \"height\": 1,\n                  \"margin\": \"0 -1px -1px 0\",\n                  \"overflow\": \"hidden\",\n                  \"padding\": 0,\n                  \"position\": \"absolute\",\n                  \"whiteSpace\": \"nowrap\",\n                  \"width\": 1,\n                }\n              }\n            >\n              <input\n                aria-checked={true}\n                checked={true}\n                disabled={false}\n                onBlur={[Function]}\n                onChange={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onKeyUp={[Function]}\n                onMouseDown={[Function]}\n                onMouseEnter={[Function]}\n                onMouseLeave={[Function]}\n                onMouseUp={[Function]}\n                onTouchCancel={[Function]}\n                onTouchEnd={[Function]}\n                onTouchMove={[Function]}\n                onTouchStart={[Function]}\n                readOnly={false}\n                type=\"checkbox\"\n                value=\"Photography\"\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"start\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"flex-start\",\n                  \"alignItems\": \"center\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"flex-start\",\n                  \"marginBottom\": \"4px\",\n                  \"marginTop\": \"4px\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"start\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"rgba(22,163,74,1.00)\",\n                      \"borderBottomColor\": \"rgba(22,163,74,1.00)\",\n                      \"borderBottomLeftRadius\": \"4px\",\n                      \"borderBottomRightRadius\": \"4px\",\n                      \"borderBottomWidth\": \"2px\",\n                      \"borderLeftColor\": \"rgba(22,163,74,1.00)\",\n                      \"borderLeftWidth\": \"2px\",\n                      \"borderRightColor\": \"rgba(22,163,74,1.00)\",\n                      \"borderRightWidth\": \"2px\",\n                      \"borderTopColor\": \"rgba(22,163,74,1.00)\",\n                      \"borderTopLeftRadius\": \"4px\",\n                      \"borderTopRightRadius\": \"4px\",\n                      \"borderTopWidth\": \"2px\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                      \"opacity\": 1,\n                      \"paddingBottom\": \"2px\",\n                      \"paddingLeft\": \"2px\",\n                      \"paddingRight\": \"2px\",\n                      \"paddingTop\": \"2px\",\n                    }\n                  }\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(250,250,250,1.00)\",\n                        \"height\": \"12px\",\n                        \"width\": \"12px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(0,0,0,1.00)\",\n                    \"fontSize\": \"16px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                    \"marginLeft\": \"8px\",\n                  }\n                }\n              >\n                Photography\n              </div>\n            </div>\n          </label>\n          <label\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              style={\n                Object {\n                  \"border\": 0,\n                  \"clip\": \"rect(0 0 0 0)\",\n                  \"clipPath\": \"inset(50%)\",\n                  \"height\": 1,\n                  \"margin\": \"0 -1px -1px 0\",\n                  \"overflow\": \"hidden\",\n                  \"padding\": 0,\n                  \"position\": \"absolute\",\n                  \"whiteSpace\": \"nowrap\",\n                  \"width\": 1,\n                }\n              }\n            >\n              <input\n                aria-checked={false}\n                checked={false}\n                disabled={false}\n                onBlur={[Function]}\n                onChange={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onKeyUp={[Function]}\n                onMouseDown={[Function]}\n                onMouseEnter={[Function]}\n                onMouseLeave={[Function]}\n                onMouseUp={[Function]}\n                onTouchCancel={[Function]}\n                onTouchEnd={[Function]}\n                onTouchMove={[Function]}\n                onTouchStart={[Function]}\n                readOnly={false}\n                type=\"checkbox\"\n                value=\"Writing\"\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"start\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"flex-start\",\n                  \"alignItems\": \"center\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"flex-start\",\n                  \"marginBottom\": \"4px\",\n                  \"marginTop\": \"4px\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"start\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                      \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderBottomLeftRadius\": \"4px\",\n                      \"borderBottomRightRadius\": \"4px\",\n                      \"borderBottomWidth\": \"2px\",\n                      \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderLeftWidth\": \"2px\",\n                      \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderRightWidth\": \"2px\",\n                      \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderTopLeftRadius\": \"4px\",\n                      \"borderTopRightRadius\": \"4px\",\n                      \"borderTopWidth\": \"2px\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                      \"opacity\": 1,\n                      \"paddingBottom\": \"2px\",\n                      \"paddingLeft\": \"2px\",\n                      \"paddingRight\": \"2px\",\n                      \"paddingTop\": \"2px\",\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(250,250,250,1.00)\",\n                        \"height\": \"12px\",\n                        \"width\": \"12px\",\n                      }\n                    }\n                  />\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(0,0,0,1.00)\",\n                    \"fontSize\": \"16px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                    \"marginLeft\": \"8px\",\n                  }\n                }\n              >\n                Writing\n              </div>\n            </div>\n          </label>\n          <label\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              style={\n                Object {\n                  \"border\": 0,\n                  \"clip\": \"rect(0 0 0 0)\",\n                  \"clipPath\": \"inset(50%)\",\n                  \"height\": 1,\n                  \"margin\": \"0 -1px -1px 0\",\n                  \"overflow\": \"hidden\",\n                  \"padding\": 0,\n                  \"position\": \"absolute\",\n                  \"whiteSpace\": \"nowrap\",\n                  \"width\": 1,\n                }\n              }\n            >\n              <input\n                aria-checked={true}\n                checked={true}\n                disabled={false}\n                onBlur={[Function]}\n                onChange={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onKeyUp={[Function]}\n                onMouseDown={[Function]}\n                onMouseEnter={[Function]}\n                onMouseLeave={[Function]}\n                onMouseUp={[Function]}\n                onTouchCancel={[Function]}\n                onTouchEnd={[Function]}\n                onTouchMove={[Function]}\n                onTouchStart={[Function]}\n                readOnly={false}\n                type=\"checkbox\"\n                value=\"Gardening\"\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"start\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"flex-start\",\n                  \"alignItems\": \"center\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"flex-start\",\n                  \"marginBottom\": \"4px\",\n                  \"marginTop\": \"4px\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"start\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"rgba(22,163,74,1.00)\",\n                      \"borderBottomColor\": \"rgba(22,163,74,1.00)\",\n                      \"borderBottomLeftRadius\": \"4px\",\n                      \"borderBottomRightRadius\": \"4px\",\n                      \"borderBottomWidth\": \"2px\",\n                      \"borderLeftColor\": \"rgba(22,163,74,1.00)\",\n                      \"borderLeftWidth\": \"2px\",\n                      \"borderRightColor\": \"rgba(22,163,74,1.00)\",\n                      \"borderRightWidth\": \"2px\",\n                      \"borderTopColor\": \"rgba(22,163,74,1.00)\",\n                      \"borderTopLeftRadius\": \"4px\",\n                      \"borderTopRightRadius\": \"4px\",\n                      \"borderTopWidth\": \"2px\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                      \"opacity\": 1,\n                      \"paddingBottom\": \"2px\",\n                      \"paddingLeft\": \"2px\",\n                      \"paddingRight\": \"2px\",\n                      \"paddingTop\": \"2px\",\n                    }\n                  }\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(250,250,250,1.00)\",\n                        \"height\": \"12px\",\n                        \"width\": \"12px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(0,0,0,1.00)\",\n                    \"fontSize\": \"16px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                    \"marginLeft\": \"8px\",\n                  }\n                }\n              >\n                Gardening\n              </div>\n            </div>\n          </label>\n          <label\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              style={\n                Object {\n                  \"border\": 0,\n                  \"clip\": \"rect(0 0 0 0)\",\n                  \"clipPath\": \"inset(50%)\",\n                  \"height\": 1,\n                  \"margin\": \"0 -1px -1px 0\",\n                  \"overflow\": \"hidden\",\n                  \"padding\": 0,\n                  \"position\": \"absolute\",\n                  \"whiteSpace\": \"nowrap\",\n                  \"width\": 1,\n                }\n              }\n            >\n              <input\n                aria-checked={false}\n                checked={false}\n                disabled={false}\n                onBlur={[Function]}\n                onChange={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onKeyUp={[Function]}\n                onMouseDown={[Function]}\n                onMouseEnter={[Function]}\n                onMouseLeave={[Function]}\n                onMouseUp={[Function]}\n                onTouchCancel={[Function]}\n                onTouchEnd={[Function]}\n                onTouchMove={[Function]}\n                onTouchStart={[Function]}\n                readOnly={false}\n                type=\"checkbox\"\n                value=\"Cooking\"\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"start\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"flex-start\",\n                  \"alignItems\": \"center\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"flex-start\",\n                  \"marginBottom\": \"4px\",\n                  \"marginTop\": \"4px\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"start\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                      \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderBottomLeftRadius\": \"4px\",\n                      \"borderBottomRightRadius\": \"4px\",\n                      \"borderBottomWidth\": \"2px\",\n                      \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderLeftWidth\": \"2px\",\n                      \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderRightWidth\": \"2px\",\n                      \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderTopLeftRadius\": \"4px\",\n                      \"borderTopRightRadius\": \"4px\",\n                      \"borderTopWidth\": \"2px\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                      \"opacity\": 1,\n                      \"paddingBottom\": \"2px\",\n                      \"paddingLeft\": \"2px\",\n                      \"paddingRight\": \"2px\",\n                      \"paddingTop\": \"2px\",\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(250,250,250,1.00)\",\n                        \"height\": \"12px\",\n                        \"width\": \"12px\",\n                      }\n                    }\n                  />\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(0,0,0,1.00)\",\n                    \"fontSize\": \"16px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                    \"marginLeft\": \"8px\",\n                  }\n                }\n              >\n                Cooking\n              </div>\n            </div>\n          </label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Checkbox Controlled checkbox 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      aria-label=\"choose numbers\"\n      className=\"css-view-1dbjc4n\"\n      id=\"react-aria-0-1\"\n      role=\"group\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"flex-start\",\n          \"WebkitBoxAlign\": \"start\",\n          \"alignItems\": \"flex-start\",\n          \"msFlexAlign\": \"start\",\n        }\n      }\n    >\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          style={\n            Object {\n              \"border\": 0,\n              \"clip\": \"rect(0 0 0 0)\",\n              \"clipPath\": \"inset(50%)\",\n              \"height\": 1,\n              \"margin\": \"0 -1px -1px 0\",\n              \"overflow\": \"hidden\",\n              \"padding\": 0,\n              \"position\": \"absolute\",\n              \"whiteSpace\": \"nowrap\",\n              \"width\": 1,\n            }\n          }\n        >\n          <input\n            aria-checked={false}\n            checked={false}\n            disabled={false}\n            onBlur={[Function]}\n            onChange={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onKeyUp={[Function]}\n            onMouseDown={[Function]}\n            onMouseEnter={[Function]}\n            onMouseLeave={[Function]}\n            onMouseUp={[Function]}\n            onTouchCancel={[Function]}\n            onTouchEnd={[Function]}\n            onTouchMove={[Function]}\n            onTouchStart={[Function]}\n            readOnly={false}\n            type=\"checkbox\"\n            value=\"one\"\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"start\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"flex-start\",\n              \"alignItems\": \"center\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"marginBottom\": \"8px\",\n              \"marginTop\": \"8px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"start\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                  \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"2px\",\n                  \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderLeftWidth\": \"2px\",\n                  \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderRightWidth\": \"2px\",\n                  \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"2px\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"opacity\": 1,\n                  \"paddingBottom\": \"2px\",\n                  \"paddingLeft\": \"2px\",\n                  \"paddingRight\": \"2px\",\n                  \"paddingTop\": \"2px\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"height\": \"12px\",\n                    \"width\": \"12px\",\n                  }\n                }\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(0,0,0,1.00)\",\n                \"fontSize\": \"16px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginLeft\": \"8px\",\n              }\n            }\n          >\n            UX Research\n          </div>\n        </div>\n      </label>\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          style={\n            Object {\n              \"border\": 0,\n              \"clip\": \"rect(0 0 0 0)\",\n              \"clipPath\": \"inset(50%)\",\n              \"height\": 1,\n              \"margin\": \"0 -1px -1px 0\",\n              \"overflow\": \"hidden\",\n              \"padding\": 0,\n              \"position\": \"absolute\",\n              \"whiteSpace\": \"nowrap\",\n              \"width\": 1,\n            }\n          }\n        >\n          <input\n            aria-checked={false}\n            checked={false}\n            disabled={false}\n            onBlur={[Function]}\n            onChange={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onKeyUp={[Function]}\n            onMouseDown={[Function]}\n            onMouseEnter={[Function]}\n            onMouseLeave={[Function]}\n            onMouseUp={[Function]}\n            onTouchCancel={[Function]}\n            onTouchEnd={[Function]}\n            onTouchMove={[Function]}\n            onTouchStart={[Function]}\n            readOnly={false}\n            type=\"checkbox\"\n            value=\"two\"\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"start\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"flex-start\",\n              \"alignItems\": \"center\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"start\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                  \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"2px\",\n                  \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderLeftWidth\": \"2px\",\n                  \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderRightWidth\": \"2px\",\n                  \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"2px\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"opacity\": 1,\n                  \"paddingBottom\": \"2px\",\n                  \"paddingLeft\": \"2px\",\n                  \"paddingRight\": \"2px\",\n                  \"paddingTop\": \"2px\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"height\": \"12px\",\n                    \"width\": \"12px\",\n                  }\n                }\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(0,0,0,1.00)\",\n                \"fontSize\": \"16px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginLeft\": \"8px\",\n              }\n            }\n          >\n            Software Development\n          </div>\n        </div>\n      </label>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Checkbox Custom Color 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"flex-start\",\n            \"WebkitBoxAlign\": \"start\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"vertical\",\n            \"WebkitFlexDirection\": \"column\",\n            \"alignItems\": \"flex-start\",\n            \"flexDirection\": \"column\",\n            \"msFlexAlign\": \"start\",\n            \"msFlexDirection\": \"column\",\n          }\n        }\n      >\n        <label\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              aria-checked={true}\n              checked={true}\n              disabled={false}\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              type=\"checkbox\"\n              value=\"danger\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"start\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"flex-start\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"start\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(225,29,72,1.00)\",\n                    \"borderBottomColor\": \"rgba(225,29,72,1.00)\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(225,29,72,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(225,29,72,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(225,29,72,1.00)\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": \"2px\",\n                    \"paddingLeft\": \"2px\",\n                    \"paddingRight\": \"2px\",\n                    \"paddingTop\": \"2px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"height\": \"12px\",\n                      \"width\": \"12px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(0,0,0,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginLeft\": \"8px\",\n                }\n              }\n            >\n              Danger\n            </div>\n          </div>\n        </label>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"12px\",\n            }\n          }\n        />\n        <label\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              aria-checked={true}\n              checked={true}\n              disabled={false}\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              type=\"checkbox\"\n              value=\"info\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"start\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"flex-start\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"start\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(2,132,199,1.00)\",\n                    \"borderBottomColor\": \"rgba(2,132,199,1.00)\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(2,132,199,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(2,132,199,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(2,132,199,1.00)\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": \"2px\",\n                    \"paddingLeft\": \"2px\",\n                    \"paddingRight\": \"2px\",\n                    \"paddingTop\": \"2px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"height\": \"12px\",\n                      \"width\": \"12px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(0,0,0,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginLeft\": \"8px\",\n                }\n              }\n            >\n              Info\n            </div>\n          </div>\n        </label>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"12px\",\n            }\n          }\n        />\n        <label\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              aria-checked={true}\n              checked={true}\n              disabled={false}\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              type=\"checkbox\"\n              value=\"orange\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"start\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"flex-start\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"start\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(234,88,12,1.00)\",\n                    \"borderBottomColor\": \"rgba(234,88,12,1.00)\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(234,88,12,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(234,88,12,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(234,88,12,1.00)\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": \"2px\",\n                    \"paddingLeft\": \"2px\",\n                    \"paddingRight\": \"2px\",\n                    \"paddingTop\": \"2px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"height\": \"12px\",\n                      \"width\": \"12px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(0,0,0,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginLeft\": \"8px\",\n                }\n              }\n            >\n              Orange\n            </div>\n          </div>\n        </label>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"12px\",\n            }\n          }\n        />\n        <label\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              aria-checked={true}\n              checked={true}\n              disabled={false}\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              type=\"checkbox\"\n              value=\"purple\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"start\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"flex-start\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"start\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(147,51,234,1.00)\",\n                    \"borderBottomColor\": \"rgba(147,51,234,1.00)\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(147,51,234,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(147,51,234,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(147,51,234,1.00)\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": \"2px\",\n                    \"paddingLeft\": \"2px\",\n                    \"paddingRight\": \"2px\",\n                    \"paddingTop\": \"2px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"height\": \"12px\",\n                      \"width\": \"12px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(0,0,0,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginLeft\": \"8px\",\n                }\n              }\n            >\n              Purple\n            </div>\n          </div>\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Checkbox Custom Icon 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"flex-start\",\n            \"WebkitBoxAlign\": \"start\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"vertical\",\n            \"WebkitFlexDirection\": \"column\",\n            \"alignItems\": \"flex-start\",\n            \"flexDirection\": \"column\",\n            \"msFlexAlign\": \"start\",\n            \"msFlexDirection\": \"column\",\n          }\n        }\n      >\n        <label\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              aria-checked={true}\n              checked={true}\n              disabled={false}\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              type=\"checkbox\"\n              value=\"orange\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"start\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"flex-start\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"start\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(234,88,12,1.00)\",\n                    \"borderBottomColor\": \"rgba(234,88,12,1.00)\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(234,88,12,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(234,88,12,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(234,88,12,1.00)\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": \"2px\",\n                    \"paddingLeft\": \"2px\",\n                    \"paddingRight\": \"2px\",\n                    \"paddingTop\": \"2px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                />\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(0,0,0,1.00)\",\n                  \"fontSize\": \"18px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginLeft\": \"8px\",\n                }\n              }\n            >\n              Darts\n            </div>\n          </div>\n        </label>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"12px\",\n            }\n          }\n        />\n        <label\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              aria-checked={true}\n              checked={true}\n              disabled={false}\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              type=\"checkbox\"\n              value=\"dark\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"start\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"flex-start\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"start\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(212,212,216,1.00)\",\n                    \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": \"2px\",\n                    \"paddingLeft\": \"2px\",\n                    \"paddingRight\": \"2px\",\n                    \"paddingTop\": \"2px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                />\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(0,0,0,1.00)\",\n                  \"fontSize\": \"18px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginLeft\": \"8px\",\n                }\n              }\n            >\n              Movie\n            </div>\n          </div>\n        </label>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"12px\",\n            }\n          }\n        />\n        <label\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              aria-checked={true}\n              checked={true}\n              disabled={false}\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              type=\"checkbox\"\n              value=\"red\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"start\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"flex-start\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"start\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(220,38,38,1.00)\",\n                    \"borderBottomColor\": \"rgba(220,38,38,1.00)\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(220,38,38,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(220,38,38,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(220,38,38,1.00)\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": \"2px\",\n                    \"paddingLeft\": \"2px\",\n                    \"paddingRight\": \"2px\",\n                    \"paddingTop\": \"2px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                />\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(0,0,0,1.00)\",\n                  \"fontSize\": \"18px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginLeft\": \"8px\",\n                }\n              }\n            >\n              Camping\n            </div>\n          </div>\n        </label>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"12px\",\n            }\n          }\n        />\n        <label\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              aria-checked={true}\n              checked={true}\n              disabled={false}\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              type=\"checkbox\"\n              value=\"blue\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"start\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"flex-start\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"start\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(37,99,235,1.00)\",\n                    \"borderBottomColor\": \"rgba(37,99,235,1.00)\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(37,99,235,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(37,99,235,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(37,99,235,1.00)\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": \"2px\",\n                    \"paddingLeft\": \"2px\",\n                    \"paddingRight\": \"2px\",\n                    \"paddingTop\": \"2px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                />\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(0,0,0,1.00)\",\n                  \"fontSize\": \"18px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginLeft\": \"8px\",\n                }\n              }\n            >\n              Chess\n            </div>\n          </div>\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Checkbox Disabled 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n    >\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          style={\n            Object {\n              \"border\": 0,\n              \"clip\": \"rect(0 0 0 0)\",\n              \"clipPath\": \"inset(50%)\",\n              \"height\": 1,\n              \"margin\": \"0 -1px -1px 0\",\n              \"overflow\": \"hidden\",\n              \"padding\": 0,\n              \"position\": \"absolute\",\n              \"whiteSpace\": \"nowrap\",\n              \"width\": 1,\n            }\n          }\n        >\n          <input\n            aria-checked={false}\n            checked={false}\n            disabled={true}\n            onBlur={[Function]}\n            onChange={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onKeyUp={[Function]}\n            onMouseDown={[Function]}\n            onMouseEnter={[Function]}\n            onMouseLeave={[Function]}\n            onMouseUp={[Function]}\n            onTouchCancel={[Function]}\n            onTouchEnd={[Function]}\n            onTouchMove={[Function]}\n            onTouchStart={[Function]}\n            type=\"checkbox\"\n            value=\"one\"\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"start\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"flex-start\",\n              \"alignItems\": \"center\",\n              \"cursor\": \"not-allowed\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"start\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                  \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"2px\",\n                  \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderLeftWidth\": \"2px\",\n                  \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderRightWidth\": \"2px\",\n                  \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"2px\",\n                  \"cursor\": \"not-allowed\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"opacity\": 0.4,\n                  \"paddingBottom\": \"2px\",\n                  \"paddingLeft\": \"2px\",\n                  \"paddingRight\": \"2px\",\n                  \"paddingTop\": \"2px\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"height\": \"12px\",\n                    \"width\": \"12px\",\n                  }\n                }\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(0,0,0,1.00)\",\n                \"fontSize\": \"16px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginLeft\": \"8px\",\n              }\n            }\n          >\n            UX Research\n          </div>\n        </div>\n      </label>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          style={\n            Object {\n              \"border\": 0,\n              \"clip\": \"rect(0 0 0 0)\",\n              \"clipPath\": \"inset(50%)\",\n              \"height\": 1,\n              \"margin\": \"0 -1px -1px 0\",\n              \"overflow\": \"hidden\",\n              \"padding\": 0,\n              \"position\": \"absolute\",\n              \"whiteSpace\": \"nowrap\",\n              \"width\": 1,\n            }\n          }\n        >\n          <input\n            aria-checked={true}\n            checked={true}\n            disabled={true}\n            onBlur={[Function]}\n            onChange={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onKeyUp={[Function]}\n            onMouseDown={[Function]}\n            onMouseEnter={[Function]}\n            onMouseLeave={[Function]}\n            onMouseUp={[Function]}\n            onTouchCancel={[Function]}\n            onTouchEnd={[Function]}\n            onTouchMove={[Function]}\n            onTouchStart={[Function]}\n            type=\"checkbox\"\n            value=\"two\"\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"start\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"flex-start\",\n              \"alignItems\": \"center\",\n              \"cursor\": \"not-allowed\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"start\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderBottomColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"2px\",\n                  \"borderLeftColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderLeftWidth\": \"2px\",\n                  \"borderRightColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderRightWidth\": \"2px\",\n                  \"borderTopColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"2px\",\n                  \"cursor\": \"not-allowed\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"opacity\": 0.4,\n                  \"paddingBottom\": \"2px\",\n                  \"paddingLeft\": \"2px\",\n                  \"paddingRight\": \"2px\",\n                  \"paddingTop\": \"2px\",\n                }\n              }\n            >\n              <svg\n                role=\"img\"\n                stroke=\"\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"height\": \"12px\",\n                    \"width\": \"12px\",\n                  }\n                }\n                viewBox=\"0 0 24 24\"\n              >\n                <g>\n                  <path\n                    d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                    fill=\"currentColor\"\n                    stroke=\"\"\n                  />\n                </g>\n              </svg>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(0,0,0,1.00)\",\n                \"fontSize\": \"16px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginLeft\": \"8px\",\n              }\n            }\n          >\n            Software Development\n          </div>\n        </div>\n      </label>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Checkbox Form Controlled 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"flex-start\",\n            \"WebkitBoxAlign\": \"start\",\n            \"alignItems\": \"flex-start\",\n            \"maxWidth\": \"80%\",\n            \"msFlexAlign\": \"start\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <label\n            className=\"css-view-1dbjc4n\"\n            id=\"field-69-label\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"start\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"flex-start\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n                \"marginBottom\": \"4px\",\n                \"marginTop\": \"4px\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"start\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(115,115,115,1.00)\",\n                  \"fontSize\": \"18px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Preferred contact method\n            </div>\n          </label>\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"16px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            Selected Values: \n          </div>\n          <div\n            aria-label=\"choose multiple items\"\n            className=\"css-view-1dbjc4n\"\n            id=\"react-aria-0-1\"\n            role=\"group\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"flex-start\",\n                \"WebkitBoxAlign\": \"start\",\n                \"alignItems\": \"flex-start\",\n                \"marginTop\": \"8px\",\n                \"msFlexAlign\": \"start\",\n              }\n            }\n          >\n            <label\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                style={\n                  Object {\n                    \"border\": 0,\n                    \"clip\": \"rect(0 0 0 0)\",\n                    \"clipPath\": \"inset(50%)\",\n                    \"height\": 1,\n                    \"margin\": \"0 -1px -1px 0\",\n                    \"overflow\": \"hidden\",\n                    \"padding\": 0,\n                    \"position\": \"absolute\",\n                    \"whiteSpace\": \"nowrap\",\n                    \"width\": 1,\n                  }\n                }\n              >\n                <input\n                  aria-checked={true}\n                  checked={true}\n                  disabled={false}\n                  onBlur={[Function]}\n                  onChange={[Function]}\n                  onClick={[Function]}\n                  onFocus={[Function]}\n                  onKeyDown={[Function]}\n                  onKeyUp={[Function]}\n                  onMouseDown={[Function]}\n                  onMouseEnter={[Function]}\n                  onMouseLeave={[Function]}\n                  onMouseUp={[Function]}\n                  onTouchCancel={[Function]}\n                  onTouchEnd={[Function]}\n                  onTouchMove={[Function]}\n                  onTouchStart={[Function]}\n                  readOnly={false}\n                  required={false}\n                  type=\"checkbox\"\n                  value=\"Phone\"\n                />\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"start\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitJustifyContent\": \"flex-start\",\n                    \"alignItems\": \"center\",\n                    \"cursor\": \"pointer\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"flex-start\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexPack\": \"start\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                  />\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    id=\"field-69\"\n                    style={\n                      Object {\n                        \"WebkitAlignItems\": \"center\",\n                        \"WebkitBoxAlign\": \"center\",\n                        \"WebkitBoxPack\": \"center\",\n                        \"WebkitJustifyContent\": \"center\",\n                        \"alignItems\": \"center\",\n                        \"backgroundColor\": \"rgba(22,163,74,1.00)\",\n                        \"borderBottomColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderBottomLeftRadius\": \"4px\",\n                        \"borderBottomRightRadius\": \"4px\",\n                        \"borderBottomWidth\": \"2px\",\n                        \"borderLeftColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderLeftWidth\": \"2px\",\n                        \"borderRightColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderRightWidth\": \"2px\",\n                        \"borderTopColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderTopLeftRadius\": \"4px\",\n                        \"borderTopRightRadius\": \"4px\",\n                        \"borderTopWidth\": \"2px\",\n                        \"display\": \"flex\",\n                        \"justifyContent\": \"center\",\n                        \"msFlexAlign\": \"center\",\n                        \"msFlexPack\": \"center\",\n                        \"opacity\": 1,\n                        \"paddingBottom\": \"2px\",\n                        \"paddingLeft\": \"2px\",\n                        \"paddingRight\": \"2px\",\n                        \"paddingTop\": \"2px\",\n                      }\n                    }\n                  >\n                    <svg\n                      role=\"img\"\n                      stroke=\"\"\n                      style={\n                        Object {\n                          \"color\": \"rgba(250,250,250,1.00)\",\n                          \"height\": \"12px\",\n                          \"width\": \"12px\",\n                        }\n                      }\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <g>\n                        <path\n                          d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                          fill=\"currentColor\"\n                          stroke=\"\"\n                        />\n                      </g>\n                    </svg>\n                  </div>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(0,0,0,1.00)\",\n                      \"fontSize\": \"16px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"marginLeft\": \"8px\",\n                    }\n                  }\n                >\n                  Phone\n                </div>\n              </div>\n            </label>\n            <label\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                style={\n                  Object {\n                    \"border\": 0,\n                    \"clip\": \"rect(0 0 0 0)\",\n                    \"clipPath\": \"inset(50%)\",\n                    \"height\": 1,\n                    \"margin\": \"0 -1px -1px 0\",\n                    \"overflow\": \"hidden\",\n                    \"padding\": 0,\n                    \"position\": \"absolute\",\n                    \"whiteSpace\": \"nowrap\",\n                    \"width\": 1,\n                  }\n                }\n              >\n                <input\n                  aria-checked={true}\n                  checked={true}\n                  disabled={false}\n                  onBlur={[Function]}\n                  onChange={[Function]}\n                  onClick={[Function]}\n                  onFocus={[Function]}\n                  onKeyDown={[Function]}\n                  onKeyUp={[Function]}\n                  onMouseDown={[Function]}\n                  onMouseEnter={[Function]}\n                  onMouseLeave={[Function]}\n                  onMouseUp={[Function]}\n                  onTouchCancel={[Function]}\n                  onTouchEnd={[Function]}\n                  onTouchMove={[Function]}\n                  onTouchStart={[Function]}\n                  readOnly={false}\n                  required={false}\n                  type=\"checkbox\"\n                  value=\"Email\"\n                />\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"start\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitJustifyContent\": \"flex-start\",\n                    \"alignItems\": \"center\",\n                    \"cursor\": \"pointer\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"flex-start\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexPack\": \"start\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                  />\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    id=\"field-69\"\n                    style={\n                      Object {\n                        \"WebkitAlignItems\": \"center\",\n                        \"WebkitBoxAlign\": \"center\",\n                        \"WebkitBoxPack\": \"center\",\n                        \"WebkitJustifyContent\": \"center\",\n                        \"alignItems\": \"center\",\n                        \"backgroundColor\": \"rgba(22,163,74,1.00)\",\n                        \"borderBottomColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderBottomLeftRadius\": \"4px\",\n                        \"borderBottomRightRadius\": \"4px\",\n                        \"borderBottomWidth\": \"2px\",\n                        \"borderLeftColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderLeftWidth\": \"2px\",\n                        \"borderRightColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderRightWidth\": \"2px\",\n                        \"borderTopColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderTopLeftRadius\": \"4px\",\n                        \"borderTopRightRadius\": \"4px\",\n                        \"borderTopWidth\": \"2px\",\n                        \"display\": \"flex\",\n                        \"justifyContent\": \"center\",\n                        \"msFlexAlign\": \"center\",\n                        \"msFlexPack\": \"center\",\n                        \"opacity\": 1,\n                        \"paddingBottom\": \"2px\",\n                        \"paddingLeft\": \"2px\",\n                        \"paddingRight\": \"2px\",\n                        \"paddingTop\": \"2px\",\n                      }\n                    }\n                  >\n                    <svg\n                      role=\"img\"\n                      stroke=\"\"\n                      style={\n                        Object {\n                          \"color\": \"rgba(250,250,250,1.00)\",\n                          \"height\": \"12px\",\n                          \"width\": \"12px\",\n                        }\n                      }\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <g>\n                        <path\n                          d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                          fill=\"currentColor\"\n                          stroke=\"\"\n                        />\n                      </g>\n                    </svg>\n                  </div>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(0,0,0,1.00)\",\n                      \"fontSize\": \"16px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"marginLeft\": \"8px\",\n                    }\n                  }\n                >\n                  Email\n                </div>\n              </div>\n            </label>\n            <label\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                style={\n                  Object {\n                    \"border\": 0,\n                    \"clip\": \"rect(0 0 0 0)\",\n                    \"clipPath\": \"inset(50%)\",\n                    \"height\": 1,\n                    \"margin\": \"0 -1px -1px 0\",\n                    \"overflow\": \"hidden\",\n                    \"padding\": 0,\n                    \"position\": \"absolute\",\n                    \"whiteSpace\": \"nowrap\",\n                    \"width\": 1,\n                  }\n                }\n              >\n                <input\n                  aria-checked={false}\n                  checked={false}\n                  disabled={false}\n                  onBlur={[Function]}\n                  onChange={[Function]}\n                  onClick={[Function]}\n                  onFocus={[Function]}\n                  onKeyDown={[Function]}\n                  onKeyUp={[Function]}\n                  onMouseDown={[Function]}\n                  onMouseEnter={[Function]}\n                  onMouseLeave={[Function]}\n                  onMouseUp={[Function]}\n                  onTouchCancel={[Function]}\n                  onTouchEnd={[Function]}\n                  onTouchMove={[Function]}\n                  onTouchStart={[Function]}\n                  readOnly={false}\n                  required={false}\n                  type=\"checkbox\"\n                  value=\"Message\"\n                />\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"start\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitJustifyContent\": \"flex-start\",\n                    \"alignItems\": \"center\",\n                    \"cursor\": \"pointer\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"flex-start\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexPack\": \"start\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                  />\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    id=\"field-69\"\n                    style={\n                      Object {\n                        \"WebkitAlignItems\": \"center\",\n                        \"WebkitBoxAlign\": \"center\",\n                        \"WebkitBoxPack\": \"center\",\n                        \"WebkitJustifyContent\": \"center\",\n                        \"alignItems\": \"center\",\n                        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                        \"borderBottomColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderBottomLeftRadius\": \"4px\",\n                        \"borderBottomRightRadius\": \"4px\",\n                        \"borderBottomWidth\": \"2px\",\n                        \"borderLeftColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderLeftWidth\": \"2px\",\n                        \"borderRightColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderRightWidth\": \"2px\",\n                        \"borderTopColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderTopLeftRadius\": \"4px\",\n                        \"borderTopRightRadius\": \"4px\",\n                        \"borderTopWidth\": \"2px\",\n                        \"display\": \"flex\",\n                        \"justifyContent\": \"center\",\n                        \"msFlexAlign\": \"center\",\n                        \"msFlexPack\": \"center\",\n                        \"opacity\": 1,\n                        \"paddingBottom\": \"2px\",\n                        \"paddingLeft\": \"2px\",\n                        \"paddingRight\": \"2px\",\n                        \"paddingTop\": \"2px\",\n                      }\n                    }\n                  >\n                    <div\n                      className=\"css-view-1dbjc4n\"\n                      style={\n                        Object {\n                          \"color\": \"rgba(250,250,250,1.00)\",\n                          \"height\": \"12px\",\n                          \"width\": \"12px\",\n                        }\n                      }\n                    />\n                  </div>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(0,0,0,1.00)\",\n                      \"fontSize\": \"16px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"marginLeft\": \"8px\",\n                    }\n                  }\n                >\n                  Message\n                </div>\n              </div>\n            </label>\n            <label\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                style={\n                  Object {\n                    \"border\": 0,\n                    \"clip\": \"rect(0 0 0 0)\",\n                    \"clipPath\": \"inset(50%)\",\n                    \"height\": 1,\n                    \"margin\": \"0 -1px -1px 0\",\n                    \"overflow\": \"hidden\",\n                    \"padding\": 0,\n                    \"position\": \"absolute\",\n                    \"whiteSpace\": \"nowrap\",\n                    \"width\": 1,\n                  }\n                }\n              >\n                <input\n                  aria-checked={false}\n                  checked={false}\n                  disabled={false}\n                  onBlur={[Function]}\n                  onChange={[Function]}\n                  onClick={[Function]}\n                  onFocus={[Function]}\n                  onKeyDown={[Function]}\n                  onKeyUp={[Function]}\n                  onMouseDown={[Function]}\n                  onMouseEnter={[Function]}\n                  onMouseLeave={[Function]}\n                  onMouseUp={[Function]}\n                  onTouchCancel={[Function]}\n                  onTouchEnd={[Function]}\n                  onTouchMove={[Function]}\n                  onTouchStart={[Function]}\n                  readOnly={false}\n                  required={false}\n                  type=\"checkbox\"\n                  value=\"Fax\"\n                />\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"start\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitJustifyContent\": \"flex-start\",\n                    \"alignItems\": \"center\",\n                    \"cursor\": \"pointer\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"flex-start\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexPack\": \"start\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                  />\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    id=\"field-69\"\n                    style={\n                      Object {\n                        \"WebkitAlignItems\": \"center\",\n                        \"WebkitBoxAlign\": \"center\",\n                        \"WebkitBoxPack\": \"center\",\n                        \"WebkitJustifyContent\": \"center\",\n                        \"alignItems\": \"center\",\n                        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                        \"borderBottomColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderBottomLeftRadius\": \"4px\",\n                        \"borderBottomRightRadius\": \"4px\",\n                        \"borderBottomWidth\": \"2px\",\n                        \"borderLeftColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderLeftWidth\": \"2px\",\n                        \"borderRightColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderRightWidth\": \"2px\",\n                        \"borderTopColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderTopLeftRadius\": \"4px\",\n                        \"borderTopRightRadius\": \"4px\",\n                        \"borderTopWidth\": \"2px\",\n                        \"display\": \"flex\",\n                        \"justifyContent\": \"center\",\n                        \"msFlexAlign\": \"center\",\n                        \"msFlexPack\": \"center\",\n                        \"opacity\": 1,\n                        \"paddingBottom\": \"2px\",\n                        \"paddingLeft\": \"2px\",\n                        \"paddingRight\": \"2px\",\n                        \"paddingTop\": \"2px\",\n                      }\n                    }\n                  >\n                    <div\n                      className=\"css-view-1dbjc4n\"\n                      style={\n                        Object {\n                          \"color\": \"rgba(250,250,250,1.00)\",\n                          \"height\": \"12px\",\n                          \"width\": \"12px\",\n                        }\n                      }\n                    />\n                  </div>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(0,0,0,1.00)\",\n                      \"fontSize\": \"16px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"marginLeft\": \"8px\",\n                    }\n                  }\n                >\n                  Fax\n                </div>\n              </div>\n            </label>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            id=\"field-69\"\n            style={\n              Object {\n                \"marginTop\": \"8px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"flex-start\",\n                  \"WebkitBoxAlign\": \"start\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"flex-start\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"start\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <svg\n                role=\"img\"\n                stroke=\"\"\n                style={\n                  Object {\n                    \"color\": \"rgba(220,38,38,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"height\": \"12px\",\n                    \"marginTop\": \"4px\",\n                    \"width\": \"12px\",\n                  }\n                }\n                viewBox=\"0 0 16 16\"\n              >\n                <g>\n                  <path\n                    d=\"M8 16C6.41775 16 4.87103 15.5308 3.55544 14.6518C2.23985 13.7727 1.21447 12.5233 0.608967 11.0615C0.00346627 9.59966 -0.15496 7.99113 0.153721 6.43928C0.462403 4.88743 1.22433 3.46197 2.34315 2.34315C3.46197 1.22433 4.88743 0.462403 6.43928 0.153721C7.99113 -0.15496 9.59966 0.00346627 11.0615 0.608967C12.5233 1.21447 13.7727 2.23985 14.6518 3.55544C15.5308 4.87103 16 6.41775 16 8C16 10.1217 15.1571 12.1566 13.6569 13.6569C12.1566 15.1571 10.1217 16 8 16ZM8 14.4C9.2658 14.4 10.5032 14.0246 11.5556 13.3214C12.6081 12.6182 13.4284 11.6186 13.9128 10.4492C14.3972 9.27973 14.524 7.9929 14.277 6.75142C14.0301 5.50995 13.4205 4.36958 12.5255 3.47452C11.6304 2.57946 10.4901 1.96992 9.24858 1.72298C8.0071 1.47603 6.72028 1.60277 5.55083 2.08717C4.38138 2.57158 3.38184 3.39188 2.6786 4.44435C1.97536 5.49683 1.6 6.7342 1.6 8C1.6 9.69739 2.27429 11.3253 3.47452 12.5255C4.67475 13.7257 6.30262 14.4 8 14.4ZM7.2 10.4H8.8V12H7.2V10.4ZM7.2 4H8.8V8.8H7.2V4Z\"\n                    fill=\"currentColor\"\n                    stroke=\"\"\n                  />\n                </g>\n              </svg>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"4px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(220,38,38,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                You must select at least three methods\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Checkbox Invalid 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <label\n      className=\"css-view-1dbjc4n\"\n    >\n      <div\n        style={\n          Object {\n            \"border\": 0,\n            \"clip\": \"rect(0 0 0 0)\",\n            \"clipPath\": \"inset(50%)\",\n            \"height\": 1,\n            \"margin\": \"0 -1px -1px 0\",\n            \"overflow\": \"hidden\",\n            \"padding\": 0,\n            \"position\": \"absolute\",\n            \"whiteSpace\": \"nowrap\",\n            \"width\": 1,\n          }\n        }\n      >\n        <input\n          aria-checked={false}\n          checked={false}\n          disabled={false}\n          onBlur={[Function]}\n          onChange={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onKeyUp={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          onMouseUp={[Function]}\n          onTouchCancel={[Function]}\n          onTouchEnd={[Function]}\n          onTouchMove={[Function]}\n          onTouchStart={[Function]}\n          type=\"checkbox\"\n          value=\"invalid\"\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"start\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"flex-start\",\n            \"alignItems\": \"center\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"flex-start\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"start\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                \"borderBottomColor\": \"rgba(220,38,38,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderBottomWidth\": \"2px\",\n                \"borderLeftColor\": \"rgba(220,38,38,1.00)\",\n                \"borderLeftWidth\": \"2px\",\n                \"borderRightColor\": \"rgba(220,38,38,1.00)\",\n                \"borderRightWidth\": \"2px\",\n                \"borderTopColor\": \"rgba(220,38,38,1.00)\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"borderTopWidth\": \"2px\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"opacity\": 1,\n                \"paddingBottom\": \"2px\",\n                \"paddingLeft\": \"2px\",\n                \"paddingRight\": \"2px\",\n                \"paddingTop\": \"2px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"height\": \"12px\",\n                  \"width\": \"12px\",\n                }\n              }\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"width\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(0,0,0,1.00)\",\n              \"fontSize\": \"16px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n              \"marginLeft\": \"8px\",\n            }\n          }\n        >\n          Software Development\n        </div>\n      </div>\n    </label>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Checkbox Playground 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"justify\",\n          \"WebkitJustifyContent\": \"space-between\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"space-between\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"justify\",\n        }\n      }\n    >\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          style={\n            Object {\n              \"border\": 0,\n              \"clip\": \"rect(0 0 0 0)\",\n              \"clipPath\": \"inset(50%)\",\n              \"height\": 1,\n              \"margin\": \"0 -1px -1px 0\",\n              \"overflow\": \"hidden\",\n              \"padding\": 0,\n              \"position\": \"absolute\",\n              \"whiteSpace\": \"nowrap\",\n              \"width\": 1,\n            }\n          }\n        >\n          <input\n            aria-checked={true}\n            checked={true}\n            disabled={false}\n            onBlur={[Function]}\n            onChange={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onKeyUp={[Function]}\n            onMouseDown={[Function]}\n            onMouseEnter={[Function]}\n            onMouseLeave={[Function]}\n            onMouseUp={[Function]}\n            onTouchCancel={[Function]}\n            onTouchEnd={[Function]}\n            onTouchMove={[Function]}\n            onTouchStart={[Function]}\n            type=\"checkbox\"\n            value=\"Cool\"\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"start\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"flex-start\",\n              \"alignItems\": \"center\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"start\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderBottomColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"2px\",\n                  \"borderLeftColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderLeftWidth\": \"2px\",\n                  \"borderRightColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderRightWidth\": \"2px\",\n                  \"borderTopColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"2px\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"opacity\": 1,\n                  \"paddingBottom\": \"2px\",\n                  \"paddingLeft\": \"2px\",\n                  \"paddingRight\": \"2px\",\n                  \"paddingTop\": \"2px\",\n                }\n              }\n            >\n              <svg\n                role=\"img\"\n                stroke=\"\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"height\": \"16px\",\n                    \"width\": \"16px\",\n                  }\n                }\n                viewBox=\"0 0 24 24\"\n              >\n                <g>\n                  <path\n                    d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                    fill=\"currentColor\"\n                    stroke=\"\"\n                  />\n                </g>\n              </svg>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(0,0,0,1.00)\",\n                \"fontSize\": \"18px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginLeft\": \"8px\",\n              }\n            }\n          >\n            Yes\n          </div>\n        </div>\n      </label>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Checkbox Size 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n      >\n        <label\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              aria-checked={true}\n              checked={true}\n              disabled={false}\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              type=\"checkbox\"\n              value=\"red\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"start\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"flex-start\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"start\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderBottomColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": \"2px\",\n                    \"paddingLeft\": \"2px\",\n                    \"paddingRight\": \"2px\",\n                    \"paddingTop\": \"2px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"height\": \"12px\",\n                      \"width\": \"12px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(0,0,0,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginLeft\": \"8px\",\n                }\n              }\n            >\n              UX Research\n            </div>\n          </div>\n        </label>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"12px\",\n            }\n          }\n        />\n        <label\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              aria-checked={true}\n              checked={true}\n              disabled={false}\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              type=\"checkbox\"\n              value=\"green\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"start\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"flex-start\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"start\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderBottomColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": \"2px\",\n                    \"paddingLeft\": \"2px\",\n                    \"paddingRight\": \"2px\",\n                    \"paddingTop\": \"2px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"height\": \"16px\",\n                      \"width\": \"16px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(0,0,0,1.00)\",\n                  \"fontSize\": \"18px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginLeft\": \"8px\",\n                }\n              }\n            >\n              UX Research\n            </div>\n          </div>\n        </label>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"12px\",\n            }\n          }\n        />\n        <label\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              aria-checked={true}\n              checked={true}\n              disabled={false}\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              type=\"checkbox\"\n              value=\"yellow\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"start\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"flex-start\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"start\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderBottomColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": \"2px\",\n                    \"paddingLeft\": \"2px\",\n                    \"paddingRight\": \"2px\",\n                    \"paddingTop\": \"2px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"height\": \"20px\",\n                      \"width\": \"20px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(0,0,0,1.00)\",\n                  \"fontSize\": \"20px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginLeft\": \"8px\",\n                }\n              }\n            >\n              UX Research\n            </div>\n          </div>\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Checkbox Uncontrolled checkbox 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      aria-label=\"choose values\"\n      className=\"css-view-1dbjc4n\"\n      id=\"react-aria-0-1\"\n      role=\"group\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"flex-start\",\n          \"WebkitBoxAlign\": \"start\",\n          \"alignItems\": \"flex-start\",\n          \"msFlexAlign\": \"start\",\n        }\n      }\n    >\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          style={\n            Object {\n              \"border\": 0,\n              \"clip\": \"rect(0 0 0 0)\",\n              \"clipPath\": \"inset(50%)\",\n              \"height\": 1,\n              \"margin\": \"0 -1px -1px 0\",\n              \"overflow\": \"hidden\",\n              \"padding\": 0,\n              \"position\": \"absolute\",\n              \"whiteSpace\": \"nowrap\",\n              \"width\": 1,\n            }\n          }\n        >\n          <input\n            aria-checked={false}\n            checked={false}\n            disabled={false}\n            onBlur={[Function]}\n            onChange={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onKeyUp={[Function]}\n            onMouseDown={[Function]}\n            onMouseEnter={[Function]}\n            onMouseLeave={[Function]}\n            onMouseUp={[Function]}\n            onTouchCancel={[Function]}\n            onTouchEnd={[Function]}\n            onTouchMove={[Function]}\n            onTouchStart={[Function]}\n            readOnly={false}\n            type=\"checkbox\"\n            value=\"one\"\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"start\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"flex-start\",\n              \"alignItems\": \"center\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"marginBottom\": \"8px\",\n              \"marginTop\": \"8px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"start\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                  \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"2px\",\n                  \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderLeftWidth\": \"2px\",\n                  \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderRightWidth\": \"2px\",\n                  \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"2px\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"opacity\": 1,\n                  \"paddingBottom\": \"2px\",\n                  \"paddingLeft\": \"2px\",\n                  \"paddingRight\": \"2px\",\n                  \"paddingTop\": \"2px\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"height\": \"12px\",\n                    \"width\": \"12px\",\n                  }\n                }\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(0,0,0,1.00)\",\n                \"fontSize\": \"16px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginLeft\": \"8px\",\n              }\n            }\n          >\n            UX Research\n          </div>\n        </div>\n      </label>\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          style={\n            Object {\n              \"border\": 0,\n              \"clip\": \"rect(0 0 0 0)\",\n              \"clipPath\": \"inset(50%)\",\n              \"height\": 1,\n              \"margin\": \"0 -1px -1px 0\",\n              \"overflow\": \"hidden\",\n              \"padding\": 0,\n              \"position\": \"absolute\",\n              \"whiteSpace\": \"nowrap\",\n              \"width\": 1,\n            }\n          }\n        >\n          <input\n            aria-checked={false}\n            checked={false}\n            disabled={false}\n            onBlur={[Function]}\n            onChange={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onKeyUp={[Function]}\n            onMouseDown={[Function]}\n            onMouseEnter={[Function]}\n            onMouseLeave={[Function]}\n            onMouseUp={[Function]}\n            onTouchCancel={[Function]}\n            onTouchEnd={[Function]}\n            onTouchMove={[Function]}\n            onTouchStart={[Function]}\n            readOnly={false}\n            type=\"checkbox\"\n            value=\"two\"\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"start\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"flex-start\",\n              \"alignItems\": \"center\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"start\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                  \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"2px\",\n                  \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderLeftWidth\": \"2px\",\n                  \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderRightWidth\": \"2px\",\n                  \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"2px\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"opacity\": 1,\n                  \"paddingBottom\": \"2px\",\n                  \"paddingLeft\": \"2px\",\n                  \"paddingRight\": \"2px\",\n                  \"paddingTop\": \"2px\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"height\": \"12px\",\n                    \"width\": \"12px\",\n                  }\n                }\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(0,0,0,1.00)\",\n                \"fontSize\": \"16px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginLeft\": \"8px\",\n              }\n            }\n          >\n            Software Development\n          </div>\n        </div>\n      </label>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Checkbox With Ref 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"flex-start\",\n          \"WebkitBoxAlign\": \"start\",\n          \"alignItems\": \"flex-start\",\n          \"msFlexAlign\": \"start\",\n        }\n      }\n    >\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          style={\n            Object {\n              \"border\": 0,\n              \"clip\": \"rect(0 0 0 0)\",\n              \"clipPath\": \"inset(50%)\",\n              \"height\": 1,\n              \"margin\": \"0 -1px -1px 0\",\n              \"overflow\": \"hidden\",\n              \"padding\": 0,\n              \"position\": \"absolute\",\n              \"whiteSpace\": \"nowrap\",\n              \"width\": 1,\n            }\n          }\n        >\n          <input\n            aria-checked={false}\n            checked={false}\n            disabled={false}\n            onBlur={[Function]}\n            onChange={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onKeyUp={[Function]}\n            onMouseDown={[Function]}\n            onMouseEnter={[Function]}\n            onMouseLeave={[Function]}\n            onMouseUp={[Function]}\n            onTouchCancel={[Function]}\n            onTouchEnd={[Function]}\n            onTouchMove={[Function]}\n            onTouchStart={[Function]}\n            type=\"checkbox\"\n            value=\"success\"\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"start\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"flex-start\",\n              \"alignItems\": \"center\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"start\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                  \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"2px\",\n                  \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderLeftWidth\": \"2px\",\n                  \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderRightWidth\": \"2px\",\n                  \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"2px\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"opacity\": 1,\n                  \"paddingBottom\": \"2px\",\n                  \"paddingLeft\": \"2px\",\n                  \"paddingRight\": \"2px\",\n                  \"paddingTop\": \"2px\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"height\": \"12px\",\n                    \"width\": \"12px\",\n                  }\n                }\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(0,0,0,1.00)\",\n                \"fontSize\": \"16px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginLeft\": \"8px\",\n              }\n            }\n          >\n            Archery\n          </div>\n        </div>\n      </label>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Column Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"backgroundColor\": \"rgba(34,197,94,1.00)\",\n            \"height\": \"100px\",\n            \"width\": \"100px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"backgroundColor\": \"rgba(147,197,253,1.00)\",\n            \"height\": \"100px\",\n            \"width\": \"100px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"backgroundColor\": \"rgba(255,99,71,1.00)\",\n            \"height\": \"100px\",\n            \"width\": \"100px\",\n          }\n        }\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Container Playground 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"maxWidth\": \"80%\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"24px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n          }\n        }\n      >\n        Benefits to a joint design and development system\n      </div>\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        There are many benefits to a joint design and development system. Not only does it bring benefits to the design team, but it also brings benefits to engineering teams. It makes sure that our experiences have a consistent look and feel, not just in our design specs, but in production\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Container Usage 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"flex-start\",\n            \"WebkitBoxAlign\": \"start\",\n            \"alignItems\": \"flex-start\",\n            \"maxWidth\": \"80%\",\n            \"msFlexAlign\": \"start\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"24px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.25em\",\n            }\n          }\n        >\n          A component library for the\n          <span\n            className=\"css-text-901oao css-textHasAncestor-16my406\"\n            style={\n              Object {\n                \"color\": \"rgba(16,185,129,1.00)\",\n              }\n            }\n          >\n             React Ecosystem\n          </span>\n        </div>\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"500\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n              \"marginTop\": \"12px\",\n            }\n          }\n        >\n          NativeBase is a simple, modular and accessible component library that gives you building blocks to build you React applications.\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Custom Theme Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n      }\n    }\n  >\n    <div\n      className=\"css-text-901oao\"\n      dir=\"auto\"\n      style={\n        Object {\n          \"color\": \"rgba(255,119,204,1.00)\",\n          \"fontSize\": \"24px\",\n          \"fontStyle\": \"normal\",\n          \"fontWeight\": \"700\",\n          \"letterSpacing\": \"0px\",\n          \"lineHeight\": \"1.25em\",\n        }\n      }\n    >\n       I'm a Heading\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n    />\n    <div\n      className=\"css-text-901oao\"\n      dir=\"auto\"\n      style={\n        Object {\n          \"color\": \"rgba(17,170,204,1.00)\",\n          \"fontSize\": \"24px\",\n          \"fontStyle\": \"normal\",\n          \"fontWeight\": \"700\",\n          \"letterSpacing\": \"0px\",\n          \"lineHeight\": \"1.25em\",\n        }\n      }\n    >\n       I'm a Heading\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Custom Theme CustomizingBase 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"display\": \"flex\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n      }\n    }\n  >\n    <div\n      className=\"css-text-901oao\"\n      dir=\"auto\"\n      style={\n        Object {\n          \"color\": \"rgba(52,211,153,1.00)\",\n          \"fontSize\": \"32px\",\n          \"fontStyle\": \"normal\",\n          \"fontWeight\": \"400\",\n          \"letterSpacing\": \"0px\",\n          \"lineHeight\": \"1.5em\",\n        }\n      }\n    >\n      NativeBase\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Custom Theme CustomizingComponents 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(31,41,55,1.00)\",\n        \"display\": \"flex\",\n        \"height\": \"100%\",\n        \"justifyContent\": \"center\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n      }\n    }\n  >\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitFlex\": 1,\n          \"flex\": 1,\n          \"msFlex\": \"1 1 0%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlex\": 1,\n            \"WebkitJustifyContent\": \"center\",\n            \"flex\": 1,\n            \"justifyContent\": \"center\",\n            \"marginBottom\": \"16px\",\n            \"marginTop\": \"16px\",\n            \"msFlex\": \"1 1 0%\",\n            \"msFlexPack\": \"center\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"color\": \"rgba(250,250,249,1.00)\",\n              \"fontSize\": \"24px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"justifyContent\": \"center\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.25em\",\n              \"marginBottom\": \"4px\",\n              \"msFlexPack\": \"center\",\n            }\n          }\n        >\n          Inbox\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"borderBottomColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"6px\",\n              \"borderBottomRightRadius\": \"6px\",\n              \"borderLeftColor\": \"rgba(250,250,250,1.00)\",\n              \"borderRightColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopLeftRadius\": \"6px\",\n              \"borderTopRightRadius\": \"6px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"justify\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"space-between\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"space-between\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"justify\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n                    \"borderBottomColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderBottomLeftRadius\": \"6px\",\n                    \"borderBottomRightRadius\": \"6px\",\n                    \"borderLeftColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderRightColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderTopColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderTopLeftRadius\": \"6px\",\n                    \"borderTopRightRadius\": \"6px\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"marginRight\": \"16px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"position\": \"relative\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  aria-label=\"--\"\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitFlexBasis\": \"auto\",\n                      \"borderBottomLeftRadius\": \"9999px\",\n                      \"borderBottomRightRadius\": \"9999px\",\n                      \"borderTopLeftRadius\": \"9999px\",\n                      \"borderTopRightRadius\": \"9999px\",\n                      \"flexBasis\": \"auto\",\n                      \"height\": \"100%\",\n                      \"maxWidth\": \"100%\",\n                      \"msFlexPreferredSize\": \"auto\",\n                      \"overflowX\": \"hidden\",\n                      \"overflowY\": \"hidden\",\n                      \"width\": \"100%\",\n                      \"zIndex\": 0,\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                        \"backgroundPosition\": \"center\",\n                        \"backgroundRepeat\": \"no-repeat\",\n                        \"backgroundSize\": \"cover\",\n                        \"bottom\": \"0px\",\n                        \"height\": \"100%\",\n                        \"left\": \"0px\",\n                        \"position\": \"absolute\",\n                        \"right\": \"0px\",\n                        \"top\": \"0px\",\n                        \"width\": \"100%\",\n                        \"zIndex\": -1,\n                      }\n                    }\n                    suppressHydrationWarning={true}\n                  />\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontSize\": \"20px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"500\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.25em\",\n                    }\n                  }\n                >\n                  Ankur\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(231,229,228,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Software Engineer\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"borderBottomColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"6px\",\n              \"borderBottomRightRadius\": \"6px\",\n              \"borderLeftColor\": \"rgba(250,250,250,1.00)\",\n              \"borderRightColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopLeftRadius\": \"6px\",\n              \"borderTopRightRadius\": \"6px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"justify\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"space-between\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"space-between\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"justify\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n                    \"borderBottomColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderBottomLeftRadius\": \"6px\",\n                    \"borderBottomRightRadius\": \"6px\",\n                    \"borderLeftColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderRightColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderTopColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderTopLeftRadius\": \"6px\",\n                    \"borderTopRightRadius\": \"6px\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"marginRight\": \"16px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"position\": \"relative\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  aria-label=\"--\"\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitFlexBasis\": \"auto\",\n                      \"borderBottomLeftRadius\": \"9999px\",\n                      \"borderBottomRightRadius\": \"9999px\",\n                      \"borderTopLeftRadius\": \"9999px\",\n                      \"borderTopRightRadius\": \"9999px\",\n                      \"flexBasis\": \"auto\",\n                      \"height\": \"100%\",\n                      \"maxWidth\": \"100%\",\n                      \"msFlexPreferredSize\": \"auto\",\n                      \"overflowX\": \"hidden\",\n                      \"overflowY\": \"hidden\",\n                      \"width\": \"100%\",\n                      \"zIndex\": 0,\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                        \"backgroundPosition\": \"center\",\n                        \"backgroundRepeat\": \"no-repeat\",\n                        \"backgroundSize\": \"cover\",\n                        \"bottom\": \"0px\",\n                        \"height\": \"100%\",\n                        \"left\": \"0px\",\n                        \"position\": \"absolute\",\n                        \"right\": \"0px\",\n                        \"top\": \"0px\",\n                        \"width\": \"100%\",\n                        \"zIndex\": -1,\n                      }\n                    }\n                    suppressHydrationWarning={true}\n                  />\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontSize\": \"20px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"500\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.25em\",\n                    }\n                  }\n                >\n                  Rehman\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(231,229,228,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Software Engineer\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"borderBottomColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"6px\",\n              \"borderBottomRightRadius\": \"6px\",\n              \"borderLeftColor\": \"rgba(250,250,250,1.00)\",\n              \"borderRightColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopLeftRadius\": \"6px\",\n              \"borderTopRightRadius\": \"6px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"justify\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"space-between\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"space-between\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"justify\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n                    \"borderBottomColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderBottomLeftRadius\": \"6px\",\n                    \"borderBottomRightRadius\": \"6px\",\n                    \"borderLeftColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderRightColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderTopColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderTopLeftRadius\": \"6px\",\n                    \"borderTopRightRadius\": \"6px\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"marginRight\": \"16px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"position\": \"relative\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  aria-label=\"--\"\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitFlexBasis\": \"auto\",\n                      \"borderBottomLeftRadius\": \"9999px\",\n                      \"borderBottomRightRadius\": \"9999px\",\n                      \"borderTopLeftRadius\": \"9999px\",\n                      \"borderTopRightRadius\": \"9999px\",\n                      \"flexBasis\": \"auto\",\n                      \"height\": \"100%\",\n                      \"maxWidth\": \"100%\",\n                      \"msFlexPreferredSize\": \"auto\",\n                      \"overflowX\": \"hidden\",\n                      \"overflowY\": \"hidden\",\n                      \"width\": \"100%\",\n                      \"zIndex\": 0,\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                        \"backgroundPosition\": \"center\",\n                        \"backgroundRepeat\": \"no-repeat\",\n                        \"backgroundSize\": \"cover\",\n                        \"bottom\": \"0px\",\n                        \"height\": \"100%\",\n                        \"left\": \"0px\",\n                        \"position\": \"absolute\",\n                        \"right\": \"0px\",\n                        \"top\": \"0px\",\n                        \"width\": \"100%\",\n                        \"zIndex\": -1,\n                      }\n                    }\n                    suppressHydrationWarning={true}\n                  />\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontSize\": \"20px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"500\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.25em\",\n                    }\n                  }\n                >\n                  Rohit\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(231,229,228,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Software Engineer\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n            }\n          }\n        >\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginTop\": \"16px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Change mode\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Custom Theme CustomizingTheme 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(31,41,55,1.00)\",\n        \"display\": \"flex\",\n        \"height\": \"100%\",\n        \"justifyContent\": \"center\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n      }\n    }\n  >\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitFlex\": 1,\n          \"flex\": 1,\n          \"msFlex\": \"1 1 0%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlex\": 1,\n            \"WebkitJustifyContent\": \"center\",\n            \"flex\": 1,\n            \"justifyContent\": \"center\",\n            \"marginBottom\": \"16px\",\n            \"marginTop\": \"16px\",\n            \"msFlex\": \"1 1 0%\",\n            \"msFlexPack\": \"center\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"color\": \"rgba(250,250,249,1.00)\",\n              \"fontFamily\": \"monospace,monospace\",\n              \"fontSize\": \"24px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"justifyContent\": \"center\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.25em\",\n              \"marginBottom\": \"4px\",\n              \"msFlexPack\": \"center\",\n            }\n          }\n        >\n          Inbox\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"borderBottomColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"6px\",\n              \"borderBottomRightRadius\": \"6px\",\n              \"borderLeftColor\": \"rgba(250,250,250,1.00)\",\n              \"borderRightColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopLeftRadius\": \"6px\",\n              \"borderTopRightRadius\": \"6px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"justify\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"space-between\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"space-between\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"justify\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n                    \"borderBottomColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderLeftColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderRightColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderTopColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"marginRight\": \"16px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"position\": \"relative\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  aria-label=\"--\"\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitFlexBasis\": \"auto\",\n                      \"borderBottomLeftRadius\": \"9999px\",\n                      \"borderBottomRightRadius\": \"9999px\",\n                      \"borderTopLeftRadius\": \"9999px\",\n                      \"borderTopRightRadius\": \"9999px\",\n                      \"flexBasis\": \"auto\",\n                      \"height\": \"100%\",\n                      \"maxWidth\": \"100%\",\n                      \"msFlexPreferredSize\": \"auto\",\n                      \"overflowX\": \"hidden\",\n                      \"overflowY\": \"hidden\",\n                      \"width\": \"100%\",\n                      \"zIndex\": 0,\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                        \"backgroundPosition\": \"center\",\n                        \"backgroundRepeat\": \"no-repeat\",\n                        \"backgroundSize\": \"cover\",\n                        \"bottom\": \"0px\",\n                        \"height\": \"100%\",\n                        \"left\": \"0px\",\n                        \"position\": \"absolute\",\n                        \"right\": \"0px\",\n                        \"top\": \"0px\",\n                        \"width\": \"100%\",\n                        \"zIndex\": -1,\n                      }\n                    }\n                    suppressHydrationWarning={true}\n                  />\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontFamily\": \"monospace,monospace\",\n                      \"fontSize\": \"20px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"500\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.25em\",\n                    }\n                  }\n                >\n                  Ankur\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(231,229,228,1.00)\",\n                      \"fontFamily\": \"monospace,monospace\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Software Engineer\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"borderBottomColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"6px\",\n              \"borderBottomRightRadius\": \"6px\",\n              \"borderLeftColor\": \"rgba(250,250,250,1.00)\",\n              \"borderRightColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopLeftRadius\": \"6px\",\n              \"borderTopRightRadius\": \"6px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"justify\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"space-between\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"space-between\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"justify\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n                    \"borderBottomColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderLeftColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderRightColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderTopColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"marginRight\": \"16px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"position\": \"relative\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  aria-label=\"--\"\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitFlexBasis\": \"auto\",\n                      \"borderBottomLeftRadius\": \"9999px\",\n                      \"borderBottomRightRadius\": \"9999px\",\n                      \"borderTopLeftRadius\": \"9999px\",\n                      \"borderTopRightRadius\": \"9999px\",\n                      \"flexBasis\": \"auto\",\n                      \"height\": \"100%\",\n                      \"maxWidth\": \"100%\",\n                      \"msFlexPreferredSize\": \"auto\",\n                      \"overflowX\": \"hidden\",\n                      \"overflowY\": \"hidden\",\n                      \"width\": \"100%\",\n                      \"zIndex\": 0,\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                        \"backgroundPosition\": \"center\",\n                        \"backgroundRepeat\": \"no-repeat\",\n                        \"backgroundSize\": \"cover\",\n                        \"bottom\": \"0px\",\n                        \"height\": \"100%\",\n                        \"left\": \"0px\",\n                        \"position\": \"absolute\",\n                        \"right\": \"0px\",\n                        \"top\": \"0px\",\n                        \"width\": \"100%\",\n                        \"zIndex\": -1,\n                      }\n                    }\n                    suppressHydrationWarning={true}\n                  />\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontFamily\": \"monospace,monospace\",\n                      \"fontSize\": \"20px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"500\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.25em\",\n                    }\n                  }\n                >\n                  Rehman\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(231,229,228,1.00)\",\n                      \"fontFamily\": \"monospace,monospace\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Software Engineer\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"borderBottomColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"6px\",\n              \"borderBottomRightRadius\": \"6px\",\n              \"borderLeftColor\": \"rgba(250,250,250,1.00)\",\n              \"borderRightColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopLeftRadius\": \"6px\",\n              \"borderTopRightRadius\": \"6px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"justify\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"space-between\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"space-between\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"justify\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n                    \"borderBottomColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderLeftColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderRightColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderTopColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"marginRight\": \"16px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"position\": \"relative\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  aria-label=\"--\"\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitFlexBasis\": \"auto\",\n                      \"borderBottomLeftRadius\": \"9999px\",\n                      \"borderBottomRightRadius\": \"9999px\",\n                      \"borderTopLeftRadius\": \"9999px\",\n                      \"borderTopRightRadius\": \"9999px\",\n                      \"flexBasis\": \"auto\",\n                      \"height\": \"100%\",\n                      \"maxWidth\": \"100%\",\n                      \"msFlexPreferredSize\": \"auto\",\n                      \"overflowX\": \"hidden\",\n                      \"overflowY\": \"hidden\",\n                      \"width\": \"100%\",\n                      \"zIndex\": 0,\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                        \"backgroundPosition\": \"center\",\n                        \"backgroundRepeat\": \"no-repeat\",\n                        \"backgroundSize\": \"cover\",\n                        \"bottom\": \"0px\",\n                        \"height\": \"100%\",\n                        \"left\": \"0px\",\n                        \"position\": \"absolute\",\n                        \"right\": \"0px\",\n                        \"top\": \"0px\",\n                        \"width\": \"100%\",\n                        \"zIndex\": -1,\n                      }\n                    }\n                    suppressHydrationWarning={true}\n                  />\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontFamily\": \"monospace,monospace\",\n                      \"fontSize\": \"20px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"500\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.25em\",\n                    }\n                  }\n                >\n                  Rohit\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(231,229,228,1.00)\",\n                      \"fontFamily\": \"monospace,monospace\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Software Engineer\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n            }\n          }\n        >\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginTop\": \"16px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontFamily\": \"monospace,monospace\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Change mode\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Custom Theme CustomizingVariant 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"display\": \"flex\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n      }\n    }\n  >\n    <div\n      className=\"css-view-1dbjc4n\"\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(5,150,105,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Default Button\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(16,185,129,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Rounded Button\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Divider Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"140px\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"flexDirection\": \"row\",\n              \"fontSize\": \"24px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.25em\",\n              \"marginLeft\": \"12px\",\n              \"marginRight\": \"12px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          Chrome\n        </div>\n        <div\n          aria-orientation=\"horizontal\"\n          className=\"css-view-1dbjc4n\"\n          role=\"separator\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(38,38,38,1.00)\",\n              \"height\": \"1px\",\n              \"marginBottom\": \"8px\",\n              \"marginTop\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n        />\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"flexDirection\": \"row\",\n              \"fontSize\": \"24px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.25em\",\n              \"marginLeft\": \"12px\",\n              \"marginRight\": \"12px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          Firefox\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Divider Composition 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"display\": \"flex\",\n            \"flexDirection\": \"row\",\n            \"height\": \"58px\",\n            \"msFlexDirection\": \"row\",\n            \"paddingBottom\": \"16px\",\n            \"paddingLeft\": \"16px\",\n            \"paddingRight\": \"16px\",\n            \"paddingTop\": \"16px\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          Simple\n        </div>\n        <div\n          aria-orientation=\"vertical\"\n          className=\"css-view-1dbjc4n\"\n          role=\"separator\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(16,185,129,1.00)\",\n              \"height\": \"100%\",\n              \"marginLeft\": \"8px\",\n              \"marginRight\": \"8px\",\n              \"width\": \"2px\",\n            }\n          }\n        />\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          Easy\n        </div>\n        <div\n          aria-orientation=\"vertical\"\n          className=\"css-view-1dbjc4n\"\n          role=\"separator\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(99,102,241,1.00)\",\n              \"height\": \"100%\",\n              \"marginLeft\": \"8px\",\n              \"marginRight\": \"8px\",\n              \"width\": \"2px\",\n            }\n          }\n        />\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          Beautiful\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Divider Orientation 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"160px\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"24px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.25em\",\n              \"marginLeft\": \"auto\",\n              \"marginRight\": \"auto\",\n            }\n          }\n        >\n          Shoes\n        </div>\n        <div\n          aria-orientation=\"horizontal\"\n          className=\"css-view-1dbjc4n\"\n          role=\"separator\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(38,38,38,1.00)\",\n              \"height\": \"1px\",\n              \"marginBottom\": \"8px\",\n              \"marginTop\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"space-evenly\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"space-evenly\",\n              \"display\": \"flex\",\n              \"flexDirection\": \"row\",\n              \"height\": \"60px\",\n              \"justifyContent\": \"space-evenly\",\n              \"marginLeft\": \"12px\",\n              \"marginRight\": \"12px\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"space-evenly\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"24px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n                \"paddingBottom\": \"8px\",\n                \"paddingTop\": \"8px\",\n              }\n            }\n          >\n            Girls\n          </div>\n          <div\n            aria-orientation=\"vertical\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(38,38,38,1.00)\",\n                \"height\": \"100%\",\n                \"marginLeft\": \"12px\",\n                \"marginRight\": \"12px\",\n                \"width\": \"1px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"24px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n                \"paddingBottom\": \"8px\",\n                \"paddingTop\": \"8px\",\n              }\n            }\n          >\n            Boys\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Examples Signin Screen 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"maxWidth\": \"290px\",\n            \"paddingBottom\": \"32px\",\n            \"paddingLeft\": \"8px\",\n            \"paddingRight\": \"8px\",\n            \"paddingTop\": \"32px\",\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(31,41,55,1.00)\",\n              \"fontSize\": \"24px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"600\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.25em\",\n            }\n          }\n        >\n          Welcome\n        </div>\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(75,85,99,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"500\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.25em\",\n              \"marginTop\": \"4px\",\n            }\n          }\n        >\n          Sign in to continue!\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"marginTop\": \"20px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <label\n              className=\"css-view-1dbjc4n\"\n              id=\"field-265-label\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"start\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"flex-start\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"flex-start\",\n                  \"marginBottom\": \"4px\",\n                  \"marginTop\": \"4px\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"start\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(115,115,115,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Email ID\n              </div>\n            </label>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"overflowX\": \"auto\",\n                  \"overflowY\": \"auto\",\n                }\n              }\n            >\n              <input\n                autoCapitalize=\"sentences\"\n                autoComplete=\"on\"\n                autoCorrect=\"on\"\n                className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n                dir=\"auto\"\n                disabled={false}\n                id=\"field-265-input\"\n                onBlur={[Function]}\n                onChange={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onSelect={[Function]}\n                readOnly={false}\n                spellCheck={true}\n                style={\n                  Object {\n                    \"WebkitFlex\": 1,\n                    \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"cursor\": \"auto\",\n                    \"flex\": 1,\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"lineHeight\": \"1.5em\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"outline\": \"none\",\n                    \"outlineWidth\": \"0px\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"12px\",\n                    \"paddingRight\": \"12px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"100%\",\n                  }\n                }\n                type=\"text\"\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <label\n              className=\"css-view-1dbjc4n\"\n              id=\"field-266-label\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"start\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"flex-start\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"flex-start\",\n                  \"marginBottom\": \"4px\",\n                  \"marginTop\": \"4px\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"start\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(115,115,115,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Password\n              </div>\n            </label>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"overflowX\": \"auto\",\n                  \"overflowY\": \"auto\",\n                }\n              }\n            >\n              <input\n                autoCapitalize=\"sentences\"\n                autoComplete=\"on\"\n                autoCorrect=\"on\"\n                className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n                dir=\"auto\"\n                disabled={false}\n                id=\"field-266-input\"\n                onBlur={[Function]}\n                onChange={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onSelect={[Function]}\n                readOnly={false}\n                spellCheck={true}\n                style={\n                  Object {\n                    \"WebkitFlex\": 1,\n                    \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"cursor\": \"auto\",\n                    \"flex\": 1,\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"lineHeight\": \"1.5em\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"outline\": \"none\",\n                    \"outlineWidth\": \"0px\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"12px\",\n                    \"paddingRight\": \"12px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"100%\",\n                  }\n                }\n                type=\"password\"\n              />\n            </div>\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              role=\"link\"\n              style={\n                Object {\n                  \"WebkitAlignSelf\": \"flex-end\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignSelf\": \"flex-end\",\n                  \"flexDirection\": \"row\",\n                  \"height\": \"auto\",\n                  \"marginTop\": \"4px\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexItemAlign\": \"end\",\n                  \"width\": \"auto\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(99,102,241,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                    \"textDecoration\": \"underline\",\n                  }\n                }\n              >\n                Forget Password?\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(79,70,229,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginTop\": \"8px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Sign in\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginTop\": \"24px\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(75,85,99,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              I'm a new user.\n               \n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <a\n              className=\"css-reset-4rbku5 css-cursor-18t94o4 css-view-1dbjc4n\"\n              href=\"#\"\n              role=\"link\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"flexDirection\": \"row\",\n                  \"height\": \"auto\",\n                  \"msFlexDirection\": \"row\",\n                  \"width\": \"auto\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(99,102,241,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                    \"textDecoration\": \"underline\",\n                  }\n                }\n              >\n                Sign Up\n              </div>\n            </a>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Examples Signup Screen 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"maxWidth\": \"290px\",\n            \"paddingBottom\": \"32px\",\n            \"paddingLeft\": \"8px\",\n            \"paddingRight\": \"8px\",\n            \"paddingTop\": \"32px\",\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(31,41,55,1.00)\",\n              \"fontSize\": \"24px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"600\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.25em\",\n            }\n          }\n        >\n          Welcome\n        </div>\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(75,85,99,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"500\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.25em\",\n              \"marginTop\": \"4px\",\n            }\n          }\n        >\n          Sign up to continue!\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"marginTop\": \"20px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <label\n              className=\"css-view-1dbjc4n\"\n              id=\"field-268-label\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"start\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"flex-start\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"flex-start\",\n                  \"marginBottom\": \"4px\",\n                  \"marginTop\": \"4px\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"start\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(115,115,115,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Email\n              </div>\n            </label>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"overflowX\": \"auto\",\n                  \"overflowY\": \"auto\",\n                }\n              }\n            >\n              <input\n                autoCapitalize=\"sentences\"\n                autoComplete=\"on\"\n                autoCorrect=\"on\"\n                className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n                dir=\"auto\"\n                disabled={false}\n                id=\"field-268-input\"\n                onBlur={[Function]}\n                onChange={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onSelect={[Function]}\n                readOnly={false}\n                spellCheck={true}\n                style={\n                  Object {\n                    \"WebkitFlex\": 1,\n                    \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"cursor\": \"auto\",\n                    \"flex\": 1,\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"lineHeight\": \"1.5em\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"outline\": \"none\",\n                    \"outlineWidth\": \"0px\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"12px\",\n                    \"paddingRight\": \"12px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"100%\",\n                  }\n                }\n                type=\"text\"\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <label\n              className=\"css-view-1dbjc4n\"\n              id=\"field-269-label\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"start\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"flex-start\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"flex-start\",\n                  \"marginBottom\": \"4px\",\n                  \"marginTop\": \"4px\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"start\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(115,115,115,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Password\n              </div>\n            </label>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"overflowX\": \"auto\",\n                  \"overflowY\": \"auto\",\n                }\n              }\n            >\n              <input\n                autoCapitalize=\"sentences\"\n                autoComplete=\"on\"\n                autoCorrect=\"on\"\n                className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n                dir=\"auto\"\n                disabled={false}\n                id=\"field-269-input\"\n                onBlur={[Function]}\n                onChange={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onSelect={[Function]}\n                readOnly={false}\n                spellCheck={true}\n                style={\n                  Object {\n                    \"WebkitFlex\": 1,\n                    \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"cursor\": \"auto\",\n                    \"flex\": 1,\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"lineHeight\": \"1.5em\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"outline\": \"none\",\n                    \"outlineWidth\": \"0px\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"12px\",\n                    \"paddingRight\": \"12px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"100%\",\n                  }\n                }\n                type=\"password\"\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <label\n              className=\"css-view-1dbjc4n\"\n              id=\"field-270-label\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"start\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"flex-start\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"flex-start\",\n                  \"marginBottom\": \"4px\",\n                  \"marginTop\": \"4px\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"start\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(115,115,115,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Confirm Password\n              </div>\n            </label>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"overflowX\": \"auto\",\n                  \"overflowY\": \"auto\",\n                }\n              }\n            >\n              <input\n                autoCapitalize=\"sentences\"\n                autoComplete=\"on\"\n                autoCorrect=\"on\"\n                className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n                dir=\"auto\"\n                disabled={false}\n                id=\"field-270-input\"\n                onBlur={[Function]}\n                onChange={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onSelect={[Function]}\n                readOnly={false}\n                spellCheck={true}\n                style={\n                  Object {\n                    \"WebkitFlex\": 1,\n                    \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"cursor\": \"auto\",\n                    \"flex\": 1,\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"lineHeight\": \"1.5em\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"outline\": \"none\",\n                    \"outlineWidth\": \"0px\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"12px\",\n                    \"paddingRight\": \"12px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"100%\",\n                  }\n                }\n                type=\"password\"\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(79,70,229,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginTop\": \"8px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Sign up\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Examples Todo App 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"maxWidth\": \"300px\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"20px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.25em\",\n              \"marginBottom\": \"8px\",\n            }\n          }\n        >\n          Wednesday\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlex\": 1,\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"flex\": 1,\n                  \"flexDirection\": \"row\",\n                  \"msFlex\": \"1 1 0%\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"overflowX\": \"auto\",\n                  \"overflowY\": \"auto\",\n                }\n              }\n            >\n              <input\n                autoCapitalize=\"sentences\"\n                autoComplete=\"on\"\n                autoCorrect=\"on\"\n                className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n                dir=\"auto\"\n                onBlur={[Function]}\n                onChange={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onSelect={[Function]}\n                placeholder=\"Add Task\"\n                readOnly={false}\n                spellCheck={true}\n                style={\n                  Object {\n                    \"WebkitFlex\": 1,\n                    \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"cursor\": \"auto\",\n                    \"flex\": 1,\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"lineHeight\": \"1.5em\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"outline\": \"none\",\n                    \"outlineWidth\": \"0px\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"12px\",\n                    \"paddingRight\": \"12px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"100%\",\n                  }\n                }\n                type=\"text\"\n                value=\"\"\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"10px\",\n                  \"paddingRight\": \"10px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"justify\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"space-between\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"space-between\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"justify\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <label\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  style={\n                    Object {\n                      \"border\": 0,\n                      \"clip\": \"rect(0 0 0 0)\",\n                      \"clipPath\": \"inset(50%)\",\n                      \"height\": 1,\n                      \"margin\": \"0 -1px -1px 0\",\n                      \"overflow\": \"hidden\",\n                      \"padding\": 0,\n                      \"position\": \"absolute\",\n                      \"whiteSpace\": \"nowrap\",\n                      \"width\": 1,\n                    }\n                  }\n                >\n                  <input\n                    aria-checked={true}\n                    checked={true}\n                    disabled={false}\n                    onBlur={[Function]}\n                    onChange={[Function]}\n                    onClick={[Function]}\n                    onFocus={[Function]}\n                    onKeyDown={[Function]}\n                    onKeyUp={[Function]}\n                    onMouseDown={[Function]}\n                    onMouseEnter={[Function]}\n                    onMouseLeave={[Function]}\n                    onMouseUp={[Function]}\n                    onTouchCancel={[Function]}\n                    onTouchEnd={[Function]}\n                    onTouchMove={[Function]}\n                    onTouchStart={[Function]}\n                    type=\"checkbox\"\n                    value=\"Code\"\n                  />\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxDirection\": \"normal\",\n                      \"WebkitBoxOrient\": \"horizontal\",\n                      \"WebkitBoxPack\": \"start\",\n                      \"WebkitFlexDirection\": \"row\",\n                      \"WebkitJustifyContent\": \"flex-start\",\n                      \"alignItems\": \"center\",\n                      \"cursor\": \"pointer\",\n                      \"flexDirection\": \"row\",\n                      \"justifyContent\": \"flex-start\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexDirection\": \"row\",\n                      \"msFlexPack\": \"start\",\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"WebkitAlignItems\": \"center\",\n                        \"WebkitBoxAlign\": \"center\",\n                        \"WebkitBoxPack\": \"center\",\n                        \"WebkitJustifyContent\": \"center\",\n                        \"alignItems\": \"center\",\n                        \"display\": \"flex\",\n                        \"justifyContent\": \"center\",\n                        \"msFlexAlign\": \"center\",\n                        \"msFlexPack\": \"center\",\n                      }\n                    }\n                  >\n                    <div\n                      className=\"css-view-1dbjc4n\"\n                    />\n                    <div\n                      className=\"css-view-1dbjc4n\"\n                      style={\n                        Object {\n                          \"WebkitAlignItems\": \"center\",\n                          \"WebkitBoxAlign\": \"center\",\n                          \"WebkitBoxPack\": \"center\",\n                          \"WebkitJustifyContent\": \"center\",\n                          \"alignItems\": \"center\",\n                          \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                          \"borderBottomColor\": \"rgba(8,145,178,1.00)\",\n                          \"borderBottomLeftRadius\": \"4px\",\n                          \"borderBottomRightRadius\": \"4px\",\n                          \"borderBottomWidth\": \"2px\",\n                          \"borderLeftColor\": \"rgba(8,145,178,1.00)\",\n                          \"borderLeftWidth\": \"2px\",\n                          \"borderRightColor\": \"rgba(8,145,178,1.00)\",\n                          \"borderRightWidth\": \"2px\",\n                          \"borderTopColor\": \"rgba(8,145,178,1.00)\",\n                          \"borderTopLeftRadius\": \"4px\",\n                          \"borderTopRightRadius\": \"4px\",\n                          \"borderTopWidth\": \"2px\",\n                          \"display\": \"flex\",\n                          \"justifyContent\": \"center\",\n                          \"msFlexAlign\": \"center\",\n                          \"msFlexPack\": \"center\",\n                          \"opacity\": 1,\n                          \"paddingBottom\": \"2px\",\n                          \"paddingLeft\": \"2px\",\n                          \"paddingRight\": \"2px\",\n                          \"paddingTop\": \"2px\",\n                        }\n                      }\n                    >\n                      <svg\n                        role=\"img\"\n                        stroke=\"\"\n                        style={\n                          Object {\n                            \"color\": \"rgba(250,250,250,1.00)\",\n                            \"height\": \"12px\",\n                            \"width\": \"12px\",\n                          }\n                        }\n                        viewBox=\"0 0 24 24\"\n                      >\n                        <g>\n                          <path\n                            d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                            fill=\"currentColor\"\n                            stroke=\"\"\n                          />\n                        </g>\n                      </svg>\n                    </div>\n                  </div>\n                </div>\n              </label>\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                onClick={[Function]}\n                style={\n                  Object {\n                    \"WebkitFlexShrink\": 1,\n                    \"color\": \"rgba(161,161,170,1.00)\",\n                    \"cursor\": \"pointer\",\n                    \"flexShrink\": 1,\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"msFlexNegative\": 1,\n                    \"textAlign\": \"left\",\n                    \"textDecoration\": \"line-through\",\n                    \"width\": \"100%\",\n                  }\n                }\n              >\n                Code\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n                onBlur={[Function]}\n                onClick={[Function]}\n                onContextMenu={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                role=\"button\"\n                style={\n                  Object {\n                    \"MozUserSelect\": \"none\",\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"WebkitUserSelect\": \"none\",\n                    \"alignItems\": \"center\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"cursor\": \"pointer\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexPack\": \"center\",\n                    \"msTouchAction\": \"manipulation\",\n                    \"msUserSelect\": \"none\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"8px\",\n                    \"paddingRight\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"touchAction\": \"manipulation\",\n                    \"userSelect\": \"none\",\n                  }\n                }\n                tabIndex=\"0\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                />\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"justify\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"space-between\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"space-between\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"justify\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <label\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  style={\n                    Object {\n                      \"border\": 0,\n                      \"clip\": \"rect(0 0 0 0)\",\n                      \"clipPath\": \"inset(50%)\",\n                      \"height\": 1,\n                      \"margin\": \"0 -1px -1px 0\",\n                      \"overflow\": \"hidden\",\n                      \"padding\": 0,\n                      \"position\": \"absolute\",\n                      \"whiteSpace\": \"nowrap\",\n                      \"width\": 1,\n                    }\n                  }\n                >\n                  <input\n                    aria-checked={false}\n                    checked={false}\n                    disabled={false}\n                    onBlur={[Function]}\n                    onChange={[Function]}\n                    onClick={[Function]}\n                    onFocus={[Function]}\n                    onKeyDown={[Function]}\n                    onKeyUp={[Function]}\n                    onMouseDown={[Function]}\n                    onMouseEnter={[Function]}\n                    onMouseLeave={[Function]}\n                    onMouseUp={[Function]}\n                    onTouchCancel={[Function]}\n                    onTouchEnd={[Function]}\n                    onTouchMove={[Function]}\n                    onTouchStart={[Function]}\n                    type=\"checkbox\"\n                    value=\"Meeting with team at 9\"\n                  />\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxDirection\": \"normal\",\n                      \"WebkitBoxOrient\": \"horizontal\",\n                      \"WebkitBoxPack\": \"start\",\n                      \"WebkitFlexDirection\": \"row\",\n                      \"WebkitJustifyContent\": \"flex-start\",\n                      \"alignItems\": \"center\",\n                      \"cursor\": \"pointer\",\n                      \"flexDirection\": \"row\",\n                      \"justifyContent\": \"flex-start\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexDirection\": \"row\",\n                      \"msFlexPack\": \"start\",\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"WebkitAlignItems\": \"center\",\n                        \"WebkitBoxAlign\": \"center\",\n                        \"WebkitBoxPack\": \"center\",\n                        \"WebkitJustifyContent\": \"center\",\n                        \"alignItems\": \"center\",\n                        \"display\": \"flex\",\n                        \"justifyContent\": \"center\",\n                        \"msFlexAlign\": \"center\",\n                        \"msFlexPack\": \"center\",\n                      }\n                    }\n                  >\n                    <div\n                      className=\"css-view-1dbjc4n\"\n                    />\n                    <div\n                      className=\"css-view-1dbjc4n\"\n                      style={\n                        Object {\n                          \"WebkitAlignItems\": \"center\",\n                          \"WebkitBoxAlign\": \"center\",\n                          \"WebkitBoxPack\": \"center\",\n                          \"WebkitJustifyContent\": \"center\",\n                          \"alignItems\": \"center\",\n                          \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                          \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                          \"borderBottomLeftRadius\": \"4px\",\n                          \"borderBottomRightRadius\": \"4px\",\n                          \"borderBottomWidth\": \"2px\",\n                          \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                          \"borderLeftWidth\": \"2px\",\n                          \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                          \"borderRightWidth\": \"2px\",\n                          \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                          \"borderTopLeftRadius\": \"4px\",\n                          \"borderTopRightRadius\": \"4px\",\n                          \"borderTopWidth\": \"2px\",\n                          \"display\": \"flex\",\n                          \"justifyContent\": \"center\",\n                          \"msFlexAlign\": \"center\",\n                          \"msFlexPack\": \"center\",\n                          \"opacity\": 1,\n                          \"paddingBottom\": \"2px\",\n                          \"paddingLeft\": \"2px\",\n                          \"paddingRight\": \"2px\",\n                          \"paddingTop\": \"2px\",\n                        }\n                      }\n                    >\n                      <div\n                        className=\"css-view-1dbjc4n\"\n                        style={\n                          Object {\n                            \"color\": \"rgba(250,250,250,1.00)\",\n                            \"height\": \"12px\",\n                            \"width\": \"12px\",\n                          }\n                        }\n                      />\n                    </div>\n                  </div>\n                </div>\n              </label>\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                onClick={[Function]}\n                style={\n                  Object {\n                    \"WebkitFlexShrink\": 1,\n                    \"color\": \"rgba(31,41,55,1.00)\",\n                    \"cursor\": \"pointer\",\n                    \"flexShrink\": 1,\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"msFlexNegative\": 1,\n                    \"textAlign\": \"left\",\n                    \"width\": \"100%\",\n                  }\n                }\n              >\n                Meeting with team at 9\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n                onBlur={[Function]}\n                onClick={[Function]}\n                onContextMenu={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                role=\"button\"\n                style={\n                  Object {\n                    \"MozUserSelect\": \"none\",\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"WebkitUserSelect\": \"none\",\n                    \"alignItems\": \"center\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"cursor\": \"pointer\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexPack\": \"center\",\n                    \"msTouchAction\": \"manipulation\",\n                    \"msUserSelect\": \"none\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"8px\",\n                    \"paddingRight\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"touchAction\": \"manipulation\",\n                    \"userSelect\": \"none\",\n                  }\n                }\n                tabIndex=\"0\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                />\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"justify\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"space-between\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"space-between\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"justify\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <label\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  style={\n                    Object {\n                      \"border\": 0,\n                      \"clip\": \"rect(0 0 0 0)\",\n                      \"clipPath\": \"inset(50%)\",\n                      \"height\": 1,\n                      \"margin\": \"0 -1px -1px 0\",\n                      \"overflow\": \"hidden\",\n                      \"padding\": 0,\n                      \"position\": \"absolute\",\n                      \"whiteSpace\": \"nowrap\",\n                      \"width\": 1,\n                    }\n                  }\n                >\n                  <input\n                    aria-checked={false}\n                    checked={false}\n                    disabled={false}\n                    onBlur={[Function]}\n                    onChange={[Function]}\n                    onClick={[Function]}\n                    onFocus={[Function]}\n                    onKeyDown={[Function]}\n                    onKeyUp={[Function]}\n                    onMouseDown={[Function]}\n                    onMouseEnter={[Function]}\n                    onMouseLeave={[Function]}\n                    onMouseUp={[Function]}\n                    onTouchCancel={[Function]}\n                    onTouchEnd={[Function]}\n                    onTouchMove={[Function]}\n                    onTouchStart={[Function]}\n                    type=\"checkbox\"\n                    value=\"Check Emails\"\n                  />\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxDirection\": \"normal\",\n                      \"WebkitBoxOrient\": \"horizontal\",\n                      \"WebkitBoxPack\": \"start\",\n                      \"WebkitFlexDirection\": \"row\",\n                      \"WebkitJustifyContent\": \"flex-start\",\n                      \"alignItems\": \"center\",\n                      \"cursor\": \"pointer\",\n                      \"flexDirection\": \"row\",\n                      \"justifyContent\": \"flex-start\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexDirection\": \"row\",\n                      \"msFlexPack\": \"start\",\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"WebkitAlignItems\": \"center\",\n                        \"WebkitBoxAlign\": \"center\",\n                        \"WebkitBoxPack\": \"center\",\n                        \"WebkitJustifyContent\": \"center\",\n                        \"alignItems\": \"center\",\n                        \"display\": \"flex\",\n                        \"justifyContent\": \"center\",\n                        \"msFlexAlign\": \"center\",\n                        \"msFlexPack\": \"center\",\n                      }\n                    }\n                  >\n                    <div\n                      className=\"css-view-1dbjc4n\"\n                    />\n                    <div\n                      className=\"css-view-1dbjc4n\"\n                      style={\n                        Object {\n                          \"WebkitAlignItems\": \"center\",\n                          \"WebkitBoxAlign\": \"center\",\n                          \"WebkitBoxPack\": \"center\",\n                          \"WebkitJustifyContent\": \"center\",\n                          \"alignItems\": \"center\",\n                          \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                          \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                          \"borderBottomLeftRadius\": \"4px\",\n                          \"borderBottomRightRadius\": \"4px\",\n                          \"borderBottomWidth\": \"2px\",\n                          \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                          \"borderLeftWidth\": \"2px\",\n                          \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                          \"borderRightWidth\": \"2px\",\n                          \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                          \"borderTopLeftRadius\": \"4px\",\n                          \"borderTopRightRadius\": \"4px\",\n                          \"borderTopWidth\": \"2px\",\n                          \"display\": \"flex\",\n                          \"justifyContent\": \"center\",\n                          \"msFlexAlign\": \"center\",\n                          \"msFlexPack\": \"center\",\n                          \"opacity\": 1,\n                          \"paddingBottom\": \"2px\",\n                          \"paddingLeft\": \"2px\",\n                          \"paddingRight\": \"2px\",\n                          \"paddingTop\": \"2px\",\n                        }\n                      }\n                    >\n                      <div\n                        className=\"css-view-1dbjc4n\"\n                        style={\n                          Object {\n                            \"color\": \"rgba(250,250,250,1.00)\",\n                            \"height\": \"12px\",\n                            \"width\": \"12px\",\n                          }\n                        }\n                      />\n                    </div>\n                  </div>\n                </div>\n              </label>\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                onClick={[Function]}\n                style={\n                  Object {\n                    \"WebkitFlexShrink\": 1,\n                    \"color\": \"rgba(31,41,55,1.00)\",\n                    \"cursor\": \"pointer\",\n                    \"flexShrink\": 1,\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"msFlexNegative\": 1,\n                    \"textAlign\": \"left\",\n                    \"width\": \"100%\",\n                  }\n                }\n              >\n                Check Emails\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n                onBlur={[Function]}\n                onClick={[Function]}\n                onContextMenu={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                role=\"button\"\n                style={\n                  Object {\n                    \"MozUserSelect\": \"none\",\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"WebkitUserSelect\": \"none\",\n                    \"alignItems\": \"center\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"cursor\": \"pointer\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexPack\": \"center\",\n                    \"msTouchAction\": \"manipulation\",\n                    \"msUserSelect\": \"none\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"8px\",\n                    \"paddingRight\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"touchAction\": \"manipulation\",\n                    \"userSelect\": \"none\",\n                  }\n                }\n                tabIndex=\"0\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                />\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"justify\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"space-between\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"space-between\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"justify\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <label\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  style={\n                    Object {\n                      \"border\": 0,\n                      \"clip\": \"rect(0 0 0 0)\",\n                      \"clipPath\": \"inset(50%)\",\n                      \"height\": 1,\n                      \"margin\": \"0 -1px -1px 0\",\n                      \"overflow\": \"hidden\",\n                      \"padding\": 0,\n                      \"position\": \"absolute\",\n                      \"whiteSpace\": \"nowrap\",\n                      \"width\": 1,\n                    }\n                  }\n                >\n                  <input\n                    aria-checked={false}\n                    checked={false}\n                    disabled={false}\n                    onBlur={[Function]}\n                    onChange={[Function]}\n                    onClick={[Function]}\n                    onFocus={[Function]}\n                    onKeyDown={[Function]}\n                    onKeyUp={[Function]}\n                    onMouseDown={[Function]}\n                    onMouseEnter={[Function]}\n                    onMouseLeave={[Function]}\n                    onMouseUp={[Function]}\n                    onTouchCancel={[Function]}\n                    onTouchEnd={[Function]}\n                    onTouchMove={[Function]}\n                    onTouchStart={[Function]}\n                    type=\"checkbox\"\n                    value=\"Write an article\"\n                  />\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxDirection\": \"normal\",\n                      \"WebkitBoxOrient\": \"horizontal\",\n                      \"WebkitBoxPack\": \"start\",\n                      \"WebkitFlexDirection\": \"row\",\n                      \"WebkitJustifyContent\": \"flex-start\",\n                      \"alignItems\": \"center\",\n                      \"cursor\": \"pointer\",\n                      \"flexDirection\": \"row\",\n                      \"justifyContent\": \"flex-start\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexDirection\": \"row\",\n                      \"msFlexPack\": \"start\",\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"WebkitAlignItems\": \"center\",\n                        \"WebkitBoxAlign\": \"center\",\n                        \"WebkitBoxPack\": \"center\",\n                        \"WebkitJustifyContent\": \"center\",\n                        \"alignItems\": \"center\",\n                        \"display\": \"flex\",\n                        \"justifyContent\": \"center\",\n                        \"msFlexAlign\": \"center\",\n                        \"msFlexPack\": \"center\",\n                      }\n                    }\n                  >\n                    <div\n                      className=\"css-view-1dbjc4n\"\n                    />\n                    <div\n                      className=\"css-view-1dbjc4n\"\n                      style={\n                        Object {\n                          \"WebkitAlignItems\": \"center\",\n                          \"WebkitBoxAlign\": \"center\",\n                          \"WebkitBoxPack\": \"center\",\n                          \"WebkitJustifyContent\": \"center\",\n                          \"alignItems\": \"center\",\n                          \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                          \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                          \"borderBottomLeftRadius\": \"4px\",\n                          \"borderBottomRightRadius\": \"4px\",\n                          \"borderBottomWidth\": \"2px\",\n                          \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                          \"borderLeftWidth\": \"2px\",\n                          \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                          \"borderRightWidth\": \"2px\",\n                          \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                          \"borderTopLeftRadius\": \"4px\",\n                          \"borderTopRightRadius\": \"4px\",\n                          \"borderTopWidth\": \"2px\",\n                          \"display\": \"flex\",\n                          \"justifyContent\": \"center\",\n                          \"msFlexAlign\": \"center\",\n                          \"msFlexPack\": \"center\",\n                          \"opacity\": 1,\n                          \"paddingBottom\": \"2px\",\n                          \"paddingLeft\": \"2px\",\n                          \"paddingRight\": \"2px\",\n                          \"paddingTop\": \"2px\",\n                        }\n                      }\n                    >\n                      <div\n                        className=\"css-view-1dbjc4n\"\n                        style={\n                          Object {\n                            \"color\": \"rgba(250,250,250,1.00)\",\n                            \"height\": \"12px\",\n                            \"width\": \"12px\",\n                          }\n                        }\n                      />\n                    </div>\n                  </div>\n                </div>\n              </label>\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                onClick={[Function]}\n                style={\n                  Object {\n                    \"WebkitFlexShrink\": 1,\n                    \"color\": \"rgba(31,41,55,1.00)\",\n                    \"cursor\": \"pointer\",\n                    \"flexShrink\": 1,\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"msFlexNegative\": 1,\n                    \"textAlign\": \"left\",\n                    \"width\": \"100%\",\n                  }\n                }\n              >\n                Write an article\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n                onBlur={[Function]}\n                onClick={[Function]}\n                onContextMenu={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                role=\"button\"\n                style={\n                  Object {\n                    \"MozUserSelect\": \"none\",\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"WebkitUserSelect\": \"none\",\n                    \"alignItems\": \"center\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"cursor\": \"pointer\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexPack\": \"center\",\n                    \"msTouchAction\": \"manipulation\",\n                    \"msUserSelect\": \"none\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"8px\",\n                    \"paddingRight\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"touchAction\": \"manipulation\",\n                    \"userSelect\": \"none\",\n                  }\n                }\n                tabIndex=\"0\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Fab Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"height\": \"100px\",\n          \"position\": \"relative\",\n          \"width\": \"100%\",\n        }\n      }\n    />\n  </div>\n</div>\n`;\n\nexports[`Storyshots Fab CustomPosition 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"height\": \"200px\",\n          \"position\": \"relative\",\n          \"width\": \"100%\",\n        }\n      }\n    />\n  </div>\n</div>\n`;\n\nexports[`Storyshots Fab Placement 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"height\": \"400px\",\n          \"width\": \"100%\",\n        }\n      }\n    />\n  </div>\n</div>\n`;\n\nexports[`Storyshots FlatList Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"20px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n            \"paddingBottom\": \"12px\",\n            \"paddingLeft\": \"16px\",\n            \"paddingRight\": \"16px\",\n            \"paddingTop\": \"16px\",\n          }\n        }\n      >\n        Inbox\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        onScroll={[Function]}\n        onTouchEnd={[Function]}\n        onTouchMove={[Function]}\n        onTouchStart={[Function]}\n        onWheel={[Function]}\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxFlex\": 1,\n            \"WebkitBoxOrient\": \"vertical\",\n            \"WebkitFlexDirection\": \"column\",\n            \"WebkitFlexGrow\": 1,\n            \"WebkitFlexShrink\": 1,\n            \"WebkitOverflowScrolling\": \"touch\",\n            \"WebkitTransform\": \"translateZ(0px)\",\n            \"flexDirection\": \"column\",\n            \"flexGrow\": 1,\n            \"flexShrink\": 1,\n            \"msFlexDirection\": \"column\",\n            \"msFlexNegative\": 1,\n            \"msFlexPositive\": 1,\n            \"overflowX\": \"hidden\",\n            \"overflowY\": \"auto\",\n            \"transform\": \"translateZ(0px)\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"dataSet\": Object {},\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"borderBottomColor\": \"rgba(38,38,38,1.00)\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(38,38,38,1.00)\",\n                  \"borderRightColor\": \"rgba(38,38,38,1.00)\",\n                  \"borderTopColor\": \"rgba(38,38,38,1.00)\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"0px\",\n                  \"paddingRight\": \"0px\",\n                  \"paddingTop\": \"8px\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"justify\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitJustifyContent\": \"space-between\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"space-between\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexPack\": \"justify\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n                      \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n                      \"borderBottomLeftRadius\": \"9999px\",\n                      \"borderBottomRightRadius\": \"9999px\",\n                      \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n                      \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n                      \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n                      \"borderTopLeftRadius\": \"9999px\",\n                      \"borderTopRightRadius\": \"9999px\",\n                      \"height\": \"48px\",\n                      \"justifyContent\": \"center\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                      \"position\": \"relative\",\n                      \"width\": \"48px\",\n                    }\n                  }\n                >\n                  <div\n                    aria-label=\"--\"\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"WebkitFlexBasis\": \"auto\",\n                        \"borderBottomLeftRadius\": \"9999px\",\n                        \"borderBottomRightRadius\": \"9999px\",\n                        \"borderTopLeftRadius\": \"9999px\",\n                        \"borderTopRightRadius\": \"9999px\",\n                        \"flexBasis\": \"auto\",\n                        \"height\": \"100%\",\n                        \"maxWidth\": \"100%\",\n                        \"msFlexPreferredSize\": \"auto\",\n                        \"overflowX\": \"hidden\",\n                        \"overflowY\": \"hidden\",\n                        \"width\": \"100%\",\n                        \"zIndex\": 0,\n                      }\n                    }\n                  >\n                    <div\n                      className=\"css-view-1dbjc4n\"\n                      style={\n                        Object {\n                          \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                          \"backgroundPosition\": \"center\",\n                          \"backgroundRepeat\": \"no-repeat\",\n                          \"backgroundSize\": \"cover\",\n                          \"bottom\": \"0px\",\n                          \"height\": \"100%\",\n                          \"left\": \"0px\",\n                          \"position\": \"absolute\",\n                          \"right\": \"0px\",\n                          \"top\": \"0px\",\n                          \"width\": \"100%\",\n                          \"zIndex\": -1,\n                        }\n                      }\n                      suppressHydrationWarning={true}\n                    />\n                  </div>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(31,41,55,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"700\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Aafreen Khan\n                  </div>\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                  />\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(75,85,99,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Good Day!\n                  </div>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitBoxFlex\": 1,\n                      \"WebkitFlexGrow\": 1,\n                      \"flexGrow\": 1,\n                      \"msFlexPositive\": 1,\n                    }\n                  }\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"WebkitAlignSelf\": \"flex-start\",\n                      \"alignSelf\": \"flex-start\",\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"12px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"msFlexItemAlign\": \"start\",\n                    }\n                  }\n                >\n                  12:47 PM\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"borderBottomColor\": \"rgba(38,38,38,1.00)\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(38,38,38,1.00)\",\n                  \"borderRightColor\": \"rgba(38,38,38,1.00)\",\n                  \"borderTopColor\": \"rgba(38,38,38,1.00)\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"0px\",\n                  \"paddingRight\": \"0px\",\n                  \"paddingTop\": \"8px\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"justify\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitJustifyContent\": \"space-between\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"space-between\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexPack\": \"justify\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n                      \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n                      \"borderBottomLeftRadius\": \"9999px\",\n                      \"borderBottomRightRadius\": \"9999px\",\n                      \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n                      \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n                      \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n                      \"borderTopLeftRadius\": \"9999px\",\n                      \"borderTopRightRadius\": \"9999px\",\n                      \"height\": \"48px\",\n                      \"justifyContent\": \"center\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                      \"position\": \"relative\",\n                      \"width\": \"48px\",\n                    }\n                  }\n                >\n                  <div\n                    aria-label=\"--\"\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"WebkitFlexBasis\": \"auto\",\n                        \"borderBottomLeftRadius\": \"9999px\",\n                        \"borderBottomRightRadius\": \"9999px\",\n                        \"borderTopLeftRadius\": \"9999px\",\n                        \"borderTopRightRadius\": \"9999px\",\n                        \"flexBasis\": \"auto\",\n                        \"height\": \"100%\",\n                        \"maxWidth\": \"100%\",\n                        \"msFlexPreferredSize\": \"auto\",\n                        \"overflowX\": \"hidden\",\n                        \"overflowY\": \"hidden\",\n                        \"width\": \"100%\",\n                        \"zIndex\": 0,\n                      }\n                    }\n                  >\n                    <div\n                      className=\"css-view-1dbjc4n\"\n                      style={\n                        Object {\n                          \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                          \"backgroundPosition\": \"center\",\n                          \"backgroundRepeat\": \"no-repeat\",\n                          \"backgroundSize\": \"cover\",\n                          \"bottom\": \"0px\",\n                          \"height\": \"100%\",\n                          \"left\": \"0px\",\n                          \"position\": \"absolute\",\n                          \"right\": \"0px\",\n                          \"top\": \"0px\",\n                          \"width\": \"100%\",\n                          \"zIndex\": -1,\n                        }\n                      }\n                      suppressHydrationWarning={true}\n                    />\n                  </div>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(31,41,55,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"700\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Sujitha Mathur\n                  </div>\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                  />\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(75,85,99,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Cheer up, there!\n                  </div>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitBoxFlex\": 1,\n                      \"WebkitFlexGrow\": 1,\n                      \"flexGrow\": 1,\n                      \"msFlexPositive\": 1,\n                    }\n                  }\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"WebkitAlignSelf\": \"flex-start\",\n                      \"alignSelf\": \"flex-start\",\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"12px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"msFlexItemAlign\": \"start\",\n                    }\n                  }\n                >\n                  11:11 PM\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"borderBottomColor\": \"rgba(38,38,38,1.00)\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(38,38,38,1.00)\",\n                  \"borderRightColor\": \"rgba(38,38,38,1.00)\",\n                  \"borderTopColor\": \"rgba(38,38,38,1.00)\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"0px\",\n                  \"paddingRight\": \"0px\",\n                  \"paddingTop\": \"8px\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"justify\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitJustifyContent\": \"space-between\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"space-between\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexPack\": \"justify\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n                      \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n                      \"borderBottomLeftRadius\": \"9999px\",\n                      \"borderBottomRightRadius\": \"9999px\",\n                      \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n                      \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n                      \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n                      \"borderTopLeftRadius\": \"9999px\",\n                      \"borderTopRightRadius\": \"9999px\",\n                      \"height\": \"48px\",\n                      \"justifyContent\": \"center\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                      \"position\": \"relative\",\n                      \"width\": \"48px\",\n                    }\n                  }\n                >\n                  <div\n                    aria-label=\"--\"\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"WebkitFlexBasis\": \"auto\",\n                        \"borderBottomLeftRadius\": \"9999px\",\n                        \"borderBottomRightRadius\": \"9999px\",\n                        \"borderTopLeftRadius\": \"9999px\",\n                        \"borderTopRightRadius\": \"9999px\",\n                        \"flexBasis\": \"auto\",\n                        \"height\": \"100%\",\n                        \"maxWidth\": \"100%\",\n                        \"msFlexPreferredSize\": \"auto\",\n                        \"overflowX\": \"hidden\",\n                        \"overflowY\": \"hidden\",\n                        \"width\": \"100%\",\n                        \"zIndex\": 0,\n                      }\n                    }\n                  >\n                    <div\n                      className=\"css-view-1dbjc4n\"\n                      style={\n                        Object {\n                          \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                          \"backgroundPosition\": \"center\",\n                          \"backgroundRepeat\": \"no-repeat\",\n                          \"backgroundSize\": \"cover\",\n                          \"bottom\": \"0px\",\n                          \"height\": \"100%\",\n                          \"left\": \"0px\",\n                          \"position\": \"absolute\",\n                          \"right\": \"0px\",\n                          \"top\": \"0px\",\n                          \"width\": \"100%\",\n                          \"zIndex\": -1,\n                        }\n                      }\n                      suppressHydrationWarning={true}\n                    />\n                  </div>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(31,41,55,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"700\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Anci Barroco\n                  </div>\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                  />\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(75,85,99,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Good Day!\n                  </div>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitBoxFlex\": 1,\n                      \"WebkitFlexGrow\": 1,\n                      \"flexGrow\": 1,\n                      \"msFlexPositive\": 1,\n                    }\n                  }\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"WebkitAlignSelf\": \"flex-start\",\n                      \"alignSelf\": \"flex-start\",\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"12px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"msFlexItemAlign\": \"start\",\n                    }\n                  }\n                >\n                  6:22 PM\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"borderBottomColor\": \"rgba(38,38,38,1.00)\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(38,38,38,1.00)\",\n                  \"borderRightColor\": \"rgba(38,38,38,1.00)\",\n                  \"borderTopColor\": \"rgba(38,38,38,1.00)\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"0px\",\n                  \"paddingRight\": \"0px\",\n                  \"paddingTop\": \"8px\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"justify\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitJustifyContent\": \"space-between\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"space-between\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexPack\": \"justify\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n                      \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n                      \"borderBottomLeftRadius\": \"9999px\",\n                      \"borderBottomRightRadius\": \"9999px\",\n                      \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n                      \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n                      \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n                      \"borderTopLeftRadius\": \"9999px\",\n                      \"borderTopRightRadius\": \"9999px\",\n                      \"height\": \"48px\",\n                      \"justifyContent\": \"center\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                      \"position\": \"relative\",\n                      \"width\": \"48px\",\n                    }\n                  }\n                >\n                  <div\n                    aria-label=\"--\"\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"WebkitFlexBasis\": \"auto\",\n                        \"borderBottomLeftRadius\": \"9999px\",\n                        \"borderBottomRightRadius\": \"9999px\",\n                        \"borderTopLeftRadius\": \"9999px\",\n                        \"borderTopRightRadius\": \"9999px\",\n                        \"flexBasis\": \"auto\",\n                        \"height\": \"100%\",\n                        \"maxWidth\": \"100%\",\n                        \"msFlexPreferredSize\": \"auto\",\n                        \"overflowX\": \"hidden\",\n                        \"overflowY\": \"hidden\",\n                        \"width\": \"100%\",\n                        \"zIndex\": 0,\n                      }\n                    }\n                  >\n                    <div\n                      className=\"css-view-1dbjc4n\"\n                      style={\n                        Object {\n                          \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                          \"backgroundPosition\": \"center\",\n                          \"backgroundRepeat\": \"no-repeat\",\n                          \"backgroundSize\": \"cover\",\n                          \"bottom\": \"0px\",\n                          \"height\": \"100%\",\n                          \"left\": \"0px\",\n                          \"position\": \"absolute\",\n                          \"right\": \"0px\",\n                          \"top\": \"0px\",\n                          \"width\": \"100%\",\n                          \"zIndex\": -1,\n                        }\n                      }\n                      suppressHydrationWarning={true}\n                    />\n                  </div>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(31,41,55,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"700\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Aniket Kumar\n                  </div>\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                  />\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(75,85,99,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    All the best\n                  </div>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitBoxFlex\": 1,\n                      \"WebkitFlexGrow\": 1,\n                      \"flexGrow\": 1,\n                      \"msFlexPositive\": 1,\n                    }\n                  }\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"WebkitAlignSelf\": \"flex-start\",\n                      \"alignSelf\": \"flex-start\",\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"12px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"msFlexItemAlign\": \"start\",\n                    }\n                  }\n                >\n                  8:56 PM\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"borderBottomColor\": \"rgba(38,38,38,1.00)\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(38,38,38,1.00)\",\n                  \"borderRightColor\": \"rgba(38,38,38,1.00)\",\n                  \"borderTopColor\": \"rgba(38,38,38,1.00)\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"0px\",\n                  \"paddingRight\": \"0px\",\n                  \"paddingTop\": \"8px\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"justify\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitJustifyContent\": \"space-between\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"space-between\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexPack\": \"justify\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n                      \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n                      \"borderBottomLeftRadius\": \"9999px\",\n                      \"borderBottomRightRadius\": \"9999px\",\n                      \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n                      \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n                      \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n                      \"borderTopLeftRadius\": \"9999px\",\n                      \"borderTopRightRadius\": \"9999px\",\n                      \"height\": \"48px\",\n                      \"justifyContent\": \"center\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                      \"position\": \"relative\",\n                      \"width\": \"48px\",\n                    }\n                  }\n                >\n                  <div\n                    aria-label=\"--\"\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"WebkitFlexBasis\": \"auto\",\n                        \"borderBottomLeftRadius\": \"9999px\",\n                        \"borderBottomRightRadius\": \"9999px\",\n                        \"borderTopLeftRadius\": \"9999px\",\n                        \"borderTopRightRadius\": \"9999px\",\n                        \"flexBasis\": \"auto\",\n                        \"height\": \"100%\",\n                        \"maxWidth\": \"100%\",\n                        \"msFlexPreferredSize\": \"auto\",\n                        \"overflowX\": \"hidden\",\n                        \"overflowY\": \"hidden\",\n                        \"width\": \"100%\",\n                        \"zIndex\": 0,\n                      }\n                    }\n                  >\n                    <div\n                      className=\"css-view-1dbjc4n\"\n                      style={\n                        Object {\n                          \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                          \"backgroundPosition\": \"center\",\n                          \"backgroundRepeat\": \"no-repeat\",\n                          \"backgroundSize\": \"cover\",\n                          \"bottom\": \"0px\",\n                          \"height\": \"100%\",\n                          \"left\": \"0px\",\n                          \"position\": \"absolute\",\n                          \"right\": \"0px\",\n                          \"top\": \"0px\",\n                          \"width\": \"100%\",\n                          \"zIndex\": -1,\n                        }\n                      }\n                      suppressHydrationWarning={true}\n                    />\n                  </div>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(31,41,55,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"700\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Kiara\n                  </div>\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                  />\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(75,85,99,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    I will call today.\n                  </div>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitBoxFlex\": 1,\n                      \"WebkitFlexGrow\": 1,\n                      \"flexGrow\": 1,\n                      \"msFlexPositive\": 1,\n                    }\n                  }\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"WebkitAlignSelf\": \"flex-start\",\n                      \"alignSelf\": \"flex-start\",\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"12px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"msFlexItemAlign\": \"start\",\n                    }\n                  }\n                >\n                  12:47 PM\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Flex Basic Usage 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitFlex\": 1,\n          \"flex\": 1,\n          \"msFlex\": \"1 1 0%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        onScroll={[Function]}\n        onTouchEnd={[Function]}\n        onTouchMove={[Function]}\n        onTouchStart={[Function]}\n        onWheel={[Function]}\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxFlex\": 1,\n            \"WebkitBoxOrient\": \"vertical\",\n            \"WebkitFlexDirection\": \"column\",\n            \"WebkitFlexGrow\": 1,\n            \"WebkitFlexShrink\": 1,\n            \"WebkitOverflowScrolling\": \"touch\",\n            \"WebkitTransform\": \"translateZ(0px)\",\n            \"flexDirection\": \"column\",\n            \"flexGrow\": 1,\n            \"flexShrink\": 1,\n            \"msFlexDirection\": \"column\",\n            \"msFlexNegative\": 1,\n            \"msFlexPositive\": 1,\n            \"overflowX\": \"hidden\",\n            \"overflowY\": \"auto\",\n            \"transform\": \"translateZ(0px)\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"dataSet\": Object {},\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"20px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.25em\",\n                }\n              }\n            >\n              row\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"10px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"display\": \"flex\",\n                  \"flexDirection\": \"row\",\n                  \"marginBottom\": \"10px\",\n                  \"marginTop\": \"6px\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(207,250,254,1.00)\",\n                    \"display\": \"flex\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  100\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(165,243,252,1.00)\",\n                    \"display\": \"flex\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  200\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(103,232,249,1.00)\",\n                    \"display\": \"flex\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  300\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(34,211,238,1.00)\",\n                    \"display\": \"flex\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  400\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"10px\",\n                }\n              }\n            />\n            <div\n              aria-orientation=\"horizontal\"\n              className=\"css-view-1dbjc4n\"\n              role=\"separator\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                  \"height\": \"1px\",\n                  \"width\": \"100%\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"10px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"20px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.25em\",\n                }\n              }\n            >\n              column\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"10px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"vertical\",\n                  \"WebkitFlexDirection\": \"column\",\n                  \"display\": \"flex\",\n                  \"flexDirection\": \"column\",\n                  \"marginBottom\": \"10px\",\n                  \"marginTop\": \"6px\",\n                  \"msFlexDirection\": \"column\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(207,250,254,1.00)\",\n                    \"display\": \"flex\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  100\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(165,243,252,1.00)\",\n                    \"display\": \"flex\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  200\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(103,232,249,1.00)\",\n                    \"display\": \"flex\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  300\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(34,211,238,1.00)\",\n                    \"display\": \"flex\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  400\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"10px\",\n                }\n              }\n            />\n            <div\n              aria-orientation=\"horizontal\"\n              className=\"css-view-1dbjc4n\"\n              role=\"separator\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                  \"height\": \"1px\",\n                  \"width\": \"100%\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"10px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"20px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.25em\",\n                }\n              }\n            >\n              row-reverse\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"10px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"reverse\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row-reverse\",\n                  \"display\": \"flex\",\n                  \"flexDirection\": \"row-reverse\",\n                  \"marginBottom\": \"10px\",\n                  \"marginTop\": \"6px\",\n                  \"msFlexDirection\": \"row-reverse\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(207,250,254,1.00)\",\n                    \"display\": \"flex\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  100\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(165,243,252,1.00)\",\n                    \"display\": \"flex\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  200\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(103,232,249,1.00)\",\n                    \"display\": \"flex\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  300\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(34,211,238,1.00)\",\n                    \"display\": \"flex\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  400\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"10px\",\n                }\n              }\n            />\n            <div\n              aria-orientation=\"horizontal\"\n              className=\"css-view-1dbjc4n\"\n              role=\"separator\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                  \"height\": \"1px\",\n                  \"width\": \"100%\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"10px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"20px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.25em\",\n                }\n              }\n            >\n              column-reverse\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"10px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"reverse\",\n                  \"WebkitBoxOrient\": \"vertical\",\n                  \"WebkitFlexDirection\": \"column-reverse\",\n                  \"display\": \"flex\",\n                  \"flexDirection\": \"column-reverse\",\n                  \"marginBottom\": \"10px\",\n                  \"marginTop\": \"6px\",\n                  \"msFlexDirection\": \"column-reverse\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(207,250,254,1.00)\",\n                    \"display\": \"flex\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  100\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(165,243,252,1.00)\",\n                    \"display\": \"flex\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  200\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(103,232,249,1.00)\",\n                    \"display\": \"flex\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  300\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(34,211,238,1.00)\",\n                    \"display\": \"flex\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  400\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"10px\",\n                }\n              }\n            />\n            <div\n              aria-orientation=\"horizontal\"\n              className=\"css-view-1dbjc4n\"\n              role=\"separator\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                  \"height\": \"1px\",\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Flex Spacer Example 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"vertical\",\n          \"WebkitFlexDirection\": \"column\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"flexDirection\": \"column\",\n          \"height\": \"160px\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"column\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(6,182,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"display\": \"flex\",\n            \"height\": \"64px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"64px\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(250,250,249,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"500\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          Box 1\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxFlex\": 1,\n            \"WebkitFlexGrow\": 1,\n            \"flexGrow\": 1,\n            \"msFlexPositive\": 1,\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(236,72,153,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"display\": \"flex\",\n            \"height\": \"64px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"64px\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(250,250,249,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"500\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          Box 2\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots FormControl CustomStyle 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      onScroll={[Function]}\n      onTouchEnd={[Function]}\n      onTouchMove={[Function]}\n      onTouchStart={[Function]}\n      onWheel={[Function]}\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxFlex\": 1,\n          \"WebkitBoxOrient\": \"vertical\",\n          \"WebkitFlexDirection\": \"column\",\n          \"WebkitFlexGrow\": 1,\n          \"WebkitFlexShrink\": 1,\n          \"WebkitOverflowScrolling\": \"touch\",\n          \"WebkitTransform\": \"translateZ(0px)\",\n          \"flexDirection\": \"column\",\n          \"flexGrow\": 1,\n          \"flexShrink\": 1,\n          \"msFlexDirection\": \"column\",\n          \"msFlexNegative\": 1,\n          \"msFlexPositive\": 1,\n          \"overflowX\": \"hidden\",\n          \"overflowY\": \"auto\",\n          \"transform\": \"translateZ(0px)\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"dataSet\": Object {},\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignSelf\": \"center\",\n              \"alignSelf\": \"center\",\n              \"marginTop\": \"16px\",\n              \"msFlexItemAlign\": \"center\",\n              \"msGridRowAlign\": \"center\",\n              \"paddingLeft\": \"16px\",\n              \"paddingRight\": \"16px\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"20px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginBottom\": \"16px\",\n                }\n              }\n            >\n              Default\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"marginBottom\": \"20px\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <label\n                className=\"css-view-1dbjc4n\"\n                id=\"field-87-label\"\n                style={\n                  Object {\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"start\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitJustifyContent\": \"flex-start\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"flex-start\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexPack\": \"start\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(115,115,115,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"500\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Project Title\n                </div>\n              </label>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderBottomWidth\": \"1px\",\n                    \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                    \"borderLeftWidth\": \"1px\",\n                    \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                    \"borderRightWidth\": \"1px\",\n                    \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"borderTopWidth\": \"1px\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"overflowX\": \"auto\",\n                    \"overflowY\": \"auto\",\n                  }\n                }\n              >\n                <input\n                  autoCapitalize=\"sentences\"\n                  autoComplete=\"on\"\n                  autoCorrect=\"on\"\n                  className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n                  dir=\"auto\"\n                  disabled={false}\n                  id=\"field-87-input\"\n                  onBlur={[Function]}\n                  onChange={[Function]}\n                  onFocus={[Function]}\n                  onKeyDown={[Function]}\n                  onSelect={[Function]}\n                  readOnly={false}\n                  spellCheck={true}\n                  style={\n                    Object {\n                      \"WebkitFlex\": 1,\n                      \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"cursor\": \"auto\",\n                      \"flex\": 1,\n                      \"fontSize\": \"12px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"height\": \"100%\",\n                      \"lineHeight\": \"1.5em\",\n                      \"msFlex\": \"1 1 0%\",\n                      \"outline\": \"none\",\n                      \"outlineWidth\": \"0px\",\n                      \"paddingBottom\": \"8px\",\n                      \"paddingLeft\": \"12px\",\n                      \"paddingRight\": \"12px\",\n                      \"paddingTop\": \"8px\",\n                      \"width\": \"100%\",\n                    }\n                  }\n                  type=\"text\"\n                />\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"field-87-feedback\"\n                style={\n                  Object {\n                    \"marginTop\": \"8px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(115,115,115,1.00)\",\n                      \"fontSize\": \"12px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Give your project a title.\n                </div>\n              </div>\n            </div>\n            <div\n              aria-orientation=\"horizontal\"\n              className=\"css-view-1dbjc4n\"\n              role=\"separator\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                  \"height\": \"1px\",\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"20px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginBottom\": \"16px\",\n                }\n              }\n            >\n              Disabled\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"marginBottom\": \"20px\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <label\n                className=\"css-view-1dbjc4n\"\n                id=\"field-88-label\"\n                style={\n                  Object {\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"start\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitJustifyContent\": \"flex-start\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"flex-start\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexPack\": \"start\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(161,161,170,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"700\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Project Title\n                </div>\n              </label>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderBottomWidth\": \"1px\",\n                    \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                    \"borderLeftWidth\": \"1px\",\n                    \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                    \"borderRightWidth\": \"1px\",\n                    \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"borderTopWidth\": \"1px\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"opacity\": 0.4,\n                    \"overflowX\": \"auto\",\n                    \"overflowY\": \"auto\",\n                  }\n                }\n              >\n                <input\n                  autoCapitalize=\"sentences\"\n                  autoComplete=\"on\"\n                  autoCorrect=\"on\"\n                  className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n                  dir=\"auto\"\n                  disabled={true}\n                  id=\"field-88-input\"\n                  onBlur={[Function]}\n                  onChange={[Function]}\n                  onFocus={[Function]}\n                  onKeyDown={[Function]}\n                  onSelect={[Function]}\n                  placeholder=\"Title\"\n                  readOnly={true}\n                  spellCheck={true}\n                  style={\n                    Object {\n                      \"WebkitFlex\": 1,\n                      \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"cursor\": \"not-allowed\",\n                      \"flex\": 1,\n                      \"fontSize\": \"12px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"height\": \"100%\",\n                      \"lineHeight\": \"1.5em\",\n                      \"msFlex\": \"1 1 0%\",\n                      \"outline\": \"none\",\n                      \"outlineWidth\": \"0px\",\n                      \"paddingBottom\": \"8px\",\n                      \"paddingLeft\": \"12px\",\n                      \"paddingRight\": \"12px\",\n                      \"paddingTop\": \"8px\",\n                      \"width\": \"100%\",\n                    }\n                  }\n                  type=\"text\"\n                />\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"field-88-feedback\"\n                style={\n                  Object {\n                    \"marginTop\": \"8px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(115,115,115,1.00)\",\n                      \"fontSize\": \"12px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Give your project a title.\n                </div>\n              </div>\n            </div>\n            <div\n              aria-orientation=\"horizontal\"\n              className=\"css-view-1dbjc4n\"\n              role=\"separator\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                  \"height\": \"1px\",\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"20px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginBottom\": \"16px\",\n                }\n              }\n            >\n              Invalid\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <label\n                className=\"css-view-1dbjc4n\"\n                id=\"field-89-label\"\n                style={\n                  Object {\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"start\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitJustifyContent\": \"flex-start\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"flex-start\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexPack\": \"start\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(115,115,115,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"500\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Project Title\n                </div>\n              </label>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderBottomWidth\": \"1px\",\n                    \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                    \"borderLeftWidth\": \"1px\",\n                    \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                    \"borderRightWidth\": \"1px\",\n                    \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"borderTopWidth\": \"1px\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"overflowX\": \"auto\",\n                    \"overflowY\": \"auto\",\n                  }\n                }\n              >\n                <input\n                  aria-invalid={true}\n                  autoCapitalize=\"sentences\"\n                  autoComplete=\"on\"\n                  autoCorrect=\"on\"\n                  className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n                  dir=\"auto\"\n                  disabled={false}\n                  id=\"field-89-input\"\n                  onBlur={[Function]}\n                  onChange={[Function]}\n                  onFocus={[Function]}\n                  onKeyDown={[Function]}\n                  onSelect={[Function]}\n                  placeholder=\"Title\"\n                  readOnly={false}\n                  spellCheck={true}\n                  style={\n                    Object {\n                      \"WebkitFlex\": 1,\n                      \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"cursor\": \"auto\",\n                      \"flex\": 1,\n                      \"fontSize\": \"12px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"height\": \"100%\",\n                      \"lineHeight\": \"1.5em\",\n                      \"msFlex\": \"1 1 0%\",\n                      \"outline\": \"none\",\n                      \"outlineWidth\": \"0px\",\n                      \"paddingBottom\": \"8px\",\n                      \"paddingLeft\": \"12px\",\n                      \"paddingRight\": \"12px\",\n                      \"paddingTop\": \"8px\",\n                      \"width\": \"100%\",\n                    }\n                  }\n                  type=\"text\"\n                />\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"field-89\"\n                style={\n                  Object {\n                    \"marginTop\": \"8px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxDirection\": \"normal\",\n                      \"WebkitBoxOrient\": \"horizontal\",\n                      \"WebkitFlexDirection\": \"row\",\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexDirection\": \"row\",\n                    }\n                  }\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(220,38,38,1.00)\",\n                        \"fontSize\": \"12px\",\n                        \"height\": \"12px\",\n                        \"width\": \"12px\",\n                      }\n                    }\n                    viewBox=\"0 0 16 16\"\n                  >\n                    <g>\n                      <path\n                        d=\"M8 16C6.41775 16 4.87103 15.5308 3.55544 14.6518C2.23985 13.7727 1.21447 12.5233 0.608967 11.0615C0.00346627 9.59966 -0.15496 7.99113 0.153721 6.43928C0.462403 4.88743 1.22433 3.46197 2.34315 2.34315C3.46197 1.22433 4.88743 0.462403 6.43928 0.153721C7.99113 -0.15496 9.59966 0.00346627 11.0615 0.608967C12.5233 1.21447 13.7727 2.23985 14.6518 3.55544C15.5308 4.87103 16 6.41775 16 8C16 10.1217 15.1571 12.1566 13.6569 13.6569C12.1566 15.1571 10.1217 16 8 16ZM8 14.4C9.2658 14.4 10.5032 14.0246 11.5556 13.3214C12.6081 12.6182 13.4284 11.6186 13.9128 10.4492C14.3972 9.27973 14.524 7.9929 14.277 6.75142C14.0301 5.50995 13.4205 4.36958 12.5255 3.47452C11.6304 2.57946 10.4901 1.96992 9.24858 1.72298C8.0071 1.47603 6.72028 1.60277 5.55083 2.08717C4.38138 2.57158 3.38184 3.39188 2.6786 4.44435C1.97536 5.49683 1.6 6.7342 1.6 8C1.6 9.69739 2.27429 11.3253 3.47452 12.5255C4.67475 13.7257 6.30262 14.4 8 14.4ZM7.2 10.4H8.8V12H7.2V10.4ZM7.2 4H8.8V8.8H7.2V4Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"width\": \"4px\",\n                      }\n                    }\n                  />\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(220,38,38,1.00)\",\n                        \"fontSize\": \"12px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Something is wrong.\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots FormControl Playground 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"width\": \"70%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"marginLeft\": \"16px\",\n            \"marginRight\": \"16px\",\n          }\n        }\n      >\n        <label\n          className=\"css-view-1dbjc4n\"\n          id=\"field-83-label\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"start\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"flex-start\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"marginBottom\": \"4px\",\n              \"marginTop\": \"4px\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"start\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(115,115,115,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            Favorite framework\n          </div>\n          <div\n            aria-hidden={true}\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            role=\"presentation\"\n            style={\n              Object {\n                \"color\": \"rgba(220,38,38,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            *\n          </div>\n        </label>\n        <div\n          className=\"css-view-1dbjc4n\"\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderBottomWidth\": \"1px\",\n              \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n              \"borderLeftWidth\": \"1px\",\n              \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n              \"borderRightWidth\": \"1px\",\n              \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"borderTopWidth\": \"1px\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"overflowX\": \"auto\",\n              \"overflowY\": \"auto\",\n            }\n          }\n        >\n          <input\n            aria-required={true}\n            autoCapitalize=\"sentences\"\n            autoComplete=\"on\"\n            autoCorrect=\"on\"\n            className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n            dir=\"auto\"\n            disabled={false}\n            id=\"field-83-input\"\n            onBlur={[Function]}\n            onChange={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onSelect={[Function]}\n            placeholder=\"Is it react?\"\n            readOnly={false}\n            required={true}\n            spellCheck={true}\n            style={\n              Object {\n                \"WebkitFlex\": 1,\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"cursor\": \"auto\",\n                \"flex\": 1,\n                \"fontSize\": \"12px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"height\": \"100%\",\n                \"lineHeight\": \"1.5em\",\n                \"msFlex\": \"1 1 0%\",\n                \"outline\": \"none\",\n                \"outlineWidth\": \"0px\",\n                \"paddingBottom\": \"8px\",\n                \"paddingLeft\": \"8px\",\n                \"paddingRight\": \"8px\",\n                \"paddingTop\": \"8px\",\n                \"width\": \"100%\",\n              }\n            }\n            type=\"text\"\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          id=\"field-83-feedback\"\n          style={\n            Object {\n              \"marginTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(115,115,115,1.00)\",\n                \"fontSize\": \"12px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            We'll keep this between us.\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots FormControl Usage 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"maxWidth\": \"300px\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"marginLeft\": \"16px\",\n                \"marginRight\": \"16px\",\n              }\n            }\n          >\n            <label\n              className=\"css-view-1dbjc4n\"\n              id=\"field-85-label\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"start\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"flex-start\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"flex-start\",\n                  \"marginBottom\": \"4px\",\n                  \"marginTop\": \"4px\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"start\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(115,115,115,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Password\n              </div>\n              <div\n                aria-hidden={true}\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                role=\"presentation\"\n                style={\n                  Object {\n                    \"color\": \"rgba(220,38,38,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                *\n              </div>\n            </label>\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"overflowX\": \"auto\",\n                  \"overflowY\": \"auto\",\n                }\n              }\n            >\n              <input\n                aria-required={true}\n                autoCapitalize=\"sentences\"\n                autoComplete=\"on\"\n                autoCorrect=\"on\"\n                className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n                defaultValue=\"12345\"\n                dir=\"auto\"\n                disabled={false}\n                id=\"field-85-input\"\n                onBlur={[Function]}\n                onChange={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onSelect={[Function]}\n                placeholder=\"password\"\n                readOnly={false}\n                required={true}\n                spellCheck={true}\n                style={\n                  Object {\n                    \"WebkitFlex\": 1,\n                    \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"cursor\": \"auto\",\n                    \"flex\": 1,\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"lineHeight\": \"1.5em\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"outline\": \"none\",\n                    \"outlineWidth\": \"0px\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"12px\",\n                    \"paddingRight\": \"12px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"100%\",\n                  }\n                }\n                type=\"password\"\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              id=\"field-85-feedback\"\n              style={\n                Object {\n                  \"marginTop\": \"8px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(115,115,115,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Must be atleast 6 characters.\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots HStack Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(103,232,249,1.00)\",\n            \"borderBottomLeftRadius\": \"6px\",\n            \"borderBottomRightRadius\": \"6px\",\n            \"borderTopLeftRadius\": \"6px\",\n            \"borderTopRightRadius\": \"6px\",\n            \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n            \"display\": \"flex\",\n            \"height\": \"160px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"80px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"12px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(6,182,212,1.00)\",\n            \"borderBottomLeftRadius\": \"6px\",\n            \"borderBottomRightRadius\": \"6px\",\n            \"borderTopLeftRadius\": \"6px\",\n            \"borderTopRightRadius\": \"6px\",\n            \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n            \"display\": \"flex\",\n            \"height\": \"160px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"80px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"12px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(14,116,144,1.00)\",\n            \"borderBottomLeftRadius\": \"6px\",\n            \"borderBottomRightRadius\": \"6px\",\n            \"borderTopLeftRadius\": \"6px\",\n            \"borderTopRightRadius\": \"6px\",\n            \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n            \"display\": \"flex\",\n            \"height\": \"160px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"80px\",\n          }\n        }\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Heading Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-text-901oao\"\n      dir=\"auto\"\n      style={\n        Object {\n          \"color\": \"rgba(23,23,23,1.00)\",\n          \"fontSize\": \"24px\",\n          \"fontStyle\": \"normal\",\n          \"fontWeight\": \"700\",\n          \"letterSpacing\": \"0px\",\n          \"lineHeight\": \"1.25em\",\n        }\n      }\n    >\n      I'm a Heading\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Heading Composition 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"30px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n            \"marginBottom\": \"16px\",\n          }\n        }\n      >\n        Heading\n      </div>\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"20px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        Headings are used for rendering headlines. Heading composes Text so you can use all the style props.\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Heading OverridenStyle 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-text-901oao\"\n      dir=\"auto\"\n      style={\n        Object {\n          \"color\": \"rgba(23,23,23,1.00)\",\n          \"fontSize\": \"50px\",\n          \"fontStyle\": \"normal\",\n          \"fontWeight\": \"700\",\n          \"letterSpacing\": \"0px\",\n          \"lineHeight\": \"1.25em\",\n        }\n      }\n    >\n      How are you?\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Heading Sizes 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n          }\n        }\n      >\n        xs\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"4px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"16px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n          }\n        }\n      >\n        sm\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"4px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"20px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n          }\n        }\n      >\n        md\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"4px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"24px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n          }\n        }\n      >\n        lg\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"4px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"30px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n          }\n        }\n      >\n        xl\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"4px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"36px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n          }\n        }\n      >\n        2xl\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"4px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"48px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0.05em\",\n            \"lineHeight\": \"1.25em\",\n          }\n        }\n      >\n        3xl\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"4px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"60px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0.05em\",\n            \"lineHeight\": \"1.25em\",\n          }\n        }\n      >\n        4xl\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Heading Truncate 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-text-901oao css-textOneLine-vcwn7f\"\n      dir=\"auto\"\n      style={\n        Object {\n          \"color\": \"rgba(23,23,23,1.00)\",\n          \"fontSize\": \"24px\",\n          \"fontStyle\": \"normal\",\n          \"fontWeight\": \"700\",\n          \"letterSpacing\": \"0px\",\n          \"lineHeight\": \"1.25em\",\n        }\n      }\n    >\n      NativeBase is a simple, modular and accessible component library that gives you building blocks to build you React applications.\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Hidden Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"backgroundColor\": \"rgba(253,186,116,1.00)\",\n            \"paddingBottom\": \"8px\",\n            \"paddingLeft\": \"8px\",\n            \"paddingRight\": \"8px\",\n            \"paddingTop\": \"8px\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          This text will be always visible.\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Hidden HiddenFromAndToBreakpoints 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"backgroundColor\": \"rgba(253,186,116,1.00)\",\n            \"paddingBottom\": \"8px\",\n            \"paddingLeft\": \"8px\",\n            \"paddingRight\": \"8px\",\n            \"paddingTop\": \"8px\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          This text will be always visible.\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"backgroundColor\": \"rgba(248,113,113,1.00)\",\n            \"paddingBottom\": \"8px\",\n            \"paddingLeft\": \"8px\",\n            \"paddingRight\": \"8px\",\n            \"paddingTop\": \"8px\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          This text will be hidden from sm to lg screens.\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"backgroundColor\": \"rgba(96,165,250,1.00)\",\n            \"paddingBottom\": \"8px\",\n            \"paddingLeft\": \"8px\",\n            \"paddingRight\": \"8px\",\n            \"paddingTop\": \"8px\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          This will be hidden from sm to all screen sizes.\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Hidden HiddenOnColorModes 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(75,85,99,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(255,255,255,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Change mode\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"display\": \"flex\",\n            \"justifyContent\": \"center\",\n            \"marginTop\": \"20px\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n          }\n        }\n      >\n        <div\n          aria-label=\"image\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"150px\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"150px\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Hidden HiddenOnPlatforms 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"backgroundColor\": \"rgba(253,186,116,1.00)\",\n            \"paddingBottom\": \"8px\",\n            \"paddingLeft\": \"8px\",\n            \"paddingRight\": \"8px\",\n            \"paddingTop\": \"8px\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          This text will be visible on every platform.\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Hidden HiddenOnlyOnBreakPoints 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"backgroundColor\": \"rgba(253,186,116,1.00)\",\n            \"paddingBottom\": \"8px\",\n            \"paddingLeft\": \"8px\",\n            \"paddingRight\": \"8px\",\n            \"paddingTop\": \"8px\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          This text will be visible on every screen size.\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"backgroundColor\": \"rgba(248,113,113,1.00)\",\n            \"paddingBottom\": \"8px\",\n            \"paddingLeft\": \"8px\",\n            \"paddingRight\": \"8px\",\n            \"paddingTop\": \"8px\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          This text will be hidden on sm and lg only.\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Icon All Icons 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        onScroll={[Function]}\n        onTouchEnd={[Function]}\n        onTouchMove={[Function]}\n        onTouchStart={[Function]}\n        onWheel={[Function]}\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxFlex\": 1,\n            \"WebkitBoxOrient\": \"vertical\",\n            \"WebkitFlexDirection\": \"column\",\n            \"WebkitFlexGrow\": 1,\n            \"WebkitFlexShrink\": 1,\n            \"WebkitOverflowScrolling\": \"touch\",\n            \"WebkitTransform\": \"translateZ(0px)\",\n            \"flexDirection\": \"column\",\n            \"flexGrow\": 1,\n            \"flexShrink\": 1,\n            \"msFlexDirection\": \"column\",\n            \"msFlexNegative\": 1,\n            \"msFlexPositive\": 1,\n            \"overflowX\": \"hidden\",\n            \"overflowY\": \"auto\",\n            \"transform\": \"translateZ(0px)\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"dataSet\": Object {},\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M13.25 10.75V2H10.75V10.75H2V13.25H10.75V22H13.25V13.25H22V10.75H13.25Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  add\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <g\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      >\n                        <path\n                          d=\"M13.0666 3.76375L6.43395 10.3964L5.58039 11.25H6.7875H21.5V12.75H6.7875H5.58192L6.43363 13.6032L13.0557 20.2372L12 21.2929L2.70711 12L12.0012 2.70586L13.0666 3.76375Z\"\n                          stroke=\"currentColor\"\n                        />\n                      </g>\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  arrow-back\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <g\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      >\n                        <path\n                          d=\"M10.9334 3.76375L17.5661 10.3964L18.4196 11.25H17.2125H2.5V12.75H17.2125H18.4181L17.5664 13.6032L10.9443 20.2372L12 21.2929L21.2929 12L11.9988 2.70586L10.9334 3.76375Z\"\n                          stroke=\"currentColor\"\n                        />\n                      </g>\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  arrow-forward\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <g\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      >\n                        <path\n                          d=\"M20.2362 13.0666L13.6036 6.43395L12.75 5.58039V6.7875L12.75 21.5H11.25L11.25 6.7875V5.58192L10.3968 6.43363L3.76282 13.0557L2.70711 12L12 2.70711L21.2941 12.0012L20.2362 13.0666Z\"\n                          stroke=\"currentColor\"\n                        />\n                      </g>\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  arrow-up\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <g\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      >\n                        <path\n                          d=\"M3.76375 10.9334L10.3964 17.5661L11.25 18.4196V17.2125L11.25 2.5H12.75L12.75 17.2125V18.4181L13.6032 17.5664L20.2372 10.9443L21.2929 12L12 21.2929L2.70586 11.9988L3.76375 10.9334Z\"\n                          stroke=\"currentColor\"\n                        />\n                      </g>\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  arrow-down\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  check\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  check-circle\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M20.2286 6L11.9973 14.3785L3.76862 6.00268L2 7.80293L12 18L22 7.80293L20.2286 6Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  chevron-down\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M18 3.77141L9.62148 12.0027L17.9973 20.2314L16.1971 22L6 12L16.1971 2L18 3.77141Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  chevron-left\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M6 3.77141L14.3785 12.0027L6.00268 20.2314L7.80293 22L18 12L7.80293 2L6 3.77141Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  chevron-right\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M20.2286 18L11.9973 9.62148L3.76862 17.9973L2 16.1971L12 6L22 16.1971L20.2286 18Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  chevron-up\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  circle\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  close\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 16 16\"\n                  >\n                    <g>\n                      <path\n                        d=\"M9.41 8l2.29-2.29c.19-.18.3-.43.3-.71a1.003 1.003 0 0 0-1.71-.71L8 6.59l-2.29-2.3a1.003 1.003 0 0 0-1.42 1.42L6.59 8 4.3 10.29c-.19.18-.3.43-.3.71a1.003 1.003 0 0 0 1.71.71L8 9.41l2.29 2.29c.18.19.43.3.71.3a1.003 1.003 0 0 0 .71-1.71L9.41 8z\"\n                        fill=\"currentColor\"\n                        fillRule=\"evenodd\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  small-close\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M22 5H2V7.47961H22V5ZM22 10.4795H2V12.9591H22V10.4795ZM2 15.959H22V18.4386H2V15.959Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  menu\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M12 0C9.62663 0 7.30655 0.703788 5.33316 2.02236C3.35977 3.34094 1.8217 5.21509 0.913451 7.4078C0.00519948 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6689 1.83649 18.807 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0865C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6935 24 14.3734 24 12C23.9966 8.81846 22.7312 5.76821 20.4815 3.51852C18.2318 1.26883 15.1815 0.00344108 12 0ZM12.25 5C12.5467 5 12.8367 5.08797 13.0834 5.25279C13.33 5.41762 13.5223 5.65189 13.6358 5.92597C13.7494 6.20006 13.7791 6.50166 13.7212 6.79263C13.6633 7.08361 13.5204 7.35088 13.3107 7.56066C13.1009 7.77044 12.8336 7.9133 12.5426 7.97118C12.2517 8.02905 11.9501 7.99935 11.676 7.88582C11.4019 7.77229 11.1676 7.58003 11.0028 7.33335C10.838 7.08668 10.75 6.79667 10.75 6.5C10.75 6.10217 10.908 5.72064 11.1893 5.43934C11.4706 5.15803 11.8522 5 12.25 5ZM14.5 18.5H10.5C10.2348 18.5 9.98043 18.3946 9.7929 18.2071C9.60536 18.0196 9.5 17.7652 9.5 17.5C9.5 17.2348 9.60536 16.9804 9.7929 16.7929C9.98043 16.6054 10.2348 16.5 10.5 16.5H11.25C11.3163 16.5 11.3799 16.4737 11.4268 16.4268C11.4737 16.3799 11.5 16.3163 11.5 16.25V11.75C11.5 11.6837 11.4737 11.6201 11.4268 11.5732C11.3799 11.5263 11.3163 11.5 11.25 11.5H10.5C10.2348 11.5 9.98043 11.3946 9.7929 11.2071C9.60536 11.0196 9.5 10.7652 9.5 10.5C9.5 10.2348 9.60536 9.98043 9.7929 9.79289C9.98043 9.60536 10.2348 9.5 10.5 9.5H11.5C12.0304 9.5 12.5391 9.71071 12.9142 10.0858C13.2893 10.4609 13.5 10.9696 13.5 11.5V16.25C13.5 16.3163 13.5263 16.3799 13.5732 16.4268C13.6201 16.4737 13.6837 16.5 13.75 16.5H14.5C14.7652 16.5 15.0196 16.6054 15.2071 16.7929C15.3946 16.9804 15.5 17.2348 15.5 17.5C15.5 17.7652 15.3946 18.0196 15.2071 18.2071C15.0196 18.3946 14.7652 18.5 14.5 18.5Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  info\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <g\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      >\n                        <path\n                          d=\"M11.9442 8.24C12.5628 8.24 13.0642 7.73856 13.0642 7.12C13.0642 6.50144 12.5628 6 11.9442 6C11.3257 6 10.8242 6.50144 10.8242 7.12C10.8242 7.73856 11.3257 8.24 11.9442 8.24Z\"\n                        />\n                        <path\n                          d=\"M14.4008 15.9996H12.8008V9.59961H10.4008C10.1886 9.59961 9.98513 9.68389 9.8351 9.83392C9.68507 9.98395 9.60078 10.1874 9.60078 10.3996C9.60078 10.6118 9.68507 10.8153 9.8351 10.9653C9.98513 11.1153 10.1886 11.1996 10.4008 11.1996H11.2008V15.9996H9.60078C9.38861 15.9996 9.18513 16.0839 9.0351 16.2339C8.88507 16.384 8.80078 16.5874 8.80078 16.7996C8.80078 17.0118 8.88507 17.2153 9.0351 17.3653C9.18513 17.5153 9.38861 17.5996 9.60078 17.5996H14.4008C14.613 17.5996 14.8164 17.5153 14.9665 17.3653C15.1165 17.2153 15.2008 17.0118 15.2008 16.7996C15.2008 16.5874 15.1165 16.384 14.9665 16.2339C14.8164 16.0839 14.613 15.9996 14.4008 15.9996Z\"\n                        />\n                        <path\n                          d=\"M12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17316C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8078C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 9.34783 20.9464 6.80429 19.0711 4.92893C17.1957 3.05357 14.6522 2 12 2ZM12 20.3333C10.3518 20.3333 8.74066 19.8446 7.37025 18.9289C5.99984 18.0132 4.93174 16.7117 4.30101 15.189C3.67028 13.6663 3.50525 11.9908 3.82679 10.3742C4.14834 8.75774 4.94201 7.27288 6.10745 6.10744C7.27288 4.942 8.75774 4.14833 10.3743 3.82679C11.9908 3.50525 13.6663 3.67027 15.189 4.301C16.7117 4.93173 18.0132 5.99984 18.9289 7.37025C19.8446 8.74066 20.3333 10.3518 20.3333 12C20.3333 13.0943 20.1178 14.178 19.699 15.189C19.2802 16.2001 18.6664 17.1187 17.8926 17.8926C17.1187 18.6664 16.2001 19.2802 15.189 19.699C14.178 20.1178 13.0944 20.3333 12 20.3333Z\"\n                        />\n                      </g>\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  info-outline\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M22 10.5H2V13H22V10.5Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  minus\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  moon\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M12 0C9.62663 0 7.30655 0.703787 5.33316 2.02236C3.35977 3.34094 1.8217 5.21508 0.913451 7.4078C0.00519943 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6688 1.83649 18.807 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0865C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6934 24 14.3734 24 12C23.9966 8.81846 22.7312 5.76821 20.4815 3.51852C18.2318 1.26883 15.1815 0.00344108 12 0V0ZM12 19C11.7033 19 11.4133 18.912 11.1666 18.7472C10.92 18.5824 10.7277 18.3481 10.6142 18.074C10.5007 17.7999 10.4709 17.4983 10.5288 17.2074C10.5867 16.9164 10.7296 16.6491 10.9393 16.4393C11.1491 16.2296 11.4164 16.0867 11.7074 16.0288C11.9983 15.9709 12.2999 16.0006 12.574 16.1142C12.8481 16.2277 13.0824 16.42 13.2472 16.6666C13.412 16.9133 13.5 17.2033 13.5 17.5C13.5 17.8978 13.342 18.2794 13.0607 18.5607C12.7794 18.842 12.3978 19 12 19ZM13.6 12.92C13.4216 12.9979 13.2698 13.1261 13.1632 13.289C13.0566 13.4519 12.9999 13.6423 13 13.837C13 14.1022 12.8946 14.3566 12.7071 14.5441C12.5196 14.7316 12.2652 14.837 12 14.837C11.7348 14.837 11.4804 14.7316 11.2929 14.5441C11.1054 14.3566 11 14.1022 11 13.837C10.9999 13.2532 11.1702 12.682 11.4899 12.1936C11.8096 11.7051 12.2649 11.3205 12.8 11.087C13.1305 10.9427 13.4159 10.7118 13.6259 10.4186C13.8359 10.1255 13.9627 9.78099 13.993 9.42163C14.0232 9.06228 13.9557 8.70144 13.7976 8.37731C13.6396 8.05317 13.3968 7.77781 13.095 7.58037C12.7932 7.38292 12.4437 7.27074 12.0834 7.25571C11.7231 7.24067 11.3654 7.32333 11.0482 7.49495C10.7311 7.66656 10.4662 7.92074 10.2817 8.23057C10.0971 8.54041 9.99982 8.89437 10 9.255C10 9.52021 9.89465 9.77457 9.70711 9.9621C9.51957 10.1496 9.26522 10.255 9 10.255C8.73479 10.255 8.48043 10.1496 8.2929 9.9621C8.10536 9.77457 8 9.52021 8 9.255C7.99999 8.53384 8.19495 7.82608 8.56423 7.20665C8.93352 6.58721 9.4634 6.07913 10.0978 5.73618C10.7322 5.39324 11.4475 5.22817 12.168 5.25847C12.8886 5.28876 13.5875 5.51329 14.1909 5.90828C14.7942 6.30327 15.2796 6.85404 15.5956 7.50229C15.9116 8.15054 16.0464 8.87216 15.9859 9.59077C15.9253 10.3094 15.6716 10.9983 15.2516 11.5845C14.8316 12.1707 14.261 12.6325 13.6 12.921V12.92Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  question\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <g\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      >\n                        <path\n                          d=\"M12 20.75C9.67936 20.75 7.45376 19.8281 5.81282 18.1872C4.17187 16.5462 3.25 14.3206 3.25 12C3.25 9.67936 4.17187 7.45376 5.81282 5.81282C7.45376 4.17187 9.67936 3.25 12 3.25C14.3206 3.25 16.5462 4.17187 18.1872 5.81282C19.8281 7.45376 20.75 9.67936 20.75 12C20.75 14.3206 19.8281 16.5462 18.1872 18.1872C16.5462 19.8281 14.3206 20.75 12 20.75ZM12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 9.34784 20.9464 6.8043 19.0711 4.92893C17.1957 3.05357 14.6522 2 12 2C9.34784 2 6.8043 3.05357 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C6.8043 20.9464 9.34784 22 12 22Z\"\n                        />\n                        <path\n                          d=\"M8.70533 9.34281C8.70369 9.38156 8.70999 9.42024 8.72385 9.45647C8.73771 9.4927 8.75883 9.52571 8.78592 9.55347C8.81301 9.58123 8.84549 9.60316 8.88136 9.6179C8.91724 9.63265 8.95575 9.6399 8.99453 9.63921H9.98453C10.1501 9.63921 10.2821 9.50361 10.3037 9.33921C10.4117 8.55201 10.9517 7.97841 11.9141 7.97841C12.7373 7.97841 13.4909 8.39001 13.4909 9.38001C13.4909 10.142 13.0421 10.4924 12.3329 11.0252C11.5253 11.612 10.8857 12.2972 10.9313 13.4096L10.9349 13.67C10.9362 13.7487 10.9684 13.8238 11.0245 13.879C11.0806 13.9343 11.1562 13.9652 11.2349 13.9652H12.2081C12.2877 13.9652 12.364 13.9336 12.4203 13.8773C12.4765 13.8211 12.5081 13.7448 12.5081 13.6652V13.5392C12.5081 12.6776 12.8357 12.4268 13.7201 11.756C14.4509 11.2004 15.2129 10.5836 15.2129 9.28881C15.2129 7.47561 13.6817 6.59961 12.0053 6.59961C10.4849 6.59961 8.81933 7.30761 8.70533 9.34281ZM10.5737 16.2584C10.5737 16.898 11.0837 17.3708 11.7857 17.3708C12.5165 17.3708 13.0193 16.898 13.0193 16.2584C13.0193 15.596 12.5153 15.1304 11.7845 15.1304C11.0837 15.1304 10.5737 15.596 10.5737 16.2584Z\"\n                        />\n                      </g>\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  question-outline\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M21.9399 20.5624L15.4474 14.0699C16.4549 12.7675 16.9999 11.175 16.9999 9.49997C16.9999 7.49498 16.2174 5.61498 14.8024 4.19749C13.3874 2.78 11.5025 2 9.49997 2C7.49748 2 5.61248 2.7825 4.19749 4.19749C2.78 5.61248 2 7.49498 2 9.49997C2 11.5025 2.7825 13.3874 4.19749 14.8024C5.61248 16.2199 7.49498 16.9999 9.49997 16.9999C11.175 16.9999 12.765 16.4549 14.0674 15.4499L20.5599 21.9399C20.579 21.959 20.6016 21.9741 20.6264 21.9844C20.6513 21.9947 20.678 22 20.7049 22C20.7318 22 20.7585 21.9947 20.7834 21.9844C20.8083 21.9741 20.8309 21.959 20.8499 21.9399L21.9399 20.8524C21.959 20.8334 21.9741 20.8108 21.9844 20.7859C21.9947 20.761 22 20.7343 22 20.7074C22 20.6805 21.9947 20.6538 21.9844 20.6289C21.9741 20.6041 21.959 20.5815 21.9399 20.5624ZM13.46 13.46C12.4 14.5174 10.995 15.0999 9.49997 15.0999C8.00497 15.0999 6.59998 14.5174 5.53998 13.46C4.48249 12.4 3.89999 10.995 3.89999 9.49997C3.89999 8.00497 4.48249 6.59748 5.53998 5.53998C6.59998 4.48249 8.00497 3.89999 9.49997 3.89999C10.995 3.89999 12.4025 4.47999 13.46 5.53998C14.5174 6.59998 15.0999 8.00497 15.0999 9.49997C15.0999 10.995 14.5174 12.4025 13.46 13.46Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  search\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <g\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      >\n                        <path\n                          d=\"M11.9996 7.21094C9.36096 7.21094 7.22266 9.34924 7.22266 11.9879C7.22266 14.6265 9.36096 16.7648 11.9996 16.7648C14.6382 16.7648 16.7765 14.6265 16.7765 11.9879C16.7765 9.34924 14.6382 7.21094 11.9996 7.21094ZM11.9996 14.7715C10.462 14.7715 9.21437 13.5255 9.21437 11.9863C9.21437 10.4487 10.462 9.20265 11.9996 9.20265C13.5356 9.20265 14.7832 10.4487 14.7832 11.9863C14.7832 13.5255 13.5356 14.7715 11.9996 14.7715Z\"\n                        />\n                        <path\n                          d=\"M13.1236 2.46526C13.1236 2.20873 12.9149 2 12.6599 2H11.3422C11.0857 2 10.877 2.20873 10.877 2.46526V5.48789C10.877 5.74283 11.0857 5.95315 11.3422 5.95315H12.6599C12.9149 5.95315 13.1236 5.74283 13.1236 5.48789V2.46526Z\"\n                        />\n                        <path\n                          d=\"M6.05371 4.46121C5.87206 4.28116 5.5757 4.28116 5.39565 4.46121L4.46512 5.39174C4.28507 5.57338 4.28507 5.86975 4.46512 6.0498L6.60183 8.18651C6.78347 8.36816 7.07984 8.36816 7.25989 8.18651L8.19042 7.25598C8.37206 7.07434 8.37206 6.77797 8.19042 6.59792L6.05371 4.46121Z\"\n                        />\n                        <path\n                          d=\"M2.46526 10.875C2.342 10.8754 2.2239 10.9246 2.13674 11.0117C2.04957 11.0989 2.00042 11.217 2 11.3403V12.658C2 12.9145 2.21033 13.1232 2.46686 13.1232H5.48789C5.74442 13.1232 5.95475 12.9145 5.95475 12.658V11.3419C5.95475 11.0869 5.74602 10.8766 5.48948 10.8766H2.46526V10.875Z\"\n                        />\n                        <path\n                          d=\"M4.46316 17.9472C4.28311 18.1288 4.28311 18.4252 4.46316 18.6052L5.39369 19.5358C5.57374 19.7158 5.87011 19.7158 6.05175 19.5358L8.18847 17.3975C8.37011 17.2158 8.37011 16.9194 8.18847 16.7394L7.25794 15.8089C7.07629 15.6288 6.77993 15.6288 6.59987 15.8089L4.46316 17.9472Z\"\n                        />\n                        <path\n                          d=\"M10.877 21.5344C10.877 21.7909 11.0857 21.9997 11.3438 21.9997H12.6599C12.9149 21.9997 13.1236 21.7893 13.1236 21.5344V18.5102C13.1236 18.2552 12.9149 18.0449 12.6583 18.0449L11.3422 18.0465C11.0857 18.0465 10.877 18.2552 10.877 18.5118V21.5344Z\"\n                        />\n                        <path\n                          d=\"M17.9484 19.5342C18.13 19.7142 18.4264 19.7142 18.6064 19.5342L19.537 18.6036C19.6242 18.5164 19.6732 18.398 19.6732 18.2746C19.6732 18.1512 19.6242 18.0329 19.537 17.9456L17.3987 15.8089C17.2186 15.6288 16.9222 15.6288 16.7406 15.8089L15.8101 16.7394C15.6284 16.921 15.6284 17.2174 15.8101 17.3975L17.9484 19.5342Z\"\n                        />\n                        <path\n                          d=\"M21.5348 13.1236C21.658 13.1232 21.7761 13.074 21.8633 12.9869C21.9505 12.8997 21.9996 12.7816 22 12.6583V11.3422C21.9996 11.219 21.9505 11.1009 21.8633 11.0137C21.7761 10.9265 21.658 10.8774 21.5348 10.877H18.5121C18.3889 10.8774 18.2708 10.9265 18.1836 11.0137C18.0964 11.1009 18.0473 11.219 18.0469 11.3422V12.6599C18.0469 12.9149 18.2556 13.1252 18.5121 13.1252L21.5348 13.1236Z\"\n                        />\n                        <path\n                          d=\"M19.5358 6.05175C19.7174 5.87011 19.7174 5.57374 19.5358 5.39369L18.6036 4.46316C18.4236 4.28311 18.1256 4.28311 17.9472 4.46316L15.8089 6.60147C15.6288 6.78152 15.6288 7.07789 15.8089 7.25953L16.7394 8.19006C16.921 8.3717 17.2174 8.3717 17.3975 8.19006L19.5358 6.05175Z\"\n                        />\n                      </g>\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  sun\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M11.9836 0.00267822C8.77744 0.0551662 5.72075 1.36728 3.47427 3.65538C2.35024 4.77447 1.46338 6.10869 0.866705 7.57831C0.270027 9.04793 -0.0242179 10.6228 0.00155827 12.2087C-0.000286057 13.7583 0.303697 15.2931 0.896087 16.7251C1.48848 18.1571 2.35763 19.458 3.45373 20.5535C4.54983 21.6489 5.85133 22.5173 7.28365 23.1089C8.71596 23.7004 10.2509 24.0035 11.8006 24.0007H12.0146C15.2217 23.9677 18.2847 22.6638 20.5316 20.3751C22.7785 18.0864 24.0257 14.9999 23.9996 11.7927C24.0033 10.2243 23.6933 8.6709 23.0879 7.22398C22.4825 5.77706 21.5939 4.4658 20.4744 3.36731C19.3548 2.26882 18.0269 1.40527 16.5688 0.827453C15.1106 0.249636 13.5517 -0.0307856 11.9836 0.00267822ZM10.5007 16.5433C10.4935 16.3473 10.5254 16.1517 10.5947 15.9682C10.6639 15.7846 10.7691 15.6167 10.904 15.4742C11.0389 15.3318 11.2009 15.2177 11.3804 15.1386C11.5599 15.0594 11.7534 15.0169 11.9496 15.0135H11.9766C12.3712 15.0142 12.7501 15.1677 13.034 15.4417C13.3179 15.7157 13.4847 16.089 13.4995 16.4833C13.5068 16.6794 13.4749 16.875 13.4057 17.0586C13.3365 17.2423 13.2314 17.4102 13.0965 17.5527C12.9615 17.6952 12.7995 17.8093 12.6199 17.8884C12.4403 17.9674 12.2468 18.0099 12.0506 18.0132H12.0236C11.6291 18.0119 11.2505 17.8583 10.9667 17.5844C10.6829 17.3105 10.5159 16.9375 10.5007 16.5433ZM11.0007 12.5017V6.50215C11.0007 6.23695 11.106 5.98262 11.2935 5.7951C11.481 5.60758 11.7354 5.50223 12.0006 5.50223C12.2658 5.50223 12.5201 5.60758 12.7076 5.7951C12.8951 5.98262 13.0005 6.23695 13.0005 6.50215V12.5017C13.0005 12.7669 12.8951 13.0212 12.7076 13.2087C12.5201 13.3962 12.2658 13.5016 12.0006 13.5016C11.7354 13.5016 11.481 13.3962 11.2935 13.2087C11.106 13.0212 11.0007 12.7669 11.0007 12.5017Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  warning-1\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <g\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      >\n                        <path\n                          d=\"M13.9193 18.4271C13.8992 17.9392 13.6816 17.4813 13.3178 17.1478C12.9545 16.8148 12.4731 16.631 11.975 16.6304H11.9746H11.945V16.6304L11.9392 16.6305C11.6898 16.6348 11.4434 16.6864 11.2142 16.7827L11.333 17.0655L11.2142 16.7827C10.9851 16.879 10.7773 17.0183 10.6035 17.1931C10.4296 17.368 10.2932 17.5751 10.2031 17.8026C10.113 18.0302 10.0712 18.2732 10.0806 18.5171L10.0807 18.5176C10.1001 19.0055 10.3169 19.4638 10.6802 19.7979C11.043 20.1315 11.5241 20.3162 12.0222 20.3177H12.0233H12.0529V20.3178L12.058 20.3177C12.3081 20.3138 12.5552 20.2624 12.785 20.1661C13.0148 20.0698 13.2232 19.9303 13.3974 19.7549C13.5716 19.5795 13.7081 19.3718 13.7981 19.1436C13.8881 18.9153 13.9295 18.6716 13.9193 18.4271ZM13.9193 18.4271L13.5863 18.4408M13.9193 18.4271C13.9193 18.4271 13.9193 18.4271 13.9193 18.427L13.5863 18.4408M13.5863 18.4408C13.5945 18.6386 13.5611 18.836 13.488 19.0213C13.415 19.2066 13.3037 19.3762 13.1609 19.52C13.018 19.6638 12.8464 19.779 12.6561 19.8587C12.4658 19.9385 12.2607 19.9812 12.0529 19.9844H12.0233C11.6062 19.9831 11.2058 19.8284 10.9059 19.5525C10.6059 19.2767 10.4296 18.9011 10.4137 18.5043C10.4061 18.3069 10.4399 18.1101 10.513 17.9254C10.5862 17.7406 10.6973 17.5715 10.8399 17.4281C10.9824 17.2847 11.1536 17.1698 11.3434 17.09C11.5331 17.0103 11.7376 16.9674 11.945 16.9638H11.9746C12.3916 16.9642 12.7922 17.1182 13.0926 17.3936C13.393 17.6689 13.5699 18.0442 13.5863 18.4408ZM23.4665 20.2125L23.4665 20.2125C23.6068 20.4676 23.6751 20.7517 23.6658 21.0376C23.6566 21.3234 23.57 21.6033 23.4131 21.8501C23.2562 22.097 23.0337 22.3031 22.7658 22.4469C22.4978 22.5907 22.1942 22.6667 21.8847 22.6667H21.8846H2.11538H2.11533C1.80576 22.6667 1.50222 22.5907 1.23422 22.4469C0.96631 22.3031 0.743845 22.097 0.586879 21.8501L0.305565 22.0289L0.586879 21.8501C0.429998 21.6033 0.343434 21.3234 0.334166 21.0376C0.324898 20.7517 0.393165 20.4676 0.533517 20.2125L0.53353 20.2125L10.4192 2.23977C10.5681 1.96911 10.7933 1.74021 11.0721 1.5796C11.3511 1.41893 11.6722 1.33333 12.0005 1.33333C12.3289 1.33333 12.65 1.41893 12.9289 1.5796C13.2078 1.74021 13.4329 1.96911 13.5819 2.23977L23.4665 20.2125ZM11.0224 7.44182C10.7599 7.69176 10.6091 8.03434 10.6091 8.39521V14.4365C10.6091 14.7974 10.7599 15.1399 11.0224 15.3899C11.2843 15.6393 11.6363 15.7767 12 15.7767C12.3637 15.7767 12.7157 15.6393 12.9776 15.3899C13.2401 15.1399 13.3909 14.7974 13.3909 14.4365V8.39521C13.3909 8.03434 13.2401 7.69176 12.9776 7.44182C12.7157 7.19242 12.3637 7.05499 12 7.05499C11.6363 7.05499 11.2843 7.19242 11.0224 7.44182Z\"\n                          stroke=\"currentColor\"\n                          strokeWidth=\"0.666667\"\n                        />\n                      </g>\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  warning-2\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 16 16\"\n                  >\n                    <g>\n                      <path\n                        d=\"M8 16C6.41775 16 4.87103 15.5308 3.55544 14.6518C2.23985 13.7727 1.21447 12.5233 0.608967 11.0615C0.00346627 9.59966 -0.15496 7.99113 0.153721 6.43928C0.462403 4.88743 1.22433 3.46197 2.34315 2.34315C3.46197 1.22433 4.88743 0.462403 6.43928 0.153721C7.99113 -0.15496 9.59966 0.00346627 11.0615 0.608967C12.5233 1.21447 13.7727 2.23985 14.6518 3.55544C15.5308 4.87103 16 6.41775 16 8C16 10.1217 15.1571 12.1566 13.6569 13.6569C12.1566 15.1571 10.1217 16 8 16ZM8 14.4C9.2658 14.4 10.5032 14.0246 11.5556 13.3214C12.6081 12.6182 13.4284 11.6186 13.9128 10.4492C14.3972 9.27973 14.524 7.9929 14.277 6.75142C14.0301 5.50995 13.4205 4.36958 12.5255 3.47452C11.6304 2.57946 10.4901 1.96992 9.24858 1.72298C8.0071 1.47603 6.72028 1.60277 5.55083 2.08717C4.38138 2.57158 3.38184 3.39188 2.6786 4.44435C1.97536 5.49683 1.6 6.7342 1.6 8C1.6 9.69739 2.27429 11.3253 3.47452 12.5255C4.67475 13.7257 6.30262 14.4 8 14.4ZM7.2 10.4H8.8V12H7.2V10.4ZM7.2 4H8.8V8.8H7.2V4Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  warning-outline\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 32.055 32.055\"\n                  >\n                    <g>\n                      <g\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      >\n                        <path\n                          d=\"M3.968,12.061C1.775,12.061,0,13.835,0,16.027c0,2.192,1.773,3.967,3.968,3.967c2.189,0,3.966-1.772,3.966-3.967   C7.934,13.835,6.157,12.061,3.968,12.061z M16.233,12.061c-2.188,0-3.968,1.773-3.968,3.965c0,2.192,1.778,3.967,3.968,3.967   s3.97-1.772,3.97-3.967C20.201,13.835,18.423,12.061,16.233,12.061z M28.09,12.061c-2.192,0-3.969,1.774-3.969,3.967   c0,2.19,1.774,3.965,3.969,3.965c2.188,0,3.965-1.772,3.965-3.965S30.278,12.061,28.09,12.061z\"\n                        />\n                      </g>\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  three-dots\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M18.0621 16.1487C17.2993 16.1487 16.6113 16.4451 16.0895 16.9223L8.93445 12.7495C8.98988 12.523 9.02482 12.2868 9.02482 12.0458C9.02482 11.8048 8.98988 11.5698 8.93445 11.3433L16.0136 7.21147C16.5679 7.73368 17.3006 8.02461 18.0621 8.02482C19.7237 8.02482 21.0745 6.67406 21.0745 5.01241C21.0745 3.35076 19.7237 2 18.0621 2C16.4004 2 15.0496 3.35076 15.0496 5.01241C15.0496 5.2534 15.0846 5.48958 15.14 5.71491L8.06085 9.84673C7.50628 9.32504 6.7738 9.0342 6.01241 9.03338C4.35077 9.03338 3 10.3841 3 12.0458C3 13.7074 4.35077 15.0582 6.01241 15.0582C6.77392 15.058 7.50661 14.7671 8.06085 14.2449L15.2159 18.4176C15.1632 18.633 15.1361 18.8538 15.1352 19.0756C15.1354 19.6541 15.3072 20.2196 15.6288 20.7005C15.9503 21.1814 16.4073 21.5562 16.9418 21.7775C17.4764 21.9988 18.0645 22.0567 18.6319 21.9437C19.1993 21.8308 19.7205 21.5522 20.1296 21.1431C20.5387 20.734 20.8173 20.2128 20.9302 19.6454C21.0432 19.078 20.9853 18.4898 20.764 17.9553C20.5427 17.4208 20.1679 16.9638 19.687 16.6423C19.2061 16.3207 18.6406 16.1489 18.0621 16.1487Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  share\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M12 0C5.376 0 0 5.376 0 12C0 18.624 5.376 24 12 24C18.624 24 24 18.624 24 12C24 5.376 18.624 0 12 0ZM9.6 17.4V6.6L16.8 12L9.6 17.4Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  play\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M1.75143 3.371C2.87321 2.22206 4.39447 1.57662 5.98067 1.57662C7.56686 1.57662 9.08812 2.22206 10.2099 3.371L11.9626 5.16516L13.7153 3.371C14.2671 2.78565 14.9272 2.31876 15.657 1.99756C16.3869 1.67637 17.1718 1.5073 17.9661 1.50023C18.7604 1.49316 19.5481 1.64823 20.2832 1.95638C21.0184 2.26453 21.6863 2.7196 22.2479 3.29504C22.8096 3.87047 23.2538 4.55474 23.5545 5.30793C23.8553 6.06112 24.0067 6.86813 23.9998 7.68189C23.9929 8.49564 23.8279 9.29984 23.5143 10.0476C23.2008 10.7953 22.7451 11.4715 22.1738 12.0369L11.9626 22.5L1.75143 12.0369C0.629991 10.8876 0 9.32904 0 7.70394C0 6.07885 0.629991 4.52029 1.75143 3.371Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  favourite\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"0px\",\n              }\n            }\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Icon Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitFlexDirection\": \"row\",\n          \"flexDirection\": \"row\",\n          \"msFlexDirection\": \"row\",\n        }\n      }\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(16,185,129,1.00)\",\n            \"height\": \"20px\",\n            \"marginTop\": \"2px\",\n            \"width\": \"20px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(16,185,129,1.00)\",\n            \"fontSize\": \"16px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        Order Placed Successfully\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Icon CreateIcon 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <svg\n      role=\"img\"\n      stroke=\"\"\n      style={\n        Object {\n          \"color\": \"rgba(115,115,115,1.00)\",\n          \"height\": \"48px\",\n          \"width\": \"48px\",\n        }\n      }\n      viewBox=\"0 0 36 36\"\n    >\n      <g>\n        <circle\n          cx=\"18\"\n          cy=\"18\"\n          fill=\"#06B6D4\"\n          r=\"17.5\"\n          stroke=\"#0E7490\"\n        />\n        <circle\n          cx=\"18\"\n          cy=\"18\"\n          fill=\"#FFFFFF\"\n          r=\"13.5\"\n          stroke=\"#0E7490\"\n        />\n        <circle\n          cx=\"18\"\n          cy=\"18\"\n          fill=\"#06B6D4\"\n          r=\"9.5\"\n          stroke=\"#0E7490\"\n        />\n        <circle\n          cx=\"18\"\n          cy=\"18\"\n          fill=\"#FFFFFF\"\n          r=\"5.5\"\n          stroke=\"#0E7490\"\n        />\n      </g>\n    </svg>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Icon CustomIcon 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(115,115,115,1.00)\",\n            \"height\": \"40px\",\n            \"width\": \"40px\",\n          }\n        }\n        viewBox=\"0 0 870 873\"\n      >\n        <g>\n          <g\n            fill=\"none\"\n            fillRule=\"nonzero\"\n            stroke=\"none\"\n            strokeWidth={1}\n          >\n            <path\n              d=\"M435 .1C194.8.1.1 194.8.1 435c0 187.3 118.4 346.9 284.4 408.1 3.3-29.9 15-57.2 32.7-79.6 12.1-15.4 26.9-28.5 43.9-38.4 2.1-5 4.6-10.6 7.1-16.6-50.3-26-84.7-78.1-84.7-138.6 0-51.7 25.3-97.7 64-125.9-10.9-20.6-21.3-40.2-31.8-58.2-18.1-31.5-46.7-59.7-68.4-78.9-21 11.9-47.8 4.7-59.7-16.3-11.9-21-4.7-47.8 16.3-59.7 21-11.9 47.4-4.7 59.7 15.9v.4c7.2 12.7 7.2 27.5 1.8 39.8 22.8 19.5 56.8 52.5 77.8 89 9.8 17 19.5 34.7 29.3 53.5 20.3-9.4 42.7-14.8 66.2-14.8 21.3 0 41.6 4.3 60.1 11.9 9.8-18.5 19.5-36.2 28.9-52.8 21-36.2 54.6-68.7 77.4-88.3-5.4-12.3-5.4-26.8 1.8-39.4v-.4c12.3-20.6 38.7-27.9 59.3-15.9 21 11.9 28.2 38.7 16.3 59.3-11.9 21-38.4 28.2-59.3 16.3-21.7 18.8-49.9 47.4-68 78.5-10.1 17.4-20.3 36.5-30.8 56.4 42 27.9 69.8 75.3 69.8 129.5 0 63-36.9 116.9-90.4 141.5.9 2.7 2 4.9 3 7.2 47 22.3 81.1 67.4 87.9 121.1C755.9 776 869.9 618.8 869.9 435 869.9 194.8 675.2.1 435 .1z\"\n              fill=\"#CA0000\"\n            />\n            <path\n              d=\"M284.8 843.3h.1-.1zM284.8 843.3c-.1 0-.3-.1-.4-.1.2 0 .3 0 .4.1z\"\n              fill=\"#FFF\"\n            />\n            <g\n              fill=\"#FFF\"\n              stroke=\"#FFF\"\n              strokeWidth={5}\n            >\n              <path\n                d=\"M485.2 5.8c-20.6-11.9-47-4.7-59.3 15.9v.4c-7.2 12.7-7.2 27.1-1.8 39.4-22.8 19.5-56.4 52.1-77.4 88.3-9.4 16.6-19.2 34.4-28.9 52.8-18.5-7.6-38.7-11.9-60.1-11.9-23.5 0-45.9 5.4-66.2 14.8-9.8-18.8-19.5-36.5-29.3-53.5-21-36.5-55-69.5-77.8-89 5.4-12.3 5.4-27.1-1.8-39.8v-.4C70.3 2.2 43.9-5.1 22.9 6.9 1.9 18.8-5.3 45.6 6.6 66.6c11.9 21 38.7 28.2 59.7 16.3 21.7 19.2 50.3 47.4 68.4 78.9 10.5 18.1 21 37.6 31.8 58.2-38.7 28.2-64 74.2-64 125.9 0 60.4 34.4 112.5 84.7 138.6-2.5 6.2-5.1 11.9-7.2 17-41.6 24.4-70.8 67.4-76.4 117.6 46.9 17.3 97.6 26.8 150.6 26.8 56.2 0 109.9-10.7 159.2-30.1-7.1-52.8-40.5-97.3-86.8-119.8-1.1-2.9-2.5-5.4-3.6-8.7 53.5-24.6 90.4-78.5 90.4-141.5 0-54.3-27.9-101.7-69.8-129.5 10.5-19.9 20.6-39.1 30.8-56.4 18.1-31.1 46.3-59.7 68-78.5 21 11.9 47.4 4.7 59.3-16.3 11.7-20.5 4.5-47.3-16.5-59.3z\"\n                transform=\"translate(181 224)\"\n              />\n            </g>\n          </g>\n        </g>\n      </svg>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Icon Integration with Third Party Icons 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"flexDirection\": \"row\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"width\": \"12px\",\n            }\n          }\n        />\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"width\": \"12px\",\n            }\n          }\n        />\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Icon Sizes 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"24px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n            \"marginBottom\": \"40px\",\n          }\n        }\n      >\n        Sizes\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"justifyContent\": \"center\",\n            \"msFlexPack\": \"center\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots IconButton Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"10px\",\n            \"paddingRight\": \"10px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots IconButton SVGIcon 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"10px\",\n            \"paddingRight\": \"10px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <svg\n          role=\"img\"\n          stroke=\"\"\n          strokeWidth=\"10\"\n          style={\n            Object {\n              \"color\": \"rgba(250,250,250,1.00)\",\n              \"height\": \"40px\",\n              \"width\": \"40px\",\n            }\n          }\n          viewBox=\"0 0 100 100\"\n        >\n          <g>\n            <path\n              d=\"M46.667 90v-.008c-4.922 0-11.021-2.695-13.333-6.66V40c5.521 0 10-4.479 10-10V13.333A3.33 3.33 0 0 1 46.667 10C54.029 10 60 15.97 60 23.333v13.333A3.331 3.331 0 0 0 63.334 40H80c5.52 0 10 4.479 10 10v30h-.004c0 5.52-4.477 9.992-9.996 10H46.667zM10 40h16.666v43.333H10z\"\n              fill=\"currentColor\"\n              stroke=\"\"\n            />\n          </g>\n        </svg>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"10px\",\n            \"paddingRight\": \"10px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <svg\n          role=\"img\"\n          stroke=\"\"\n          strokeWidth=\"10\"\n          style={\n            Object {\n              \"color\": \"rgba(2,132,199,1.00)\",\n              \"height\": \"40px\",\n              \"width\": \"40px\",\n            }\n          }\n          viewBox=\"0 0 100 100\"\n        >\n          <g>\n            <path\n              d=\"M46.667 90v-.008c-4.922 0-11.021-2.695-13.333-6.66V40c5.521 0 10-4.479 10-10V13.333A3.33 3.33 0 0 1 46.667 10C54.029 10 60 15.97 60 23.333v13.333A3.331 3.331 0 0 0 63.334 40H80c5.52 0 10 4.479 10 10v30h-.004c0 5.52-4.477 9.992-9.996 10H46.667zM10 40h16.666v43.333H10z\"\n              fill=\"currentColor\"\n              stroke=\"\"\n            />\n          </g>\n        </svg>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots IconButton Sizes 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"alignItems\": \"center\",\n            \"msFlexAlign\": \"center\",\n          }\n        }\n      >\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"6px\",\n              \"paddingLeft\": \"6px\",\n              \"paddingRight\": \"6px\",\n              \"paddingTop\": \"6px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"8px\",\n              \"paddingRight\": \"8px\",\n              \"paddingTop\": \"8px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"10px\",\n              \"paddingRight\": \"10px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"12px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"12px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots IconButton Variant 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"alignItems\": \"center\",\n            \"msFlexAlign\": \"center\",\n          }\n        }\n      >\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(79,70,229,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderBottomWidth\": \"1px\",\n              \"borderLeftColor\": \"rgba(79,70,229,1.00)\",\n              \"borderLeftWidth\": \"1px\",\n              \"borderRightColor\": \"rgba(79,70,229,1.00)\",\n              \"borderRightWidth\": \"1px\",\n              \"borderTopColor\": \"rgba(79,70,229,1.00)\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"borderTopWidth\": \"1px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"10px\",\n              \"paddingRight\": \"10px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(79,70,229,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"10px\",\n              \"paddingRight\": \"10px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"10px\",\n              \"paddingRight\": \"10px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Image Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        aria-label=\"Alternate Text\"\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitFlexBasis\": \"auto\",\n            \"flexBasis\": \"auto\",\n            \"height\": \"128px\",\n            \"maxWidth\": \"100%\",\n            \"msFlexPreferredSize\": \"auto\",\n            \"overflowX\": \"hidden\",\n            \"overflowY\": \"hidden\",\n            \"width\": \"128px\",\n            \"zIndex\": 0,\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"backgroundPosition\": \"center\",\n              \"backgroundRepeat\": \"no-repeat\",\n              \"backgroundSize\": \"cover\",\n              \"bottom\": \"0px\",\n              \"height\": \"100%\",\n              \"left\": \"0px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"width\": \"100%\",\n              \"zIndex\": -1,\n            }\n          }\n          suppressHydrationWarning={true}\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Image BorderRadius 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        aria-label=\"Alternate Text\"\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitFlexBasis\": \"auto\",\n            \"borderBottomLeftRadius\": \"100px\",\n            \"borderBottomRightRadius\": \"100px\",\n            \"borderTopLeftRadius\": \"100px\",\n            \"borderTopRightRadius\": \"100px\",\n            \"flexBasis\": \"auto\",\n            \"height\": \"150px\",\n            \"maxWidth\": \"100%\",\n            \"msFlexPreferredSize\": \"auto\",\n            \"overflowX\": \"hidden\",\n            \"overflowY\": \"hidden\",\n            \"width\": \"150px\",\n            \"zIndex\": 0,\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"backgroundPosition\": \"center\",\n              \"backgroundRepeat\": \"no-repeat\",\n              \"backgroundSize\": \"cover\",\n              \"bottom\": \"0px\",\n              \"height\": \"100%\",\n              \"left\": \"0px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"width\": \"100%\",\n              \"zIndex\": -1,\n            }\n          }\n          suppressHydrationWarning={true}\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Image FallbackElement 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        aria-label=\"fallback text\"\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitFlexBasis\": \"auto\",\n            \"borderBottomLeftRadius\": \"2px\",\n            \"borderBottomRightRadius\": \"2px\",\n            \"borderTopLeftRadius\": \"2px\",\n            \"borderTopRightRadius\": \"2px\",\n            \"flexBasis\": \"auto\",\n            \"height\": \"150px\",\n            \"maxWidth\": \"100%\",\n            \"msFlexPreferredSize\": \"auto\",\n            \"overflowX\": \"hidden\",\n            \"overflowY\": \"hidden\",\n            \"width\": \"150px\",\n            \"zIndex\": 0,\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"backgroundPosition\": \"center\",\n              \"backgroundRepeat\": \"no-repeat\",\n              \"backgroundSize\": \"cover\",\n              \"bottom\": \"0px\",\n              \"height\": \"100%\",\n              \"left\": \"0px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"width\": \"100%\",\n              \"zIndex\": -1,\n            }\n          }\n          suppressHydrationWarning={true}\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Image FallbackSupport 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        aria-label=\"fallback text\"\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitFlexBasis\": \"auto\",\n            \"borderBottomLeftRadius\": \"100px\",\n            \"borderBottomRightRadius\": \"100px\",\n            \"borderTopLeftRadius\": \"100px\",\n            \"borderTopRightRadius\": \"100px\",\n            \"flexBasis\": \"auto\",\n            \"height\": \"150px\",\n            \"maxWidth\": \"100%\",\n            \"msFlexPreferredSize\": \"auto\",\n            \"overflowX\": \"hidden\",\n            \"overflowY\": \"hidden\",\n            \"width\": \"150px\",\n            \"zIndex\": 0,\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"backgroundPosition\": \"center\",\n              \"backgroundRepeat\": \"no-repeat\",\n              \"backgroundSize\": \"cover\",\n              \"bottom\": \"0px\",\n              \"height\": \"100%\",\n              \"left\": \"0px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"width\": \"100%\",\n              \"zIndex\": -1,\n            }\n          }\n          suppressHydrationWarning={true}\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Image Sizes 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-text-901oao\"\n      dir=\"auto\"\n      style={\n        Object {\n          \"color\": \"rgba(23,23,23,1.00)\",\n          \"fontSize\": \"24px\",\n          \"fontStyle\": \"normal\",\n          \"fontWeight\": \"700\",\n          \"letterSpacing\": \"0px\",\n          \"lineHeight\": \"1.25em\",\n          \"marginBottom\": \"40px\",\n          \"marginTop\": \"12px\",\n          \"textAlign\": \"center\",\n        }\n      }\n    >\n      Image Sizes\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      onScroll={[Function]}\n      onTouchEnd={[Function]}\n      onTouchMove={[Function]}\n      onTouchStart={[Function]}\n      onWheel={[Function]}\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxFlex\": 1,\n          \"WebkitBoxOrient\": \"vertical\",\n          \"WebkitFlexDirection\": \"column\",\n          \"WebkitFlexGrow\": 1,\n          \"WebkitFlexShrink\": 1,\n          \"WebkitOverflowScrolling\": \"touch\",\n          \"WebkitTransform\": \"translateZ(0px)\",\n          \"flexDirection\": \"column\",\n          \"flexGrow\": 1,\n          \"flexShrink\": 1,\n          \"msFlexDirection\": \"column\",\n          \"msFlexNegative\": 1,\n          \"msFlexPositive\": 1,\n          \"overflowX\": \"hidden\",\n          \"overflowY\": \"auto\",\n          \"transform\": \"translateZ(0px)\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"dataSet\": Object {},\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"marginBottom\": \"24px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n            }\n          }\n        >\n          <div\n            aria-label=\"Alternate Text xs\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"40px\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"40px\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"8px\",\n              }\n            }\n          />\n          <div\n            aria-label=\"Alternate Text sm\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"64px\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"64px\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"8px\",\n              }\n            }\n          />\n          <div\n            aria-label=\"Alternate Text md\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"80px\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"80px\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"8px\",\n              }\n            }\n          />\n          <div\n            aria-label=\"Alternate Text lg\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"96px\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"96px\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"8px\",\n              }\n            }\n          />\n          <div\n            aria-label=\"Alternate Text xl\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"128px\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"128px\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"8px\",\n              }\n            }\n          />\n          <div\n            aria-label=\"Alternate Text 2xl\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"256px\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"256px\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Image WithRef 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        aria-label=\"Alternate Text\"\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitFlexBasis\": \"auto\",\n            \"flexBasis\": \"auto\",\n            \"height\": \"128px\",\n            \"maxWidth\": \"100%\",\n            \"msFlexPreferredSize\": \"auto\",\n            \"overflowX\": \"hidden\",\n            \"overflowY\": \"hidden\",\n            \"width\": \"128px\",\n            \"zIndex\": 0,\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"backgroundPosition\": \"center\",\n              \"backgroundRepeat\": \"no-repeat\",\n              \"backgroundSize\": \"cover\",\n              \"bottom\": \"0px\",\n              \"height\": \"100%\",\n              \"left\": \"0px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"width\": \"100%\",\n              \"zIndex\": -1,\n            }\n          }\n          suppressHydrationWarning={true}\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Input Addons 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"flexDirection\": \"row\",\n            \"msFlexDirection\": \"row\",\n            \"width\": \"70%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"0px\",\n              \"borderBottomWidth\": \"1px\",\n              \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n              \"borderLeftWidth\": \"1px\",\n              \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n              \"borderRightWidth\": \"0px\",\n              \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"0px\",\n              \"borderTopWidth\": \"1px\",\n              \"justifyContent\": \"center\",\n              \"marginRight\": \"0px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"8px\",\n              \"paddingRight\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            https://\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n              \"borderBottomLeftRadius\": \"0px\",\n              \"borderBottomRightRadius\": \"0px\",\n              \"borderBottomWidth\": \"1px\",\n              \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n              \"borderLeftWidth\": \"1px\",\n              \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n              \"borderRightWidth\": \"1px\",\n              \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n              \"borderTopLeftRadius\": \"0px\",\n              \"borderTopRightRadius\": \"0px\",\n              \"borderTopWidth\": \"1px\",\n              \"flexDirection\": \"row\",\n              \"marginLeft\": \"0px\",\n              \"marginRight\": \"0px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"overflowX\": \"auto\",\n              \"overflowY\": \"auto\",\n              \"width\": \"70%\",\n            }\n          }\n        >\n          <input\n            autoCapitalize=\"sentences\"\n            autoComplete=\"on\"\n            autoCorrect=\"on\"\n            className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n            dir=\"auto\"\n            onBlur={[Function]}\n            onChange={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onSelect={[Function]}\n            placeholder=\"nativebase\"\n            readOnly={false}\n            spellCheck={true}\n            style={\n              Object {\n                \"WebkitFlex\": 1,\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"0px\",\n                \"borderBottomRightRadius\": \"0px\",\n                \"borderTopLeftRadius\": \"0px\",\n                \"borderTopRightRadius\": \"0px\",\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"cursor\": \"auto\",\n                \"flex\": 1,\n                \"fontSize\": \"12px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"height\": \"100%\",\n                \"lineHeight\": \"1.5em\",\n                \"msFlex\": \"1 1 0%\",\n                \"outline\": \"none\",\n                \"outlineWidth\": \"0px\",\n                \"paddingBottom\": \"8px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"8px\",\n                \"width\": \"100%\",\n              }\n            }\n            type=\"text\"\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n              \"borderBottomLeftRadius\": \"0px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderBottomWidth\": \"1px\",\n              \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n              \"borderLeftWidth\": \"0px\",\n              \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n              \"borderRightWidth\": \"1px\",\n              \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n              \"borderTopLeftRadius\": \"0px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"borderTopWidth\": \"1px\",\n              \"justifyContent\": \"center\",\n              \"marginLeft\": \"0px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"8px\",\n              \"paddingRight\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            .io\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Input Elements 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"overflowX\": \"auto\",\n            \"overflowY\": \"auto\",\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n        />\n        <input\n          autoCapitalize=\"sentences\"\n          autoComplete=\"on\"\n          autoCorrect=\"on\"\n          className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n          dir=\"auto\"\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onSelect={[Function]}\n          placeholder=\"Name\"\n          readOnly={false}\n          spellCheck={true}\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"cursor\": \"auto\",\n              \"flex\": 1,\n              \"fontSize\": \"12px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"lineHeight\": \"1.5em\",\n              \"msFlex\": \"1 1 0%\",\n              \"outline\": \"none\",\n              \"outlineWidth\": \"0px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"text\"\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"overflowX\": \"auto\",\n            \"overflowY\": \"auto\",\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <input\n          autoCapitalize=\"sentences\"\n          autoComplete=\"on\"\n          autoCorrect=\"on\"\n          className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n          dir=\"auto\"\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onSelect={[Function]}\n          placeholder=\"Password\"\n          readOnly={false}\n          spellCheck={true}\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"cursor\": \"auto\",\n              \"flex\": 1,\n              \"fontSize\": \"12px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"lineHeight\": \"1.5em\",\n              \"msFlex\": \"1 1 0%\",\n              \"outline\": \"none\",\n              \"outlineWidth\": \"0px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"password\"\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          style={\n            Object {\n              \"cursor\": \"pointer\",\n              \"msTouchAction\": \"manipulation\",\n              \"touchAction\": \"manipulation\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Input Form Controlled 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"maxWidth\": \"300px\",\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <label\n          className=\"css-view-1dbjc4n\"\n          id=\"field-125-label\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"start\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"flex-start\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"marginBottom\": \"4px\",\n              \"marginTop\": \"4px\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"start\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(115,115,115,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            Password\n          </div>\n        </label>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderBottomWidth\": \"1px\",\n              \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n              \"borderLeftWidth\": \"1px\",\n              \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n              \"borderRightWidth\": \"1px\",\n              \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"borderTopWidth\": \"1px\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"overflowX\": \"auto\",\n              \"overflowY\": \"auto\",\n            }\n          }\n        >\n          <input\n            aria-invalid={true}\n            autoCapitalize=\"sentences\"\n            autoComplete=\"on\"\n            autoCorrect=\"on\"\n            className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n            dir=\"auto\"\n            disabled={false}\n            id=\"field-125-input\"\n            onBlur={[Function]}\n            onChange={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onSelect={[Function]}\n            placeholder=\"Enter password\"\n            readOnly={false}\n            spellCheck={true}\n            style={\n              Object {\n                \"WebkitFlex\": 1,\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"cursor\": \"auto\",\n                \"flex\": 1,\n                \"fontSize\": \"12px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"height\": \"100%\",\n                \"lineHeight\": \"1.5em\",\n                \"msFlex\": \"1 1 0%\",\n                \"outline\": \"none\",\n                \"outlineWidth\": \"0px\",\n                \"paddingBottom\": \"8px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"8px\",\n                \"width\": \"100%\",\n              }\n            }\n            type=\"text\"\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          id=\"field-125\"\n          style={\n            Object {\n              \"marginTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <svg\n              role=\"img\"\n              stroke=\"\"\n              style={\n                Object {\n                  \"color\": \"rgba(220,38,38,1.00)\",\n                  \"fontSize\": \"12px\",\n                  \"height\": \"12px\",\n                  \"width\": \"12px\",\n                }\n              }\n              viewBox=\"0 0 16 16\"\n            >\n              <g>\n                <path\n                  d=\"M8 16C6.41775 16 4.87103 15.5308 3.55544 14.6518C2.23985 13.7727 1.21447 12.5233 0.608967 11.0615C0.00346627 9.59966 -0.15496 7.99113 0.153721 6.43928C0.462403 4.88743 1.22433 3.46197 2.34315 2.34315C3.46197 1.22433 4.88743 0.462403 6.43928 0.153721C7.99113 -0.15496 9.59966 0.00346627 11.0615 0.608967C12.5233 1.21447 13.7727 2.23985 14.6518 3.55544C15.5308 4.87103 16 6.41775 16 8C16 10.1217 15.1571 12.1566 13.6569 13.6569C12.1566 15.1571 10.1217 16 8 16ZM8 14.4C9.2658 14.4 10.5032 14.0246 11.5556 13.3214C12.6081 12.6182 13.4284 11.6186 13.9128 10.4492C14.3972 9.27973 14.524 7.9929 14.277 6.75142C14.0301 5.50995 13.4205 4.36958 12.5255 3.47452C11.6304 2.57946 10.4901 1.96992 9.24858 1.72298C8.0071 1.47603 6.72028 1.60277 5.55083 2.08717C4.38138 2.57158 3.38184 3.39188 2.6786 4.44435C1.97536 5.49683 1.6 6.7342 1.6 8C1.6 9.69739 2.27429 11.3253 3.47452 12.5255C4.67475 13.7257 6.30262 14.4 8 14.4ZM7.2 10.4H8.8V12H7.2V10.4ZM7.2 4H8.8V8.8H7.2V4Z\"\n                  fill=\"currentColor\"\n                  stroke=\"\"\n                />\n              </g>\n            </svg>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"4px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(220,38,38,1.00)\",\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Try different from previous passwords.\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Input Password 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"overflowX\": \"auto\",\n            \"overflowY\": \"auto\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <input\n          autoCapitalize=\"sentences\"\n          autoComplete=\"on\"\n          autoCorrect=\"on\"\n          className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n          dir=\"auto\"\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onSelect={[Function]}\n          placeholder=\"Password\"\n          readOnly={false}\n          spellCheck={true}\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"cursor\": \"auto\",\n              \"flex\": 1,\n              \"fontSize\": \"12px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"lineHeight\": \"1.5em\",\n              \"msFlex\": \"1 1 0%\",\n              \"outline\": \"none\",\n              \"outlineWidth\": \"0px\",\n              \"paddingBottom\": \"0px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"0px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"password\"\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"0px\",\n              \"borderBottomRightRadius\": \"0px\",\n              \"borderTopLeftRadius\": \"0px\",\n              \"borderTopRightRadius\": \"0px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"height\": \"100%\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"8px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n              \"width\": \"16.666%\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"10px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Show\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Input Primary 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"marginLeft\": \"12px\",\n            \"marginRight\": \"12px\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"overflowX\": \"auto\",\n            \"overflowY\": \"auto\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <input\n          autoCapitalize=\"sentences\"\n          autoComplete=\"on\"\n          autoCorrect=\"on\"\n          className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n          dir=\"auto\"\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onSelect={[Function]}\n          placeholder=\"Input\"\n          readOnly={false}\n          spellCheck={true}\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"cursor\": \"auto\",\n              \"flex\": 1,\n              \"fontSize\": \"12px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"lineHeight\": \"1.5em\",\n              \"msFlex\": \"1 1 0%\",\n              \"outline\": \"none\",\n              \"outlineWidth\": \"0px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"text\"\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Input Size  1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"marginLeft\": \"auto\",\n          \"marginRight\": \"auto\",\n          \"maxWidth\": \"300px\",\n          \"width\": \"75%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"overflowX\": \"auto\",\n            \"overflowY\": \"auto\",\n          }\n        }\n      >\n        <input\n          autoCapitalize=\"sentences\"\n          autoComplete=\"on\"\n          autoCorrect=\"on\"\n          className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n          dir=\"auto\"\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onSelect={[Function]}\n          placeholder=\"xs Input\"\n          readOnly={false}\n          spellCheck={true}\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"cursor\": \"auto\",\n              \"flex\": 1,\n              \"fontSize\": \"10px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"lineHeight\": \"1.5em\",\n              \"msFlex\": \"1 1 0%\",\n              \"outline\": \"none\",\n              \"outlineWidth\": \"0px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"text\"\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"overflowX\": \"auto\",\n            \"overflowY\": \"auto\",\n          }\n        }\n      >\n        <input\n          autoCapitalize=\"sentences\"\n          autoComplete=\"on\"\n          autoCorrect=\"on\"\n          className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n          dir=\"auto\"\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onSelect={[Function]}\n          placeholder=\"sm Input\"\n          readOnly={false}\n          spellCheck={true}\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"cursor\": \"auto\",\n              \"flex\": 1,\n              \"fontSize\": \"12px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"lineHeight\": \"1.5em\",\n              \"msFlex\": \"1 1 0%\",\n              \"outline\": \"none\",\n              \"outlineWidth\": \"0px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"text\"\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"overflowX\": \"auto\",\n            \"overflowY\": \"auto\",\n          }\n        }\n      >\n        <input\n          autoCapitalize=\"sentences\"\n          autoComplete=\"on\"\n          autoCorrect=\"on\"\n          className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n          dir=\"auto\"\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onSelect={[Function]}\n          placeholder=\"md Input\"\n          readOnly={false}\n          spellCheck={true}\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"cursor\": \"auto\",\n              \"flex\": 1,\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"lineHeight\": \"1.5em\",\n              \"msFlex\": \"1 1 0%\",\n              \"outline\": \"none\",\n              \"outlineWidth\": \"0px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"text\"\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"overflowX\": \"auto\",\n            \"overflowY\": \"auto\",\n          }\n        }\n      >\n        <input\n          autoCapitalize=\"sentences\"\n          autoComplete=\"on\"\n          autoCorrect=\"on\"\n          className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n          dir=\"auto\"\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onSelect={[Function]}\n          placeholder=\"lg Input\"\n          readOnly={false}\n          spellCheck={true}\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"cursor\": \"auto\",\n              \"flex\": 1,\n              \"fontSize\": \"16px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"lineHeight\": \"1.5em\",\n              \"msFlex\": \"1 1 0%\",\n              \"outline\": \"none\",\n              \"outlineWidth\": \"0px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"text\"\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"overflowX\": \"auto\",\n            \"overflowY\": \"auto\",\n          }\n        }\n      >\n        <input\n          autoCapitalize=\"sentences\"\n          autoComplete=\"on\"\n          autoCorrect=\"on\"\n          className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n          dir=\"auto\"\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onSelect={[Function]}\n          placeholder=\"xl Input\"\n          readOnly={false}\n          spellCheck={true}\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"cursor\": \"auto\",\n              \"flex\": 1,\n              \"fontSize\": \"18px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"lineHeight\": \"1.5em\",\n              \"msFlex\": \"1 1 0%\",\n              \"outline\": \"none\",\n              \"outlineWidth\": \"0px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"text\"\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"overflowX\": \"auto\",\n            \"overflowY\": \"auto\",\n          }\n        }\n      >\n        <input\n          autoCapitalize=\"sentences\"\n          autoComplete=\"on\"\n          autoCorrect=\"on\"\n          className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n          dir=\"auto\"\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onSelect={[Function]}\n          placeholder=\"2xl Input\"\n          readOnly={false}\n          spellCheck={true}\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"cursor\": \"auto\",\n              \"flex\": 1,\n              \"fontSize\": \"20px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"lineHeight\": \"1.5em\",\n              \"msFlex\": \"1 1 0%\",\n              \"outline\": \"none\",\n              \"outlineWidth\": \"0px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"text\"\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Input Value Controlled 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"overflowX\": \"auto\",\n            \"overflowY\": \"auto\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <input\n          autoCapitalize=\"sentences\"\n          autoComplete=\"on\"\n          autoCorrect=\"on\"\n          className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n          dir=\"auto\"\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onSelect={[Function]}\n          placeholder=\"Value Controlled Input\"\n          readOnly={false}\n          spellCheck={true}\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"cursor\": \"auto\",\n              \"flex\": 1,\n              \"fontSize\": \"12px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"lineHeight\": \"1.5em\",\n              \"msFlex\": \"1 1 0%\",\n              \"outline\": \"none\",\n              \"outlineWidth\": \"0px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"text\"\n          value=\"\"\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Input Variants 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"marginLeft\": \"auto\",\n          \"marginRight\": \"auto\",\n          \"maxWidth\": \"300px\",\n          \"width\": \"75%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"overflowX\": \"auto\",\n            \"overflowY\": \"auto\",\n          }\n        }\n      >\n        <input\n          autoCapitalize=\"sentences\"\n          autoComplete=\"on\"\n          autoCorrect=\"on\"\n          className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n          dir=\"auto\"\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onSelect={[Function]}\n          placeholder=\"Outline\"\n          readOnly={false}\n          spellCheck={true}\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"cursor\": \"auto\",\n              \"flex\": 1,\n              \"fontSize\": \"12px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"lineHeight\": \"1.5em\",\n              \"msFlex\": \"1 1 0%\",\n              \"outline\": \"none\",\n              \"outlineWidth\": \"0px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"text\"\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(245,245,245,1.00)\",\n            \"borderBottomColor\": \"rgba(245,245,245,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(245,245,245,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(245,245,245,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(245,245,245,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"overflowX\": \"auto\",\n            \"overflowY\": \"auto\",\n          }\n        }\n      >\n        <input\n          autoCapitalize=\"sentences\"\n          autoComplete=\"on\"\n          autoCorrect=\"on\"\n          className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n          dir=\"auto\"\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onSelect={[Function]}\n          placeholder=\"Filled\"\n          readOnly={false}\n          spellCheck={true}\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"cursor\": \"auto\",\n              \"flex\": 1,\n              \"fontSize\": \"12px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"lineHeight\": \"1.5em\",\n              \"msFlex\": \"1 1 0%\",\n              \"outline\": \"none\",\n              \"outlineWidth\": \"0px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"text\"\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"0px\",\n            \"borderBottomRightRadius\": \"0px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"0px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"0px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"0px\",\n            \"borderTopRightRadius\": \"0px\",\n            \"borderTopWidth\": \"0px\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"overflowX\": \"auto\",\n            \"overflowY\": \"auto\",\n          }\n        }\n      >\n        <input\n          autoCapitalize=\"sentences\"\n          autoComplete=\"on\"\n          autoCorrect=\"on\"\n          className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n          dir=\"auto\"\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onSelect={[Function]}\n          placeholder=\"Underlined\"\n          readOnly={false}\n          spellCheck={true}\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"cursor\": \"auto\",\n              \"flex\": 1,\n              \"fontSize\": \"12px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"lineHeight\": \"1.5em\",\n              \"msFlex\": \"1 1 0%\",\n              \"outline\": \"none\",\n              \"outlineWidth\": \"0px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"0px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"text\"\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"0px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"0px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"0px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"0px\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"overflowX\": \"auto\",\n            \"overflowY\": \"auto\",\n          }\n        }\n      >\n        <input\n          autoCapitalize=\"sentences\"\n          autoComplete=\"on\"\n          autoCorrect=\"on\"\n          className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n          dir=\"auto\"\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onSelect={[Function]}\n          placeholder=\"Unstyled\"\n          readOnly={false}\n          spellCheck={true}\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"cursor\": \"auto\",\n              \"flex\": 1,\n              \"fontSize\": \"12px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"lineHeight\": \"1.5em\",\n              \"msFlex\": \"1 1 0%\",\n              \"outline\": \"none\",\n              \"outlineWidth\": \"0px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"text\"\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"overflowX\": \"auto\",\n            \"overflowY\": \"auto\",\n          }\n        }\n      >\n        <input\n          autoCapitalize=\"sentences\"\n          autoComplete=\"on\"\n          autoCorrect=\"on\"\n          className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n          dir=\"auto\"\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onSelect={[Function]}\n          placeholder=\"Round\"\n          readOnly={false}\n          spellCheck={true}\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"cursor\": \"auto\",\n              \"flex\": 1,\n              \"fontSize\": \"12px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"lineHeight\": \"1.5em\",\n              \"msFlex\": \"1 1 0%\",\n              \"outline\": \"none\",\n              \"outlineWidth\": \"0px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"text\"\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots KeyboardAvoidingView Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"height\": \"400px\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"display\": \"flex\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxPack\": \"end\",\n              \"WebkitFlex\": 1,\n              \"WebkitJustifyContent\": \"flex-end\",\n              \"flex\": 1,\n              \"justifyContent\": \"flex-end\",\n              \"maxWidth\": \"300px\",\n              \"msFlex\": \"1 1 0%\",\n              \"msFlexPack\": \"end\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"24px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n                \"marginBottom\": \"12px\",\n              }\n            }\n          >\n            Forgot Password\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(163,163,163,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            Not to worry! Enter email address associated with your account and we’ll send a link to reset your password.\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"marginBottom\": \"16px\",\n                \"marginTop\": \"40px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"overflowX\": \"auto\",\n                \"overflowY\": \"auto\",\n              }\n            }\n          >\n            <input\n              autoCapitalize=\"sentences\"\n              autoComplete=\"on\"\n              autoCorrect=\"on\"\n              className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n              dir=\"auto\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onSelect={[Function]}\n              placeholder=\"Email Address\"\n              readOnly={false}\n              spellCheck={true}\n              style={\n                Object {\n                  \"WebkitFlex\": 1,\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"cursor\": \"auto\",\n                  \"flex\": 1,\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"100%\",\n                  \"lineHeight\": \"1.5em\",\n                  \"msFlex\": \"1 1 0%\",\n                  \"outline\": \"none\",\n                  \"outlineWidth\": \"0px\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"width\": \"100%\",\n                }\n              }\n              type=\"text\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": \"16px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Proceed\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Link Composite Link Example 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <a\n        className=\"css-reset-4rbku5 css-cursor-18t94o4 css-view-1dbjc4n\"\n        href=\"https://nativebase.io\"\n        role=\"link\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"flexDirection\": \"row\",\n            \"height\": \"auto\",\n            \"msFlexDirection\": \"row\",\n            \"width\": \"auto\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(243,244,246,1.00)\",\n              \"borderBottomColor\": \"rgba(209,213,219,1.00)\",\n              \"borderBottomLeftRadius\": \"8px\",\n              \"borderBottomRightRadius\": \"8px\",\n              \"borderBottomWidth\": \"1px\",\n              \"borderLeftColor\": \"rgba(209,213,219,1.00)\",\n              \"borderLeftWidth\": \"1px\",\n              \"borderRightColor\": \"rgba(209,213,219,1.00)\",\n              \"borderRightWidth\": \"1px\",\n              \"borderTopColor\": \"rgba(209,213,219,1.00)\",\n              \"borderTopLeftRadius\": \"8px\",\n              \"borderTopRightRadius\": \"8px\",\n              \"borderTopWidth\": \"1px\",\n              \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n              \"paddingBottom\": \"20px\",\n              \"paddingLeft\": \"20px\",\n              \"paddingRight\": \"20px\",\n              \"paddingTop\": \"20px\",\n              \"width\": \"256px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(0,93,180,1.00)\",\n                  \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"paddingBottom\": \"2px\",\n                  \"paddingLeft\": \"8px\",\n                  \"paddingRight\": \"8px\",\n                  \"paddingTop\": \"2px\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(255,255,255,1.00)\",\n                      \"fontSize\": \"12px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"500\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Open Source\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxFlex\": 1,\n                  \"WebkitFlexGrow\": 1,\n                  \"flexGrow\": 1,\n                  \"msFlexPositive\": 1,\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(31,41,55,1.00)\",\n                  \"fontSize\": \"10px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              2020\n            </div>\n          </div>\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(31,41,55,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginTop\": \"12px\",\n              }\n            }\n          >\n            NativeBase v3\n          </div>\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(55,65,81,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginTop\": \"8px\",\n              }\n            }\n          >\n            NativeBase is a component library that enables devs to build universal design systems.\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"vertical\",\n                \"WebkitFlexDirection\": \"column\",\n                \"display\": \"flex\",\n                \"flexDirection\": \"column\",\n                \"msFlexDirection\": \"column\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(0,93,180,1.00)\",\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"500\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginTop\": \"8px\",\n                }\n              }\n            >\n              Read More\n            </div>\n          </div>\n        </div>\n      </a>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Link Custom Function onPress Link 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"backgroundColor\": \"rgba(99,102,241,1.00)\",\n            \"height\": \"100px\",\n            \"width\": \"100px\",\n          }\n        }\n      />\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onClick={[Function]}\n        role=\"link\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"flexDirection\": \"row\",\n            \"height\": \"auto\",\n            \"marginTop\": \"32px\",\n            \"msFlexDirection\": \"row\",\n            \"width\": \"auto\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(34,211,238,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(255,255,255,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            Change Color\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Link Default Link 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <a\n        className=\"css-reset-4rbku5 css-cursor-18t94o4 css-view-1dbjc4n\"\n        href=\"https://nativebase.io\"\n        role=\"link\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"flexDirection\": \"row\",\n            \"height\": \"auto\",\n            \"msFlexDirection\": \"row\",\n            \"width\": \"auto\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n              \"textDecoration\": \"underline\",\n            }\n          }\n        >\n          Click here to open documentation.\n        </div>\n      </a>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Link External Link 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n            \"marginLeft\": \"64px\",\n            \"marginRight\": \"64px\",\n          }\n        }\n      >\n        NativeBase is a component library that enables devs to build universal design systems. It is built on top of React Native, allowing you to develop apps for Android, iOS and the Web.\n         \n        <a\n          className=\"css-reset-4rbku5 css-cursor-18t94o4 css-view-1dbjc4n\"\n          href=\"https://nativebase.io\"\n          role=\"link\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"display\": \"inline-flex\",\n              \"flexDirection\": \"row\",\n              \"height\": \"auto\",\n              \"marginBottom\": \"-8px\",\n              \"marginTop\": \"-2px\",\n              \"msFlexDirection\": \"row\",\n              \"width\": \"auto\",\n            }\n          }\n        >\n          <span\n            className=\"css-text-901oao css-textHasAncestor-16my406\"\n            style={\n              Object {\n                \"color\": \"rgba(96,165,250,1.00)\",\n                \"textDecoration\": \"underline\",\n              }\n            }\n          >\n            Read More\n          </span>\n        </a>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Link Underline Link 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <a\n        className=\"css-reset-4rbku5 css-cursor-18t94o4 css-view-1dbjc4n\"\n        href=\"https://nativebase.io\"\n        role=\"link\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"flexDirection\": \"row\",\n            \"height\": \"auto\",\n            \"msFlexDirection\": \"row\",\n            \"width\": \"auto\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(6,182,212,1.00)\",\n              \"fontSize\": \"20px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n              \"textDecoration\": \"underline\",\n            }\n          }\n        >\n          Click me to open NativeBase website.\n        </div>\n      </a>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots List Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"width\": \"80%\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"24px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n          }\n        }\n      >\n        Topics (Plain List)\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n            \"borderTopWidth\": \"1px\",\n            \"marginBottom\": \"8px\",\n            \"marginTop\": \"8px\",\n            \"paddingBottom\": \"8px\",\n            \"paddingTop\": \"8px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"List-Item-1\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n              \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n              \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopWidth\": \"0px\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"paddingLeft\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlex\": 1,\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n                \"msFlex\": \"1 1 0%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Education\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          aria-label=\"List-Item-2\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n              \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n              \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"paddingLeft\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlex\": 1,\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n                \"msFlex\": \"1 1 0%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Health\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          aria-label=\"List-Item-3\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n              \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n              \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"paddingLeft\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlex\": 1,\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n                \"msFlex\": \"1 1 0%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Office\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          aria-label=\"List-Item-4\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n              \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n              \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"paddingLeft\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlex\": 1,\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n                \"msFlex\": \"1 1 0%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Sports\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots List List with Icon 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n          \"borderBottomWidth\": \"1px\",\n          \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n          \"borderLeftWidth\": \"1px\",\n          \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n          \"borderRightWidth\": \"1px\",\n          \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n          \"borderTopWidth\": \"1px\",\n          \"marginBottom\": \"8px\",\n          \"marginTop\": \"8px\",\n          \"paddingBottom\": \"8px\",\n          \"paddingTop\": \"8px\",\n          \"width\": \"320px\",\n        }\n      }\n    >\n      <div\n        aria-label=\"List-Item-1\"\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n            \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n            \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n            \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n            \"borderTopWidth\": \"0px\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"paddingBottom\": \"8px\",\n            \"paddingTop\": \"8px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"paddingLeft\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlex\": 1,\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flex\": 1,\n              \"flexDirection\": \"row\",\n              \"msFlex\": \"1 1 0%\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            Inbox\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n      <div\n        aria-label=\"List-Item-2\"\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n            \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n            \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n            \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"paddingBottom\": \"8px\",\n            \"paddingTop\": \"8px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"paddingLeft\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlex\": 1,\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flex\": 1,\n              \"flexDirection\": \"row\",\n              \"msFlex\": \"1 1 0%\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            Drafts\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n      <div\n        aria-label=\"List-Item-3\"\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n            \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n            \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n            \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"paddingBottom\": \"8px\",\n            \"paddingTop\": \"8px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"paddingLeft\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlex\": 1,\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flex\": 1,\n              \"flexDirection\": \"row\",\n              \"msFlex\": \"1 1 0%\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            Graphs and stats\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n      <div\n        aria-label=\"List-Item-4\"\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n            \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n            \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n            \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"paddingBottom\": \"8px\",\n            \"paddingTop\": \"8px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"paddingLeft\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlex\": 1,\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flex\": 1,\n              \"flexDirection\": \"row\",\n              \"msFlex\": \"1 1 0%\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            Attachments\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots List OrderedList 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"width\": \"80%\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"24px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n          }\n        }\n      >\n        Bill-#187 (Ordered List)\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n            \"borderTopWidth\": \"1px\",\n            \"marginBottom\": \"8px\",\n            \"marginTop\": \"8px\",\n            \"paddingBottom\": \"8px\",\n            \"paddingTop\": \"8px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"List-Item-1\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n              \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n              \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopWidth\": \"0px\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"paddingLeft\": \"8px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"marginRight\": \"8px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                1.\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlex\": 1,\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n                \"msFlex\": \"1 1 0%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Fruit Juice x 2\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          aria-label=\"List-Item-2\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n              \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n              \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"paddingLeft\": \"8px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"marginRight\": \"8px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                2.\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlex\": 1,\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n                \"msFlex\": \"1 1 0%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Cheddar cheese - 200g\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          aria-label=\"List-Item-3\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n              \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n              \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"paddingLeft\": \"8px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"marginRight\": \"8px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                3.\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlex\": 1,\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n                \"msFlex\": \"1 1 0%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Milk 1L x 2\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          aria-label=\"List-Item-4\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n              \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n              \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"paddingLeft\": \"8px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"marginRight\": \"8px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                4.\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlex\": 1,\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n                \"msFlex\": \"1 1 0%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Brown Bread - 400g\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots List Pressable List Items 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"width\": \"80%\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"backgroundColor\": \"rgba(34,211,238,1.00)\",\n            \"color\": \"rgba(255,255,255,1.00)\",\n            \"fontSize\": \"24px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n            \"paddingBottom\": \"16px\",\n            \"paddingLeft\": \"8px\",\n            \"paddingRight\": \"8px\",\n            \"paddingTop\": \"16px\",\n          }\n        }\n      >\n        Default Theme Color (Pressable List Items)\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n            \"borderTopWidth\": \"1px\",\n            \"marginBottom\": \"8px\",\n            \"marginTop\": \"8px\",\n            \"paddingBottom\": \"0px\",\n            \"paddingTop\": \"0px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"List-Item-1\"\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(34,211,238,1.00)\",\n              \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n              \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n              \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopWidth\": \"0px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msTouchAction\": \"manipulation\",\n              \"paddingBottom\": \"16px\",\n              \"paddingTop\": \"16px\",\n              \"touchAction\": \"manipulation\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"paddingLeft\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              primary.400\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n        />\n        <div\n          aria-label=\"List-Item-2\"\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(244,114,182,1.00)\",\n              \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n              \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n              \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msTouchAction\": \"manipulation\",\n              \"paddingBottom\": \"16px\",\n              \"paddingTop\": \"16px\",\n              \"touchAction\": \"manipulation\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"paddingLeft\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              secondary.400\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n        />\n        <div\n          aria-label=\"List-Item-3\"\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(52,211,153,1.00)\",\n              \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n              \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n              \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msTouchAction\": \"manipulation\",\n              \"paddingBottom\": \"16px\",\n              \"paddingTop\": \"16px\",\n              \"touchAction\": \"manipulation\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"paddingLeft\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              emerald.400\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n        />\n        <div\n          aria-label=\"List-Item-4\"\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(96,165,250,1.00)\",\n              \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n              \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n              \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msTouchAction\": \"manipulation\",\n              \"paddingBottom\": \"16px\",\n              \"paddingTop\": \"16px\",\n              \"touchAction\": \"manipulation\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"paddingLeft\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              blue.400\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots List StylingList 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"width\": \"80%\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"24px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n          }\n        }\n      >\n        Styled List\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n            \"borderTopWidth\": \"1px\",\n            \"marginBottom\": \"8px\",\n            \"marginTop\": \"8px\",\n            \"paddingBottom\": \"8px\",\n            \"paddingTop\": \"8px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"List-Item-11\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n              \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n              \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopWidth\": \"0px\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"paddingLeft\": \"8px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"marginRight\": \"8px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(217,119,6,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                11.\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlex\": 1,\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n                \"msFlex\": \"1 1 0%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(217,119,6,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Ocean's \n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          aria-label=\"List-Item-12\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n              \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n              \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"paddingLeft\": \"8px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"marginRight\": \"8px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(254,202,202,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                12.\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlex\": 1,\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n                \"msFlex\": \"1 1 0%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(254,202,202,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Ocean's \n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          aria-label=\"List-Item-13\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n              \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n              \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"paddingLeft\": \"8px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"marginRight\": \"8px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(45,212,191,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                13.\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlex\": 1,\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n                \"msFlex\": \"1 1 0%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(45,212,191,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Ocean's\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots List UnorderedList 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"width\": \"80%\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"24px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n          }\n        }\n      >\n        My Todos (Unordered List)\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n            \"borderTopWidth\": \"1px\",\n            \"marginBottom\": \"8px\",\n            \"marginTop\": \"8px\",\n            \"paddingBottom\": \"8px\",\n            \"paddingTop\": \"8px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"List-Item-1\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n              \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n              \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopWidth\": \"0px\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"paddingLeft\": \"8px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitTransform\": \"scale(1.5)\",\n                  \"marginRight\": \"8px\",\n                  \"transform\": \"scale(1.5)\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                •\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlex\": 1,\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n                \"msFlex\": \"1 1 0%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Get groceries by Tomorrow.\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          aria-label=\"List-Item-2\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n              \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n              \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"paddingLeft\": \"8px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitTransform\": \"scale(1.5)\",\n                  \"marginRight\": \"8px\",\n                  \"transform\": \"scale(1.5)\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                •\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlex\": 1,\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n                \"msFlex\": \"1 1 0%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Book appointment with the Doc.\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          aria-label=\"List-Item-3\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n              \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n              \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"paddingLeft\": \"8px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitTransform\": \"scale(1.5)\",\n                  \"marginRight\": \"8px\",\n                  \"transform\": \"scale(1.5)\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                •\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlex\": 1,\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n                \"msFlex\": \"1 1 0%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Bill payment - Electricity.\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          aria-label=\"List-Item-4\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n              \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n              \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"paddingLeft\": \"8px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitTransform\": \"scale(1.5)\",\n                  \"marginRight\": \"8px\",\n                  \"transform\": \"scale(1.5)\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                •\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlex\": 1,\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n                \"msFlex\": \"1 1 0%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Pay Telephone Bill\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots List VirtualizedList  1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      onScroll={[Function]}\n      onTouchEnd={[Function]}\n      onTouchMove={[Function]}\n      onTouchStart={[Function]}\n      onWheel={[Function]}\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxFlex\": 1,\n          \"WebkitBoxOrient\": \"vertical\",\n          \"WebkitFlexDirection\": \"column\",\n          \"WebkitFlexGrow\": 1,\n          \"WebkitFlexShrink\": 1,\n          \"WebkitOverflowScrolling\": \"touch\",\n          \"WebkitTransform\": \"translateZ(0px)\",\n          \"flexDirection\": \"column\",\n          \"flexGrow\": 1,\n          \"flexShrink\": 1,\n          \"msFlexDirection\": \"column\",\n          \"msFlexNegative\": 1,\n          \"msFlexPositive\": 1,\n          \"overflowX\": \"hidden\",\n          \"overflowY\": \"auto\",\n          \"transform\": \"translateZ(0px)\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            aria-label=\"List-Item-NaN\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(167,243,208,1.00)\",\n                \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n                \"borderBottomLeftRadius\": \"6px\",\n                \"borderBottomRightRadius\": \"6px\",\n                \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n                \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n                \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n                \"borderTopLeftRadius\": \"6px\",\n                \"borderTopRightRadius\": \"6px\",\n                \"borderTopWidth\": \"0px\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": \"8px\",\n                \"marginTop\": \"8px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"paddingBottom\": \"8px\",\n                \"paddingLeft\": \"16px\",\n                \"paddingRight\": \"16px\",\n                \"paddingTop\": \"8px\",\n                \"width\": \"128px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"paddingLeft\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlex\": 1,\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flex\": 1,\n                  \"flexDirection\": \"row\",\n                  \"msFlex\": \"1 1 0%\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"24px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Item 1\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            aria-label=\"List-Item-NaN\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(167,243,208,1.00)\",\n                \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n                \"borderBottomLeftRadius\": \"6px\",\n                \"borderBottomRightRadius\": \"6px\",\n                \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n                \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n                \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n                \"borderTopLeftRadius\": \"6px\",\n                \"borderTopRightRadius\": \"6px\",\n                \"borderTopWidth\": \"0px\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": \"8px\",\n                \"marginTop\": \"8px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"paddingBottom\": \"8px\",\n                \"paddingLeft\": \"16px\",\n                \"paddingRight\": \"16px\",\n                \"paddingTop\": \"8px\",\n                \"width\": \"128px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"paddingLeft\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlex\": 1,\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flex\": 1,\n                  \"flexDirection\": \"row\",\n                  \"msFlex\": \"1 1 0%\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"24px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Item 2\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            aria-label=\"List-Item-NaN\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(167,243,208,1.00)\",\n                \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n                \"borderBottomLeftRadius\": \"6px\",\n                \"borderBottomRightRadius\": \"6px\",\n                \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n                \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n                \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n                \"borderTopLeftRadius\": \"6px\",\n                \"borderTopRightRadius\": \"6px\",\n                \"borderTopWidth\": \"0px\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": \"8px\",\n                \"marginTop\": \"8px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"paddingBottom\": \"8px\",\n                \"paddingLeft\": \"16px\",\n                \"paddingRight\": \"16px\",\n                \"paddingTop\": \"8px\",\n                \"width\": \"128px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"paddingLeft\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlex\": 1,\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flex\": 1,\n                  \"flexDirection\": \"row\",\n                  \"msFlex\": \"1 1 0%\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"24px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Item 3\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            aria-label=\"List-Item-NaN\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(167,243,208,1.00)\",\n                \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n                \"borderBottomLeftRadius\": \"6px\",\n                \"borderBottomRightRadius\": \"6px\",\n                \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n                \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n                \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n                \"borderTopLeftRadius\": \"6px\",\n                \"borderTopRightRadius\": \"6px\",\n                \"borderTopWidth\": \"0px\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": \"8px\",\n                \"marginTop\": \"8px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"paddingBottom\": \"8px\",\n                \"paddingLeft\": \"16px\",\n                \"paddingRight\": \"16px\",\n                \"paddingTop\": \"8px\",\n                \"width\": \"128px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"paddingLeft\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlex\": 1,\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flex\": 1,\n                  \"flexDirection\": \"row\",\n                  \"msFlex\": \"1 1 0%\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"24px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Item 4\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"0px\",\n            }\n          }\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Menu Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"width\": \"90%\",\n        }\n      }\n    >\n      <div\n        aria-haspopup=\"menu\"\n        aria-label=\"More options menu\"\n        className=\"css-view-1dbjc4n\"\n        id=\"139\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onKeyDownCapture={[Function]}\n        style={\n          Object {\n            \"cursor\": \"pointer\",\n            \"msTouchAction\": \"manipulation\",\n            \"touchAction\": \"manipulation\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <svg\n          role=\"img\"\n          stroke=\"\"\n          style={\n            Object {\n              \"color\": \"rgba(115,115,115,1.00)\",\n              \"height\": \"16px\",\n              \"width\": \"16px\",\n            }\n          }\n          viewBox=\"0 0 24 24\"\n        >\n          <g>\n            <path\n              d=\"M22 5H2V7.47961H22V5ZM22 10.4795H2V12.9591H22V10.4795ZM2 15.959H22V18.4386H2V15.959Z\"\n              fill=\"currentColor\"\n              stroke=\"\"\n            />\n          </g>\n        </svg>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Menu Group 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"width\": \"90%\",\n        }\n      }\n    >\n      <div\n        aria-haspopup=\"menu\"\n        className=\"css-view-1dbjc4n\"\n        id=\"141\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onKeyDownCapture={[Function]}\n        style={\n          Object {\n            \"cursor\": \"pointer\",\n            \"msTouchAction\": \"manipulation\",\n            \"touchAction\": \"manipulation\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <svg\n          role=\"img\"\n          stroke=\"\"\n          style={\n            Object {\n              \"color\": \"rgba(115,115,115,1.00)\",\n              \"height\": \"16px\",\n              \"width\": \"16px\",\n            }\n          }\n          viewBox=\"0 0 24 24\"\n        >\n          <g>\n            <path\n              d=\"M22 5H2V7.47961H22V5ZM22 10.4795H2V12.9591H22V10.4795ZM2 15.959H22V18.4386H2V15.959Z\"\n              fill=\"currentColor\"\n              stroke=\"\"\n            />\n          </g>\n        </svg>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Menu Menu positions 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignSelf\": \"flex-start\",\n          \"alignSelf\": \"flex-start\",\n          \"msFlexItemAlign\": \"start\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        aria-haspopup=\"menu\"\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        id=\"145\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onKeyDownCapture={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitAlignSelf\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"alignSelf\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexItemAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"msGridRowAlign\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Menu\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"24px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"marginLeft\": \"0px\",\n            \"marginRight\": \"0px\",\n          }\n        }\n      >\n        <select\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          onTouchStart={[Function]}\n          style={\n            Object {\n              \"MozAppearance\": \"none\",\n              \"WebkitAppearance\": \"none\",\n              \"appearance\": \"none\",\n              \"height\": \"100%\",\n              \"opacity\": 0,\n              \"position\": \"absolute\",\n              \"width\": \"100%\",\n              \"zIndex\": 1,\n            }\n          }\n          value=\"auto\"\n        >\n          <option\n            disabled={true}\n            value=\"__NativebasePlaceholder__\"\n          />\n          <option\n            value=\"auto\"\n          >\n            auto\n          </option>\n          <option\n            value=\"top left\"\n          >\n            Top Left\n          </option>\n          <option\n            value=\"top\"\n          >\n            Top\n          </option>\n          <option\n            value=\"top right\"\n          >\n            Top Right\n          </option>\n          <option\n            value=\"right top\"\n          >\n            Right Top\n          </option>\n          <option\n            value=\"right\"\n          >\n            Right\n          </option>\n          <option\n            value=\"right bottom\"\n          >\n            Right Bottom\n          </option>\n          <option\n            value=\"bottom left\"\n          >\n            Bottom Left\n          </option>\n          <option\n            value=\"bottom\"\n          >\n            Bottom\n          </option>\n          <option\n            value=\"bottom right\"\n          >\n            Bottom Right\n          </option>\n          <option\n            value=\"left top\"\n          >\n            Left Top\n          </option>\n          <option\n            value=\"left\"\n          >\n            Left\n          </option>\n          <option\n            value=\"left bottom\"\n          >\n            Left Bottom\n          </option>\n        </select>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderBottomWidth\": \"1px\",\n              \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n              \"borderLeftWidth\": \"1px\",\n              \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n              \"borderRightWidth\": \"1px\",\n              \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"borderTopWidth\": \"1px\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"overflowX\": \"auto\",\n              \"overflowY\": \"auto\",\n            }\n          }\n        >\n          <input\n            aria-hidden={true}\n            autoCapitalize=\"sentences\"\n            autoComplete=\"on\"\n            autoCorrect=\"on\"\n            className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y r-pointerEvents-633pao\"\n            dir=\"auto\"\n            onBlur={[Function]}\n            onChange={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onSelect={[Function]}\n            readOnly={true}\n            spellCheck={true}\n            style={\n              Object {\n                \"WebkitFlex\": 1,\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"cursor\": \"auto\",\n                \"flex\": 1,\n                \"fontSize\": \"12px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"height\": \"100%\",\n                \"lineHeight\": \"1.5em\",\n                \"msFlex\": \"1 1 0%\",\n                \"outline\": \"none\",\n                \"outlineWidth\": \"0px\",\n                \"paddingBottom\": \"8px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"8px\",\n                \"width\": \"100%\",\n              }\n            }\n            tabIndex=\"-1\"\n            type=\"text\"\n            value=\"auto\"\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <svg\n            role=\"img\"\n            stroke=\"\"\n            style={\n              Object {\n                \"color\": \"rgba(115,115,115,1.00)\",\n                \"height\": \"24px\",\n                \"marginRight\": \"12px\",\n                \"paddingBottom\": \"4px\",\n                \"paddingLeft\": \"4px\",\n                \"paddingRight\": \"4px\",\n                \"paddingTop\": \"4px\",\n                \"width\": \"24px\",\n              }\n            }\n            viewBox=\"0 0 24 24\"\n          >\n            <g>\n              <path\n                d=\"M20.2286 6L11.9973 14.3785L3.76862 6.00268L2 7.80293L12 18L22 7.80293L20.2286 6Z\"\n                fill=\"currentColor\"\n                stroke=\"\"\n              />\n            </g>\n          </svg>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Menu MenuOptionsGroup 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"width\": \"90%\",\n        }\n      }\n    >\n      <div\n        aria-haspopup=\"menu\"\n        className=\"css-view-1dbjc4n\"\n        id=\"143\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onKeyDownCapture={[Function]}\n        style={\n          Object {\n            \"cursor\": \"pointer\",\n            \"msTouchAction\": \"manipulation\",\n            \"touchAction\": \"manipulation\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <svg\n          role=\"img\"\n          stroke=\"\"\n          style={\n            Object {\n              \"color\": \"rgba(115,115,115,1.00)\",\n              \"height\": \"16px\",\n              \"width\": \"16px\",\n            }\n          }\n          viewBox=\"0 0 24 24\"\n        >\n          <g>\n            <path\n              d=\"M22 5H2V7.47961H22V5ZM22 10.4795H2V12.9591H22V10.4795ZM2 15.959H22V18.4386H2V15.959Z\"\n              fill=\"currentColor\"\n              stroke=\"\"\n            />\n          </g>\n        </svg>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Modal Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Button\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Modal Modal Custom Backdrop 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Button\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Modal Modal Placement 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"vertical\",\n          \"WebkitFlexDirection\": \"column\",\n          \"flexDirection\": \"column\",\n          \"msFlexDirection\": \"column\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Top\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Bottom\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Center\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Left\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Right\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Modal Modal Ref Examples 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Open Modal\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"overflowX\": \"auto\",\n            \"overflowY\": \"auto\",\n            \"width\": \"128px\",\n          }\n        }\n      >\n        <input\n          autoCapitalize=\"sentences\"\n          autoComplete=\"on\"\n          autoCorrect=\"on\"\n          className=\"css-textinput-11aywtz r-placeholderTextColor-klosnv\"\n          dir=\"auto\"\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onSelect={[Function]}\n          placeholder=\"Enter the OTP\"\n          readOnly={false}\n          spellCheck={true}\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"cursor\": \"auto\",\n              \"flex\": 1,\n              \"fontSize\": \"12px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"lineHeight\": \"1.5em\",\n              \"msFlex\": \"1 1 0%\",\n              \"outline\": \"none\",\n              \"outlineWidth\": \"0px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"text\"\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Modal Modal Size Examples 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Open xs Modal\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Open sm Modal\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Open md Modal\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Open lg Modal\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Open xl Modal\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Open full Modal\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Modal Modal with Keyboard Avoid view 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n            \"width\": \"104px\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Open Modal\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"32px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n            \"textAlign\": \"center\",\n          }\n        }\n      >\n        Open modal and focus on the input element to see the effect.\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Modal Multiple modal 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Button\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Mode Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"bottom\": \"0px\",\n      \"left\": \"0px\",\n      \"position\": \"absolute\",\n      \"right\": \"0px\",\n      \"top\": \"0px\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitFlex\": 1,\n        \"flex\": 1,\n        \"msFlex\": \"1 1 0%\",\n      }\n    }\n  >\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"rgba(228,228,231,1.00)\",\n          \"display\": \"flex\",\n          \"height\": \"100%\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(252,165,165,1.00)\",\n            \"fontSize\": \"24px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n          }\n        }\n      >\n        I'm a Heading\n      </div>\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(37,99,235,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Change mode\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"flexDirection\": \"row\",\n            \"marginTop\": \"12px\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n              \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n              \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n              \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"height\": \"48px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"position\": \"relative\",\n              \"width\": \"48px\",\n            }\n          }\n        >\n          <div\n            aria-label=\"--\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"100%\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"width\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n              \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n              \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n              \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"height\": \"48px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"position\": \"relative\",\n              \"width\": \"48px\",\n            }\n          }\n        >\n          <div\n            aria-label=\"--\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"100%\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Mode DefaultMode 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"bottom\": \"0px\",\n      \"left\": \"0px\",\n      \"position\": \"absolute\",\n      \"right\": \"0px\",\n      \"top\": \"0px\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitFlex\": 1,\n        \"flex\": 1,\n        \"msFlex\": \"1 1 0%\",\n      }\n    }\n  >\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"rgba(39,39,42,1.00)\",\n          \"display\": \"flex\",\n          \"height\": \"100%\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(250,250,250,1.00)\",\n            \"fontSize\": \"24px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n          }\n        }\n      >\n        I'm a Heading\n      </div>\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(220,38,38,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Change mode\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"flexDirection\": \"row\",\n            \"marginTop\": \"12px\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n              \"borderBottomColor\": \"rgba(255,255,255,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderLeftColor\": \"rgba(255,255,255,1.00)\",\n              \"borderRightColor\": \"rgba(255,255,255,1.00)\",\n              \"borderTopColor\": \"rgba(255,255,255,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"height\": \"48px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"position\": \"relative\",\n              \"width\": \"48px\",\n            }\n          }\n        >\n          <div\n            aria-label=\"--\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"100%\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"width\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n              \"borderBottomColor\": \"rgba(255,255,255,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderLeftColor\": \"rgba(255,255,255,1.00)\",\n              \"borderRightColor\": \"rgba(255,255,255,1.00)\",\n              \"borderTopColor\": \"rgba(255,255,255,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"height\": \"48px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"position\": \"relative\",\n              \"width\": \"48px\",\n            }\n          }\n        >\n          <div\n            aria-label=\"--\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"100%\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Mode Persistence 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"bottom\": \"0px\",\n      \"left\": \"0px\",\n      \"position\": \"absolute\",\n      \"right\": \"0px\",\n      \"top\": \"0px\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitFlex\": 1,\n        \"flex\": 1,\n        \"msFlex\": \"1 1 0%\",\n      }\n    }\n  >\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"rgba(228,228,231,1.00)\",\n          \"display\": \"flex\",\n          \"height\": \"100%\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"24px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n          }\n        }\n      >\n        I'm a Heading\n      </div>\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(37,99,235,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Change mode\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"flexDirection\": \"row\",\n            \"marginTop\": \"12px\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n              \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n              \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n              \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"height\": \"48px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"position\": \"relative\",\n              \"width\": \"48px\",\n            }\n          }\n        >\n          <div\n            aria-label=\"--\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"100%\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"width\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n              \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n              \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n              \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"height\": \"48px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"position\": \"relative\",\n              \"width\": \"48px\",\n            }\n          }\n        >\n          <div\n            aria-label=\"--\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"100%\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Popover Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          aria-expanded={false}\n          aria-haspopup={true}\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(225,29,72,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Delete Customer\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Popover Focus on Open 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          aria-expanded={false}\n          aria-haspopup={true}\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Edit Info\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Popover Popover positions 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignSelf\": \"flex-start\",\n            \"alignSelf\": \"flex-start\",\n            \"msFlexItemAlign\": \"start\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            aria-expanded={false}\n            aria-haspopup={true}\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitAlignSelf\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"rgba(225,29,72,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexItemAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msGridRowAlign\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Delete Customer\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"24px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"marginLeft\": \"0px\",\n              \"marginRight\": \"0px\",\n            }\n          }\n        >\n          <select\n            onBlur={[Function]}\n            onChange={[Function]}\n            onFocus={[Function]}\n            onMouseEnter={[Function]}\n            onMouseLeave={[Function]}\n            onTouchStart={[Function]}\n            style={\n              Object {\n                \"MozAppearance\": \"none\",\n                \"WebkitAppearance\": \"none\",\n                \"appearance\": \"none\",\n                \"height\": \"100%\",\n                \"opacity\": 0,\n                \"position\": \"absolute\",\n                \"width\": \"100%\",\n                \"zIndex\": 1,\n              }\n            }\n            value=\"auto\"\n          >\n            <option\n              disabled={true}\n              value=\"__NativebasePlaceholder__\"\n            />\n            <option\n              value=\"auto\"\n            >\n              auto\n            </option>\n            <option\n              value=\"top left\"\n            >\n              Top Left\n            </option>\n            <option\n              value=\"top\"\n            >\n              Top\n            </option>\n            <option\n              value=\"top right\"\n            >\n              Top Right\n            </option>\n            <option\n              value=\"right top\"\n            >\n              Right Top\n            </option>\n            <option\n              value=\"right\"\n            >\n              Right\n            </option>\n            <option\n              value=\"right bottom\"\n            >\n              Right Bottom\n            </option>\n            <option\n              value=\"bottom left\"\n            >\n              Bottom Left\n            </option>\n            <option\n              value=\"bottom\"\n            >\n              Bottom\n            </option>\n            <option\n              value=\"bottom right\"\n            >\n              Bottom Right\n            </option>\n            <option\n              value=\"left top\"\n            >\n              Left Top\n            </option>\n            <option\n              value=\"left\"\n            >\n              Left\n            </option>\n            <option\n              value=\"left bottom\"\n            >\n              Left Bottom\n            </option>\n          </select>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"overflowX\": \"auto\",\n                \"overflowY\": \"auto\",\n              }\n            }\n          >\n            <input\n              aria-hidden={true}\n              autoCapitalize=\"sentences\"\n              autoComplete=\"on\"\n              autoCorrect=\"on\"\n              className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y r-pointerEvents-633pao\"\n              dir=\"auto\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onSelect={[Function]}\n              readOnly={true}\n              spellCheck={true}\n              style={\n                Object {\n                  \"WebkitFlex\": 1,\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"cursor\": \"auto\",\n                  \"flex\": 1,\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"100%\",\n                  \"lineHeight\": \"1.5em\",\n                  \"msFlex\": \"1 1 0%\",\n                  \"outline\": \"none\",\n                  \"outlineWidth\": \"0px\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"width\": \"100%\",\n                }\n              }\n              tabIndex=\"-1\"\n              type=\"text\"\n              value=\"auto\"\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <svg\n              role=\"img\"\n              stroke=\"\"\n              style={\n                Object {\n                  \"color\": \"rgba(115,115,115,1.00)\",\n                  \"height\": \"24px\",\n                  \"marginRight\": \"12px\",\n                  \"paddingBottom\": \"4px\",\n                  \"paddingLeft\": \"4px\",\n                  \"paddingRight\": \"4px\",\n                  \"paddingTop\": \"4px\",\n                  \"width\": \"24px\",\n                }\n              }\n              viewBox=\"0 0 24 24\"\n            >\n              <g>\n                <path\n                  d=\"M20.2286 6L11.9973 14.3785L3.76862 6.00268L2 7.80293L12 18L22 7.80293L20.2286 6Z\"\n                  fill=\"currentColor\"\n                  stroke=\"\"\n                />\n              </g>\n            </svg>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Pressable Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        style={\n          Object {\n            \"backgroundColor\": \"rgba(243,244,246,1.00)\",\n            \"borderBottomColor\": \"rgba(209,213,219,1.00)\",\n            \"borderBottomLeftRadius\": \"8px\",\n            \"borderBottomRightRadius\": \"8px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(209,213,219,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(209,213,219,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(209,213,219,1.00)\",\n            \"borderTopLeftRadius\": \"8px\",\n            \"borderTopRightRadius\": \"8px\",\n            \"borderTopWidth\": \"1px\",\n            \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n            \"cursor\": \"pointer\",\n            \"maxWidth\": \"384px\",\n            \"msTouchAction\": \"manipulation\",\n            \"overflowX\": \"hidden\",\n            \"overflowY\": \"hidden\",\n            \"paddingBottom\": \"20px\",\n            \"paddingLeft\": \"20px\",\n            \"paddingRight\": \"20px\",\n            \"paddingTop\": \"20px\",\n            \"touchAction\": \"manipulation\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(0,93,180,1.00)\",\n                  \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"paddingBottom\": \"2px\",\n                  \"paddingLeft\": \"8px\",\n                  \"paddingRight\": \"8px\",\n                  \"paddingTop\": \"2px\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(255,255,255,1.00)\",\n                      \"fontSize\": \"12px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"500\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Business\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxFlex\": 1,\n                  \"WebkitFlexGrow\": 1,\n                  \"flexGrow\": 1,\n                  \"msFlexPositive\": 1,\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(31,41,55,1.00)\",\n                  \"fontSize\": \"10px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              1 month ago\n            </div>\n          </div>\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(31,41,55,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginTop\": \"12px\",\n              }\n            }\n          >\n            Marketing License\n          </div>\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(55,65,81,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginTop\": \"8px\",\n              }\n            }\n          >\n            Unlock powerfull time-saving tools for creating email delivery and collecting marketing data\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"vertical\",\n                \"WebkitFlexDirection\": \"column\",\n                \"display\": \"flex\",\n                \"flexDirection\": \"column\",\n                \"msFlexDirection\": \"column\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(0,93,180,1.00)\",\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"500\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginTop\": \"8px\",\n                }\n              }\n            >\n              Read More\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Pressable Events 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        style={\n          Object {\n            \"cursor\": \"pointer\",\n            \"maxWidth\": \"384px\",\n            \"msTouchAction\": \"manipulation\",\n            \"touchAction\": \"manipulation\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitTransform\": \"scale(1)\",\n              \"backgroundColor\": \"rgba(243,244,246,1.00)\",\n              \"borderBottomColor\": \"rgba(209,213,219,1.00)\",\n              \"borderBottomLeftRadius\": \"8px\",\n              \"borderBottomRightRadius\": \"8px\",\n              \"borderBottomWidth\": \"1px\",\n              \"borderLeftColor\": \"rgba(209,213,219,1.00)\",\n              \"borderLeftWidth\": \"1px\",\n              \"borderRightColor\": \"rgba(209,213,219,1.00)\",\n              \"borderRightWidth\": \"1px\",\n              \"borderTopColor\": \"rgba(209,213,219,1.00)\",\n              \"borderTopLeftRadius\": \"8px\",\n              \"borderTopRightRadius\": \"8px\",\n              \"borderTopWidth\": \"1px\",\n              \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n              \"paddingBottom\": \"20px\",\n              \"paddingLeft\": \"20px\",\n              \"paddingRight\": \"20px\",\n              \"paddingTop\": \"20px\",\n              \"transform\": \"scale(1)\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(0,93,180,1.00)\",\n                  \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"paddingBottom\": \"2px\",\n                  \"paddingLeft\": \"8px\",\n                  \"paddingRight\": \"8px\",\n                  \"paddingTop\": \"2px\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(255,255,255,1.00)\",\n                      \"fontSize\": \"12px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"500\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Business\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxFlex\": 1,\n                  \"WebkitFlexGrow\": 1,\n                  \"flexGrow\": 1,\n                  \"msFlexPositive\": 1,\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(31,41,55,1.00)\",\n                  \"fontSize\": \"10px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              1 month ago\n            </div>\n          </div>\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(31,41,55,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginTop\": \"12px\",\n              }\n            }\n          >\n            Marketing License\n          </div>\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(55,65,81,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginTop\": \"8px\",\n              }\n            }\n          >\n            Unlock powerfull time-saving tools for creating email delivery and collecting marketing data\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"vertical\",\n                \"WebkitFlexDirection\": \"column\",\n                \"display\": \"flex\",\n                \"flexDirection\": \"column\",\n                \"msFlexDirection\": \"column\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(0,93,180,1.00)\",\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"500\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginTop\": \"8px\",\n                }\n              }\n            >\n              Read More\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Progress ColorSchemes 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"maxWidth\": \"400px\",\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"marginLeft\": \"16px\",\n                \"marginRight\": \"16px\",\n              }\n            }\n          >\n            <div\n              aria-valuemax={100}\n              aria-valuemin={0}\n              aria-valuenow={35}\n              className=\"css-view-1dbjc4n\"\n              role=\"progressbar\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"8px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"boxShadow\": \"0px 1px 1px rgba(0,0,0,0.18)\",\n                    \"display\": \"flex\",\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"35%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"16px\",\n                }\n              }\n            />\n            <div\n              aria-valuemax={100}\n              aria-valuemin={0}\n              aria-valuenow={45}\n              className=\"css-view-1dbjc4n\"\n              role=\"progressbar\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"8px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(219,39,119,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"boxShadow\": \"0px 1px 1px rgba(0,0,0,0.18)\",\n                    \"display\": \"flex\",\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"45%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"16px\",\n                }\n              }\n            />\n            <div\n              aria-valuemax={100}\n              aria-valuemin={0}\n              aria-valuenow={55.00000000000001}\n              className=\"css-view-1dbjc4n\"\n              role=\"progressbar\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"8px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(5,150,105,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"boxShadow\": \"0px 1px 1px rgba(0,0,0,0.18)\",\n                    \"display\": \"flex\",\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"55.00000000000001%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"16px\",\n                }\n              }\n            />\n            <div\n              aria-valuemax={100}\n              aria-valuemin={0}\n              aria-valuenow={65}\n              className=\"css-view-1dbjc4n\"\n              role=\"progressbar\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"8px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(234,88,12,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"boxShadow\": \"0px 1px 1px rgba(0,0,0,0.18)\",\n                    \"display\": \"flex\",\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"65%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"16px\",\n                }\n              }\n            />\n            <div\n              aria-valuemax={100}\n              aria-valuemin={0}\n              aria-valuenow={75}\n              className=\"css-view-1dbjc4n\"\n              role=\"progressbar\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"8px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(87,83,78,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"boxShadow\": \"0px 1px 1px rgba(0,0,0,0.18)\",\n                    \"display\": \"flex\",\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"75%\",\n                  }\n                }\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Progress Composition 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"width\": \"90%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"display\": \"flex\",\n            \"justifyContent\": \"center\",\n            \"marginBottom\": \"40px\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"20px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.25em\",\n            }\n          }\n        >\n          Progress Composition\n        </div>\n      </div>\n      <div\n        aria-valuemax={100}\n        aria-valuemin={0}\n        aria-valuenow={45}\n        className=\"css-view-1dbjc4n\"\n        role=\"progressbar\"\n        style={\n          Object {\n            \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"height\": \"20px\",\n            \"marginBottom\": \"16px\",\n            \"overflowX\": \"hidden\",\n            \"overflowY\": \"hidden\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"boxShadow\": \"0px 1px 1px rgba(0,0,0,0.18)\",\n              \"display\": \"flex\",\n              \"height\": \"100%\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"width\": \"45%\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(255,255,255,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            45%\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"display\": \"flex\",\n            \"flexDirection\": \"row\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          aria-valuemax={100}\n          aria-valuemin={0}\n          aria-valuenow={75}\n          className=\"css-view-1dbjc4n\"\n          role=\"progressbar\"\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"flex\": 1,\n              \"height\": \"20px\",\n              \"marginBottom\": \"16px\",\n              \"msFlex\": \"1 1 0%\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"boxShadow\": \"0px 1px 1px rgba(0,0,0,0.18)\",\n                \"display\": \"flex\",\n                \"height\": \"100%\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"width\": \"75%\",\n              }\n            }\n          />\n        </div>\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n              \"marginLeft\": \"8px\",\n            }\n          }\n        >\n          75%\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Progress CustomBgColor 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"maxWidth\": \"400px\",\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <div\n          aria-valuemax={100}\n          aria-valuemin={0}\n          aria-valuenow={75}\n          className=\"css-view-1dbjc4n\"\n          role=\"progressbar\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(243,244,246,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"height\": \"8px\",\n              \"marginLeft\": \"16px\",\n              \"marginRight\": \"16px\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(132,204,22,1.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"boxShadow\": \"0px 1px 1px rgba(0,0,0,0.18)\",\n                \"display\": \"flex\",\n                \"height\": \"100%\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"width\": \"75%\",\n              }\n            }\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Progress Default Progress Bar 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"maxWidth\": \"400px\",\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <div\n          aria-valuemax={100}\n          aria-valuemin={0}\n          aria-valuenow={45}\n          className=\"css-view-1dbjc4n\"\n          role=\"progressbar\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"height\": \"8px\",\n              \"marginLeft\": \"16px\",\n              \"marginRight\": \"16px\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"boxShadow\": \"0px 1px 1px rgba(0,0,0,0.18)\",\n                \"display\": \"flex\",\n                \"height\": \"100%\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"width\": \"45%\",\n              }\n            }\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Progress Flat 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"maxWidth\": \"400px\",\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <div\n          aria-valuemax={100}\n          aria-valuemin={0}\n          aria-valuenow={65}\n          className=\"css-view-1dbjc4n\"\n          role=\"progressbar\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n              \"borderBottomLeftRadius\": \"0px\",\n              \"borderBottomRightRadius\": \"0px\",\n              \"borderTopLeftRadius\": \"0px\",\n              \"borderTopRightRadius\": \"0px\",\n              \"height\": \"8px\",\n              \"marginLeft\": \"16px\",\n              \"marginRight\": \"16px\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"boxShadow\": \"0px 1px 1px rgba(0,0,0,0.18)\",\n                \"display\": \"flex\",\n                \"height\": \"100%\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"width\": \"65%\",\n              }\n            }\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Progress Sizes 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"maxWidth\": \"400px\",\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"marginLeft\": \"16px\",\n                \"marginRight\": \"16px\",\n              }\n            }\n          >\n            <div\n              aria-valuemax={100}\n              aria-valuemin={0}\n              aria-valuenow={25}\n              className=\"css-view-1dbjc4n\"\n              role=\"progressbar\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"4px\",\n                  \"marginBottom\": \"16px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"boxShadow\": \"0px 1px 1px rgba(0,0,0,0.18)\",\n                    \"display\": \"flex\",\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"25%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"16px\",\n                }\n              }\n            />\n            <div\n              aria-valuemax={100}\n              aria-valuemin={0}\n              aria-valuenow={35}\n              className=\"css-view-1dbjc4n\"\n              role=\"progressbar\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"8px\",\n                  \"marginBottom\": \"16px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"boxShadow\": \"0px 1px 1px rgba(0,0,0,0.18)\",\n                    \"display\": \"flex\",\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"35%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"16px\",\n                }\n              }\n            />\n            <div\n              aria-valuemax={100}\n              aria-valuemin={0}\n              aria-valuenow={45}\n              className=\"css-view-1dbjc4n\"\n              role=\"progressbar\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"12px\",\n                  \"marginBottom\": \"16px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"boxShadow\": \"0px 1px 1px rgba(0,0,0,0.18)\",\n                    \"display\": \"flex\",\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"45%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"16px\",\n                }\n              }\n            />\n            <div\n              aria-valuemax={100}\n              aria-valuemin={0}\n              aria-valuenow={55.00000000000001}\n              className=\"css-view-1dbjc4n\"\n              role=\"progressbar\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"16px\",\n                  \"marginBottom\": \"16px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"boxShadow\": \"0px 1px 1px rgba(0,0,0,0.18)\",\n                    \"display\": \"flex\",\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"55.00000000000001%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"16px\",\n                }\n              }\n            />\n            <div\n              aria-valuemax={100}\n              aria-valuemin={0}\n              aria-valuenow={65}\n              className=\"css-view-1dbjc4n\"\n              role=\"progressbar\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"20px\",\n                  \"marginBottom\": \"16px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"boxShadow\": \"0px 1px 1px rgba(0,0,0,0.18)\",\n                    \"display\": \"flex\",\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"65%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"16px\",\n                }\n              }\n            />\n            <div\n              aria-valuemax={100}\n              aria-valuemin={0}\n              aria-valuenow={75}\n              className=\"css-view-1dbjc4n\"\n              role=\"progressbar\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"24px\",\n                  \"marginBottom\": \"16px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"boxShadow\": \"0px 1px 1px rgba(0,0,0,0.18)\",\n                    \"display\": \"flex\",\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"75%\",\n                  }\n                }\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Radio Controlled Radio 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      aria-label=\"favorite number\"\n      aria-orientation=\"vertical\"\n      className=\"css-view-1dbjc4n\"\n      id=\"react-aria-0-1\"\n      onBlur={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"radiogroup\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"flex-start\",\n          \"WebkitBoxAlign\": \"start\",\n          \"alignItems\": \"flex-start\",\n          \"msFlexAlign\": \"start\",\n        }\n      }\n    >\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          onMouseDown={[Function]}\n          onMouseUp={[Function]}\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              checked={true}\n              name=\"myRadioGroup\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              tabIndex={0}\n              type=\"radio\"\n              value=\"one\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                    \"borderBottomColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"paddingBottom\": \"4px\",\n                    \"paddingLeft\": \"4px\",\n                    \"paddingRight\": \"4px\",\n                    \"paddingTop\": \"4px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(8,145,178,1.00)\",\n                      \"height\": \"12px\",\n                      \"opacity\": 1,\n                      \"width\": \"12px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              One\n            </div>\n          </div>\n        </div>\n      </label>\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          onMouseDown={[Function]}\n          onMouseUp={[Function]}\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              checked={false}\n              name=\"myRadioGroup\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              tabIndex={0}\n              type=\"radio\"\n              value=\"two\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                    \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"paddingBottom\": \"4px\",\n                    \"paddingLeft\": \"4px\",\n                    \"paddingRight\": \"4px\",\n                    \"paddingTop\": \"4px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(115,115,115,1.00)\",\n                      \"height\": \"12px\",\n                      \"opacity\": 0,\n                      \"width\": \"12px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Two\n            </div>\n          </div>\n        </div>\n      </label>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Radio Custom Color 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      aria-label=\"favorite colorscheme\"\n      aria-orientation=\"vertical\"\n      className=\"css-view-1dbjc4n\"\n      id=\"react-aria-0-1\"\n      onBlur={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"radiogroup\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"flex-start\",\n          \"WebkitBoxAlign\": \"start\",\n          \"alignItems\": \"flex-start\",\n          \"msFlexAlign\": \"start\",\n        }\n      }\n    >\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          onMouseDown={[Function]}\n          onMouseUp={[Function]}\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              checked={true}\n              name=\"exampleGroup\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              tabIndex={0}\n              type=\"radio\"\n              value=\"1\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                    \"borderBottomColor\": \"rgba(5,150,105,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(5,150,105,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(5,150,105,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(5,150,105,1.00)\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"paddingBottom\": \"4px\",\n                    \"paddingLeft\": \"4px\",\n                    \"paddingRight\": \"4px\",\n                    \"paddingTop\": \"4px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(5,150,105,1.00)\",\n                      \"height\": \"12px\",\n                      \"opacity\": 1,\n                      \"width\": \"12px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              emerald\n            </div>\n          </div>\n        </div>\n      </label>\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          onMouseDown={[Function]}\n          onMouseUp={[Function]}\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              checked={false}\n              name=\"exampleGroup\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              tabIndex={0}\n              type=\"radio\"\n              value=\"2\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                    \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"paddingBottom\": \"4px\",\n                    \"paddingLeft\": \"4px\",\n                    \"paddingRight\": \"4px\",\n                    \"paddingTop\": \"4px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(115,115,115,1.00)\",\n                      \"height\": \"12px\",\n                      \"opacity\": 0,\n                      \"width\": \"12px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              secondary\n            </div>\n          </div>\n        </div>\n      </label>\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          onMouseDown={[Function]}\n          onMouseUp={[Function]}\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              checked={false}\n              name=\"exampleGroup\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              tabIndex={0}\n              type=\"radio\"\n              value=\"3\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                    \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"paddingBottom\": \"4px\",\n                    \"paddingLeft\": \"4px\",\n                    \"paddingRight\": \"4px\",\n                    \"paddingTop\": \"4px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(115,115,115,1.00)\",\n                      \"height\": \"12px\",\n                      \"opacity\": 0,\n                      \"width\": \"12px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              warning\n            </div>\n          </div>\n        </div>\n      </label>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Radio Custom Icon 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      aria-label=\"pick a choice\"\n      aria-orientation=\"vertical\"\n      className=\"css-view-1dbjc4n\"\n      id=\"react-aria-0-1\"\n      onBlur={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"radiogroup\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"flex-start\",\n          \"WebkitBoxAlign\": \"start\",\n          \"alignItems\": \"flex-start\",\n          \"msFlexAlign\": \"start\",\n        }\n      }\n    >\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          onMouseDown={[Function]}\n          onMouseUp={[Function]}\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              checked={true}\n              name=\"exampleGroup\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              tabIndex={0}\n              type=\"radio\"\n              value=\"1\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                    \"borderBottomColor\": \"rgba(22,163,74,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(22,163,74,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(22,163,74,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(22,163,74,1.00)\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"paddingBottom\": \"4px\",\n                    \"paddingLeft\": \"4px\",\n                    \"paddingRight\": \"4px\",\n                    \"paddingTop\": \"4px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                />\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"18px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginLeft\": \"8px\",\n                  \"marginRight\": \"8px\",\n                }\n              }\n            >\n              Alien\n            </div>\n          </div>\n        </div>\n      </label>\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          onMouseDown={[Function]}\n          onMouseUp={[Function]}\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              checked={false}\n              name=\"exampleGroup\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              tabIndex={0}\n              type=\"radio\"\n              value=\"2\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                    \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"paddingBottom\": \"4px\",\n                    \"paddingLeft\": \"4px\",\n                    \"paddingRight\": \"4px\",\n                    \"paddingTop\": \"4px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(115,115,115,1.00)\",\n                      \"height\": \"16px\",\n                      \"opacity\": 0,\n                      \"width\": \"16px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"18px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginLeft\": \"8px\",\n                  \"marginRight\": \"8px\",\n                }\n              }\n            >\n              Fire\n            </div>\n          </div>\n        </div>\n      </label>\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          onMouseDown={[Function]}\n          onMouseUp={[Function]}\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              checked={false}\n              name=\"exampleGroup\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              tabIndex={0}\n              type=\"radio\"\n              value=\"3\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                    \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"paddingBottom\": \"4px\",\n                    \"paddingLeft\": \"4px\",\n                    \"paddingRight\": \"4px\",\n                    \"paddingTop\": \"4px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(115,115,115,1.00)\",\n                      \"height\": \"16px\",\n                      \"opacity\": 0,\n                      \"width\": \"16px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"18px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginLeft\": \"8px\",\n                  \"marginRight\": \"8px\",\n                }\n              }\n            >\n              Warning\n            </div>\n          </div>\n        </div>\n      </label>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Radio Disabled 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      aria-label=\"select prize\"\n      aria-orientation=\"vertical\"\n      className=\"css-view-1dbjc4n\"\n      id=\"react-aria-0-1\"\n      onBlur={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"radiogroup\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"flex-start\",\n          \"WebkitBoxAlign\": \"start\",\n          \"alignItems\": \"flex-start\",\n          \"msFlexAlign\": \"start\",\n        }\n      }\n    >\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          onMouseDown={[Function]}\n          onMouseUp={[Function]}\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              checked={false}\n              disabled={true}\n              name=\"exampleGroup\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              type=\"radio\"\n              value=\"1\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"not-allowed\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"opacity\": 0.6,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                    \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"opacity\": 0.6,\n                    \"paddingBottom\": \"4px\",\n                    \"paddingLeft\": \"4px\",\n                    \"paddingRight\": \"4px\",\n                    \"paddingTop\": \"4px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                      \"color\": \"rgba(115,115,115,1.00)\",\n                      \"height\": \"12px\",\n                      \"opacity\": 0,\n                      \"width\": \"12px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              First\n            </div>\n          </div>\n        </div>\n      </label>\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          onMouseDown={[Function]}\n          onMouseUp={[Function]}\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              checked={true}\n              name=\"exampleGroup\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              tabIndex={0}\n              type=\"radio\"\n              value=\"2\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                    \"borderBottomColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"paddingBottom\": \"4px\",\n                    \"paddingLeft\": \"4px\",\n                    \"paddingRight\": \"4px\",\n                    \"paddingTop\": \"4px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(8,145,178,1.00)\",\n                      \"height\": \"12px\",\n                      \"opacity\": 1,\n                      \"width\": \"12px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Second\n            </div>\n          </div>\n        </div>\n      </label>\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          onMouseDown={[Function]}\n          onMouseUp={[Function]}\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              checked={false}\n              name=\"exampleGroup\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              tabIndex={0}\n              type=\"radio\"\n              value=\"3\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                    \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"paddingBottom\": \"4px\",\n                    \"paddingLeft\": \"4px\",\n                    \"paddingRight\": \"4px\",\n                    \"paddingTop\": \"4px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(115,115,115,1.00)\",\n                      \"height\": \"12px\",\n                      \"opacity\": 0,\n                      \"width\": \"12px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Third\n            </div>\n          </div>\n        </div>\n      </label>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Radio Form Controlled 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"flex-start\",\n          \"WebkitBoxAlign\": \"start\",\n          \"alignItems\": \"flex-start\",\n          \"maxWidth\": \"80%\",\n          \"msFlexAlign\": \"start\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <label\n          className=\"css-view-1dbjc4n\"\n          id=\"field-175-label\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"start\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"flex-start\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"marginBottom\": \"4px\",\n              \"marginTop\": \"4px\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"start\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(115,115,115,1.00)\",\n                \"fontSize\": \"18px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            Select Prize\n          </div>\n        </label>\n        <div\n          aria-label=\"select prize\"\n          aria-orientation=\"vertical\"\n          className=\"css-view-1dbjc4n\"\n          id=\"react-aria-0-1\"\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"radiogroup\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"flex-start\",\n              \"WebkitBoxAlign\": \"start\",\n              \"alignItems\": \"flex-start\",\n              \"msFlexAlign\": \"start\",\n            }\n          }\n        >\n          <label\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              onMouseDown={[Function]}\n              onMouseUp={[Function]}\n            >\n              <div\n                style={\n                  Object {\n                    \"border\": 0,\n                    \"clip\": \"rect(0 0 0 0)\",\n                    \"clipPath\": \"inset(50%)\",\n                    \"height\": 1,\n                    \"margin\": \"0 -1px -1px 0\",\n                    \"overflow\": \"hidden\",\n                    \"padding\": 0,\n                    \"position\": \"absolute\",\n                    \"whiteSpace\": \"nowrap\",\n                    \"width\": 1,\n                  }\n                }\n              >\n                <input\n                  checked={true}\n                  disabled={false}\n                  name=\"exampleGroup\"\n                  onBlur={[Function]}\n                  onChange={[Function]}\n                  onClick={[Function]}\n                  onFocus={[Function]}\n                  onKeyDown={[Function]}\n                  onKeyUp={[Function]}\n                  onMouseDown={[Function]}\n                  onMouseEnter={[Function]}\n                  onMouseLeave={[Function]}\n                  onMouseUp={[Function]}\n                  onTouchCancel={[Function]}\n                  onTouchEnd={[Function]}\n                  onTouchMove={[Function]}\n                  onTouchStart={[Function]}\n                  readOnly={false}\n                  required={false}\n                  tabIndex={0}\n                  type=\"radio\"\n                  value=\"1\"\n                />\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"cursor\": \"pointer\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                  />\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    id=\"field-175\"\n                    style={\n                      Object {\n                        \"WebkitAlignItems\": \"center\",\n                        \"WebkitBoxAlign\": \"center\",\n                        \"WebkitBoxPack\": \"center\",\n                        \"WebkitJustifyContent\": \"center\",\n                        \"alignItems\": \"center\",\n                        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                        \"borderBottomColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderBottomLeftRadius\": \"9999px\",\n                        \"borderBottomRightRadius\": \"9999px\",\n                        \"borderBottomWidth\": \"2px\",\n                        \"borderLeftColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderLeftWidth\": \"2px\",\n                        \"borderRightColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderRightWidth\": \"2px\",\n                        \"borderTopColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderTopLeftRadius\": \"9999px\",\n                        \"borderTopRightRadius\": \"9999px\",\n                        \"borderTopWidth\": \"2px\",\n                        \"display\": \"flex\",\n                        \"justifyContent\": \"center\",\n                        \"marginBottom\": \"4px\",\n                        \"marginTop\": \"4px\",\n                        \"msFlexAlign\": \"center\",\n                        \"msFlexPack\": \"center\",\n                        \"paddingBottom\": \"4px\",\n                        \"paddingLeft\": \"4px\",\n                        \"paddingRight\": \"4px\",\n                        \"paddingTop\": \"4px\",\n                      }\n                    }\n                  >\n                    <svg\n                      role=\"img\"\n                      stroke=\"\"\n                      style={\n                        Object {\n                          \"color\": \"rgba(8,145,178,1.00)\",\n                          \"height\": \"12px\",\n                          \"opacity\": 1,\n                          \"width\": \"12px\",\n                        }\n                      }\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <g>\n                        <path\n                          d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                          fill=\"currentColor\"\n                          stroke=\"\"\n                        />\n                      </g>\n                    </svg>\n                  </div>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"16px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  First\n                </div>\n              </div>\n            </div>\n          </label>\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <label\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              onMouseDown={[Function]}\n              onMouseUp={[Function]}\n            >\n              <div\n                style={\n                  Object {\n                    \"border\": 0,\n                    \"clip\": \"rect(0 0 0 0)\",\n                    \"clipPath\": \"inset(50%)\",\n                    \"height\": 1,\n                    \"margin\": \"0 -1px -1px 0\",\n                    \"overflow\": \"hidden\",\n                    \"padding\": 0,\n                    \"position\": \"absolute\",\n                    \"whiteSpace\": \"nowrap\",\n                    \"width\": 1,\n                  }\n                }\n              >\n                <input\n                  checked={false}\n                  disabled={false}\n                  name=\"exampleGroup\"\n                  onBlur={[Function]}\n                  onChange={[Function]}\n                  onClick={[Function]}\n                  onFocus={[Function]}\n                  onKeyDown={[Function]}\n                  onKeyUp={[Function]}\n                  onMouseDown={[Function]}\n                  onMouseEnter={[Function]}\n                  onMouseLeave={[Function]}\n                  onMouseUp={[Function]}\n                  onTouchCancel={[Function]}\n                  onTouchEnd={[Function]}\n                  onTouchMove={[Function]}\n                  onTouchStart={[Function]}\n                  readOnly={false}\n                  required={false}\n                  tabIndex={0}\n                  type=\"radio\"\n                  value=\"2\"\n                />\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"cursor\": \"pointer\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                  />\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    id=\"field-175\"\n                    style={\n                      Object {\n                        \"WebkitAlignItems\": \"center\",\n                        \"WebkitBoxAlign\": \"center\",\n                        \"WebkitBoxPack\": \"center\",\n                        \"WebkitJustifyContent\": \"center\",\n                        \"alignItems\": \"center\",\n                        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                        \"borderBottomColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderBottomLeftRadius\": \"9999px\",\n                        \"borderBottomRightRadius\": \"9999px\",\n                        \"borderBottomWidth\": \"2px\",\n                        \"borderLeftColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderLeftWidth\": \"2px\",\n                        \"borderRightColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderRightWidth\": \"2px\",\n                        \"borderTopColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderTopLeftRadius\": \"9999px\",\n                        \"borderTopRightRadius\": \"9999px\",\n                        \"borderTopWidth\": \"2px\",\n                        \"display\": \"flex\",\n                        \"justifyContent\": \"center\",\n                        \"marginBottom\": \"4px\",\n                        \"marginTop\": \"4px\",\n                        \"msFlexAlign\": \"center\",\n                        \"msFlexPack\": \"center\",\n                        \"paddingBottom\": \"4px\",\n                        \"paddingLeft\": \"4px\",\n                        \"paddingRight\": \"4px\",\n                        \"paddingTop\": \"4px\",\n                      }\n                    }\n                  >\n                    <svg\n                      role=\"img\"\n                      stroke=\"\"\n                      style={\n                        Object {\n                          \"color\": \"rgba(115,115,115,1.00)\",\n                          \"height\": \"12px\",\n                          \"opacity\": 0,\n                          \"width\": \"12px\",\n                        }\n                      }\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <g>\n                        <path\n                          d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                          fill=\"currentColor\"\n                          stroke=\"\"\n                        />\n                      </g>\n                    </svg>\n                  </div>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"16px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Second\n                </div>\n              </div>\n            </div>\n          </label>\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <label\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              onMouseDown={[Function]}\n              onMouseUp={[Function]}\n            >\n              <div\n                style={\n                  Object {\n                    \"border\": 0,\n                    \"clip\": \"rect(0 0 0 0)\",\n                    \"clipPath\": \"inset(50%)\",\n                    \"height\": 1,\n                    \"margin\": \"0 -1px -1px 0\",\n                    \"overflow\": \"hidden\",\n                    \"padding\": 0,\n                    \"position\": \"absolute\",\n                    \"whiteSpace\": \"nowrap\",\n                    \"width\": 1,\n                  }\n                }\n              >\n                <input\n                  checked={false}\n                  disabled={false}\n                  name=\"exampleGroup\"\n                  onBlur={[Function]}\n                  onChange={[Function]}\n                  onClick={[Function]}\n                  onFocus={[Function]}\n                  onKeyDown={[Function]}\n                  onKeyUp={[Function]}\n                  onMouseDown={[Function]}\n                  onMouseEnter={[Function]}\n                  onMouseLeave={[Function]}\n                  onMouseUp={[Function]}\n                  onTouchCancel={[Function]}\n                  onTouchEnd={[Function]}\n                  onTouchMove={[Function]}\n                  onTouchStart={[Function]}\n                  readOnly={false}\n                  required={false}\n                  tabIndex={0}\n                  type=\"radio\"\n                  value=\"3\"\n                />\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"cursor\": \"pointer\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                  />\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    id=\"field-175\"\n                    style={\n                      Object {\n                        \"WebkitAlignItems\": \"center\",\n                        \"WebkitBoxAlign\": \"center\",\n                        \"WebkitBoxPack\": \"center\",\n                        \"WebkitJustifyContent\": \"center\",\n                        \"alignItems\": \"center\",\n                        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                        \"borderBottomColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderBottomLeftRadius\": \"9999px\",\n                        \"borderBottomRightRadius\": \"9999px\",\n                        \"borderBottomWidth\": \"2px\",\n                        \"borderLeftColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderLeftWidth\": \"2px\",\n                        \"borderRightColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderRightWidth\": \"2px\",\n                        \"borderTopColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderTopLeftRadius\": \"9999px\",\n                        \"borderTopRightRadius\": \"9999px\",\n                        \"borderTopWidth\": \"2px\",\n                        \"display\": \"flex\",\n                        \"justifyContent\": \"center\",\n                        \"marginBottom\": \"4px\",\n                        \"marginTop\": \"4px\",\n                        \"msFlexAlign\": \"center\",\n                        \"msFlexPack\": \"center\",\n                        \"paddingBottom\": \"4px\",\n                        \"paddingLeft\": \"4px\",\n                        \"paddingRight\": \"4px\",\n                        \"paddingTop\": \"4px\",\n                      }\n                    }\n                  >\n                    <svg\n                      role=\"img\"\n                      stroke=\"\"\n                      style={\n                        Object {\n                          \"color\": \"rgba(115,115,115,1.00)\",\n                          \"height\": \"12px\",\n                          \"opacity\": 0,\n                          \"width\": \"12px\",\n                        }\n                      }\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <g>\n                        <path\n                          d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                          fill=\"currentColor\"\n                          stroke=\"\"\n                        />\n                      </g>\n                    </svg>\n                  </div>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"16px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Third\n                </div>\n              </div>\n            </div>\n          </label>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          id=\"field-175\"\n          style={\n            Object {\n              \"marginTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <svg\n              role=\"img\"\n              stroke=\"\"\n              style={\n                Object {\n                  \"color\": \"rgba(220,38,38,1.00)\",\n                  \"fontSize\": \"12px\",\n                  \"height\": \"12px\",\n                  \"width\": \"12px\",\n                }\n              }\n              viewBox=\"0 0 16 16\"\n            >\n              <g>\n                <path\n                  d=\"M8 16C6.41775 16 4.87103 15.5308 3.55544 14.6518C2.23985 13.7727 1.21447 12.5233 0.608967 11.0615C0.00346627 9.59966 -0.15496 7.99113 0.153721 6.43928C0.462403 4.88743 1.22433 3.46197 2.34315 2.34315C3.46197 1.22433 4.88743 0.462403 6.43928 0.153721C7.99113 -0.15496 9.59966 0.00346627 11.0615 0.608967C12.5233 1.21447 13.7727 2.23985 14.6518 3.55544C15.5308 4.87103 16 6.41775 16 8C16 10.1217 15.1571 12.1566 13.6569 13.6569C12.1566 15.1571 10.1217 16 8 16ZM8 14.4C9.2658 14.4 10.5032 14.0246 11.5556 13.3214C12.6081 12.6182 13.4284 11.6186 13.9128 10.4492C14.3972 9.27973 14.524 7.9929 14.277 6.75142C14.0301 5.50995 13.4205 4.36958 12.5255 3.47452C11.6304 2.57946 10.4901 1.96992 9.24858 1.72298C8.0071 1.47603 6.72028 1.60277 5.55083 2.08717C4.38138 2.57158 3.38184 3.39188 2.6786 4.44435C1.97536 5.49683 1.6 6.7342 1.6 8C1.6 9.69739 2.27429 11.3253 3.47452 12.5255C4.67475 13.7257 6.30262 14.4 8 14.4ZM7.2 10.4H8.8V12H7.2V10.4ZM7.2 4H8.8V8.8H7.2V4Z\"\n                  fill=\"currentColor\"\n                  stroke=\"\"\n                />\n              </g>\n            </svg>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"4px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(220,38,38,1.00)\",\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              You must select a Prize.\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Radio Invalid 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      aria-label=\"select an option\"\n      aria-orientation=\"vertical\"\n      className=\"css-view-1dbjc4n\"\n      id=\"react-aria-0-1\"\n      onBlur={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"radiogroup\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"flex-start\",\n          \"WebkitBoxAlign\": \"start\",\n          \"alignItems\": \"flex-start\",\n          \"msFlexAlign\": \"start\",\n        }\n      }\n    >\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          onMouseDown={[Function]}\n          onMouseUp={[Function]}\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              checked={false}\n              name=\"exampleGroup\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              tabIndex={0}\n              type=\"radio\"\n              value=\"test\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                    \"borderBottomColor\": \"rgba(220,38,38,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(220,38,38,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(220,38,38,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(220,38,38,1.00)\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"paddingBottom\": \"4px\",\n                    \"paddingLeft\": \"4px\",\n                    \"paddingRight\": \"4px\",\n                    \"paddingTop\": \"4px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(115,115,115,1.00)\",\n                      \"height\": \"12px\",\n                      \"opacity\": 0,\n                      \"width\": \"12px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Others\n            </div>\n          </div>\n        </div>\n      </label>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Radio Playground 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"justify\",\n          \"WebkitJustifyContent\": \"space-between\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"space-between\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"justify\",\n        }\n      }\n    >\n      <div\n        aria-label=\"pick an option from below\"\n        aria-orientation=\"vertical\"\n        className=\"css-view-1dbjc4n\"\n        id=\"react-aria-0-1\"\n        onBlur={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"radiogroup\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"flex-start\",\n            \"WebkitBoxAlign\": \"start\",\n            \"alignItems\": \"flex-start\",\n            \"msFlexAlign\": \"start\",\n          }\n        }\n      >\n        <label\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            onMouseDown={[Function]}\n            onMouseUp={[Function]}\n          >\n            <div\n              style={\n                Object {\n                  \"border\": 0,\n                  \"clip\": \"rect(0 0 0 0)\",\n                  \"clipPath\": \"inset(50%)\",\n                  \"height\": 1,\n                  \"margin\": \"0 -1px -1px 0\",\n                  \"overflow\": \"hidden\",\n                  \"padding\": 0,\n                  \"position\": \"absolute\",\n                  \"whiteSpace\": \"nowrap\",\n                  \"width\": 1,\n                }\n              }\n            >\n              <input\n                checked={false}\n                disabled={false}\n                name=\"exampleGroup\"\n                onBlur={[Function]}\n                onChange={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onKeyUp={[Function]}\n                onMouseDown={[Function]}\n                onMouseEnter={[Function]}\n                onMouseLeave={[Function]}\n                onMouseUp={[Function]}\n                onTouchCancel={[Function]}\n                onTouchEnd={[Function]}\n                onTouchMove={[Function]}\n                onTouchStart={[Function]}\n                tabIndex={0}\n                type=\"radio\"\n                value=\"cool\"\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                      \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderBottomLeftRadius\": \"9999px\",\n                      \"borderBottomRightRadius\": \"9999px\",\n                      \"borderBottomWidth\": \"2px\",\n                      \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderLeftWidth\": \"2px\",\n                      \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderRightWidth\": \"2px\",\n                      \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderTopLeftRadius\": \"9999px\",\n                      \"borderTopRightRadius\": \"9999px\",\n                      \"borderTopWidth\": \"2px\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"marginBottom\": \"4px\",\n                      \"marginTop\": \"4px\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                      \"paddingBottom\": \"4px\",\n                      \"paddingLeft\": \"4px\",\n                      \"paddingRight\": \"4px\",\n                      \"paddingTop\": \"4px\",\n                    }\n                  }\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"12px\",\n                        \"opacity\": 0,\n                        \"width\": \"12px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"16px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                UX Research\n              </div>\n            </div>\n          </div>\n        </label>\n        <div\n          className=\"css-view-1dbjc4n\"\n        />\n        <label\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            onMouseDown={[Function]}\n            onMouseUp={[Function]}\n          >\n            <div\n              style={\n                Object {\n                  \"border\": 0,\n                  \"clip\": \"rect(0 0 0 0)\",\n                  \"clipPath\": \"inset(50%)\",\n                  \"height\": 1,\n                  \"margin\": \"0 -1px -1px 0\",\n                  \"overflow\": \"hidden\",\n                  \"padding\": 0,\n                  \"position\": \"absolute\",\n                  \"whiteSpace\": \"nowrap\",\n                  \"width\": 1,\n                }\n              }\n            >\n              <input\n                checked={false}\n                disabled={false}\n                name=\"exampleGroup\"\n                onBlur={[Function]}\n                onChange={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onKeyUp={[Function]}\n                onMouseDown={[Function]}\n                onMouseEnter={[Function]}\n                onMouseLeave={[Function]}\n                onMouseUp={[Function]}\n                onTouchCancel={[Function]}\n                onTouchEnd={[Function]}\n                onTouchMove={[Function]}\n                onTouchStart={[Function]}\n                tabIndex={0}\n                type=\"radio\"\n                value=\"awesome\"\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                      \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderBottomLeftRadius\": \"9999px\",\n                      \"borderBottomRightRadius\": \"9999px\",\n                      \"borderBottomWidth\": \"2px\",\n                      \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderLeftWidth\": \"2px\",\n                      \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderRightWidth\": \"2px\",\n                      \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderTopLeftRadius\": \"9999px\",\n                      \"borderTopRightRadius\": \"9999px\",\n                      \"borderTopWidth\": \"2px\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"marginBottom\": \"4px\",\n                      \"marginTop\": \"4px\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                      \"paddingBottom\": \"4px\",\n                      \"paddingLeft\": \"4px\",\n                      \"paddingRight\": \"4px\",\n                      \"paddingTop\": \"4px\",\n                    }\n                  }\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"12px\",\n                        \"opacity\": 0,\n                        \"width\": \"12px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"16px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Software Development\n              </div>\n            </div>\n          </div>\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Radio Size 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      aria-label=\"pick a size\"\n      aria-orientation=\"vertical\"\n      className=\"css-view-1dbjc4n\"\n      id=\"react-aria-0-1\"\n      onBlur={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"radiogroup\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"flex-start\",\n          \"WebkitBoxAlign\": \"start\",\n          \"alignItems\": \"flex-start\",\n          \"msFlexAlign\": \"start\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"flex-start\",\n            \"WebkitBoxAlign\": \"start\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"vertical\",\n            \"WebkitFlexDirection\": \"column\",\n            \"alignItems\": \"flex-start\",\n            \"flexDirection\": \"column\",\n            \"maxWidth\": \"300px\",\n            \"msFlexAlign\": \"start\",\n            \"msFlexDirection\": \"column\",\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <label\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            onMouseDown={[Function]}\n            onMouseUp={[Function]}\n          >\n            <div\n              style={\n                Object {\n                  \"border\": 0,\n                  \"clip\": \"rect(0 0 0 0)\",\n                  \"clipPath\": \"inset(50%)\",\n                  \"height\": 1,\n                  \"margin\": \"0 -1px -1px 0\",\n                  \"overflow\": \"hidden\",\n                  \"padding\": 0,\n                  \"position\": \"absolute\",\n                  \"whiteSpace\": \"nowrap\",\n                  \"width\": 1,\n                }\n              }\n            >\n              <input\n                checked={true}\n                name=\"exampleGroup\"\n                onBlur={[Function]}\n                onChange={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onKeyUp={[Function]}\n                onMouseDown={[Function]}\n                onMouseEnter={[Function]}\n                onMouseLeave={[Function]}\n                onMouseUp={[Function]}\n                onTouchCancel={[Function]}\n                onTouchEnd={[Function]}\n                onTouchMove={[Function]}\n                onTouchStart={[Function]}\n                tabIndex={0}\n                type=\"radio\"\n                value=\"1\"\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                      \"borderBottomColor\": \"rgba(220,38,38,1.00)\",\n                      \"borderBottomLeftRadius\": \"9999px\",\n                      \"borderBottomRightRadius\": \"9999px\",\n                      \"borderBottomWidth\": \"2px\",\n                      \"borderLeftColor\": \"rgba(220,38,38,1.00)\",\n                      \"borderLeftWidth\": \"2px\",\n                      \"borderRightColor\": \"rgba(220,38,38,1.00)\",\n                      \"borderRightWidth\": \"2px\",\n                      \"borderTopColor\": \"rgba(220,38,38,1.00)\",\n                      \"borderTopLeftRadius\": \"9999px\",\n                      \"borderTopRightRadius\": \"9999px\",\n                      \"borderTopWidth\": \"2px\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"marginBottom\": \"4px\",\n                      \"marginTop\": \"4px\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                      \"paddingBottom\": \"4px\",\n                      \"paddingLeft\": \"4px\",\n                      \"paddingRight\": \"4px\",\n                      \"paddingTop\": \"4px\",\n                    }\n                  }\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(220,38,38,1.00)\",\n                        \"height\": \"8px\",\n                        \"opacity\": 1,\n                        \"width\": \"8px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Small\n              </div>\n            </div>\n          </div>\n        </label>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <label\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            onMouseDown={[Function]}\n            onMouseUp={[Function]}\n          >\n            <div\n              style={\n                Object {\n                  \"border\": 0,\n                  \"clip\": \"rect(0 0 0 0)\",\n                  \"clipPath\": \"inset(50%)\",\n                  \"height\": 1,\n                  \"margin\": \"0 -1px -1px 0\",\n                  \"overflow\": \"hidden\",\n                  \"padding\": 0,\n                  \"position\": \"absolute\",\n                  \"whiteSpace\": \"nowrap\",\n                  \"width\": 1,\n                }\n              }\n            >\n              <input\n                checked={false}\n                name=\"exampleGroup\"\n                onBlur={[Function]}\n                onChange={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onKeyUp={[Function]}\n                onMouseDown={[Function]}\n                onMouseEnter={[Function]}\n                onMouseLeave={[Function]}\n                onMouseUp={[Function]}\n                onTouchCancel={[Function]}\n                onTouchEnd={[Function]}\n                onTouchMove={[Function]}\n                onTouchStart={[Function]}\n                tabIndex={0}\n                type=\"radio\"\n                value=\"2\"\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                      \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderBottomLeftRadius\": \"9999px\",\n                      \"borderBottomRightRadius\": \"9999px\",\n                      \"borderBottomWidth\": \"2px\",\n                      \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderLeftWidth\": \"2px\",\n                      \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderRightWidth\": \"2px\",\n                      \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderTopLeftRadius\": \"9999px\",\n                      \"borderTopRightRadius\": \"9999px\",\n                      \"borderTopWidth\": \"2px\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"marginBottom\": \"4px\",\n                      \"marginTop\": \"4px\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                      \"paddingBottom\": \"4px\",\n                      \"paddingLeft\": \"4px\",\n                      \"paddingRight\": \"4px\",\n                      \"paddingTop\": \"4px\",\n                    }\n                  }\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"12px\",\n                        \"opacity\": 0,\n                        \"width\": \"12px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"16px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Medium\n              </div>\n            </div>\n          </div>\n        </label>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <label\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            onMouseDown={[Function]}\n            onMouseUp={[Function]}\n          >\n            <div\n              style={\n                Object {\n                  \"border\": 0,\n                  \"clip\": \"rect(0 0 0 0)\",\n                  \"clipPath\": \"inset(50%)\",\n                  \"height\": 1,\n                  \"margin\": \"0 -1px -1px 0\",\n                  \"overflow\": \"hidden\",\n                  \"padding\": 0,\n                  \"position\": \"absolute\",\n                  \"whiteSpace\": \"nowrap\",\n                  \"width\": 1,\n                }\n              }\n            >\n              <input\n                checked={false}\n                name=\"exampleGroup\"\n                onBlur={[Function]}\n                onChange={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onKeyUp={[Function]}\n                onMouseDown={[Function]}\n                onMouseEnter={[Function]}\n                onMouseLeave={[Function]}\n                onMouseUp={[Function]}\n                onTouchCancel={[Function]}\n                onTouchEnd={[Function]}\n                onTouchMove={[Function]}\n                onTouchStart={[Function]}\n                tabIndex={0}\n                type=\"radio\"\n                value=\"3\"\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                      \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderBottomLeftRadius\": \"9999px\",\n                      \"borderBottomRightRadius\": \"9999px\",\n                      \"borderBottomWidth\": \"2px\",\n                      \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderLeftWidth\": \"2px\",\n                      \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderRightWidth\": \"2px\",\n                      \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderTopLeftRadius\": \"9999px\",\n                      \"borderTopRightRadius\": \"9999px\",\n                      \"borderTopWidth\": \"2px\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"marginBottom\": \"4px\",\n                      \"marginTop\": \"4px\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                      \"paddingBottom\": \"4px\",\n                      \"paddingLeft\": \"4px\",\n                      \"paddingRight\": \"4px\",\n                      \"paddingTop\": \"4px\",\n                    }\n                  }\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"opacity\": 0,\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"18px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Large\n              </div>\n            </div>\n          </div>\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Radio Uncontrolled Radio 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      aria-label=\"Pick your favorite number\"\n      aria-orientation=\"vertical\"\n      className=\"css-view-1dbjc4n\"\n      id=\"react-aria-0-1\"\n      onBlur={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"radiogroup\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"flex-start\",\n          \"WebkitBoxAlign\": \"start\",\n          \"alignItems\": \"flex-start\",\n          \"msFlexAlign\": \"start\",\n        }\n      }\n    >\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          onMouseDown={[Function]}\n          onMouseUp={[Function]}\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              checked={true}\n              name=\"myRadioGroup\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              tabIndex={0}\n              type=\"radio\"\n              value=\"1\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                    \"borderBottomColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"paddingBottom\": \"4px\",\n                    \"paddingLeft\": \"4px\",\n                    \"paddingRight\": \"4px\",\n                    \"paddingTop\": \"4px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(8,145,178,1.00)\",\n                      \"height\": \"12px\",\n                      \"opacity\": 1,\n                      \"width\": \"12px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              First\n            </div>\n          </div>\n        </div>\n      </label>\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          onMouseDown={[Function]}\n          onMouseUp={[Function]}\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              checked={false}\n              name=\"myRadioGroup\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              tabIndex={0}\n              type=\"radio\"\n              value=\"2\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                    \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"paddingBottom\": \"4px\",\n                    \"paddingLeft\": \"4px\",\n                    \"paddingRight\": \"4px\",\n                    \"paddingTop\": \"4px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(115,115,115,1.00)\",\n                      \"height\": \"12px\",\n                      \"opacity\": 0,\n                      \"width\": \"12px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Second\n            </div>\n          </div>\n        </div>\n      </label>\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          onMouseDown={[Function]}\n          onMouseUp={[Function]}\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              checked={false}\n              name=\"myRadioGroup\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              tabIndex={0}\n              type=\"radio\"\n              value=\"3\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                    \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"paddingBottom\": \"4px\",\n                    \"paddingLeft\": \"4px\",\n                    \"paddingRight\": \"4px\",\n                    \"paddingTop\": \"4px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(115,115,115,1.00)\",\n                      \"height\": \"12px\",\n                      \"opacity\": 0,\n                      \"width\": \"12px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Third\n            </div>\n          </div>\n        </div>\n      </label>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Radio With Ref 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      aria-label=\"pick an option\"\n      aria-orientation=\"vertical\"\n      className=\"css-view-1dbjc4n\"\n      id=\"react-aria-0-1\"\n      onBlur={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"radiogroup\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"flex-start\",\n          \"WebkitBoxAlign\": \"start\",\n          \"alignItems\": \"flex-start\",\n          \"msFlexAlign\": \"start\",\n        }\n      }\n    >\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          onMouseDown={[Function]}\n          onMouseUp={[Function]}\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              checked={false}\n              name=\"exampleGroup\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              tabIndex={0}\n              type=\"radio\"\n              value=\"1\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                    \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"paddingBottom\": \"4px\",\n                    \"paddingLeft\": \"4px\",\n                    \"paddingRight\": \"4px\",\n                    \"paddingTop\": \"4px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(115,115,115,1.00)\",\n                      \"height\": \"12px\",\n                      \"opacity\": 0,\n                      \"width\": \"12px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Wrong\n            </div>\n          </div>\n        </div>\n      </label>\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          onMouseDown={[Function]}\n          onMouseUp={[Function]}\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              checked={false}\n              name=\"exampleGroup\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              tabIndex={0}\n              type=\"radio\"\n              value=\"2\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                    \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"paddingBottom\": \"4px\",\n                    \"paddingLeft\": \"4px\",\n                    \"paddingRight\": \"4px\",\n                    \"paddingTop\": \"4px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(115,115,115,1.00)\",\n                      \"height\": \"12px\",\n                      \"opacity\": 0,\n                      \"width\": \"12px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Right\n            </div>\n          </div>\n        </div>\n      </label>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Responsive Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"backgroundColor\": \"rgba(254,202,202,1.00)\",\n          \"width\": \"100px\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        This is a box\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Responsive Demo 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"vertical\",\n          \"WebkitFlexDirection\": \"column\",\n          \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n          \"borderBottomColor\": \"rgba(229,231,235,1.00)\",\n          \"borderBottomLeftRadius\": \"8px\",\n          \"borderBottomRightRadius\": \"8px\",\n          \"borderBottomWidth\": \"0px\",\n          \"borderLeftColor\": \"rgba(229,231,235,1.00)\",\n          \"borderLeftWidth\": \"0px\",\n          \"borderRightColor\": \"rgba(229,231,235,1.00)\",\n          \"borderRightWidth\": \"0px\",\n          \"borderTopColor\": \"rgba(229,231,235,1.00)\",\n          \"borderTopLeftRadius\": \"8px\",\n          \"borderTopRightRadius\": \"8px\",\n          \"borderTopWidth\": \"0px\",\n          \"boxShadow\": \"0px 1px 2.22px rgba(0,0,0,0.22)\",\n          \"flexDirection\": \"column\",\n          \"msFlexDirection\": \"column\",\n          \"overflowX\": \"hidden\",\n          \"overflowY\": \"hidden\",\n          \"width\": \"288px\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          aria-label=\"image\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"160px\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(139,92,246,1.00)\",\n              \"bottom\": \"0px\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"paddingBottom\": \"6px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"6px\",\n              \"position\": \"absolute\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(255,255,255,1.00)\",\n                \"fontSize\": \"12px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            PHOTOS\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"paddingBottom\": \"16px\",\n            \"paddingLeft\": \"16px\",\n            \"paddingRight\": \"16px\",\n            \"paddingTop\": \"16px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n                \"marginLeft\": \"-4px\",\n              }\n            }\n          >\n            The Garden City\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(139,92,246,1.00)\",\n                \"fontSize\": \"12px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginLeft\": \"-2px\",\n                \"marginTop\": \"-4px\",\n              }\n            }\n          >\n            The Silicon Valley of India.\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"12px\",\n            }\n          }\n        />\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          Bengaluru (also called Bangalore) is the center of India's high-tech industry. The city is also known for its parks and nightlife.\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"12px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"justify\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"space-between\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"space-between\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"justify\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(75,85,99,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              6 mins ago\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Responsive Direction 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"vertical\",\n          \"WebkitBoxPack\": \"justify\",\n          \"WebkitFlexDirection\": \"column\",\n          \"WebkitJustifyContent\": \"space-between\",\n          \"alignItems\": \"center\",\n          \"flexDirection\": \"column\",\n          \"justifyContent\": \"space-between\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"column\",\n          \"msFlexPack\": \"justify\",\n          \"paddingBottom\": \"16px\",\n          \"paddingLeft\": \"16px\",\n          \"paddingRight\": \"16px\",\n          \"paddingTop\": \"16px\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n            \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"borderTopWidth\": \"1px\",\n            \"height\": \"96px\",\n            \"justifyContent\": \"center\",\n            \"marginBottom\": \"8px\",\n            \"marginLeft\": \"8px\",\n            \"marginRight\": \"8px\",\n            \"marginTop\": \"8px\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"position\": \"relative\",\n            \"width\": \"96px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"--\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"100%\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n            \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"borderTopWidth\": \"1px\",\n            \"height\": \"96px\",\n            \"justifyContent\": \"center\",\n            \"marginBottom\": \"8px\",\n            \"marginLeft\": \"8px\",\n            \"marginRight\": \"8px\",\n            \"marginTop\": \"8px\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"position\": \"relative\",\n            \"width\": \"96px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"--\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"100%\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n            \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"borderTopWidth\": \"1px\",\n            \"height\": \"96px\",\n            \"justifyContent\": \"center\",\n            \"marginBottom\": \"8px\",\n            \"marginLeft\": \"8px\",\n            \"marginRight\": \"8px\",\n            \"marginTop\": \"8px\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"position\": \"relative\",\n            \"width\": \"96px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"--\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"100%\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n            \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"borderTopWidth\": \"1px\",\n            \"height\": \"96px\",\n            \"justifyContent\": \"center\",\n            \"marginBottom\": \"8px\",\n            \"marginLeft\": \"8px\",\n            \"marginRight\": \"8px\",\n            \"marginTop\": \"8px\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"position\": \"relative\",\n            \"width\": \"96px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"--\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"100%\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n            \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"borderTopWidth\": \"1px\",\n            \"height\": \"96px\",\n            \"justifyContent\": \"center\",\n            \"marginBottom\": \"8px\",\n            \"marginLeft\": \"8px\",\n            \"marginRight\": \"8px\",\n            \"marginTop\": \"8px\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"position\": \"relative\",\n            \"width\": \"96px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"--\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"100%\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n            \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"borderTopWidth\": \"1px\",\n            \"height\": \"96px\",\n            \"justifyContent\": \"center\",\n            \"marginBottom\": \"8px\",\n            \"marginLeft\": \"8px\",\n            \"marginRight\": \"8px\",\n            \"marginTop\": \"8px\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"position\": \"relative\",\n            \"width\": \"96px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"--\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"100%\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Responsive FontSize 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-text-901oao\"\n      dir=\"auto\"\n      style={\n        Object {\n          \"color\": \"rgba(23,23,23,1.00)\",\n          \"fontSize\": \"24px\",\n          \"fontStyle\": \"normal\",\n          \"fontWeight\": \"400\",\n          \"letterSpacing\": \"0px\",\n          \"lineHeight\": \"1.5em\",\n        }\n      }\n    >\n      This is responsive text\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Responsive More 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"backgroundColor\": \"rgba(45,212,191,1.00)\",\n          \"height\": \"75%\",\n          \"width\": \"75%\",\n        }\n      }\n    />\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"fontSize\": \"14px\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        Font Size\n      </div>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"backgroundColor\": \"rgba(74,222,128,1.00)\",\n          \"height\": \"24px\",\n          \"marginTop\": \"8px\",\n          \"width\": \"100%\",\n        }\n      }\n    />\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"backgroundColor\": \"rgba(254,202,202,1.00)\",\n          \"paddingBottom\": \"8px\",\n          \"paddingLeft\": \"8px\",\n          \"paddingRight\": \"8px\",\n          \"paddingTop\": \"8px\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        Padding\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Row Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitFlexDirection\": \"row\",\n          \"flexDirection\": \"row\",\n          \"msFlexDirection\": \"row\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(34,211,238,1.00)\",\n            \"borderBottomLeftRadius\": \"6px\",\n            \"borderBottomRightRadius\": \"6px\",\n            \"borderTopLeftRadius\": \"6px\",\n            \"borderTopRightRadius\": \"6px\",\n            \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n            \"display\": \"flex\",\n            \"height\": \"64px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"64px\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(255,255,255,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          Box 1\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(244,114,182,1.00)\",\n            \"borderBottomLeftRadius\": \"6px\",\n            \"borderBottomRightRadius\": \"6px\",\n            \"borderTopLeftRadius\": \"6px\",\n            \"borderTopRightRadius\": \"6px\",\n            \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n            \"display\": \"flex\",\n            \"height\": \"64px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"64px\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(255,255,255,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          Box 2\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(52,211,153,1.00)\",\n            \"borderBottomLeftRadius\": \"6px\",\n            \"borderBottomRightRadius\": \"6px\",\n            \"borderTopLeftRadius\": \"6px\",\n            \"borderTopRightRadius\": \"6px\",\n            \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n            \"display\": \"flex\",\n            \"height\": \"64px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"64px\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(255,255,255,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          Box 3\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots ScrollView Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      onScroll={[Function]}\n      onTouchEnd={[Function]}\n      onTouchMove={[Function]}\n      onTouchStart={[Function]}\n      onWheel={[Function]}\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxFlex\": 1,\n          \"WebkitBoxOrient\": \"vertical\",\n          \"WebkitFlexDirection\": \"column\",\n          \"WebkitFlexGrow\": 1,\n          \"WebkitFlexShrink\": 1,\n          \"WebkitOverflowScrolling\": \"touch\",\n          \"WebkitTransform\": \"translateZ(0px)\",\n          \"flexDirection\": \"column\",\n          \"flexGrow\": 1,\n          \"flexShrink\": 1,\n          \"height\": \"320px\",\n          \"msFlexDirection\": \"column\",\n          \"msFlexNegative\": 1,\n          \"msFlexPositive\": 1,\n          \"overflowX\": \"hidden\",\n          \"overflowY\": \"auto\",\n          \"transform\": \"translateZ(0px)\",\n          \"width\": \"200px\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"dataSet\": Object {},\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n              \"marginBottom\": \"16px\",\n              \"marginTop\": \"12px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Cyan\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"flex\": 1,\n              \"msFlex\": \"1 1 0%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(207,250,254,1.00)\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"paddingBottom\": \"16px\",\n                \"paddingTop\": \"16px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              100\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(165,243,252,1.00)\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"paddingBottom\": \"16px\",\n                \"paddingTop\": \"16px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              200\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(103,232,249,1.00)\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"paddingBottom\": \"16px\",\n                \"paddingTop\": \"16px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              300\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(34,211,238,1.00)\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"paddingBottom\": \"16px\",\n                \"paddingTop\": \"16px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              400\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(6,182,212,1.00)\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"paddingBottom\": \"16px\",\n                \"paddingTop\": \"16px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              500\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n              \"marginBottom\": \"16px\",\n              \"marginTop\": \"32px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Yellow\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"flex\": 1,\n              \"msFlex\": \"1 1 0%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(254,249,195,1.00)\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"paddingBottom\": \"16px\",\n                \"paddingTop\": \"16px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              100\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(254,240,138,1.00)\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"paddingBottom\": \"16px\",\n                \"paddingTop\": \"16px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              200\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(253,224,71,1.00)\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"paddingBottom\": \"16px\",\n                \"paddingTop\": \"16px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              300\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(250,204,21,1.00)\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"paddingBottom\": \"16px\",\n                \"paddingTop\": \"16px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              400\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(234,179,8,1.00)\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"paddingBottom\": \"16px\",\n                \"paddingTop\": \"16px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              500\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n              \"marginBottom\": \"16px\",\n              \"marginTop\": \"32px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n             Violet\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"flex\": 1,\n              \"msFlex\": \"1 1 0%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(237,233,254,1.00)\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"paddingBottom\": \"16px\",\n                \"paddingTop\": \"16px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              100\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(221,214,254,1.00)\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"paddingBottom\": \"16px\",\n                \"paddingTop\": \"16px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              200\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(196,181,253,1.00)\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"paddingBottom\": \"16px\",\n                \"paddingTop\": \"16px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              300\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(167,139,250,1.00)\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"paddingBottom\": \"16px\",\n                \"paddingTop\": \"16px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              400\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(139,92,246,1.00)\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"paddingBottom\": \"16px\",\n                \"paddingTop\": \"16px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              500\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots SectionList Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"height\": \"320px\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        onScroll={[Function]}\n        onTouchEnd={[Function]}\n        onTouchMove={[Function]}\n        onTouchStart={[Function]}\n        onWheel={[Function]}\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxFlex\": 1,\n            \"WebkitBoxOrient\": \"vertical\",\n            \"WebkitFlexDirection\": \"column\",\n            \"WebkitFlexGrow\": 1,\n            \"WebkitFlexShrink\": 1,\n            \"WebkitOverflowScrolling\": \"touch\",\n            \"WebkitTransform\": \"translateZ(0px)\",\n            \"flexDirection\": \"column\",\n            \"flexGrow\": 1,\n            \"flexShrink\": 1,\n            \"marginBottom\": \"16px\",\n            \"maxWidth\": \"300px\",\n            \"msFlexDirection\": \"column\",\n            \"msFlexNegative\": 1,\n            \"msFlexPositive\": 1,\n            \"overflowX\": \"hidden\",\n            \"overflowY\": \"auto\",\n            \"transform\": \"translateZ(0px)\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"20px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.25em\",\n                    \"marginTop\": \"32px\",\n                    \"paddingBottom\": \"16px\",\n                  }\n                }\n              >\n                Cyan\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(207,250,254,1.00)\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"paddingBottom\": \"16px\",\n                  \"paddingTop\": \"16px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                100\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(165,243,252,1.00)\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"paddingBottom\": \"16px\",\n                  \"paddingTop\": \"16px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                200\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(103,232,249,1.00)\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"paddingBottom\": \"16px\",\n                  \"paddingTop\": \"16px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                300\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(34,211,238,1.00)\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"paddingBottom\": \"16px\",\n                  \"paddingTop\": \"16px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                400\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(6,182,212,1.00)\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"paddingBottom\": \"16px\",\n                  \"paddingTop\": \"16px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                500\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"20px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.25em\",\n                    \"marginTop\": \"32px\",\n                    \"paddingBottom\": \"16px\",\n                  }\n                }\n              >\n                Yellow\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(254,249,195,1.00)\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"paddingBottom\": \"16px\",\n                  \"paddingTop\": \"16px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                100\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(254,240,138,1.00)\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"paddingBottom\": \"16px\",\n                  \"paddingTop\": \"16px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                200\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"0px\",\n              }\n            }\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Select Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"maxWidth\": \"300px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"marginTop\": \"4px\",\n            }\n          }\n        >\n          <select\n            aria-label=\"Choose Service\"\n            onBlur={[Function]}\n            onChange={[Function]}\n            onFocus={[Function]}\n            onMouseEnter={[Function]}\n            onMouseLeave={[Function]}\n            onTouchStart={[Function]}\n            style={\n              Object {\n                \"MozAppearance\": \"none\",\n                \"WebkitAppearance\": \"none\",\n                \"appearance\": \"none\",\n                \"height\": \"100%\",\n                \"opacity\": 0,\n                \"position\": \"absolute\",\n                \"width\": \"100%\",\n                \"zIndex\": 1,\n              }\n            }\n            value=\"__NativebasePlaceholder__\"\n          >\n            <option\n              disabled={true}\n              value=\"__NativebasePlaceholder__\"\n            >\n              Choose Service\n            </option>\n            <option\n              value=\"ux\"\n            >\n              UX Research\n            </option>\n            <option\n              value=\"web\"\n            >\n              Web Development\n            </option>\n            <option\n              value=\"cross\"\n            >\n              Cross Platform Development\n            </option>\n            <option\n              value=\"ui\"\n            >\n              UI Designing\n            </option>\n            <option\n              value=\"backend\"\n            >\n              Backend Development\n            </option>\n          </select>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"minWidth\": \"200px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"overflowX\": \"auto\",\n                \"overflowY\": \"auto\",\n              }\n            }\n          >\n            <input\n              aria-hidden={true}\n              autoCapitalize=\"sentences\"\n              autoComplete=\"on\"\n              autoCorrect=\"on\"\n              className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y r-pointerEvents-633pao\"\n              dir=\"auto\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onSelect={[Function]}\n              placeholder=\"Choose Service\"\n              readOnly={true}\n              spellCheck={true}\n              style={\n                Object {\n                  \"WebkitFlex\": 1,\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"cursor\": \"auto\",\n                  \"flex\": 1,\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"100%\",\n                  \"lineHeight\": \"1.5em\",\n                  \"msFlex\": \"1 1 0%\",\n                  \"outline\": \"none\",\n                  \"outlineWidth\": \"0px\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"width\": \"100%\",\n                }\n              }\n              tabIndex=\"-1\"\n              type=\"text\"\n              value=\"\"\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <svg\n              role=\"img\"\n              stroke=\"\"\n              style={\n                Object {\n                  \"color\": \"rgba(115,115,115,1.00)\",\n                  \"height\": \"24px\",\n                  \"marginRight\": \"12px\",\n                  \"paddingBottom\": \"4px\",\n                  \"paddingLeft\": \"4px\",\n                  \"paddingRight\": \"4px\",\n                  \"paddingTop\": \"4px\",\n                  \"width\": \"24px\",\n                }\n              }\n              viewBox=\"0 0 24 24\"\n            >\n              <g>\n                <path\n                  d=\"M20.2286 6L11.9973 14.3785L3.76862 6.00268L2 7.80293L12 18L22 7.80293L20.2286 6Z\"\n                  fill=\"currentColor\"\n                  stroke=\"\"\n                />\n              </g>\n            </svg>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Select FormControlled 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"maxWidth\": \"300px\",\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <label\n          className=\"css-view-1dbjc4n\"\n          id=\"field-180-label\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"start\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"flex-start\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"marginBottom\": \"4px\",\n              \"marginTop\": \"4px\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"start\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(115,115,115,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            Choose service\n          </div>\n          <div\n            aria-hidden={true}\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            role=\"presentation\"\n            style={\n              Object {\n                \"color\": \"rgba(220,38,38,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            *\n          </div>\n        </label>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"marginTop\": \"4px\",\n            }\n          }\n        >\n          <select\n            aria-label=\"Choose Service\"\n            aria-readonly={false}\n            disabled={false}\n            onBlur={[Function]}\n            onChange={[Function]}\n            onFocus={[Function]}\n            onMouseEnter={[Function]}\n            onMouseLeave={[Function]}\n            onTouchStart={[Function]}\n            required={true}\n            style={\n              Object {\n                \"MozAppearance\": \"none\",\n                \"WebkitAppearance\": \"none\",\n                \"appearance\": \"none\",\n                \"height\": \"100%\",\n                \"opacity\": 0,\n                \"position\": \"absolute\",\n                \"width\": \"100%\",\n                \"zIndex\": 1,\n              }\n            }\n            value=\"__NativebasePlaceholder__\"\n          >\n            <option\n              disabled={true}\n              value=\"__NativebasePlaceholder__\"\n            >\n              Choose Service\n            </option>\n            <option\n              value=\"ux\"\n            >\n              UX Research\n            </option>\n            <option\n              value=\"web\"\n            >\n              Web Development\n            </option>\n            <option\n              value=\"cross\"\n            >\n              Cross Platform Development\n            </option>\n            <option\n              value=\"ui\"\n            >\n              UI Designing\n            </option>\n            <option\n              value=\"backend\"\n            >\n              Backend Development\n            </option>\n          </select>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"minWidth\": \"200px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"overflowX\": \"auto\",\n                \"overflowY\": \"auto\",\n              }\n            }\n          >\n            <input\n              aria-hidden={true}\n              aria-invalid={true}\n              aria-required={true}\n              autoCapitalize=\"sentences\"\n              autoComplete=\"on\"\n              autoCorrect=\"on\"\n              className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y r-pointerEvents-633pao\"\n              dir=\"auto\"\n              disabled={false}\n              id=\"field-180-input\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onSelect={[Function]}\n              placeholder=\"Choose Service\"\n              readOnly={true}\n              required={true}\n              spellCheck={true}\n              style={\n                Object {\n                  \"WebkitFlex\": 1,\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"cursor\": \"auto\",\n                  \"flex\": 1,\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"100%\",\n                  \"lineHeight\": \"1.5em\",\n                  \"msFlex\": \"1 1 0%\",\n                  \"outline\": \"none\",\n                  \"outlineWidth\": \"0px\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"width\": \"100%\",\n                }\n              }\n              tabIndex=\"-1\"\n              type=\"text\"\n              value=\"\"\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <svg\n              role=\"img\"\n              stroke=\"\"\n              style={\n                Object {\n                  \"color\": \"rgba(115,115,115,1.00)\",\n                  \"height\": \"24px\",\n                  \"marginRight\": \"12px\",\n                  \"paddingBottom\": \"4px\",\n                  \"paddingLeft\": \"4px\",\n                  \"paddingRight\": \"4px\",\n                  \"paddingTop\": \"4px\",\n                  \"width\": \"24px\",\n                }\n              }\n              viewBox=\"0 0 24 24\"\n            >\n              <g>\n                <path\n                  d=\"M20.2286 6L11.9973 14.3785L3.76862 6.00268L2 7.80293L12 18L22 7.80293L20.2286 6Z\"\n                  fill=\"currentColor\"\n                  stroke=\"\"\n                />\n              </g>\n            </svg>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          id=\"field-180\"\n          style={\n            Object {\n              \"marginTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <svg\n              role=\"img\"\n              stroke=\"\"\n              style={\n                Object {\n                  \"color\": \"rgba(220,38,38,1.00)\",\n                  \"fontSize\": \"12px\",\n                  \"height\": \"12px\",\n                  \"width\": \"12px\",\n                }\n              }\n              viewBox=\"0 0 16 16\"\n            >\n              <g>\n                <path\n                  d=\"M8 16C6.41775 16 4.87103 15.5308 3.55544 14.6518C2.23985 13.7727 1.21447 12.5233 0.608967 11.0615C0.00346627 9.59966 -0.15496 7.99113 0.153721 6.43928C0.462403 4.88743 1.22433 3.46197 2.34315 2.34315C3.46197 1.22433 4.88743 0.462403 6.43928 0.153721C7.99113 -0.15496 9.59966 0.00346627 11.0615 0.608967C12.5233 1.21447 13.7727 2.23985 14.6518 3.55544C15.5308 4.87103 16 6.41775 16 8C16 10.1217 15.1571 12.1566 13.6569 13.6569C12.1566 15.1571 10.1217 16 8 16ZM8 14.4C9.2658 14.4 10.5032 14.0246 11.5556 13.3214C12.6081 12.6182 13.4284 11.6186 13.9128 10.4492C14.3972 9.27973 14.524 7.9929 14.277 6.75142C14.0301 5.50995 13.4205 4.36958 12.5255 3.47452C11.6304 2.57946 10.4901 1.96992 9.24858 1.72298C8.0071 1.47603 6.72028 1.60277 5.55083 2.08717C4.38138 2.57158 3.38184 3.39188 2.6786 4.44435C1.97536 5.49683 1.6 6.7342 1.6 8C1.6 9.69739 2.27429 11.3253 3.47452 12.5255C4.67475 13.7257 6.30262 14.4 8 14.4ZM7.2 10.4H8.8V12H7.2V10.4ZM7.2 4H8.8V8.8H7.2V4Z\"\n                  fill=\"currentColor\"\n                  stroke=\"\"\n                />\n              </g>\n            </svg>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"4px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(220,38,38,1.00)\",\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Please make a selection!\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Select Select Long list 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"flex-start\",\n          \"WebkitBoxAlign\": \"start\",\n          \"alignItems\": \"flex-start\",\n          \"maxWidth\": \"80%\",\n          \"msFlexAlign\": \"start\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <label\n          className=\"css-view-1dbjc4n\"\n          id=\"field-182-label\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"start\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"flex-start\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"marginBottom\": \"4px\",\n              \"marginTop\": \"4px\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"start\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(115,115,115,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            Select Color\n          </div>\n        </label>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"marginTop\": \"4px\",\n            }\n          }\n        >\n          <select\n            aria-label=\"Select a Color\"\n            aria-readonly={false}\n            disabled={false}\n            onBlur={[Function]}\n            onChange={[Function]}\n            onFocus={[Function]}\n            onMouseEnter={[Function]}\n            onMouseLeave={[Function]}\n            onTouchStart={[Function]}\n            required={false}\n            style={\n              Object {\n                \"MozAppearance\": \"none\",\n                \"WebkitAppearance\": \"none\",\n                \"appearance\": \"none\",\n                \"height\": \"100%\",\n                \"opacity\": 0,\n                \"position\": \"absolute\",\n                \"width\": \"100%\",\n                \"zIndex\": 1,\n              }\n            }\n            value=\"__NativebasePlaceholder__\"\n          >\n            <option\n              disabled={true}\n              value=\"__NativebasePlaceholder__\"\n            >\n              Select a Color\n            </option>\n            <option\n              value=\"0\"\n            >\n              Pink\n            </option>\n            <option\n              value=\"1\"\n            >\n              Crimson\n            </option>\n            <option\n              value=\"2\"\n            >\n              Red\n            </option>\n            <option\n              value=\"3\"\n            >\n              Maroon\n            </option>\n            <option\n              value=\"4\"\n            >\n              Brown\n            </option>\n            <option\n              value=\"5\"\n            >\n              Misty-Rose\n            </option>\n            <option\n              value=\"6\"\n            >\n              Salmon\n            </option>\n            <option\n              value=\"7\"\n            >\n              Coral\n            </option>\n            <option\n              value=\"8\"\n            >\n              Orange-Red\n            </option>\n            <option\n              value=\"9\"\n            >\n              Chocolate\n            </option>\n            <option\n              value=\"10\"\n            >\n              Orange\n            </option>\n            <option\n              value=\"11\"\n            >\n              Gold\n            </option>\n            <option\n              value=\"12\"\n            >\n              Ivory\n            </option>\n            <option\n              value=\"13\"\n            >\n              Yellow\n            </option>\n            <option\n              value=\"14\"\n            >\n              Olive\n            </option>\n            <option\n              value=\"15\"\n            >\n              Yellow-Green\n            </option>\n            <option\n              value=\"16\"\n            >\n              Lawngreen\n            </option>\n            <option\n              value=\"17\"\n            >\n              Chartreuse\n            </option>\n            <option\n              value=\"18\"\n            >\n              Lime\n            </option>\n            <option\n              value=\"19\"\n            >\n              Green\n            </option>\n            <option\n              value=\"20\"\n            >\n              Spring-green\n            </option>\n            <option\n              value=\"21\"\n            >\n              Aquamarine\n            </option>\n            <option\n              value=\"22\"\n            >\n              Turquoise\n            </option>\n            <option\n              value=\"23\"\n            >\n              Azure\n            </option>\n            <option\n              value=\"24\"\n            >\n              Aqua/Cyan\n            </option>\n            <option\n              value=\"25\"\n            >\n              Teal\n            </option>\n            <option\n              value=\"26\"\n            >\n              Lavender\n            </option>\n            <option\n              value=\"27\"\n            >\n              Blue\n            </option>\n            <option\n              value=\"28\"\n            >\n              Navy\n            </option>\n            <option\n              value=\"29\"\n            >\n              Blue-Violet\n            </option>\n            <option\n              value=\"30\"\n            >\n              Indigo\n            </option>\n            <option\n              value=\"31\"\n            >\n              Dark-Violet\n            </option>\n            <option\n              value=\"32\"\n            >\n              Plum\n            </option>\n            <option\n              value=\"33\"\n            >\n              Magenta\n            </option>\n            <option\n              value=\"34\"\n            >\n              Purple\n            </option>\n            <option\n              value=\"35\"\n            >\n              Red-Violet\n            </option>\n            <option\n              value=\"36\"\n            >\n              Tan\n            </option>\n            <option\n              value=\"37\"\n            >\n              Beige\n            </option>\n            <option\n              value=\"38\"\n            >\n              Slate-gray\n            </option>\n            <option\n              value=\"39\"\n            >\n              White\n            </option>\n            <option\n              value=\"40\"\n            >\n              White-Smoke\n            </option>\n            <option\n              value=\"41\"\n            >\n              Light-Gray\n            </option>\n            <option\n              value=\"42\"\n            >\n              Silver\n            </option>\n            <option\n              value=\"43\"\n            >\n              Dark-Gray\n            </option>\n            <option\n              value=\"44\"\n            >\n              Gray\n            </option>\n            <option\n              value=\"45\"\n            >\n              Dim-Gray\n            </option>\n            <option\n              value=\"46\"\n            >\n              Black\n            </option>\n          </select>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"minWidth\": \"100px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"overflowX\": \"auto\",\n                \"overflowY\": \"auto\",\n              }\n            }\n          >\n            <input\n              aria-hidden={true}\n              autoCapitalize=\"sentences\"\n              autoComplete=\"on\"\n              autoCorrect=\"on\"\n              className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y r-pointerEvents-633pao\"\n              dir=\"auto\"\n              disabled={false}\n              id=\"field-182-input\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onSelect={[Function]}\n              placeholder=\"Select a Color\"\n              readOnly={true}\n              spellCheck={true}\n              style={\n                Object {\n                  \"WebkitFlex\": 1,\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"cursor\": \"auto\",\n                  \"flex\": 1,\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"100%\",\n                  \"lineHeight\": \"1.5em\",\n                  \"msFlex\": \"1 1 0%\",\n                  \"outline\": \"none\",\n                  \"outlineWidth\": \"0px\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"width\": \"100%\",\n                }\n              }\n              tabIndex=\"-1\"\n              type=\"text\"\n              value=\"\"\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <svg\n              role=\"img\"\n              stroke=\"\"\n              style={\n                Object {\n                  \"color\": \"rgba(115,115,115,1.00)\",\n                  \"height\": \"24px\",\n                  \"marginRight\": \"12px\",\n                  \"paddingBottom\": \"4px\",\n                  \"paddingLeft\": \"4px\",\n                  \"paddingRight\": \"4px\",\n                  \"paddingTop\": \"4px\",\n                  \"width\": \"24px\",\n                }\n              }\n              viewBox=\"0 0 24 24\"\n            >\n              <g>\n                <path\n                  d=\"M20.2286 6L11.9973 14.3785L3.76862 6.00268L2 7.80293L12 18L22 7.80293L20.2286 6Z\"\n                  fill=\"currentColor\"\n                  stroke=\"\"\n                />\n              </g>\n            </svg>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Skeleton Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"borderBottomColor\": \"rgba(229,231,235,1.00)\",\n            \"borderBottomLeftRadius\": \"6px\",\n            \"borderBottomRightRadius\": \"6px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(229,231,235,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(229,231,235,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(229,231,235,1.00)\",\n            \"borderTopLeftRadius\": \"6px\",\n            \"borderTopRightRadius\": \"6px\",\n            \"borderTopWidth\": \"1px\",\n            \"maxWidth\": \"400px\",\n            \"overflowX\": \"hidden\",\n            \"overflowY\": \"hidden\",\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"height\": \"160px\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            id=\"animatedComponent\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                \"height\": \"100%\",\n                \"opacity\": 0,\n                \"width\": \"100%\",\n              }\n            }\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"32px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"vertical\",\n              \"WebkitFlexDirection\": \"column\",\n              \"flexDirection\": \"column\",\n              \"msFlexDirection\": \"column\",\n              \"paddingLeft\": \"16px\",\n              \"paddingRight\": \"16px\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"height\": \"12px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              id=\"animatedComponent\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"height\": \"12px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              id=\"animatedComponent\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"height\": \"12px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"75%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              id=\"animatedComponent\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"32px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"borderBottomLeftRadius\": \"6px\",\n              \"borderBottomRightRadius\": \"6px\",\n              \"borderTopLeftRadius\": \"6px\",\n              \"borderTopRightRadius\": \"6px\",\n              \"height\": \"40px\",\n              \"marginBottom\": \"16px\",\n              \"marginTop\": \"16px\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"paddingLeft\": \"16px\",\n              \"paddingRight\": \"16px\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            id=\"animatedComponent\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(207,250,254,1.00)\",\n                \"height\": \"100%\",\n                \"opacity\": 0,\n                \"width\": \"100%\",\n              }\n            }\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Skeleton Color 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"borderBottomColor\": \"rgba(229,231,235,1.00)\",\n            \"borderBottomLeftRadius\": \"6px\",\n            \"borderBottomRightRadius\": \"6px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(229,231,235,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(229,231,235,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(229,231,235,1.00)\",\n            \"borderTopLeftRadius\": \"6px\",\n            \"borderTopRightRadius\": \"6px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"maxWidth\": \"400px\",\n            \"msFlexDirection\": \"row\",\n            \"paddingBottom\": \"16px\",\n            \"paddingLeft\": \"16px\",\n            \"paddingRight\": \"16px\",\n            \"paddingTop\": \"16px\",\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"borderBottomLeftRadius\": \"6px\",\n              \"borderBottomRightRadius\": \"6px\",\n              \"borderTopLeftRadius\": \"6px\",\n              \"borderTopRightRadius\": \"6px\",\n              \"flex\": 1,\n              \"height\": \"150px\",\n              \"msFlex\": \"1 1 0%\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            id=\"animatedComponent\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(243,244,246,1.00)\",\n                \"height\": \"100%\",\n                \"opacity\": 0,\n                \"width\": \"100%\",\n              }\n            }\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"width\": \"32px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlex\": 3,\n              \"flex\": 3,\n              \"msFlex\": \"3 1 0%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"height\": \"40px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              id=\"animatedComponent\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(252,211,77,1.00)\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"vertical\",\n                \"WebkitFlexDirection\": \"column\",\n                \"flexDirection\": \"column\",\n                \"msFlexDirection\": \"column\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"12px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"12px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"12px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"75%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"20px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"20px\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitFlex\": 2,\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"flex\": 2,\n                  \"height\": \"12px\",\n                  \"msFlex\": \"2 1 0%\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitFlex\": 1,\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"flex\": 1,\n                  \"height\": \"12px\",\n                  \"msFlex\": \"1 1 0%\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(165,180,252,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Skeleton Composition 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(229,231,235,1.00)\",\n            \"borderBottomLeftRadius\": \"6px\",\n            \"borderBottomRightRadius\": \"6px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(229,231,235,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(229,231,235,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(229,231,235,1.00)\",\n            \"borderTopLeftRadius\": \"6px\",\n            \"borderTopRightRadius\": \"6px\",\n            \"borderTopWidth\": \"1px\",\n            \"maxWidth\": \"400px\",\n            \"msFlexAlign\": \"center\",\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"height\": \"160px\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            id=\"animatedComponent\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                \"height\": \"100%\",\n                \"opacity\": 0,\n                \"width\": \"100%\",\n              }\n            }\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"24px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(250,250,249,1.00)\",\n              \"borderBottomColor\": \"rgba(229,231,235,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderBottomWidth\": \"1px\",\n              \"borderLeftColor\": \"rgba(229,231,235,1.00)\",\n              \"borderLeftWidth\": \"1px\",\n              \"borderRightColor\": \"rgba(229,231,235,1.00)\",\n              \"borderRightWidth\": \"1px\",\n              \"borderTopColor\": \"rgba(229,231,235,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"borderTopWidth\": \"1px\",\n              \"height\": \"80px\",\n              \"marginTop\": \"-70px\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"80px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            id=\"animatedComponent\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                \"height\": \"100%\",\n                \"opacity\": 0,\n                \"width\": \"100%\",\n              }\n            }\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"24px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"flexDirection\": \"row\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"height\": \"20px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"20px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              id=\"animatedComponent\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"height\": \"20px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"20px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              id=\"animatedComponent\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"height\": \"20px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"20px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              id=\"animatedComponent\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"height\": \"20px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"20px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              id=\"animatedComponent\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"height\": \"20px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"20px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              id=\"animatedComponent\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"24px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"vertical\",\n              \"WebkitFlexDirection\": \"column\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"column\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"column\",\n              \"paddingLeft\": \"48px\",\n              \"paddingRight\": \"48px\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"height\": \"12px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              id=\"animatedComponent\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"height\": \"12px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              id=\"animatedComponent\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"height\": \"12px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"75%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              id=\"animatedComponent\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"24px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"borderBottomLeftRadius\": \"20px\",\n              \"borderBottomRightRadius\": \"20px\",\n              \"borderTopLeftRadius\": \"20px\",\n              \"borderTopRightRadius\": \"20px\",\n              \"height\": \"40px\",\n              \"marginBottom\": \"12px\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"160px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            id=\"animatedComponent\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                \"height\": \"100%\",\n                \"opacity\": 0,\n                \"width\": \"100%\",\n              }\n            }\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Skeleton FadeDuration 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"width\": \"50%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"backgroundColor\": \"rgba(34,197,94,1.00)\",\n            \"height\": \"80px\",\n            \"overflowX\": \"hidden\",\n            \"overflowY\": \"hidden\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          id=\"animatedComponent\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(219,39,119,1.00)\",\n              \"height\": \"100%\",\n              \"opacity\": 0,\n              \"width\": \"100%\",\n            }\n          }\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Skeleton isLoaded 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"maxWidth\": \"400px\",\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"borderBottomColor\": \"rgba(229,231,235,1.00)\",\n              \"borderBottomLeftRadius\": \"6px\",\n              \"borderBottomRightRadius\": \"6px\",\n              \"borderBottomWidth\": \"1px\",\n              \"borderLeftColor\": \"rgba(229,231,235,1.00)\",\n              \"borderLeftWidth\": \"1px\",\n              \"borderRightColor\": \"rgba(229,231,235,1.00)\",\n              \"borderRightWidth\": \"1px\",\n              \"borderTopColor\": \"rgba(229,231,235,1.00)\",\n              \"borderTopLeftRadius\": \"6px\",\n              \"borderTopRightRadius\": \"6px\",\n              \"borderTopWidth\": \"1px\",\n              \"maxWidth\": \"400px\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"height\": \"160px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              id=\"animatedComponent\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"32px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"vertical\",\n                \"WebkitFlexDirection\": \"column\",\n                \"flexDirection\": \"column\",\n                \"msFlexDirection\": \"column\",\n                \"paddingLeft\": \"16px\",\n                \"paddingRight\": \"16px\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"12px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"12px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"12px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"12px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"75%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"32px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"6px\",\n                \"borderBottomRightRadius\": \"6px\",\n                \"borderTopLeftRadius\": \"6px\",\n                \"borderTopRightRadius\": \"6px\",\n                \"height\": \"40px\",\n                \"marginBottom\": \"16px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"paddingLeft\": \"16px\",\n                \"paddingRight\": \"16px\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              id=\"animatedComponent\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(207,250,254,1.00)\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Slider Color 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"maxWidth\": \"300px\",\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <div\n          aria-label=\"Slider\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onMouseDown={[Function]}\n            onTouchStart={[Function]}\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"height\": \"16px\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"paddingBottom\": \"12px\",\n                \"paddingTop\": \"12px\",\n                \"touchAction\": \"manipulation\",\n                \"width\": \"100%\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"borderBottomLeftRadius\": \"8px\",\n                  \"borderBottomRightRadius\": \"8px\",\n                  \"borderTopLeftRadius\": \"8px\",\n                  \"borderTopRightRadius\": \"8px\",\n                  \"height\": \"4px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(234,88,12,1.00)\",\n                    \"height\": \"4px\",\n                    \"left\": \"0px\",\n                    \"position\": \"absolute\",\n                    \"width\": \"70%\",\n                  }\n                }\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onMouseDown={[Function]}\n            onTouchStart={[Function]}\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitTransform\": \"translateX(-8px) scale(1)\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(234,88,12,1.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"cursor\": \"pointer\",\n                \"height\": \"16px\",\n                \"justifyContent\": \"center\",\n                \"left\": \"70%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"position\": \"absolute\",\n                \"transform\": \"translateX(-8px) scale(1)\",\n                \"width\": \"16px\",\n                \"zIndex\": 999,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"8px\",\n                    \"paddingRight\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"position\": \"absolute\",\n                    \"zIndex\": -1,\n                  }\n                }\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(234,88,12,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"cursor\": \"pointer\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                  }\n                }\n              >\n                <div\n                  style={\n                    Object {\n                      \"border\": 0,\n                      \"clip\": \"rect(0 0 0 0)\",\n                      \"clipPath\": \"inset(50%)\",\n                      \"height\": 1,\n                      \"margin\": \"0 -1px -1px 0\",\n                      \"overflow\": \"hidden\",\n                      \"padding\": 0,\n                      \"position\": \"absolute\",\n                      \"whiteSpace\": \"nowrap\",\n                      \"width\": 1,\n                    }\n                  }\n                >\n                  <input\n                    aria-labelledby=\"react-aria-0-1\"\n                    aria-valuetext={70}\n                    id=\"react-aria-0-1-0\"\n                    max={100}\n                    min={0}\n                    onBlur={[Function]}\n                    onChange={[Function]}\n                    onFocus={[Function]}\n                    step={1}\n                    tabIndex={0}\n                    type=\"range\"\n                    value={70}\n                  />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          aria-label=\"Slider\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onMouseDown={[Function]}\n            onTouchStart={[Function]}\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"height\": \"16px\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"paddingBottom\": \"12px\",\n                \"paddingTop\": \"12px\",\n                \"touchAction\": \"manipulation\",\n                \"width\": \"100%\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"borderBottomLeftRadius\": \"8px\",\n                  \"borderBottomRightRadius\": \"8px\",\n                  \"borderTopLeftRadius\": \"8px\",\n                  \"borderTopRightRadius\": \"8px\",\n                  \"height\": \"4px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(5,150,105,1.00)\",\n                    \"height\": \"4px\",\n                    \"left\": \"0px\",\n                    \"position\": \"absolute\",\n                    \"width\": \"70%\",\n                  }\n                }\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onMouseDown={[Function]}\n            onTouchStart={[Function]}\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitTransform\": \"translateX(-8px) scale(1)\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(5,150,105,1.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"cursor\": \"pointer\",\n                \"height\": \"16px\",\n                \"justifyContent\": \"center\",\n                \"left\": \"70%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"position\": \"absolute\",\n                \"transform\": \"translateX(-8px) scale(1)\",\n                \"width\": \"16px\",\n                \"zIndex\": 999,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"8px\",\n                    \"paddingRight\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"position\": \"absolute\",\n                    \"zIndex\": -1,\n                  }\n                }\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(5,150,105,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"cursor\": \"pointer\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                  }\n                }\n              >\n                <div\n                  style={\n                    Object {\n                      \"border\": 0,\n                      \"clip\": \"rect(0 0 0 0)\",\n                      \"clipPath\": \"inset(50%)\",\n                      \"height\": 1,\n                      \"margin\": \"0 -1px -1px 0\",\n                      \"overflow\": \"hidden\",\n                      \"padding\": 0,\n                      \"position\": \"absolute\",\n                      \"whiteSpace\": \"nowrap\",\n                      \"width\": 1,\n                    }\n                  }\n                >\n                  <input\n                    aria-labelledby=\"react-aria-0-4\"\n                    aria-valuetext={70}\n                    id=\"react-aria-0-4-0\"\n                    max={100}\n                    min={0}\n                    onBlur={[Function]}\n                    onChange={[Function]}\n                    onFocus={[Function]}\n                    step={1}\n                    tabIndex={0}\n                    type=\"range\"\n                    value={70}\n                  />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          aria-label=\"Slider\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onMouseDown={[Function]}\n            onTouchStart={[Function]}\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"height\": \"16px\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"paddingBottom\": \"12px\",\n                \"paddingTop\": \"12px\",\n                \"touchAction\": \"manipulation\",\n                \"width\": \"100%\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"borderBottomLeftRadius\": \"8px\",\n                  \"borderBottomRightRadius\": \"8px\",\n                  \"borderTopLeftRadius\": \"8px\",\n                  \"borderTopRightRadius\": \"8px\",\n                  \"height\": \"4px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(79,70,229,1.00)\",\n                    \"height\": \"4px\",\n                    \"left\": \"0px\",\n                    \"position\": \"absolute\",\n                    \"width\": \"70%\",\n                  }\n                }\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onMouseDown={[Function]}\n            onTouchStart={[Function]}\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitTransform\": \"translateX(-8px) scale(1)\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(79,70,229,1.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"cursor\": \"pointer\",\n                \"height\": \"16px\",\n                \"justifyContent\": \"center\",\n                \"left\": \"70%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"position\": \"absolute\",\n                \"transform\": \"translateX(-8px) scale(1)\",\n                \"width\": \"16px\",\n                \"zIndex\": 999,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"8px\",\n                    \"paddingRight\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"position\": \"absolute\",\n                    \"zIndex\": -1,\n                  }\n                }\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(79,70,229,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"cursor\": \"pointer\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                  }\n                }\n              >\n                <div\n                  style={\n                    Object {\n                      \"border\": 0,\n                      \"clip\": \"rect(0 0 0 0)\",\n                      \"clipPath\": \"inset(50%)\",\n                      \"height\": 1,\n                      \"margin\": \"0 -1px -1px 0\",\n                      \"overflow\": \"hidden\",\n                      \"padding\": 0,\n                      \"position\": \"absolute\",\n                      \"whiteSpace\": \"nowrap\",\n                      \"width\": 1,\n                    }\n                  }\n                >\n                  <input\n                    aria-labelledby=\"react-aria-0-7\"\n                    aria-valuetext={70}\n                    id=\"react-aria-0-7-0\"\n                    max={100}\n                    min={0}\n                    onBlur={[Function]}\n                    onChange={[Function]}\n                    onFocus={[Function]}\n                    step={1}\n                    tabIndex={0}\n                    type=\"range\"\n                    value={70}\n                  />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Slider Customized 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        aria-label=\"Slider\"\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"justifyContent\": \"center\",\n            \"maxWidth\": \"300px\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onTouchStart={[Function]}\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"cursor\": \"pointer\",\n              \"height\": \"16px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"paddingBottom\": \"12px\",\n              \"paddingTop\": \"12px\",\n              \"touchAction\": \"manipulation\",\n              \"width\": \"100%\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(220,252,231,1.00)\",\n                \"borderBottomLeftRadius\": \"8px\",\n                \"borderBottomRightRadius\": \"8px\",\n                \"borderTopLeftRadius\": \"8px\",\n                \"borderTopRightRadius\": \"8px\",\n                \"height\": \"4px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(22,163,74,1.00)\",\n                  \"height\": \"4px\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"width\": \"70%\",\n                }\n              }\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onTouchStart={[Function]}\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitTransform\": \"translateX(-8px) scale(1)\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderBottomWidth\": \"0px\",\n              \"borderLeftWidth\": \"0px\",\n              \"borderRightWidth\": \"0px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"borderTopWidth\": \"0px\",\n              \"cursor\": \"pointer\",\n              \"height\": \"16px\",\n              \"justifyContent\": \"center\",\n              \"left\": \"70%\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"position\": \"absolute\",\n              \"transform\": \"translateX(-8px) scale(1)\",\n              \"width\": \"16px\",\n              \"zIndex\": 999,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"8px\",\n                  \"paddingRight\": \"8px\",\n                  \"paddingTop\": \"8px\",\n                  \"position\": \"absolute\",\n                  \"zIndex\": -1,\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderBottomWidth\": \"0px\",\n                  \"borderLeftWidth\": \"0px\",\n                  \"borderRightWidth\": \"0px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"borderTopWidth\": \"0px\",\n                  \"cursor\": \"pointer\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n              />\n              <div\n                style={\n                  Object {\n                    \"border\": 0,\n                    \"clip\": \"rect(0 0 0 0)\",\n                    \"clipPath\": \"inset(50%)\",\n                    \"height\": 1,\n                    \"margin\": \"0 -1px -1px 0\",\n                    \"overflow\": \"hidden\",\n                    \"padding\": 0,\n                    \"position\": \"absolute\",\n                    \"whiteSpace\": \"nowrap\",\n                    \"width\": 1,\n                  }\n                }\n              >\n                <input\n                  aria-labelledby=\"react-aria-0-1\"\n                  aria-valuetext={70}\n                  id=\"react-aria-0-1-0\"\n                  max={100}\n                  min={0}\n                  onBlur={[Function]}\n                  onChange={[Function]}\n                  onFocus={[Function]}\n                  step={1}\n                  tabIndex={0}\n                  type=\"range\"\n                  value={70}\n                />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Slider Disabled 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"marginLeft\": \"20px\",\n          \"marginRight\": \"20px\",\n          \"width\": \"80%\",\n        }\n      }\n    >\n      <div\n        aria-label=\"Slider\"\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"cursor\": \"not-allowed\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"opacity\": 0.6,\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onTouchStart={[Function]}\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"cursor\": \"pointer\",\n              \"height\": \"16px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"paddingBottom\": \"12px\",\n              \"paddingTop\": \"12px\",\n              \"touchAction\": \"manipulation\",\n              \"width\": \"100%\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                \"borderBottomLeftRadius\": \"8px\",\n                \"borderBottomRightRadius\": \"8px\",\n                \"borderTopLeftRadius\": \"8px\",\n                \"borderTopRightRadius\": \"8px\",\n                \"height\": \"4px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(79,70,229,1.00)\",\n                  \"height\": \"4px\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"width\": \"50%\",\n                }\n              }\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onTouchStart={[Function]}\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitTransform\": \"translateX(-8px) scale(1)\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(79,70,229,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"cursor\": \"pointer\",\n              \"height\": \"16px\",\n              \"justifyContent\": \"center\",\n              \"left\": \"50%\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"position\": \"absolute\",\n              \"transform\": \"translateX(-8px) scale(1)\",\n              \"width\": \"16px\",\n              \"zIndex\": 999,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"8px\",\n                  \"paddingRight\": \"8px\",\n                  \"paddingTop\": \"8px\",\n                  \"position\": \"absolute\",\n                  \"zIndex\": -1,\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(79,70,229,1.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"cursor\": \"pointer\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                style={\n                  Object {\n                    \"border\": 0,\n                    \"clip\": \"rect(0 0 0 0)\",\n                    \"clipPath\": \"inset(50%)\",\n                    \"height\": 1,\n                    \"margin\": \"0 -1px -1px 0\",\n                    \"overflow\": \"hidden\",\n                    \"padding\": 0,\n                    \"position\": \"absolute\",\n                    \"whiteSpace\": \"nowrap\",\n                    \"width\": 1,\n                  }\n                }\n              >\n                <input\n                  aria-labelledby=\"react-aria-0-1\"\n                  aria-valuetext={50}\n                  id=\"react-aria-0-1-0\"\n                  max={100}\n                  min={0}\n                  onBlur={[Function]}\n                  onChange={[Function]}\n                  onFocus={[Function]}\n                  step={1}\n                  tabIndex={0}\n                  type=\"range\"\n                  value={50}\n                />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Slider Form Controlled 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"maxWidth\": \"300px\",\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <label\n            className=\"css-view-1dbjc4n\"\n            id=\"field-198-label\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"start\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"flex-start\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n                \"marginBottom\": \"4px\",\n                \"marginTop\": \"4px\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"start\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(115,115,115,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"500\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Set your budget\n            </div>\n          </label>\n          <div\n            aria-label=\"Slider\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onMouseDown={[Function]}\n              onTouchStart={[Function]}\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"cursor\": \"pointer\",\n                  \"height\": \"16px\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"paddingBottom\": \"12px\",\n                  \"paddingTop\": \"12px\",\n                  \"touchAction\": \"manipulation\",\n                  \"width\": \"100%\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"borderBottomLeftRadius\": \"8px\",\n                    \"borderBottomRightRadius\": \"8px\",\n                    \"borderTopLeftRadius\": \"8px\",\n                    \"borderTopRightRadius\": \"8px\",\n                    \"height\": \"4px\",\n                    \"overflowX\": \"hidden\",\n                    \"overflowY\": \"hidden\",\n                    \"width\": \"100%\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                      \"height\": \"4px\",\n                      \"left\": \"0px\",\n                      \"position\": \"absolute\",\n                      \"width\": \"50%\",\n                    }\n                  }\n                />\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onMouseDown={[Function]}\n              onTouchStart={[Function]}\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitTransform\": \"translateX(-8px) scale(1)\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"cursor\": \"pointer\",\n                  \"height\": \"16px\",\n                  \"justifyContent\": \"center\",\n                  \"left\": \"50%\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"position\": \"absolute\",\n                  \"transform\": \"translateX(-8px) scale(1)\",\n                  \"width\": \"16px\",\n                  \"zIndex\": 999,\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexPack\": \"center\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"borderBottomLeftRadius\": \"9999px\",\n                      \"borderBottomRightRadius\": \"9999px\",\n                      \"borderTopLeftRadius\": \"9999px\",\n                      \"borderTopRightRadius\": \"9999px\",\n                      \"paddingBottom\": \"8px\",\n                      \"paddingLeft\": \"8px\",\n                      \"paddingRight\": \"8px\",\n                      \"paddingTop\": \"8px\",\n                      \"position\": \"absolute\",\n                      \"zIndex\": -1,\n                    }\n                  }\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                      \"borderBottomLeftRadius\": \"9999px\",\n                      \"borderBottomRightRadius\": \"9999px\",\n                      \"borderTopLeftRadius\": \"9999px\",\n                      \"borderTopRightRadius\": \"9999px\",\n                      \"cursor\": \"pointer\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                    }\n                  }\n                >\n                  <div\n                    style={\n                      Object {\n                        \"border\": 0,\n                        \"clip\": \"rect(0 0 0 0)\",\n                        \"clipPath\": \"inset(50%)\",\n                        \"height\": 1,\n                        \"margin\": \"0 -1px -1px 0\",\n                        \"overflow\": \"hidden\",\n                        \"padding\": 0,\n                        \"position\": \"absolute\",\n                        \"whiteSpace\": \"nowrap\",\n                        \"width\": 1,\n                      }\n                    }\n                  >\n                    <input\n                      aria-labelledby=\"react-aria-0-1\"\n                      aria-valuetext={50}\n                      id=\"react-aria-0-1-0\"\n                      max={100}\n                      min={0}\n                      onBlur={[Function]}\n                      onChange={[Function]}\n                      onFocus={[Function]}\n                      step={1}\n                      tabIndex={0}\n                      type=\"range\"\n                      value={50}\n                    />\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            id=\"field-198\"\n            style={\n              Object {\n                \"marginTop\": \"8px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <svg\n                role=\"img\"\n                stroke=\"\"\n                style={\n                  Object {\n                    \"color\": \"rgba(220,38,38,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"height\": \"12px\",\n                    \"width\": \"12px\",\n                  }\n                }\n                viewBox=\"0 0 16 16\"\n              >\n                <g>\n                  <path\n                    d=\"M8 16C6.41775 16 4.87103 15.5308 3.55544 14.6518C2.23985 13.7727 1.21447 12.5233 0.608967 11.0615C0.00346627 9.59966 -0.15496 7.99113 0.153721 6.43928C0.462403 4.88743 1.22433 3.46197 2.34315 2.34315C3.46197 1.22433 4.88743 0.462403 6.43928 0.153721C7.99113 -0.15496 9.59966 0.00346627 11.0615 0.608967C12.5233 1.21447 13.7727 2.23985 14.6518 3.55544C15.5308 4.87103 16 6.41775 16 8C16 10.1217 15.1571 12.1566 13.6569 13.6569C12.1566 15.1571 10.1217 16 8 16ZM8 14.4C9.2658 14.4 10.5032 14.0246 11.5556 13.3214C12.6081 12.6182 13.4284 11.6186 13.9128 10.4492C14.3972 9.27973 14.524 7.9929 14.277 6.75142C14.0301 5.50995 13.4205 4.36958 12.5255 3.47452C11.6304 2.57946 10.4901 1.96992 9.24858 1.72298C8.0071 1.47603 6.72028 1.60277 5.55083 2.08717C4.38138 2.57158 3.38184 3.39188 2.6786 4.44435C1.97536 5.49683 1.6 6.7342 1.6 8C1.6 9.69739 2.27429 11.3253 3.47452 12.5255C4.67475 13.7257 6.30262 14.4 8 14.4ZM7.2 10.4H8.8V12H7.2V10.4ZM7.2 4H8.8V8.8H7.2V4Z\"\n                    fill=\"currentColor\"\n                    stroke=\"\"\n                  />\n                </g>\n              </svg>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"4px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(220,38,38,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Something is wrong.\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Slider Playground 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"marginLeft\": \"20px\",\n          \"marginRight\": \"20px\",\n          \"width\": \"80%\",\n        }\n      }\n    >\n      <div\n        aria-label=\"Slider\"\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onTouchStart={[Function]}\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"cursor\": \"pointer\",\n              \"height\": \"16px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"paddingBottom\": \"12px\",\n              \"paddingTop\": \"12px\",\n              \"touchAction\": \"manipulation\",\n              \"width\": \"100%\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                \"borderBottomLeftRadius\": \"8px\",\n                \"borderBottomRightRadius\": \"8px\",\n                \"borderTopLeftRadius\": \"8px\",\n                \"borderTopRightRadius\": \"8px\",\n                \"height\": \"4px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                  \"height\": \"4px\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"width\": \"50%\",\n                }\n              }\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onTouchStart={[Function]}\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitTransform\": \"translateX(-8px) scale(1)\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"cursor\": \"pointer\",\n              \"height\": \"16px\",\n              \"justifyContent\": \"center\",\n              \"left\": \"50%\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"position\": \"absolute\",\n              \"transform\": \"translateX(-8px) scale(1)\",\n              \"width\": \"16px\",\n              \"zIndex\": 999,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"8px\",\n                  \"paddingRight\": \"8px\",\n                  \"paddingTop\": \"8px\",\n                  \"position\": \"absolute\",\n                  \"zIndex\": -1,\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"cursor\": \"pointer\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                style={\n                  Object {\n                    \"border\": 0,\n                    \"clip\": \"rect(0 0 0 0)\",\n                    \"clipPath\": \"inset(50%)\",\n                    \"height\": 1,\n                    \"margin\": \"0 -1px -1px 0\",\n                    \"overflow\": \"hidden\",\n                    \"padding\": 0,\n                    \"position\": \"absolute\",\n                    \"whiteSpace\": \"nowrap\",\n                    \"width\": 1,\n                  }\n                }\n              >\n                <input\n                  aria-labelledby=\"react-aria-0-1\"\n                  aria-valuetext={50}\n                  id=\"react-aria-0-1-0\"\n                  max={100}\n                  min={0}\n                  onBlur={[Function]}\n                  onChange={[Function]}\n                  onFocus={[Function]}\n                  step={1}\n                  tabIndex={0}\n                  type=\"range\"\n                  value={50}\n                />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Slider ReadOnly 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"marginLeft\": \"20px\",\n          \"marginRight\": \"20px\",\n          \"width\": \"80%\",\n        }\n      }\n    >\n      <div\n        aria-label=\"Slider\"\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onTouchStart={[Function]}\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"cursor\": \"pointer\",\n              \"height\": \"16px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"paddingBottom\": \"12px\",\n              \"paddingTop\": \"12px\",\n              \"touchAction\": \"manipulation\",\n              \"width\": \"100%\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(224,231,255,1.00)\",\n                \"borderBottomLeftRadius\": \"8px\",\n                \"borderBottomRightRadius\": \"8px\",\n                \"borderTopLeftRadius\": \"8px\",\n                \"borderTopRightRadius\": \"8px\",\n                \"height\": \"4px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(79,70,229,1.00)\",\n                  \"height\": \"4px\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"width\": \"50%\",\n                }\n              }\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onTouchStart={[Function]}\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitTransform\": \"translateX(-8px) scale(1)\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(79,70,229,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"cursor\": \"pointer\",\n              \"height\": \"16px\",\n              \"justifyContent\": \"center\",\n              \"left\": \"50%\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"position\": \"absolute\",\n              \"transform\": \"translateX(-8px) scale(1)\",\n              \"width\": \"16px\",\n              \"zIndex\": 999,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"8px\",\n                  \"paddingRight\": \"8px\",\n                  \"paddingTop\": \"8px\",\n                  \"position\": \"absolute\",\n                  \"zIndex\": -1,\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(79,70,229,1.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"cursor\": \"pointer\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                style={\n                  Object {\n                    \"border\": 0,\n                    \"clip\": \"rect(0 0 0 0)\",\n                    \"clipPath\": \"inset(50%)\",\n                    \"height\": 1,\n                    \"margin\": \"0 -1px -1px 0\",\n                    \"overflow\": \"hidden\",\n                    \"padding\": 0,\n                    \"position\": \"absolute\",\n                    \"whiteSpace\": \"nowrap\",\n                    \"width\": 1,\n                  }\n                }\n              >\n                <input\n                  aria-labelledby=\"react-aria-0-1\"\n                  aria-valuetext={50}\n                  id=\"react-aria-0-1-0\"\n                  max={100}\n                  min={0}\n                  onBlur={[Function]}\n                  onChange={[Function]}\n                  onFocus={[Function]}\n                  step={1}\n                  tabIndex={0}\n                  type=\"range\"\n                  value={50}\n                />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Slider Size 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"maxWidth\": \"300px\",\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <div\n          aria-label=\"Slider\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onMouseDown={[Function]}\n            onTouchStart={[Function]}\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"height\": \"16px\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"paddingBottom\": \"12px\",\n                \"paddingTop\": \"12px\",\n                \"touchAction\": \"manipulation\",\n                \"width\": \"100%\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"borderBottomLeftRadius\": \"8px\",\n                  \"borderBottomRightRadius\": \"8px\",\n                  \"borderTopLeftRadius\": \"8px\",\n                  \"borderTopRightRadius\": \"8px\",\n                  \"height\": \"4px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                    \"height\": \"4px\",\n                    \"left\": \"0px\",\n                    \"position\": \"absolute\",\n                    \"width\": \"40%\",\n                  }\n                }\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onMouseDown={[Function]}\n            onTouchStart={[Function]}\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitTransform\": \"translateX(-8px) scale(1)\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"cursor\": \"pointer\",\n                \"height\": \"16px\",\n                \"justifyContent\": \"center\",\n                \"left\": \"40%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"position\": \"absolute\",\n                \"transform\": \"translateX(-8px) scale(1)\",\n                \"width\": \"16px\",\n                \"zIndex\": 999,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"8px\",\n                    \"paddingRight\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"position\": \"absolute\",\n                    \"zIndex\": -1,\n                  }\n                }\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"cursor\": \"pointer\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                  }\n                }\n              >\n                <div\n                  style={\n                    Object {\n                      \"border\": 0,\n                      \"clip\": \"rect(0 0 0 0)\",\n                      \"clipPath\": \"inset(50%)\",\n                      \"height\": 1,\n                      \"margin\": \"0 -1px -1px 0\",\n                      \"overflow\": \"hidden\",\n                      \"padding\": 0,\n                      \"position\": \"absolute\",\n                      \"whiteSpace\": \"nowrap\",\n                      \"width\": 1,\n                    }\n                  }\n                >\n                  <input\n                    aria-labelledby=\"react-aria-0-1\"\n                    aria-valuetext={40}\n                    id=\"react-aria-0-1-0\"\n                    max={100}\n                    min={0}\n                    onBlur={[Function]}\n                    onChange={[Function]}\n                    onFocus={[Function]}\n                    step={1}\n                    tabIndex={0}\n                    type=\"range\"\n                    value={40}\n                  />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          aria-label=\"Slider\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onMouseDown={[Function]}\n            onTouchStart={[Function]}\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"height\": \"20px\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"paddingBottom\": \"12px\",\n                \"paddingTop\": \"12px\",\n                \"touchAction\": \"manipulation\",\n                \"width\": \"100%\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"borderBottomLeftRadius\": \"8px\",\n                  \"borderBottomRightRadius\": \"8px\",\n                  \"borderTopLeftRadius\": \"8px\",\n                  \"borderTopRightRadius\": \"8px\",\n                  \"height\": \"5px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                    \"height\": \"5px\",\n                    \"left\": \"0px\",\n                    \"position\": \"absolute\",\n                    \"width\": \"60%\",\n                  }\n                }\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onMouseDown={[Function]}\n            onTouchStart={[Function]}\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitTransform\": \"translateX(-10px) scale(1)\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"cursor\": \"pointer\",\n                \"height\": \"20px\",\n                \"justifyContent\": \"center\",\n                \"left\": \"60%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"position\": \"absolute\",\n                \"transform\": \"translateX(-10px) scale(1)\",\n                \"width\": \"20px\",\n                \"zIndex\": 999,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"paddingBottom\": \"10px\",\n                    \"paddingLeft\": \"10px\",\n                    \"paddingRight\": \"10px\",\n                    \"paddingTop\": \"10px\",\n                    \"position\": \"absolute\",\n                    \"zIndex\": -1,\n                  }\n                }\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"cursor\": \"pointer\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                  }\n                }\n              >\n                <div\n                  style={\n                    Object {\n                      \"border\": 0,\n                      \"clip\": \"rect(0 0 0 0)\",\n                      \"clipPath\": \"inset(50%)\",\n                      \"height\": 1,\n                      \"margin\": \"0 -1px -1px 0\",\n                      \"overflow\": \"hidden\",\n                      \"padding\": 0,\n                      \"position\": \"absolute\",\n                      \"whiteSpace\": \"nowrap\",\n                      \"width\": 1,\n                    }\n                  }\n                >\n                  <input\n                    aria-labelledby=\"react-aria-0-4\"\n                    aria-valuetext={60}\n                    id=\"react-aria-0-4-0\"\n                    max={100}\n                    min={0}\n                    onBlur={[Function]}\n                    onChange={[Function]}\n                    onFocus={[Function]}\n                    step={1}\n                    tabIndex={0}\n                    type=\"range\"\n                    value={60}\n                  />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          aria-label=\"Slider\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onMouseDown={[Function]}\n            onTouchStart={[Function]}\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"height\": \"24px\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"paddingBottom\": \"12px\",\n                \"paddingTop\": \"12px\",\n                \"touchAction\": \"manipulation\",\n                \"width\": \"100%\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"borderBottomLeftRadius\": \"8px\",\n                  \"borderBottomRightRadius\": \"8px\",\n                  \"borderTopLeftRadius\": \"8px\",\n                  \"borderTopRightRadius\": \"8px\",\n                  \"height\": \"6px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                    \"height\": \"6px\",\n                    \"left\": \"0px\",\n                    \"position\": \"absolute\",\n                    \"width\": \"80%\",\n                  }\n                }\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onMouseDown={[Function]}\n            onTouchStart={[Function]}\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitTransform\": \"translateX(-12px) scale(1)\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"cursor\": \"pointer\",\n                \"height\": \"24px\",\n                \"justifyContent\": \"center\",\n                \"left\": \"80%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"position\": \"absolute\",\n                \"transform\": \"translateX(-12px) scale(1)\",\n                \"width\": \"24px\",\n                \"zIndex\": 999,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"paddingBottom\": \"12px\",\n                    \"paddingLeft\": \"12px\",\n                    \"paddingRight\": \"12px\",\n                    \"paddingTop\": \"12px\",\n                    \"position\": \"absolute\",\n                    \"zIndex\": -1,\n                  }\n                }\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"cursor\": \"pointer\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                  }\n                }\n              >\n                <div\n                  style={\n                    Object {\n                      \"border\": 0,\n                      \"clip\": \"rect(0 0 0 0)\",\n                      \"clipPath\": \"inset(50%)\",\n                      \"height\": 1,\n                      \"margin\": \"0 -1px -1px 0\",\n                      \"overflow\": \"hidden\",\n                      \"padding\": 0,\n                      \"position\": \"absolute\",\n                      \"whiteSpace\": \"nowrap\",\n                      \"width\": 1,\n                    }\n                  }\n                >\n                  <input\n                    aria-labelledby=\"react-aria-0-7\"\n                    aria-valuetext={80}\n                    id=\"react-aria-0-7-0\"\n                    max={100}\n                    min={0}\n                    onBlur={[Function]}\n                    onChange={[Function]}\n                    onFocus={[Function]}\n                    step={1}\n                    tabIndex={0}\n                    type=\"range\"\n                    value={80}\n                  />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Slider Usage 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        aria-label=\"hello world\"\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"justifyContent\": \"center\",\n            \"maxWidth\": \"300px\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onTouchStart={[Function]}\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"cursor\": \"pointer\",\n              \"height\": \"16px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"paddingBottom\": \"12px\",\n              \"paddingTop\": \"12px\",\n              \"touchAction\": \"manipulation\",\n              \"width\": \"100%\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                \"borderBottomLeftRadius\": \"8px\",\n                \"borderBottomRightRadius\": \"8px\",\n                \"borderTopLeftRadius\": \"8px\",\n                \"borderTopRightRadius\": \"8px\",\n                \"height\": \"4px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                  \"height\": \"4px\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"width\": \"70%\",\n                }\n              }\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onTouchStart={[Function]}\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitTransform\": \"translateX(-8px) scale(1)\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"cursor\": \"pointer\",\n              \"height\": \"16px\",\n              \"justifyContent\": \"center\",\n              \"left\": \"70%\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"position\": \"absolute\",\n              \"transform\": \"translateX(-8px) scale(1)\",\n              \"width\": \"16px\",\n              \"zIndex\": 999,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"8px\",\n                  \"paddingRight\": \"8px\",\n                  \"paddingTop\": \"8px\",\n                  \"position\": \"absolute\",\n                  \"zIndex\": -1,\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"cursor\": \"pointer\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                style={\n                  Object {\n                    \"border\": 0,\n                    \"clip\": \"rect(0 0 0 0)\",\n                    \"clipPath\": \"inset(50%)\",\n                    \"height\": 1,\n                    \"margin\": \"0 -1px -1px 0\",\n                    \"overflow\": \"hidden\",\n                    \"padding\": 0,\n                    \"position\": \"absolute\",\n                    \"whiteSpace\": \"nowrap\",\n                    \"width\": 1,\n                  }\n                }\n              >\n                <input\n                  aria-labelledby=\"react-aria-0-1\"\n                  aria-valuetext={70}\n                  id=\"react-aria-0-1-0\"\n                  max={100}\n                  min={0}\n                  onBlur={[Function]}\n                  onChange={[Function]}\n                  onFocus={[Function]}\n                  step={10}\n                  tabIndex={0}\n                  type=\"range\"\n                  value={70}\n                />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Slider Value 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"alignItems\": \"center\",\n            \"maxWidth\": \"300px\",\n            \"msFlexAlign\": \"center\",\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n              \"textAlign\": \"center\",\n            }\n          }\n        >\n          onChangeValue - \n          70\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n              \"textAlign\": \"center\",\n            }\n          }\n        >\n          onChangeEndValue - \n          70\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          aria-label=\"Slider\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onMouseDown={[Function]}\n            onTouchStart={[Function]}\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"height\": \"16px\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"paddingBottom\": \"12px\",\n                \"paddingTop\": \"12px\",\n                \"touchAction\": \"manipulation\",\n                \"width\": \"100%\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"borderBottomLeftRadius\": \"8px\",\n                  \"borderBottomRightRadius\": \"8px\",\n                  \"borderTopLeftRadius\": \"8px\",\n                  \"borderTopRightRadius\": \"8px\",\n                  \"height\": \"4px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                    \"height\": \"4px\",\n                    \"left\": \"0px\",\n                    \"position\": \"absolute\",\n                    \"width\": \"70%\",\n                  }\n                }\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onMouseDown={[Function]}\n            onTouchStart={[Function]}\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitTransform\": \"translateX(-8px) scale(1)\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"cursor\": \"pointer\",\n                \"height\": \"16px\",\n                \"justifyContent\": \"center\",\n                \"left\": \"70%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"position\": \"absolute\",\n                \"transform\": \"translateX(-8px) scale(1)\",\n                \"width\": \"16px\",\n                \"zIndex\": 999,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"8px\",\n                    \"paddingRight\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"position\": \"absolute\",\n                    \"zIndex\": -1,\n                  }\n                }\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"cursor\": \"pointer\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                  }\n                }\n              >\n                <div\n                  style={\n                    Object {\n                      \"border\": 0,\n                      \"clip\": \"rect(0 0 0 0)\",\n                      \"clipPath\": \"inset(50%)\",\n                      \"height\": 1,\n                      \"margin\": \"0 -1px -1px 0\",\n                      \"overflow\": \"hidden\",\n                      \"padding\": 0,\n                      \"position\": \"absolute\",\n                      \"whiteSpace\": \"nowrap\",\n                      \"width\": 1,\n                    }\n                  }\n                >\n                  <input\n                    aria-labelledby=\"react-aria-0-1\"\n                    aria-valuetext={70}\n                    id=\"react-aria-0-1-0\"\n                    max={100}\n                    min={0}\n                    onBlur={[Function]}\n                    onChange={[Function]}\n                    onFocus={[Function]}\n                    step={1}\n                    tabIndex={0}\n                    type=\"range\"\n                    value={70}\n                  />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Slider Vertical 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"marginLeft\": \"20px\",\n          \"marginRight\": \"20px\",\n          \"width\": \"80%\",\n        }\n      }\n    >\n      <div\n        aria-label=\"Slider\"\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"height\": \"192px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onTouchStart={[Function]}\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"cursor\": \"pointer\",\n              \"height\": \"100%\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"touchAction\": \"manipulation\",\n              \"width\": \"16px\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                \"borderBottomLeftRadius\": \"8px\",\n                \"borderBottomRightRadius\": \"8px\",\n                \"borderTopLeftRadius\": \"8px\",\n                \"borderTopRightRadius\": \"8px\",\n                \"height\": \"100%\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"4px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(13,148,136,1.00)\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"70%\",\n                  \"position\": \"absolute\",\n                  \"width\": \"4px\",\n                }\n              }\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onTouchStart={[Function]}\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitTransform\": \"translateY(8px) scale(1)\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(13,148,136,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"bottom\": \"70%\",\n              \"cursor\": \"pointer\",\n              \"height\": \"16px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"position\": \"absolute\",\n              \"transform\": \"translateY(8px) scale(1)\",\n              \"width\": \"16px\",\n              \"zIndex\": 999,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"8px\",\n                  \"paddingRight\": \"8px\",\n                  \"paddingTop\": \"8px\",\n                  \"position\": \"absolute\",\n                  \"zIndex\": -1,\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(13,148,136,1.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"cursor\": \"pointer\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                style={\n                  Object {\n                    \"border\": 0,\n                    \"clip\": \"rect(0 0 0 0)\",\n                    \"clipPath\": \"inset(50%)\",\n                    \"height\": 1,\n                    \"margin\": \"0 -1px -1px 0\",\n                    \"overflow\": \"hidden\",\n                    \"padding\": 0,\n                    \"position\": \"absolute\",\n                    \"whiteSpace\": \"nowrap\",\n                    \"width\": 1,\n                  }\n                }\n              >\n                <input\n                  aria-labelledby=\"react-aria-0-1\"\n                  aria-orientation=\"vertical\"\n                  aria-valuetext={70}\n                  id=\"react-aria-0-1-0\"\n                  max={100}\n                  min={0}\n                  onBlur={[Function]}\n                  onChange={[Function]}\n                  onFocus={[Function]}\n                  step={1}\n                  tabIndex={0}\n                  type=\"range\"\n                  value={70}\n                />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Spinner Color 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        aria-label=\"loading\"\n        aria-valuemax={1}\n        aria-valuemin={0}\n        className=\"css-view-1dbjc4n\"\n        role=\"progressbar\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"dataSet\": Object {},\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n r-animationKeyframes-127358a\"\n          style={\n            Object {\n              \"WebkitAnimationDuration\": \"0.75s\",\n              \"WebkitAnimationIterationCount\": \"infinite\",\n              \"WebkitAnimationTimingFunction\": \"linear\",\n              \"animationDuration\": \"0.75s\",\n              \"animationIterationCount\": \"infinite\",\n              \"animationTimingFunction\": \"linear\",\n              \"height\": \"20px\",\n              \"width\": \"20px\",\n            }\n          }\n        >\n          <svg\n            height=\"100%\"\n            viewBox=\"0 0 32 32\"\n            width=\"100%\"\n          >\n            <circle\n              cx=\"16\"\n              cy=\"16\"\n              fill=\"none\"\n              r=\"14\"\n              strokeWidth=\"4\"\n              style={\n                Object {\n                  \"opacity\": 0.2,\n                  \"stroke\": \"#10b981\",\n                }\n              }\n            />\n            <circle\n              cx=\"16\"\n              cy=\"16\"\n              fill=\"none\"\n              r=\"14\"\n              strokeWidth=\"4\"\n              style={\n                Object {\n                  \"stroke\": \"#10b981\",\n                  \"strokeDasharray\": 80,\n                  \"strokeDashoffset\": 60,\n                }\n              }\n            />\n          </svg>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"32px\",\n          }\n        }\n      />\n      <div\n        aria-label=\"loading\"\n        aria-valuemax={1}\n        aria-valuemin={0}\n        className=\"css-view-1dbjc4n\"\n        role=\"progressbar\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"dataSet\": Object {},\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n r-animationKeyframes-127358a\"\n          style={\n            Object {\n              \"WebkitAnimationDuration\": \"0.75s\",\n              \"WebkitAnimationIterationCount\": \"infinite\",\n              \"WebkitAnimationTimingFunction\": \"linear\",\n              \"animationDuration\": \"0.75s\",\n              \"animationIterationCount\": \"infinite\",\n              \"animationTimingFunction\": \"linear\",\n              \"height\": \"20px\",\n              \"width\": \"20px\",\n            }\n          }\n        >\n          <svg\n            height=\"100%\"\n            viewBox=\"0 0 32 32\"\n            width=\"100%\"\n          >\n            <circle\n              cx=\"16\"\n              cy=\"16\"\n              fill=\"none\"\n              r=\"14\"\n              strokeWidth=\"4\"\n              style={\n                Object {\n                  \"opacity\": 0.2,\n                  \"stroke\": \"#f97316\",\n                }\n              }\n            />\n            <circle\n              cx=\"16\"\n              cy=\"16\"\n              fill=\"none\"\n              r=\"14\"\n              strokeWidth=\"4\"\n              style={\n                Object {\n                  \"stroke\": \"#f97316\",\n                  \"strokeDasharray\": 80,\n                  \"strokeDashoffset\": 60,\n                }\n              }\n            />\n          </svg>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"32px\",\n          }\n        }\n      />\n      <div\n        aria-label=\"loading\"\n        aria-valuemax={1}\n        aria-valuemin={0}\n        className=\"css-view-1dbjc4n\"\n        role=\"progressbar\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"dataSet\": Object {},\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n r-animationKeyframes-127358a\"\n          style={\n            Object {\n              \"WebkitAnimationDuration\": \"0.75s\",\n              \"WebkitAnimationIterationCount\": \"infinite\",\n              \"WebkitAnimationTimingFunction\": \"linear\",\n              \"animationDuration\": \"0.75s\",\n              \"animationIterationCount\": \"infinite\",\n              \"animationTimingFunction\": \"linear\",\n              \"height\": \"20px\",\n              \"width\": \"20px\",\n            }\n          }\n        >\n          <svg\n            height=\"100%\"\n            viewBox=\"0 0 32 32\"\n            width=\"100%\"\n          >\n            <circle\n              cx=\"16\"\n              cy=\"16\"\n              fill=\"none\"\n              r=\"14\"\n              strokeWidth=\"4\"\n              style={\n                Object {\n                  \"opacity\": 0.2,\n                  \"stroke\": \"#6366f1\",\n                }\n              }\n            />\n            <circle\n              cx=\"16\"\n              cy=\"16\"\n              fill=\"none\"\n              r=\"14\"\n              strokeWidth=\"4\"\n              style={\n                Object {\n                  \"stroke\": \"#6366f1\",\n                  \"strokeDasharray\": 80,\n                  \"strokeDashoffset\": 60,\n                }\n              }\n            />\n          </svg>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"32px\",\n          }\n        }\n      />\n      <div\n        aria-label=\"loading\"\n        aria-valuemax={1}\n        aria-valuemin={0}\n        className=\"css-view-1dbjc4n\"\n        role=\"progressbar\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"dataSet\": Object {},\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n r-animationKeyframes-127358a\"\n          style={\n            Object {\n              \"WebkitAnimationDuration\": \"0.75s\",\n              \"WebkitAnimationIterationCount\": \"infinite\",\n              \"WebkitAnimationTimingFunction\": \"linear\",\n              \"animationDuration\": \"0.75s\",\n              \"animationIterationCount\": \"infinite\",\n              \"animationTimingFunction\": \"linear\",\n              \"height\": \"20px\",\n              \"width\": \"20px\",\n            }\n          }\n        >\n          <svg\n            height=\"100%\"\n            viewBox=\"0 0 32 32\"\n            width=\"100%\"\n          >\n            <circle\n              cx=\"16\"\n              cy=\"16\"\n              fill=\"none\"\n              r=\"14\"\n              strokeWidth=\"4\"\n              style={\n                Object {\n                  \"opacity\": 0.2,\n                  \"stroke\": \"#06b6d4\",\n                }\n              }\n            />\n            <circle\n              cx=\"16\"\n              cy=\"16\"\n              fill=\"none\"\n              r=\"14\"\n              strokeWidth=\"4\"\n              style={\n                Object {\n                  \"stroke\": \"#06b6d4\",\n                  \"strokeDasharray\": 80,\n                  \"strokeDashoffset\": 60,\n                }\n              }\n            />\n          </svg>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Spinner Playground 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"justify\",\n          \"WebkitJustifyContent\": \"space-between\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"space-between\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"justify\",\n        }\n      }\n    >\n      <div\n        aria-label=\"loading\"\n        aria-valuemax={1}\n        aria-valuemin={0}\n        className=\"css-view-1dbjc4n\"\n        role=\"progressbar\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"dataSet\": Object {},\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n r-animationKeyframes-127358a\"\n          style={\n            Object {\n              \"WebkitAnimationDuration\": \"0.75s\",\n              \"WebkitAnimationIterationCount\": \"infinite\",\n              \"WebkitAnimationTimingFunction\": \"linear\",\n              \"animationDuration\": \"0.75s\",\n              \"animationIterationCount\": \"infinite\",\n              \"animationTimingFunction\": \"linear\",\n              \"height\": \"36px\",\n              \"width\": \"36px\",\n            }\n          }\n        >\n          <svg\n            height=\"100%\"\n            viewBox=\"0 0 32 32\"\n            width=\"100%\"\n          >\n            <circle\n              cx=\"16\"\n              cy=\"16\"\n              fill=\"none\"\n              r=\"14\"\n              strokeWidth=\"4\"\n              style={\n                Object {\n                  \"opacity\": 0.2,\n                  \"stroke\": \"#67e8f9\",\n                }\n              }\n            />\n            <circle\n              cx=\"16\"\n              cy=\"16\"\n              fill=\"none\"\n              r=\"14\"\n              strokeWidth=\"4\"\n              style={\n                Object {\n                  \"stroke\": \"#67e8f9\",\n                  \"strokeDasharray\": 80,\n                  \"strokeDashoffset\": 60,\n                }\n              }\n            />\n          </svg>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Spinner Size 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        aria-label=\"loading\"\n        aria-valuemax={1}\n        aria-valuemin={0}\n        className=\"css-view-1dbjc4n\"\n        role=\"progressbar\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"dataSet\": Object {},\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n r-animationKeyframes-127358a\"\n          style={\n            Object {\n              \"WebkitAnimationDuration\": \"0.75s\",\n              \"WebkitAnimationIterationCount\": \"infinite\",\n              \"WebkitAnimationTimingFunction\": \"linear\",\n              \"animationDuration\": \"0.75s\",\n              \"animationIterationCount\": \"infinite\",\n              \"animationTimingFunction\": \"linear\",\n              \"height\": \"20px\",\n              \"width\": \"20px\",\n            }\n          }\n        >\n          <svg\n            height=\"100%\"\n            viewBox=\"0 0 32 32\"\n            width=\"100%\"\n          >\n            <circle\n              cx=\"16\"\n              cy=\"16\"\n              fill=\"none\"\n              r=\"14\"\n              strokeWidth=\"4\"\n              style={\n                Object {\n                  \"opacity\": 0.2,\n                  \"stroke\": \"#0891b2\",\n                }\n              }\n            />\n            <circle\n              cx=\"16\"\n              cy=\"16\"\n              fill=\"none\"\n              r=\"14\"\n              strokeWidth=\"4\"\n              style={\n                Object {\n                  \"stroke\": \"#0891b2\",\n                  \"strokeDasharray\": 80,\n                  \"strokeDashoffset\": 60,\n                }\n              }\n            />\n          </svg>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"32px\",\n          }\n        }\n      />\n      <div\n        aria-label=\"loading\"\n        aria-valuemax={1}\n        aria-valuemin={0}\n        className=\"css-view-1dbjc4n\"\n        role=\"progressbar\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"dataSet\": Object {},\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n r-animationKeyframes-127358a\"\n          style={\n            Object {\n              \"WebkitAnimationDuration\": \"0.75s\",\n              \"WebkitAnimationIterationCount\": \"infinite\",\n              \"WebkitAnimationTimingFunction\": \"linear\",\n              \"animationDuration\": \"0.75s\",\n              \"animationIterationCount\": \"infinite\",\n              \"animationTimingFunction\": \"linear\",\n              \"height\": \"36px\",\n              \"width\": \"36px\",\n            }\n          }\n        >\n          <svg\n            height=\"100%\"\n            viewBox=\"0 0 32 32\"\n            width=\"100%\"\n          >\n            <circle\n              cx=\"16\"\n              cy=\"16\"\n              fill=\"none\"\n              r=\"14\"\n              strokeWidth=\"4\"\n              style={\n                Object {\n                  \"opacity\": 0.2,\n                  \"stroke\": \"#0891b2\",\n                }\n              }\n            />\n            <circle\n              cx=\"16\"\n              cy=\"16\"\n              fill=\"none\"\n              r=\"14\"\n              strokeWidth=\"4\"\n              style={\n                Object {\n                  \"stroke\": \"#0891b2\",\n                  \"strokeDasharray\": 80,\n                  \"strokeDashoffset\": 60,\n                }\n              }\n            />\n          </svg>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Spinner Usage 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        aria-label=\"loading\"\n        aria-valuemax={1}\n        aria-valuemin={0}\n        className=\"css-view-1dbjc4n\"\n        role=\"progressbar\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"accessibilityLabel\": \"Loading posts\",\n            \"alignItems\": \"center\",\n            \"dataSet\": Object {},\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n r-animationKeyframes-127358a\"\n          style={\n            Object {\n              \"WebkitAnimationDuration\": \"0.75s\",\n              \"WebkitAnimationIterationCount\": \"infinite\",\n              \"WebkitAnimationTimingFunction\": \"linear\",\n              \"animationDuration\": \"0.75s\",\n              \"animationIterationCount\": \"infinite\",\n              \"animationTimingFunction\": \"linear\",\n              \"height\": \"20px\",\n              \"width\": \"20px\",\n            }\n          }\n        >\n          <svg\n            height=\"100%\"\n            viewBox=\"0 0 32 32\"\n            width=\"100%\"\n          >\n            <circle\n              cx=\"16\"\n              cy=\"16\"\n              fill=\"none\"\n              r=\"14\"\n              strokeWidth=\"4\"\n              style={\n                Object {\n                  \"opacity\": 0.2,\n                  \"stroke\": \"#0891b2\",\n                }\n              }\n            />\n            <circle\n              cx=\"16\"\n              cy=\"16\"\n              fill=\"none\"\n              r=\"14\"\n              strokeWidth=\"4\"\n              style={\n                Object {\n                  \"stroke\": \"#0891b2\",\n                  \"strokeDasharray\": 80,\n                  \"strokeDashoffset\": 60,\n                }\n              }\n            />\n          </svg>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(6,182,212,1.00)\",\n            \"fontSize\": \"16px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n          }\n        }\n      >\n        Loading\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Stack Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      onScroll={[Function]}\n      onTouchEnd={[Function]}\n      onTouchMove={[Function]}\n      onTouchStart={[Function]}\n      onWheel={[Function]}\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxFlex\": 1,\n          \"WebkitBoxOrient\": \"vertical\",\n          \"WebkitFlexDirection\": \"column\",\n          \"WebkitFlexGrow\": 1,\n          \"WebkitFlexShrink\": 1,\n          \"WebkitOverflowScrolling\": \"touch\",\n          \"WebkitTransform\": \"translateZ(0px)\",\n          \"flexDirection\": \"column\",\n          \"flexGrow\": 1,\n          \"flexShrink\": 1,\n          \"msFlexDirection\": \"column\",\n          \"msFlexNegative\": 1,\n          \"msFlexPositive\": 1,\n          \"overflowX\": \"hidden\",\n          \"overflowY\": \"auto\",\n          \"transform\": \"translateZ(0px)\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"dataSet\": Object {},\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"marginTop\": \"16px\",\n              \"paddingLeft\": \"32px\",\n              \"paddingRight\": \"32px\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            row\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"marginBottom\": \"10px\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(34,211,238,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n                  \"display\": \"flex\",\n                  \"height\": \"64px\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"width\": \"64px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,249,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Box 1\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(6,182,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n                  \"display\": \"flex\",\n                  \"height\": \"64px\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"width\": \"64px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,249,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Box 2\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(14,116,144,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n                  \"display\": \"flex\",\n                  \"height\": \"64px\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"width\": \"64px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,249,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Box 3\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            column\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"vertical\",\n                \"WebkitFlexDirection\": \"column\",\n                \"flexDirection\": \"column\",\n                \"marginBottom\": \"10px\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"column\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(34,211,238,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n                  \"display\": \"flex\",\n                  \"height\": \"64px\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"width\": \"64px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,249,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Box 1\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(6,182,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n                  \"display\": \"flex\",\n                  \"height\": \"64px\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"width\": \"64px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,249,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Box 2\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(14,116,144,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n                  \"display\": \"flex\",\n                  \"height\": \"64px\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"width\": \"64px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,249,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Box 3\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            row-reverse\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"marginBottom\": \"10px\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(14,116,144,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n                  \"display\": \"flex\",\n                  \"height\": \"64px\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"width\": \"64px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,249,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Box 3\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(6,182,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n                  \"display\": \"flex\",\n                  \"height\": \"64px\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"width\": \"64px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,249,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Box 2\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(34,211,238,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n                  \"display\": \"flex\",\n                  \"height\": \"64px\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"width\": \"64px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,249,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Box 1\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            column-reverse\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"reverse\",\n                \"WebkitBoxOrient\": \"vertical\",\n                \"WebkitFlexDirection\": \"column-reverse\",\n                \"flexDirection\": \"column-reverse\",\n                \"marginBottom\": \"10px\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"column-reverse\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(34,211,238,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n                  \"display\": \"flex\",\n                  \"height\": \"64px\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"width\": \"64px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,249,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Box 1\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(6,182,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n                  \"display\": \"flex\",\n                  \"height\": \"64px\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"width\": \"64px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,249,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Box 2\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(14,116,144,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n                  \"display\": \"flex\",\n                  \"height\": \"64px\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"width\": \"64px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,249,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Box 3\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Stack Divider 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"marginBottom\": \"12px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Simple\n            </div>\n          </div>\n          <div\n            aria-orientation=\"vertical\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(229,231,235,1.00)\",\n                \"height\": \"100%\",\n                \"marginLeft\": \"8px\",\n                \"marginRight\": \"8px\",\n                \"width\": \"2px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Easy\n            </div>\n          </div>\n          <div\n            aria-orientation=\"vertical\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(229,231,235,1.00)\",\n                \"height\": \"100%\",\n                \"marginLeft\": \"8px\",\n                \"marginRight\": \"8px\",\n                \"width\": \"2px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Beautiful\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots StatusBar Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlex\": 1,\n          \"WebkitJustifyContent\": \"center\",\n          \"flex\": 1,\n          \"justifyContent\": \"center\",\n          \"msFlex\": \"1 1 0%\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n            \"marginBottom\": \"12px\",\n            \"textAlign\": \"center\",\n          }\n        }\n      >\n        StatusBar Visibility:\n        \n\n        Visible\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"paddingBottom\": \"40px\",\n            \"paddingLeft\": \"40px\",\n            \"paddingRight\": \"40px\",\n            \"paddingTop\": \"40px\",\n          }\n        }\n      >\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Toggle StatusBar\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Switch Accessibility 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitFlexDirection\": \"row\",\n          \"alignItems\": \"center\",\n          \"flexDirection\": \"row\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"18px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        Accessibility\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"32px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitUserSelect\": \"none\",\n            \"cursor\": \"pointer\",\n            \"height\": \"20px\",\n            \"msUserSelect\": \"none\",\n            \"userSelect\": \"none\",\n            \"width\": \"40px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n              \"borderBottomLeftRadius\": \"10px\",\n              \"borderBottomRightRadius\": \"10px\",\n              \"borderTopLeftRadius\": \"10px\",\n              \"borderTopRightRadius\": \"10px\",\n              \"bottom\": \"0px\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"70%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"auto\",\n              \"marginLeft\": \"auto\",\n              \"marginRight\": \"auto\",\n              \"marginTop\": \"auto\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"100%\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignSelf\": \"flex-start\",\n              \"WebkitTransform\": \"translateZ(0px)\",\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"alignSelf\": \"flex-start\",\n              \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"100%\",\n              \"borderBottomRightRadius\": \"100%\",\n              \"borderTopLeftRadius\": \"100%\",\n              \"borderTopRightRadius\": \"100%\",\n              \"boxShadow\": \"0px 1px 3px rgba(0,0,0,0.5)\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"20px\",\n              \"left\": \"0%\",\n              \"marginLeft\": \"0px\",\n              \"msFlexItemAlign\": \"start\",\n              \"transform\": \"translateZ(0px)\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"20px\",\n            }\n          }\n        />\n        <input\n          aria-label=\"switch-accessible\"\n          checked={false}\n          disabled={false}\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          role=\"switch\"\n          style={\n            Object {\n              \"bottom\": \"0px\",\n              \"cursor\": \"inherit\",\n              \"height\": \"100%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"0px\",\n              \"marginLeft\": \"0px\",\n              \"marginRight\": \"0px\",\n              \"marginTop\": \"0px\",\n              \"opacity\": 0,\n              \"paddingBottom\": \"0px\",\n              \"paddingLeft\": \"0px\",\n              \"paddingRight\": \"0px\",\n              \"paddingTop\": \"0px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"checkbox\"\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Switch Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitFlexDirection\": \"row\",\n          \"alignItems\": \"center\",\n          \"flexDirection\": \"row\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        Bluetooth\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitTransform\": \"scale(0.75)\",\n            \"WebkitUserSelect\": \"none\",\n            \"cursor\": \"pointer\",\n            \"height\": \"20px\",\n            \"msUserSelect\": \"none\",\n            \"transform\": \"scale(0.75)\",\n            \"userSelect\": \"none\",\n            \"width\": \"40px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n              \"borderBottomLeftRadius\": \"10px\",\n              \"borderBottomRightRadius\": \"10px\",\n              \"borderTopLeftRadius\": \"10px\",\n              \"borderTopRightRadius\": \"10px\",\n              \"bottom\": \"0px\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"70%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"auto\",\n              \"marginLeft\": \"auto\",\n              \"marginRight\": \"auto\",\n              \"marginTop\": \"auto\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"100%\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignSelf\": \"flex-start\",\n              \"WebkitTransform\": \"translateZ(0px)\",\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"alignSelf\": \"flex-start\",\n              \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"100%\",\n              \"borderBottomRightRadius\": \"100%\",\n              \"borderTopLeftRadius\": \"100%\",\n              \"borderTopRightRadius\": \"100%\",\n              \"boxShadow\": \"0px 1px 3px rgba(0,0,0,0.5)\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"20px\",\n              \"left\": \"0%\",\n              \"marginLeft\": \"0px\",\n              \"msFlexItemAlign\": \"start\",\n              \"transform\": \"translateZ(0px)\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"20px\",\n            }\n          }\n        />\n        <input\n          checked={false}\n          disabled={false}\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          role=\"switch\"\n          style={\n            Object {\n              \"bottom\": \"0px\",\n              \"cursor\": \"inherit\",\n              \"height\": \"100%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"0px\",\n              \"marginLeft\": \"0px\",\n              \"marginRight\": \"0px\",\n              \"marginTop\": \"0px\",\n              \"opacity\": 0,\n              \"paddingBottom\": \"0px\",\n              \"paddingLeft\": \"0px\",\n              \"paddingRight\": \"0px\",\n              \"paddingTop\": \"0px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"checkbox\"\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Switch ColorSchemes 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitUserSelect\": \"none\",\n            \"cursor\": \"pointer\",\n            \"height\": \"20px\",\n            \"msUserSelect\": \"none\",\n            \"userSelect\": \"none\",\n            \"width\": \"40px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"10px\",\n              \"borderBottomRightRadius\": \"10px\",\n              \"borderTopLeftRadius\": \"10px\",\n              \"borderTopRightRadius\": \"10px\",\n              \"bottom\": \"0px\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"70%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"auto\",\n              \"marginLeft\": \"auto\",\n              \"marginRight\": \"auto\",\n              \"marginTop\": \"auto\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"100%\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignSelf\": \"flex-start\",\n              \"WebkitTransform\": \"translateZ(0px)\",\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"alignSelf\": \"flex-start\",\n              \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"100%\",\n              \"borderBottomRightRadius\": \"100%\",\n              \"borderTopLeftRadius\": \"100%\",\n              \"borderTopRightRadius\": \"100%\",\n              \"boxShadow\": \"0px 1px 3px rgba(0,0,0,0.5)\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"20px\",\n              \"left\": \"100%\",\n              \"marginLeft\": \"-20px\",\n              \"msFlexItemAlign\": \"start\",\n              \"transform\": \"translateZ(0px)\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"20px\",\n            }\n          }\n        />\n        <input\n          checked={true}\n          disabled={false}\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          role=\"switch\"\n          style={\n            Object {\n              \"bottom\": \"0px\",\n              \"cursor\": \"inherit\",\n              \"height\": \"100%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"0px\",\n              \"marginLeft\": \"0px\",\n              \"marginRight\": \"0px\",\n              \"marginTop\": \"0px\",\n              \"opacity\": 0,\n              \"paddingBottom\": \"0px\",\n              \"paddingLeft\": \"0px\",\n              \"paddingRight\": \"0px\",\n              \"paddingTop\": \"0px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"checkbox\"\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitUserSelect\": \"none\",\n            \"cursor\": \"pointer\",\n            \"height\": \"20px\",\n            \"msUserSelect\": \"none\",\n            \"userSelect\": \"none\",\n            \"width\": \"40px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"backgroundColor\": \"rgba(219,39,119,1.00)\",\n              \"borderBottomLeftRadius\": \"10px\",\n              \"borderBottomRightRadius\": \"10px\",\n              \"borderTopLeftRadius\": \"10px\",\n              \"borderTopRightRadius\": \"10px\",\n              \"bottom\": \"0px\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"70%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"auto\",\n              \"marginLeft\": \"auto\",\n              \"marginRight\": \"auto\",\n              \"marginTop\": \"auto\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"100%\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignSelf\": \"flex-start\",\n              \"WebkitTransform\": \"translateZ(0px)\",\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"alignSelf\": \"flex-start\",\n              \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"100%\",\n              \"borderBottomRightRadius\": \"100%\",\n              \"borderTopLeftRadius\": \"100%\",\n              \"borderTopRightRadius\": \"100%\",\n              \"boxShadow\": \"0px 1px 3px rgba(0,0,0,0.5)\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"20px\",\n              \"left\": \"100%\",\n              \"marginLeft\": \"-20px\",\n              \"msFlexItemAlign\": \"start\",\n              \"transform\": \"translateZ(0px)\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"20px\",\n            }\n          }\n        />\n        <input\n          checked={true}\n          disabled={false}\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          role=\"switch\"\n          style={\n            Object {\n              \"bottom\": \"0px\",\n              \"cursor\": \"inherit\",\n              \"height\": \"100%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"0px\",\n              \"marginLeft\": \"0px\",\n              \"marginRight\": \"0px\",\n              \"marginTop\": \"0px\",\n              \"opacity\": 0,\n              \"paddingBottom\": \"0px\",\n              \"paddingLeft\": \"0px\",\n              \"paddingRight\": \"0px\",\n              \"paddingTop\": \"0px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"checkbox\"\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitUserSelect\": \"none\",\n            \"cursor\": \"pointer\",\n            \"height\": \"20px\",\n            \"msUserSelect\": \"none\",\n            \"userSelect\": \"none\",\n            \"width\": \"40px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"backgroundColor\": \"rgba(5,150,105,1.00)\",\n              \"borderBottomLeftRadius\": \"10px\",\n              \"borderBottomRightRadius\": \"10px\",\n              \"borderTopLeftRadius\": \"10px\",\n              \"borderTopRightRadius\": \"10px\",\n              \"bottom\": \"0px\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"70%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"auto\",\n              \"marginLeft\": \"auto\",\n              \"marginRight\": \"auto\",\n              \"marginTop\": \"auto\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"100%\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignSelf\": \"flex-start\",\n              \"WebkitTransform\": \"translateZ(0px)\",\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"alignSelf\": \"flex-start\",\n              \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"100%\",\n              \"borderBottomRightRadius\": \"100%\",\n              \"borderTopLeftRadius\": \"100%\",\n              \"borderTopRightRadius\": \"100%\",\n              \"boxShadow\": \"0px 1px 3px rgba(0,0,0,0.5)\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"20px\",\n              \"left\": \"100%\",\n              \"marginLeft\": \"-20px\",\n              \"msFlexItemAlign\": \"start\",\n              \"transform\": \"translateZ(0px)\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"20px\",\n            }\n          }\n        />\n        <input\n          checked={true}\n          disabled={false}\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          role=\"switch\"\n          style={\n            Object {\n              \"bottom\": \"0px\",\n              \"cursor\": \"inherit\",\n              \"height\": \"100%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"0px\",\n              \"marginLeft\": \"0px\",\n              \"marginRight\": \"0px\",\n              \"marginTop\": \"0px\",\n              \"opacity\": 0,\n              \"paddingBottom\": \"0px\",\n              \"paddingLeft\": \"0px\",\n              \"paddingRight\": \"0px\",\n              \"paddingTop\": \"0px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"checkbox\"\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Switch Sizes 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitTransform\": \"scale(0.75)\",\n            \"WebkitUserSelect\": \"none\",\n            \"cursor\": \"pointer\",\n            \"height\": \"20px\",\n            \"msUserSelect\": \"none\",\n            \"transform\": \"scale(0.75)\",\n            \"userSelect\": \"none\",\n            \"width\": \"40px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n              \"borderBottomLeftRadius\": \"10px\",\n              \"borderBottomRightRadius\": \"10px\",\n              \"borderTopLeftRadius\": \"10px\",\n              \"borderTopRightRadius\": \"10px\",\n              \"bottom\": \"0px\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"70%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"auto\",\n              \"marginLeft\": \"auto\",\n              \"marginRight\": \"auto\",\n              \"marginTop\": \"auto\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"100%\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignSelf\": \"flex-start\",\n              \"WebkitTransform\": \"translateZ(0px)\",\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"alignSelf\": \"flex-start\",\n              \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"100%\",\n              \"borderBottomRightRadius\": \"100%\",\n              \"borderTopLeftRadius\": \"100%\",\n              \"borderTopRightRadius\": \"100%\",\n              \"boxShadow\": \"0px 1px 3px rgba(0,0,0,0.5)\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"20px\",\n              \"left\": \"0%\",\n              \"marginLeft\": \"0px\",\n              \"msFlexItemAlign\": \"start\",\n              \"transform\": \"translateZ(0px)\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"20px\",\n            }\n          }\n        />\n        <input\n          checked={false}\n          disabled={false}\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          role=\"switch\"\n          style={\n            Object {\n              \"bottom\": \"0px\",\n              \"cursor\": \"inherit\",\n              \"height\": \"100%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"0px\",\n              \"marginLeft\": \"0px\",\n              \"marginRight\": \"0px\",\n              \"marginTop\": \"0px\",\n              \"opacity\": 0,\n              \"paddingBottom\": \"0px\",\n              \"paddingLeft\": \"0px\",\n              \"paddingRight\": \"0px\",\n              \"paddingTop\": \"0px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"checkbox\"\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitUserSelect\": \"none\",\n            \"cursor\": \"pointer\",\n            \"height\": \"20px\",\n            \"msUserSelect\": \"none\",\n            \"userSelect\": \"none\",\n            \"width\": \"40px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n              \"borderBottomLeftRadius\": \"10px\",\n              \"borderBottomRightRadius\": \"10px\",\n              \"borderTopLeftRadius\": \"10px\",\n              \"borderTopRightRadius\": \"10px\",\n              \"bottom\": \"0px\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"70%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"auto\",\n              \"marginLeft\": \"auto\",\n              \"marginRight\": \"auto\",\n              \"marginTop\": \"auto\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"100%\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignSelf\": \"flex-start\",\n              \"WebkitTransform\": \"translateZ(0px)\",\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"alignSelf\": \"flex-start\",\n              \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"100%\",\n              \"borderBottomRightRadius\": \"100%\",\n              \"borderTopLeftRadius\": \"100%\",\n              \"borderTopRightRadius\": \"100%\",\n              \"boxShadow\": \"0px 1px 3px rgba(0,0,0,0.5)\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"20px\",\n              \"left\": \"0%\",\n              \"marginLeft\": \"0px\",\n              \"msFlexItemAlign\": \"start\",\n              \"transform\": \"translateZ(0px)\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"20px\",\n            }\n          }\n        />\n        <input\n          checked={false}\n          disabled={false}\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          role=\"switch\"\n          style={\n            Object {\n              \"bottom\": \"0px\",\n              \"cursor\": \"inherit\",\n              \"height\": \"100%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"0px\",\n              \"marginLeft\": \"0px\",\n              \"marginRight\": \"0px\",\n              \"marginTop\": \"0px\",\n              \"opacity\": 0,\n              \"paddingBottom\": \"0px\",\n              \"paddingLeft\": \"0px\",\n              \"paddingRight\": \"0px\",\n              \"paddingTop\": \"0px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"checkbox\"\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitTransform\": \"scale(1.25)\",\n            \"WebkitUserSelect\": \"none\",\n            \"cursor\": \"pointer\",\n            \"height\": \"20px\",\n            \"marginBottom\": \"4px\",\n            \"marginLeft\": \"4px\",\n            \"marginRight\": \"4px\",\n            \"marginTop\": \"4px\",\n            \"msUserSelect\": \"none\",\n            \"transform\": \"scale(1.25)\",\n            \"userSelect\": \"none\",\n            \"width\": \"40px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n              \"borderBottomLeftRadius\": \"10px\",\n              \"borderBottomRightRadius\": \"10px\",\n              \"borderTopLeftRadius\": \"10px\",\n              \"borderTopRightRadius\": \"10px\",\n              \"bottom\": \"0px\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"70%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"auto\",\n              \"marginLeft\": \"auto\",\n              \"marginRight\": \"auto\",\n              \"marginTop\": \"auto\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"100%\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignSelf\": \"flex-start\",\n              \"WebkitTransform\": \"translateZ(0px)\",\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"alignSelf\": \"flex-start\",\n              \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"100%\",\n              \"borderBottomRightRadius\": \"100%\",\n              \"borderTopLeftRadius\": \"100%\",\n              \"borderTopRightRadius\": \"100%\",\n              \"boxShadow\": \"0px 1px 3px rgba(0,0,0,0.5)\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"20px\",\n              \"left\": \"0%\",\n              \"marginLeft\": \"0px\",\n              \"msFlexItemAlign\": \"start\",\n              \"transform\": \"translateZ(0px)\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"20px\",\n            }\n          }\n        />\n        <input\n          checked={false}\n          disabled={false}\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          role=\"switch\"\n          style={\n            Object {\n              \"bottom\": \"0px\",\n              \"cursor\": \"inherit\",\n              \"height\": \"100%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"0px\",\n              \"marginLeft\": \"0px\",\n              \"marginRight\": \"0px\",\n              \"marginTop\": \"0px\",\n              \"opacity\": 0,\n              \"paddingBottom\": \"0px\",\n              \"paddingLeft\": \"0px\",\n              \"paddingRight\": \"0px\",\n              \"paddingTop\": \"0px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"checkbox\"\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Switch Switch bgColor 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitUserSelect\": \"none\",\n            \"cursor\": \"pointer\",\n            \"height\": \"20px\",\n            \"msUserSelect\": \"none\",\n            \"userSelect\": \"none\",\n            \"width\": \"40px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n              \"borderBottomLeftRadius\": \"10px\",\n              \"borderBottomRightRadius\": \"10px\",\n              \"borderTopLeftRadius\": \"10px\",\n              \"borderTopRightRadius\": \"10px\",\n              \"bottom\": \"0px\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"70%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"auto\",\n              \"marginLeft\": \"auto\",\n              \"marginRight\": \"auto\",\n              \"marginTop\": \"auto\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"100%\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignSelf\": \"flex-start\",\n              \"WebkitTransform\": \"translateZ(0px)\",\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"alignSelf\": \"flex-start\",\n              \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"100%\",\n              \"borderBottomRightRadius\": \"100%\",\n              \"borderTopLeftRadius\": \"100%\",\n              \"borderTopRightRadius\": \"100%\",\n              \"boxShadow\": \"0px 1px 3px rgba(0,0,0,0.5)\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"20px\",\n              \"left\": \"0%\",\n              \"marginLeft\": \"0px\",\n              \"msFlexItemAlign\": \"start\",\n              \"transform\": \"translateZ(0px)\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"20px\",\n            }\n          }\n        />\n        <input\n          checked={false}\n          disabled={false}\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          role=\"switch\"\n          style={\n            Object {\n              \"bottom\": \"0px\",\n              \"cursor\": \"inherit\",\n              \"height\": \"100%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"0px\",\n              \"marginLeft\": \"0px\",\n              \"marginRight\": \"0px\",\n              \"marginTop\": \"0px\",\n              \"opacity\": 0,\n              \"paddingBottom\": \"0px\",\n              \"paddingLeft\": \"0px\",\n              \"paddingRight\": \"0px\",\n              \"paddingTop\": \"0px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"checkbox\"\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitUserSelect\": \"none\",\n            \"cursor\": \"pointer\",\n            \"height\": \"20px\",\n            \"msUserSelect\": \"none\",\n            \"userSelect\": \"none\",\n            \"width\": \"40px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"backgroundColor\": \"rgba(255,237,213,1.00)\",\n              \"borderBottomLeftRadius\": \"10px\",\n              \"borderBottomRightRadius\": \"10px\",\n              \"borderTopLeftRadius\": \"10px\",\n              \"borderTopRightRadius\": \"10px\",\n              \"bottom\": \"0px\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"70%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"auto\",\n              \"marginLeft\": \"auto\",\n              \"marginRight\": \"auto\",\n              \"marginTop\": \"auto\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"100%\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignSelf\": \"flex-start\",\n              \"WebkitTransform\": \"translateZ(0px)\",\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"alignSelf\": \"flex-start\",\n              \"backgroundColor\": \"rgba(255,247,237,1.00)\",\n              \"borderBottomLeftRadius\": \"100%\",\n              \"borderBottomRightRadius\": \"100%\",\n              \"borderTopLeftRadius\": \"100%\",\n              \"borderTopRightRadius\": \"100%\",\n              \"boxShadow\": \"0px 1px 3px rgba(0,0,0,0.5)\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"20px\",\n              \"left\": \"0%\",\n              \"marginLeft\": \"0px\",\n              \"msFlexItemAlign\": \"start\",\n              \"transform\": \"translateZ(0px)\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"20px\",\n            }\n          }\n        />\n        <input\n          checked={false}\n          disabled={false}\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          role=\"switch\"\n          style={\n            Object {\n              \"bottom\": \"0px\",\n              \"cursor\": \"inherit\",\n              \"height\": \"100%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"0px\",\n              \"marginLeft\": \"0px\",\n              \"marginRight\": \"0px\",\n              \"marginTop\": \"0px\",\n              \"opacity\": 0,\n              \"paddingBottom\": \"0px\",\n              \"paddingLeft\": \"0px\",\n              \"paddingRight\": \"0px\",\n              \"paddingTop\": \"0px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"checkbox\"\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitUserSelect\": \"none\",\n            \"cursor\": \"pointer\",\n            \"height\": \"20px\",\n            \"msUserSelect\": \"none\",\n            \"userSelect\": \"none\",\n            \"width\": \"40px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"backgroundColor\": \"rgba(224,231,255,1.00)\",\n              \"borderBottomLeftRadius\": \"10px\",\n              \"borderBottomRightRadius\": \"10px\",\n              \"borderTopLeftRadius\": \"10px\",\n              \"borderTopRightRadius\": \"10px\",\n              \"bottom\": \"0px\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"70%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"auto\",\n              \"marginLeft\": \"auto\",\n              \"marginRight\": \"auto\",\n              \"marginTop\": \"auto\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"100%\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignSelf\": \"flex-start\",\n              \"WebkitTransform\": \"translateZ(0px)\",\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"alignSelf\": \"flex-start\",\n              \"backgroundColor\": \"rgba(238,242,255,1.00)\",\n              \"borderBottomLeftRadius\": \"100%\",\n              \"borderBottomRightRadius\": \"100%\",\n              \"borderTopLeftRadius\": \"100%\",\n              \"borderTopRightRadius\": \"100%\",\n              \"boxShadow\": \"0px 1px 3px rgba(0,0,0,0.5)\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"20px\",\n              \"left\": \"0%\",\n              \"marginLeft\": \"0px\",\n              \"msFlexItemAlign\": \"start\",\n              \"transform\": \"translateZ(0px)\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"20px\",\n            }\n          }\n        />\n        <input\n          checked={false}\n          disabled={false}\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          role=\"switch\"\n          style={\n            Object {\n              \"bottom\": \"0px\",\n              \"cursor\": \"inherit\",\n              \"height\": \"100%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"0px\",\n              \"marginLeft\": \"0px\",\n              \"marginRight\": \"0px\",\n              \"marginTop\": \"0px\",\n              \"opacity\": 0,\n              \"paddingBottom\": \"0px\",\n              \"paddingLeft\": \"0px\",\n              \"paddingRight\": \"0px\",\n              \"paddingTop\": \"0px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"checkbox\"\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Text Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-text-901oao\"\n      dir=\"auto\"\n      style={\n        Object {\n          \"color\": \"rgba(23,23,23,1.00)\",\n          \"fontSize\": \"14px\",\n          \"fontStyle\": \"normal\",\n          \"fontWeight\": \"400\",\n          \"letterSpacing\": \"0px\",\n          \"lineHeight\": \"1.5em\",\n        }\n      }\n    >\n      This is Text.\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Text Changing Font Size 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"12px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        xs\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"4px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        sm\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"4px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"16px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        md\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"4px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"18px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        lg\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"4px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"20px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        xl\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"4px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"24px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        2xl\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"4px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"30px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        3xl\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"4px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"36px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        4xl\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"4px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"48px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        5xl\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"4px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"60px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        6xl\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Text Nested 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-text-901oao\"\n      dir=\"auto\"\n      style={\n        Object {\n          \"color\": \"rgba(23,23,23,1.00)\",\n          \"fontSize\": \"14px\",\n          \"fontStyle\": \"italic\",\n          \"fontWeight\": \"400\",\n          \"letterSpacing\": \"0px\",\n          \"lineHeight\": \"1.5em\",\n        }\n      }\n    >\n      <span\n        className=\"css-text-901oao css-textHasAncestor-16my406\"\n        style={\n          Object {\n            \"fontWeight\": \"700\",\n          }\n        }\n      >\n        Taj Mahal\n      </span>\n       is in Agra.\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Text Overriden 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        Bold\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"italic\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        Italic\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n            \"textDecoration\": \"underline\",\n          }\n        }\n      >\n        Underline\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"backgroundColor\": \"rgba(253,186,116,1.00)\",\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        Highlighted\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        H\n        <span\n          className=\"css-text-901oao css-textHasAncestor-16my406\"\n          style={\n            Object {\n              \"fontSize\": \"10px\",\n            }\n          }\n        >\n          2\n        </span>\n        O\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n            \"textDecoration\": \"underline\",\n          }\n        }\n      >\n        Underline\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n            \"textDecoration\": \"line-through\",\n          }\n        }\n      >\n        StrikeThrough\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"italic\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n            \"textDecoration\": \"underline\",\n          }\n        }\n      >\n        Bold, Italic & Underline\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Text Truncated 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-text-901oao css-textOneLine-vcwn7f\"\n      dir=\"auto\"\n      style={\n        Object {\n          \"color\": \"rgba(23,23,23,1.00)\",\n          \"fontSize\": \"14px\",\n          \"fontStyle\": \"normal\",\n          \"fontWeight\": \"400\",\n          \"letterSpacing\": \"0px\",\n          \"lineHeight\": \"1.5em\",\n          \"maxWidth\": \"300px\",\n          \"width\": \"80%\",\n        }\n      }\n    >\n      NativeBase gives you a contrasting color based on your theme. You can also customise it using the useAccessibleColors hook.\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots TextArea Default 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"height\": \"80px\",\n            \"maxWidth\": \"300px\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"overflowX\": \"auto\",\n            \"overflowY\": \"auto\",\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <textarea\n          autoCapitalize=\"sentences\"\n          autoComplete=\"on\"\n          autoCorrect=\"on\"\n          className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n          dir=\"auto\"\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onSelect={[Function]}\n          placeholder=\"Text Area Placeholder\"\n          readOnly={false}\n          rows={1}\n          spellCheck={true}\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"cursor\": \"auto\",\n              \"flex\": 1,\n              \"fontSize\": \"12px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"lineHeight\": \"1.5em\",\n              \"msFlex\": \"1 1 0%\",\n              \"outline\": \"none\",\n              \"outlineWidth\": \"0px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots TextArea InValid and Disabled 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"maxWidth\": \"300px\",\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"18px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginBottom\": \"16px\",\n              }\n            }\n          >\n            Invalid TextArea\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"height\": \"80px\",\n                \"marginBottom\": \"20px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"overflowX\": \"auto\",\n                \"overflowY\": \"auto\",\n              }\n            }\n          >\n            <textarea\n              aria-invalid={true}\n              aria-label=\"t1\"\n              autoCapitalize=\"sentences\"\n              autoComplete=\"on\"\n              autoCorrect=\"on\"\n              className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n              dir=\"auto\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onSelect={[Function]}\n              placeholder=\"Invalid TextArea\"\n              readOnly={false}\n              rows={1}\n              spellCheck={true}\n              style={\n                Object {\n                  \"WebkitFlex\": 1,\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"cursor\": \"auto\",\n                  \"flex\": 1,\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"100%\",\n                  \"lineHeight\": \"1.5em\",\n                  \"msFlex\": \"1 1 0%\",\n                  \"outline\": \"none\",\n                  \"outlineWidth\": \"0px\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"10px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"18px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginBottom\": \"16px\",\n              }\n            }\n          >\n            Disabled TextArea\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"height\": \"80px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"opacity\": 0.4,\n                \"overflowX\": \"auto\",\n                \"overflowY\": \"auto\",\n              }\n            }\n          >\n            <textarea\n              aria-label=\"t1Disabled\"\n              autoCapitalize=\"sentences\"\n              autoComplete=\"on\"\n              autoCorrect=\"on\"\n              className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n              dir=\"auto\"\n              disabled={true}\n              onBlur={[Function]}\n              onChange={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onSelect={[Function]}\n              placeholder=\"Disabled TextArea\"\n              readOnly={true}\n              rows={1}\n              spellCheck={true}\n              style={\n                Object {\n                  \"WebkitFlex\": 1,\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"cursor\": \"not-allowed\",\n                  \"flex\": 1,\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"100%\",\n                  \"lineHeight\": \"1.5em\",\n                  \"msFlex\": \"1 1 0%\",\n                  \"outline\": \"none\",\n                  \"outlineWidth\": \"0px\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots TextArea Sizes 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      onScroll={[Function]}\n      onTouchEnd={[Function]}\n      onTouchMove={[Function]}\n      onTouchStart={[Function]}\n      onWheel={[Function]}\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxFlex\": 1,\n          \"WebkitBoxOrient\": \"vertical\",\n          \"WebkitFlexDirection\": \"column\",\n          \"WebkitFlexGrow\": 1,\n          \"WebkitFlexShrink\": 1,\n          \"WebkitOverflowScrolling\": \"touch\",\n          \"WebkitTransform\": \"translateZ(0px)\",\n          \"flexDirection\": \"column\",\n          \"flexGrow\": 1,\n          \"flexShrink\": 1,\n          \"msFlexDirection\": \"column\",\n          \"msFlexNegative\": 1,\n          \"msFlexPositive\": 1,\n          \"overflowX\": \"hidden\",\n          \"overflowY\": \"auto\",\n          \"transform\": \"translateZ(0px)\",\n          \"width\": \"70%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"dataSet\": Object {},\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n              \"marginTop\": \"16px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"24px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n                \"marginBottom\": \"40px\",\n                \"textAlign\": \"center\",\n              }\n            }\n          >\n            Sizes\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"90%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"flexDirection\": \"row\",\n                  \"height\": \"80px\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"overflowX\": \"auto\",\n                  \"overflowY\": \"auto\",\n                }\n              }\n            >\n              <textarea\n                aria-label=\"t2\"\n                autoCapitalize=\"sentences\"\n                autoComplete=\"on\"\n                autoCorrect=\"on\"\n                className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n                dir=\"auto\"\n                onBlur={[Function]}\n                onChange={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onSelect={[Function]}\n                placeholder=\"xs\"\n                readOnly={false}\n                rows={1}\n                spellCheck={true}\n                style={\n                  Object {\n                    \"WebkitFlex\": 1,\n                    \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"cursor\": \"auto\",\n                    \"flex\": 1,\n                    \"fontSize\": \"10px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"lineHeight\": \"1.5em\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"outline\": \"none\",\n                    \"outlineWidth\": \"0px\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"12px\",\n                    \"paddingRight\": \"12px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"16px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"flexDirection\": \"row\",\n                  \"height\": \"80px\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"overflowX\": \"auto\",\n                  \"overflowY\": \"auto\",\n                }\n              }\n            >\n              <textarea\n                aria-label=\"t2\"\n                autoCapitalize=\"sentences\"\n                autoComplete=\"on\"\n                autoCorrect=\"on\"\n                className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n                dir=\"auto\"\n                onBlur={[Function]}\n                onChange={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onSelect={[Function]}\n                placeholder=\"sm\"\n                readOnly={false}\n                rows={1}\n                spellCheck={true}\n                style={\n                  Object {\n                    \"WebkitFlex\": 1,\n                    \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"cursor\": \"auto\",\n                    \"flex\": 1,\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"lineHeight\": \"1.5em\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"outline\": \"none\",\n                    \"outlineWidth\": \"0px\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"12px\",\n                    \"paddingRight\": \"12px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"16px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"flexDirection\": \"row\",\n                  \"height\": \"80px\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"overflowX\": \"auto\",\n                  \"overflowY\": \"auto\",\n                }\n              }\n            >\n              <textarea\n                aria-label=\"t2\"\n                autoCapitalize=\"sentences\"\n                autoComplete=\"on\"\n                autoCorrect=\"on\"\n                className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n                dir=\"auto\"\n                onBlur={[Function]}\n                onChange={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onSelect={[Function]}\n                placeholder=\"md\"\n                readOnly={false}\n                rows={1}\n                spellCheck={true}\n                style={\n                  Object {\n                    \"WebkitFlex\": 1,\n                    \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"cursor\": \"auto\",\n                    \"flex\": 1,\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"lineHeight\": \"1.5em\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"outline\": \"none\",\n                    \"outlineWidth\": \"0px\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"12px\",\n                    \"paddingRight\": \"12px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"16px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"flexDirection\": \"row\",\n                  \"height\": \"80px\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"overflowX\": \"auto\",\n                  \"overflowY\": \"auto\",\n                }\n              }\n            >\n              <textarea\n                aria-label=\"t2\"\n                autoCapitalize=\"sentences\"\n                autoComplete=\"on\"\n                autoCorrect=\"on\"\n                className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n                dir=\"auto\"\n                onBlur={[Function]}\n                onChange={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onSelect={[Function]}\n                placeholder=\"lg\"\n                readOnly={false}\n                rows={1}\n                spellCheck={true}\n                style={\n                  Object {\n                    \"WebkitFlex\": 1,\n                    \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"cursor\": \"auto\",\n                    \"flex\": 1,\n                    \"fontSize\": \"16px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"lineHeight\": \"1.5em\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"outline\": \"none\",\n                    \"outlineWidth\": \"0px\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"12px\",\n                    \"paddingRight\": \"12px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"16px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"flexDirection\": \"row\",\n                  \"height\": \"80px\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"overflowX\": \"auto\",\n                  \"overflowY\": \"auto\",\n                }\n              }\n            >\n              <textarea\n                aria-label=\"t2\"\n                autoCapitalize=\"sentences\"\n                autoComplete=\"on\"\n                autoCorrect=\"on\"\n                className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n                dir=\"auto\"\n                onBlur={[Function]}\n                onChange={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onSelect={[Function]}\n                placeholder=\"xl\"\n                readOnly={false}\n                rows={1}\n                spellCheck={true}\n                style={\n                  Object {\n                    \"WebkitFlex\": 1,\n                    \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"cursor\": \"auto\",\n                    \"flex\": 1,\n                    \"fontSize\": \"18px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"lineHeight\": \"1.5em\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"outline\": \"none\",\n                    \"outlineWidth\": \"0px\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"12px\",\n                    \"paddingRight\": \"12px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"16px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"flexDirection\": \"row\",\n                  \"height\": \"80px\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"overflowX\": \"auto\",\n                  \"overflowY\": \"auto\",\n                }\n              }\n            >\n              <textarea\n                aria-label=\"t2\"\n                autoCapitalize=\"sentences\"\n                autoComplete=\"on\"\n                autoCorrect=\"on\"\n                className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n                dir=\"auto\"\n                onBlur={[Function]}\n                onChange={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onSelect={[Function]}\n                placeholder=\"2xl\"\n                readOnly={false}\n                rows={1}\n                spellCheck={true}\n                style={\n                  Object {\n                    \"WebkitFlex\": 1,\n                    \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"cursor\": \"auto\",\n                    \"flex\": 1,\n                    \"fontSize\": \"20px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"lineHeight\": \"1.5em\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"outline\": \"none\",\n                    \"outlineWidth\": \"0px\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"12px\",\n                    \"paddingRight\": \"12px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots TextArea Value Controlled 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"height\": \"80px\",\n            \"maxWidth\": \"300px\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"overflowX\": \"auto\",\n            \"overflowY\": \"auto\",\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <textarea\n          autoCapitalize=\"sentences\"\n          autoComplete=\"on\"\n          autoCorrect=\"on\"\n          className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n          dir=\"auto\"\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onSelect={[Function]}\n          readOnly={false}\n          rows={1}\n          spellCheck={true}\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"cursor\": \"auto\",\n              \"flex\": 1,\n              \"fontSize\": \"12px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"lineHeight\": \"1.5em\",\n              \"msFlex\": \"1 1 0%\",\n              \"outline\": \"none\",\n              \"outlineWidth\": \"0px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n          value=\"Value Controlled\"\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Toast Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Show Toast\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Toast CloseToast 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"vertical\",\n          \"WebkitFlexDirection\": \"column\",\n          \"flexDirection\": \"column\",\n          \"msFlexDirection\": \"column\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Toast\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"1px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(8,145,178,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Close last toast\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"1px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(8,145,178,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Close all toasts\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Toast Custom Component 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Custom Toast\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Toast Custom Component with custom Id 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"10px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"10px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(250,250,250,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            Custom Toast\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Toast Prevent Duplicate 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Click me!\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Toast Status Recipies 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(22,163,74,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                success\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(220,38,38,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                error\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(2,132,199,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                info\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(234,88,12,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                warning\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Toast Toast Positions 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Bottom\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Top\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Top left\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Top right\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Bottom left\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Bottom right\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Toast Toast Ref 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Show Toast\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Toast Variants Recipies 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                solid\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                subtle\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                left-accent\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                top-accent\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                outline\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Tooltip Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onMouseEnter={[Function]}\n        onMouseLeave={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              More\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Tooltip Customizing 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onMouseEnter={[Function]}\n        onMouseLeave={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              More\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Tooltip Tooltip Positions 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignSelf\": \"flex-start\",\n          \"alignSelf\": \"flex-start\",\n          \"msFlexItemAlign\": \"start\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onMouseEnter={[Function]}\n        onMouseLeave={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitAlignSelf\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"alignSelf\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexItemAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"msGridRowAlign\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              ToolTip\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"24px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"marginLeft\": \"0px\",\n            \"marginRight\": \"0px\",\n          }\n        }\n      >\n        <select\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          onTouchStart={[Function]}\n          style={\n            Object {\n              \"MozAppearance\": \"none\",\n              \"WebkitAppearance\": \"none\",\n              \"appearance\": \"none\",\n              \"height\": \"100%\",\n              \"opacity\": 0,\n              \"position\": \"absolute\",\n              \"width\": \"100%\",\n              \"zIndex\": 1,\n            }\n          }\n          value=\"top left\"\n        >\n          <option\n            disabled={true}\n            value=\"__NativebasePlaceholder__\"\n          />\n          <option\n            value=\"top left\"\n          >\n            Top Left\n          </option>\n          <option\n            value=\"top\"\n          >\n            Top\n          </option>\n          <option\n            value=\"top right\"\n          >\n            Top Right\n          </option>\n          <option\n            value=\"right top\"\n          >\n            Right Top\n          </option>\n          <option\n            value=\"right\"\n          >\n            Right\n          </option>\n          <option\n            value=\"right bottom\"\n          >\n            Right Bottom\n          </option>\n          <option\n            value=\"bottom left\"\n          >\n            Bottom Left\n          </option>\n          <option\n            value=\"bottom\"\n          >\n            Bottom\n          </option>\n          <option\n            value=\"bottom right\"\n          >\n            Bottom Right\n          </option>\n          <option\n            value=\"left top\"\n          >\n            Left Top\n          </option>\n          <option\n            value=\"left\"\n          >\n            Left\n          </option>\n          <option\n            value=\"left bottom\"\n          >\n            Left Bottom\n          </option>\n        </select>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderBottomWidth\": \"1px\",\n              \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n              \"borderLeftWidth\": \"1px\",\n              \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n              \"borderRightWidth\": \"1px\",\n              \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"borderTopWidth\": \"1px\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"overflowX\": \"auto\",\n              \"overflowY\": \"auto\",\n            }\n          }\n        >\n          <input\n            aria-hidden={true}\n            autoCapitalize=\"sentences\"\n            autoComplete=\"on\"\n            autoCorrect=\"on\"\n            className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y r-pointerEvents-633pao\"\n            dir=\"auto\"\n            onBlur={[Function]}\n            onChange={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onSelect={[Function]}\n            readOnly={true}\n            spellCheck={true}\n            style={\n              Object {\n                \"WebkitFlex\": 1,\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"cursor\": \"auto\",\n                \"flex\": 1,\n                \"fontSize\": \"12px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"height\": \"100%\",\n                \"lineHeight\": \"1.5em\",\n                \"msFlex\": \"1 1 0%\",\n                \"outline\": \"none\",\n                \"outlineWidth\": \"0px\",\n                \"paddingBottom\": \"8px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"8px\",\n                \"width\": \"100%\",\n              }\n            }\n            tabIndex=\"-1\"\n            type=\"text\"\n            value=\"Top Left\"\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <svg\n            role=\"img\"\n            stroke=\"\"\n            style={\n              Object {\n                \"color\": \"rgba(115,115,115,1.00)\",\n                \"height\": \"24px\",\n                \"marginRight\": \"12px\",\n                \"paddingBottom\": \"4px\",\n                \"paddingLeft\": \"4px\",\n                \"paddingRight\": \"4px\",\n                \"paddingTop\": \"4px\",\n                \"width\": \"24px\",\n              }\n            }\n            viewBox=\"0 0 24 24\"\n          >\n            <g>\n              <path\n                d=\"M20.2286 6L11.9973 14.3785L3.76862 6.00268L2 7.80293L12 18L22 7.80293L20.2286 6Z\"\n                fill=\"currentColor\"\n                stroke=\"\"\n              />\n            </g>\n          </svg>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Transitions Fade 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Show\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n r-pointerEvents-633pao\"\n        id=\"animatedComponent\"\n        style={\n          Object {\n            \"WebkitTransform\": \"translateY(0px) translateX(0px) scale(1) scaleX(1) scaleY(1) rotate(0deg)\",\n            \"opacity\": 0,\n            \"transform\": \"translateY(0px) translateX(0px) scale(1) scaleX(1) scaleY(1) rotate(0deg)\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(20,184,166,1.00)\",\n              \"borderBottomLeftRadius\": \"6px\",\n              \"borderBottomRightRadius\": \"6px\",\n              \"borderTopLeftRadius\": \"6px\",\n              \"borderTopRightRadius\": \"6px\",\n              \"display\": \"flex\",\n              \"height\": \"100px\",\n              \"justifyContent\": \"center\",\n              \"marginTop\": \"28px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"width\": \"200px\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(255,255,255,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            Fade\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Transitions ScaleFade 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Show\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n r-pointerEvents-633pao\"\n        id=\"animatedComponent\"\n        style={\n          Object {\n            \"WebkitTransform\": \"translateY(0px) translateX(0px) scale(0) scaleX(1) scaleY(1) rotate(0deg)\",\n            \"opacity\": 0,\n            \"transform\": \"translateY(0px) translateX(0px) scale(0) scaleX(1) scaleY(1) rotate(0deg)\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(20,184,166,1.00)\",\n              \"borderBottomLeftRadius\": \"6px\",\n              \"borderBottomRightRadius\": \"6px\",\n              \"borderTopLeftRadius\": \"6px\",\n              \"borderTopRightRadius\": \"6px\",\n              \"display\": \"flex\",\n              \"height\": \"100px\",\n              \"justifyContent\": \"center\",\n              \"marginTop\": \"28px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"width\": \"200px\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            ScaleFade\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Transitions Slide 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"height\": \"128px\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(55,65,81,0.30)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(0,0,0,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Check Internet Connection\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Transitions Slide wrapped inside parent 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"justifyContent\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"250px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"flex-end\",\n                \"WebkitBoxAlign\": \"end\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"flex-end\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"end\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"24px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.25em\",\n                }\n              }\n            >\n              Order\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"justify\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"space-between\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"space-between\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"justify\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"500\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Sub Total\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(148,163,184,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              $298.77\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"justify\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"space-between\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"space-between\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"justify\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"500\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Tax\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(148,163,184,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              $38.84\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"justify\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"space-between\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"space-between\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"justify\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"500\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Total Amount\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(5,150,105,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              $337.61\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"marginTop\": \"8px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Promo Code\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlex\": 1,\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderBottomWidth\": \"1px\",\n                    \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                    \"borderLeftWidth\": \"1px\",\n                    \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                    \"borderRightWidth\": \"1px\",\n                    \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"borderTopWidth\": \"1px\",\n                    \"flex\": 1,\n                    \"flexDirection\": \"row\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"overflowX\": \"auto\",\n                    \"overflowY\": \"auto\",\n                  }\n                }\n              >\n                <input\n                  autoCapitalize=\"sentences\"\n                  autoComplete=\"on\"\n                  autoCorrect=\"on\"\n                  className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n                  dir=\"auto\"\n                  onBlur={[Function]}\n                  onChange={[Function]}\n                  onFocus={[Function]}\n                  onKeyDown={[Function]}\n                  onSelect={[Function]}\n                  readOnly={false}\n                  spellCheck={true}\n                  style={\n                    Object {\n                      \"WebkitFlex\": 1,\n                      \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"cursor\": \"auto\",\n                      \"flex\": 1,\n                      \"fontSize\": \"12px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"height\": \"100%\",\n                      \"lineHeight\": \"1.5em\",\n                      \"msFlex\": \"1 1 0%\",\n                      \"outline\": \"none\",\n                      \"outlineWidth\": \"0px\",\n                      \"paddingBottom\": \"8px\",\n                      \"paddingLeft\": \"12px\",\n                      \"paddingRight\": \"12px\",\n                      \"paddingTop\": \"8px\",\n                      \"width\": \"100%\",\n                    }\n                  }\n                  type=\"text\"\n                />\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"12px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n                onBlur={[Function]}\n                onClick={[Function]}\n                onContextMenu={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                role=\"button\"\n                style={\n                  Object {\n                    \"MozUserSelect\": \"none\",\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"WebkitUserSelect\": \"none\",\n                    \"alignItems\": \"center\",\n                    \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderBottomWidth\": \"1px\",\n                    \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                    \"borderLeftWidth\": \"1px\",\n                    \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                    \"borderRightWidth\": \"1px\",\n                    \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"borderTopWidth\": \"1px\",\n                    \"cursor\": \"pointer\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexPack\": \"center\",\n                    \"msTouchAction\": \"manipulation\",\n                    \"msUserSelect\": \"none\",\n                    \"paddingBottom\": \"10px\",\n                    \"paddingLeft\": \"12px\",\n                    \"paddingRight\": \"12px\",\n                    \"paddingTop\": \"10px\",\n                    \"touchAction\": \"manipulation\",\n                    \"userSelect\": \"none\",\n                  }\n                }\n                tabIndex=\"0\"\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxDirection\": \"normal\",\n                      \"WebkitBoxOrient\": \"horizontal\",\n                      \"WebkitFlexDirection\": \"row\",\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexDirection\": \"row\",\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                  >\n                    <div\n                      className=\"css-text-901oao\"\n                      dir=\"auto\"\n                      style={\n                        Object {\n                          \"color\": \"rgba(8,145,178,1.00)\",\n                          \"fontSize\": \"14px\",\n                          \"fontStyle\": \"normal\",\n                          \"fontWeight\": \"400\",\n                          \"letterSpacing\": \"0px\",\n                          \"lineHeight\": \"1.5em\",\n                        }\n                      }\n                    >\n                      Apply\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": \"8px\",\n                \"marginTop\": \"8px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Place Order\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Transitions SlideComposition 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"250px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"flex-start\",\n              \"WebkitBoxAlign\": \"start\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"flex-start\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"start\",\n              \"msFlexPack\": \"center\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"flex-end\",\n                  \"WebkitBoxAlign\": \"end\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"flex-end\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"end\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"24px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.25em\",\n                  }\n                }\n              >\n                Order\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitBoxFlex\": 1,\n                    \"WebkitFlexGrow\": 1,\n                    \"flexGrow\": 1,\n                    \"msFlexPositive\": 1,\n                  }\n                }\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <svg\n                role=\"img\"\n                stroke=\"\"\n                style={\n                  Object {\n                    \"color\": \"rgba(234,88,12,1.00)\",\n                    \"height\": \"12px\",\n                    \"marginBottom\": \"6px\",\n                    \"width\": \"12px\",\n                  }\n                }\n                viewBox=\"0 0 24 24\"\n              >\n                <g>\n                  <path\n                    d=\"M11.9836 0.00267822C8.77744 0.0551662 5.72075 1.36728 3.47427 3.65538C2.35024 4.77447 1.46338 6.10869 0.866705 7.57831C0.270027 9.04793 -0.0242179 10.6228 0.00155827 12.2087C-0.000286057 13.7583 0.303697 15.2931 0.896087 16.7251C1.48848 18.1571 2.35763 19.458 3.45373 20.5535C4.54983 21.6489 5.85133 22.5173 7.28365 23.1089C8.71596 23.7004 10.2509 24.0035 11.8006 24.0007H12.0146C15.2217 23.9677 18.2847 22.6638 20.5316 20.3751C22.7785 18.0864 24.0257 14.9999 23.9996 11.7927C24.0033 10.2243 23.6933 8.6709 23.0879 7.22398C22.4825 5.77706 21.5939 4.4658 20.4744 3.36731C19.3548 2.26882 18.0269 1.40527 16.5688 0.827453C15.1106 0.249636 13.5517 -0.0307856 11.9836 0.00267822ZM10.5007 16.5433C10.4935 16.3473 10.5254 16.1517 10.5947 15.9682C10.6639 15.7846 10.7691 15.6167 10.904 15.4742C11.0389 15.3318 11.2009 15.2177 11.3804 15.1386C11.5599 15.0594 11.7534 15.0169 11.9496 15.0135H11.9766C12.3712 15.0142 12.7501 15.1677 13.034 15.4417C13.3179 15.7157 13.4847 16.089 13.4995 16.4833C13.5068 16.6794 13.4749 16.875 13.4057 17.0586C13.3365 17.2423 13.2314 17.4102 13.0965 17.5527C12.9615 17.6952 12.7995 17.8093 12.6199 17.8884C12.4403 17.9674 12.2468 18.0099 12.0506 18.0132H12.0236C11.6291 18.0119 11.2505 17.8583 10.9667 17.5844C10.6829 17.3105 10.5159 16.9375 10.5007 16.5433ZM11.0007 12.5017V6.50215C11.0007 6.23695 11.106 5.98262 11.2935 5.7951C11.481 5.60758 11.7354 5.50223 12.0006 5.50223C12.2658 5.50223 12.5201 5.60758 12.7076 5.7951C12.8951 5.98262 13.0005 6.23695 13.0005 6.50215V12.5017C13.0005 12.7669 12.8951 13.0212 12.7076 13.2087C12.5201 13.3962 12.2658 13.5016 12.0006 13.5016C11.7354 13.5016 11.481 13.3962 11.2935 13.2087C11.106 13.0212 11.0007 12.7669 11.0007 12.5017Z\"\n                    fill=\"currentColor\"\n                    stroke=\"\"\n                  />\n                </g>\n              </svg>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"justify\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"space-between\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"space-between\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"justify\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Sub Total\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(148,163,184,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                $298.77\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"justify\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"space-between\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"space-between\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"justify\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Tax\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(148,163,184,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                $38.84\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"justify\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"space-between\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"space-between\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"justify\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Total Amount\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(34,197,94,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                $337.61\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"marginTop\": \"8px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Promo Code\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"height\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxDirection\": \"normal\",\n                      \"WebkitBoxOrient\": \"horizontal\",\n                      \"WebkitFlex\": 1,\n                      \"WebkitFlexDirection\": \"row\",\n                      \"alignItems\": \"center\",\n                      \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                      \"borderBottomLeftRadius\": \"4px\",\n                      \"borderBottomRightRadius\": \"4px\",\n                      \"borderBottomWidth\": \"1px\",\n                      \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                      \"borderLeftWidth\": \"1px\",\n                      \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                      \"borderRightWidth\": \"1px\",\n                      \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                      \"borderTopLeftRadius\": \"4px\",\n                      \"borderTopRightRadius\": \"4px\",\n                      \"borderTopWidth\": \"1px\",\n                      \"flex\": 1,\n                      \"flexDirection\": \"row\",\n                      \"msFlex\": \"1 1 0%\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexDirection\": \"row\",\n                      \"overflowX\": \"auto\",\n                      \"overflowY\": \"auto\",\n                    }\n                  }\n                >\n                  <input\n                    autoCapitalize=\"sentences\"\n                    autoComplete=\"on\"\n                    autoCorrect=\"on\"\n                    className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n                    dir=\"auto\"\n                    onBlur={[Function]}\n                    onChange={[Function]}\n                    onFocus={[Function]}\n                    onKeyDown={[Function]}\n                    onSelect={[Function]}\n                    readOnly={false}\n                    spellCheck={true}\n                    style={\n                      Object {\n                        \"WebkitFlex\": 1,\n                        \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                        \"color\": \"rgba(23,23,23,1.00)\",\n                        \"cursor\": \"auto\",\n                        \"flex\": 1,\n                        \"fontSize\": \"12px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"height\": \"100%\",\n                        \"lineHeight\": \"1.5em\",\n                        \"msFlex\": \"1 1 0%\",\n                        \"outline\": \"none\",\n                        \"outlineWidth\": \"0px\",\n                        \"paddingBottom\": \"8px\",\n                        \"paddingLeft\": \"12px\",\n                        \"paddingRight\": \"12px\",\n                        \"paddingTop\": \"8px\",\n                        \"width\": \"100%\",\n                      }\n                    }\n                    type=\"text\"\n                  />\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"12px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n                  onBlur={[Function]}\n                  onClick={[Function]}\n                  onContextMenu={[Function]}\n                  onFocus={[Function]}\n                  onKeyDown={[Function]}\n                  role=\"button\"\n                  style={\n                    Object {\n                      \"MozUserSelect\": \"none\",\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxDirection\": \"normal\",\n                      \"WebkitBoxOrient\": \"horizontal\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitFlexDirection\": \"row\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"WebkitUserSelect\": \"none\",\n                      \"alignItems\": \"center\",\n                      \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                      \"borderBottomLeftRadius\": \"4px\",\n                      \"borderBottomRightRadius\": \"4px\",\n                      \"borderBottomWidth\": \"1px\",\n                      \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                      \"borderLeftWidth\": \"1px\",\n                      \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                      \"borderRightWidth\": \"1px\",\n                      \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                      \"borderTopLeftRadius\": \"4px\",\n                      \"borderTopRightRadius\": \"4px\",\n                      \"borderTopWidth\": \"1px\",\n                      \"cursor\": \"pointer\",\n                      \"flexDirection\": \"row\",\n                      \"justifyContent\": \"center\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexDirection\": \"row\",\n                      \"msFlexPack\": \"center\",\n                      \"msTouchAction\": \"manipulation\",\n                      \"msUserSelect\": \"none\",\n                      \"paddingBottom\": \"10px\",\n                      \"paddingLeft\": \"12px\",\n                      \"paddingRight\": \"12px\",\n                      \"paddingTop\": \"10px\",\n                      \"touchAction\": \"manipulation\",\n                      \"userSelect\": \"none\",\n                    }\n                  }\n                  tabIndex=\"0\"\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"WebkitAlignItems\": \"center\",\n                        \"WebkitBoxAlign\": \"center\",\n                        \"WebkitBoxDirection\": \"normal\",\n                        \"WebkitBoxOrient\": \"horizontal\",\n                        \"WebkitFlexDirection\": \"row\",\n                        \"alignItems\": \"center\",\n                        \"flexDirection\": \"row\",\n                        \"msFlexAlign\": \"center\",\n                        \"msFlexDirection\": \"row\",\n                      }\n                    }\n                  >\n                    <div\n                      className=\"css-view-1dbjc4n\"\n                    >\n                      <div\n                        className=\"css-text-901oao\"\n                        dir=\"auto\"\n                        style={\n                          Object {\n                            \"color\": \"rgba(8,145,178,1.00)\",\n                            \"fontSize\": \"14px\",\n                            \"fontStyle\": \"normal\",\n                            \"fontWeight\": \"400\",\n                            \"letterSpacing\": \"0px\",\n                            \"lineHeight\": \"1.5em\",\n                          }\n                        }\n                      >\n                        Apply\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": \"8px\",\n                  \"marginTop\": \"8px\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(250,250,250,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Place Order\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Transitions SlideFade 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Show\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n r-pointerEvents-633pao\"\n        id=\"animatedComponent\"\n        style={\n          Object {\n            \"WebkitTransform\": \"translateY(0px) translateX(-200px) scale(1) scaleX(1) scaleY(1) rotate(0deg)\",\n            \"opacity\": 0,\n            \"transform\": \"translateY(0px) translateX(-200px) scale(1) scaleX(1) scaleY(1) rotate(0deg)\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(20,184,166,1.00)\",\n              \"borderBottomLeftRadius\": \"6px\",\n              \"borderBottomRightRadius\": \"6px\",\n              \"borderTopLeftRadius\": \"6px\",\n              \"borderTopRightRadius\": \"6px\",\n              \"display\": \"flex\",\n              \"height\": \"100px\",\n              \"justifyContent\": \"center\",\n              \"marginTop\": \"16px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"position\": \"absolute\",\n              \"top\": \"16px\",\n              \"width\": \"200px\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(255,255,255,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            SlideFade\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Transitions Stagger 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"alignItems\": \"center\",\n            \"minHeight\": \"220px\",\n            \"msFlexAlign\": \"center\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n r-pointerEvents-633pao\"\n          id=\"animatedComponent\"\n          style={\n            Object {\n              \"WebkitTransform\": \"translateY(34px) translateX(0px) scale(0) scaleX(1) scaleY(1) rotate(0deg)\",\n              \"opacity\": 0,\n              \"transform\": \"translateY(34px) translateX(0px) scale(0) scaleX(1) scaleY(1) rotate(0deg)\",\n            }\n          }\n        >\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(99,102,241,1.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": \"16px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"10px\",\n                \"paddingRight\": \"10px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n r-pointerEvents-633pao\"\n          id=\"animatedComponent\"\n          style={\n            Object {\n              \"WebkitTransform\": \"translateY(34px) translateX(0px) scale(0) scaleX(1) scaleY(1) rotate(0deg)\",\n              \"opacity\": 0,\n              \"transform\": \"translateY(34px) translateX(0px) scale(0) scaleX(1) scaleY(1) rotate(0deg)\",\n            }\n          }\n        >\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(250,204,21,1.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": \"16px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"10px\",\n                \"paddingRight\": \"10px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n r-pointerEvents-633pao\"\n          id=\"animatedComponent\"\n          style={\n            Object {\n              \"WebkitTransform\": \"translateY(34px) translateX(0px) scale(0) scaleX(1) scaleY(1) rotate(0deg)\",\n              \"opacity\": 0,\n              \"transform\": \"translateY(34px) translateX(0px) scale(0) scaleX(1) scaleY(1) rotate(0deg)\",\n            }\n          }\n        >\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(45,212,191,1.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": \"16px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"10px\",\n                \"paddingRight\": \"10px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n r-pointerEvents-633pao\"\n          id=\"animatedComponent\"\n          style={\n            Object {\n              \"WebkitTransform\": \"translateY(34px) translateX(0px) scale(0) scaleX(1) scaleY(1) rotate(0deg)\",\n              \"opacity\": 0,\n              \"transform\": \"translateY(34px) translateX(0px) scale(0) scaleX(1) scaleY(1) rotate(0deg)\",\n            }\n          }\n        >\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(239,68,68,1.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": \"16px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"10px\",\n                \"paddingRight\": \"10px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n            />\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(34,211,238,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"12px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"12px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots VStack Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(165,180,252,1.00)\",\n            \"borderBottomLeftRadius\": \"6px\",\n            \"borderBottomRightRadius\": \"6px\",\n            \"borderTopLeftRadius\": \"6px\",\n            \"borderTopRightRadius\": \"6px\",\n            \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n            \"display\": \"flex\",\n            \"height\": \"80px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"256px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(99,102,241,1.00)\",\n            \"borderBottomLeftRadius\": \"6px\",\n            \"borderBottomRightRadius\": \"6px\",\n            \"borderTopLeftRadius\": \"6px\",\n            \"borderTopRightRadius\": \"6px\",\n            \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n            \"display\": \"flex\",\n            \"height\": \"80px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"256px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(67,56,202,1.00)\",\n            \"borderBottomLeftRadius\": \"6px\",\n            \"borderBottomRightRadius\": \"6px\",\n            \"borderTopLeftRadius\": \"6px\",\n            \"borderTopRightRadius\": \"6px\",\n            \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n            \"display\": \"flex\",\n            \"height\": \"80px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"256px\",\n          }\n        }\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots View Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"24px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n          }\n        }\n      >\n        A component library for the\n        <span\n          className=\"css-text-901oao css-textHasAncestor-16my406\"\n          style={\n            Object {\n              \"color\": \"rgba(16,185,129,1.00)\",\n              \"fontSize\": \"24px\",\n              \"fontWeight\": \"700\",\n              \"lineHeight\": \"1.25em\",\n            }\n          }\n        >\n           React Ecosystem\n        </span>\n      </div>\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"500\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n            \"marginTop\": \"12px\",\n          }\n        }\n      >\n        NativeBase is a simple, modular and accessible component library that gives you building blocks to build you React applications.\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots ZStack Basic ZStack 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"height\": \"160px\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"marginTop\": \"-128px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"marginLeft\": \"-50px\",\n              \"marginTop\": \"12px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(14,116,144,1.00)\",\n                \"borderBottomLeftRadius\": \"8px\",\n                \"borderBottomRightRadius\": \"8px\",\n                \"borderTopLeftRadius\": \"8px\",\n                \"borderTopRightRadius\": \"8px\",\n                \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n                \"height\": \"80px\",\n                \"position\": \"absolute\",\n                \"width\": \"80px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(6,182,212,1.00)\",\n                \"borderBottomLeftRadius\": \"8px\",\n                \"borderBottomRightRadius\": \"8px\",\n                \"borderTopLeftRadius\": \"8px\",\n                \"borderTopRightRadius\": \"8px\",\n                \"boxShadow\": \"0px 3px 4.65px rgba(0,0,0,0.27)\",\n                \"height\": \"80px\",\n                \"marginLeft\": \"20px\",\n                \"marginTop\": \"20px\",\n                \"position\": \"absolute\",\n                \"width\": \"80px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(103,232,249,1.00)\",\n                \"borderBottomLeftRadius\": \"8px\",\n                \"borderBottomRightRadius\": \"8px\",\n                \"borderTopLeftRadius\": \"8px\",\n                \"borderTopRightRadius\": \"8px\",\n                \"boxShadow\": \"0px 4px 4.65px rgba(0,0,0,0.30)\",\n                \"height\": \"80px\",\n                \"marginLeft\": \"40px\",\n                \"marginTop\": \"40px\",\n                \"position\": \"absolute\",\n                \"width\": \"80px\",\n              }\n            }\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots ZStack ZStack items centered 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"height\": \"384px\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(67,56,202,1.00)\",\n              \"borderBottomLeftRadius\": \"8px\",\n              \"borderBottomRightRadius\": \"8px\",\n              \"borderTopLeftRadius\": \"8px\",\n              \"borderTopRightRadius\": \"8px\",\n              \"height\": \"256px\",\n              \"position\": \"absolute\",\n              \"width\": \"256px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(99,102,241,1.00)\",\n              \"borderBottomLeftRadius\": \"8px\",\n              \"borderBottomRightRadius\": \"8px\",\n              \"borderTopLeftRadius\": \"8px\",\n              \"borderTopRightRadius\": \"8px\",\n              \"boxShadow\": \"0px 4px 5.46px rgba(0,0,0,0.32)\",\n              \"height\": \"192px\",\n              \"position\": \"absolute\",\n              \"width\": \"192px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(165,180,252,1.00)\",\n              \"borderBottomLeftRadius\": \"8px\",\n              \"borderBottomRightRadius\": \"8px\",\n              \"borderTopLeftRadius\": \"8px\",\n              \"borderTopRightRadius\": \"8px\",\n              \"boxShadow\": \"0px 4px 5.46px rgba(0,0,0,0.32)\",\n              \"height\": \"128px\",\n              \"position\": \"absolute\",\n              \"width\": \"128px\",\n            }\n          }\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots useAccessibleColors Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"vertical\",\n            \"WebkitFlexDirection\": \"column\",\n            \"flexDirection\": \"column\",\n            \"msFlexDirection\": \"column\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n            }\n          }\n        >\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(110,231,183,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": \"4px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(255,255,255,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Save\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"12px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n            }\n          }\n        >\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(52,211,153,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": \"4px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(255,255,255,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Save\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"12px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n            }\n          }\n        >\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(16,185,129,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": \"4px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(255,255,255,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Save\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"12px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n            }\n          }\n        >\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(5,150,105,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": \"4px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(255,255,255,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Save\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"12px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n            }\n          }\n        >\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(4,120,87,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": \"4px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(255,255,255,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Save\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"12px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n            }\n          }\n        >\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(6,95,70,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": \"4px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(255,255,255,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Save\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"flexDirection\": \"row\",\n            \"marginTop\": \"24px\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          Toggle Accessible Colors\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"width\": \"12px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitUserSelect\": \"none\",\n              \"cursor\": \"pointer\",\n              \"height\": \"20px\",\n              \"msUserSelect\": \"none\",\n              \"userSelect\": \"none\",\n              \"width\": \"40px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitTransitionDuration\": \"0.1s\",\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"borderBottomLeftRadius\": \"10px\",\n                \"borderBottomRightRadius\": \"10px\",\n                \"borderTopLeftRadius\": \"10px\",\n                \"borderTopRightRadius\": \"10px\",\n                \"bottom\": \"0px\",\n                \"forcedColorAdjust\": \"none\",\n                \"height\": \"70%\",\n                \"left\": \"0px\",\n                \"marginBottom\": \"auto\",\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": \"auto\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"transitionDuration\": \"0.1s\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignSelf\": \"flex-start\",\n                \"WebkitTransform\": \"translateZ(0px)\",\n                \"WebkitTransitionDuration\": \"0.1s\",\n                \"alignSelf\": \"flex-start\",\n                \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                \"borderBottomLeftRadius\": \"100%\",\n                \"borderBottomRightRadius\": \"100%\",\n                \"borderTopLeftRadius\": \"100%\",\n                \"borderTopRightRadius\": \"100%\",\n                \"boxShadow\": \"0px 1px 3px rgba(0,0,0,0.5)\",\n                \"forcedColorAdjust\": \"none\",\n                \"height\": \"20px\",\n                \"left\": \"0%\",\n                \"marginLeft\": \"0px\",\n                \"msFlexItemAlign\": \"start\",\n                \"transform\": \"translateZ(0px)\",\n                \"transitionDuration\": \"0.1s\",\n                \"width\": \"20px\",\n              }\n            }\n          />\n          <input\n            checked={false}\n            disabled={false}\n            onBlur={[Function]}\n            onChange={[Function]}\n            onFocus={[Function]}\n            role=\"switch\"\n            style={\n              Object {\n                \"bottom\": \"0px\",\n                \"cursor\": \"inherit\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"marginBottom\": \"0px\",\n                \"marginLeft\": \"0px\",\n                \"marginRight\": \"0px\",\n                \"marginTop\": \"0px\",\n                \"opacity\": 0,\n                \"paddingBottom\": \"0px\",\n                \"paddingLeft\": \"0px\",\n                \"paddingRight\": \"0px\",\n                \"paddingTop\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n              }\n            }\n            type=\"checkbox\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots useBreakpointValue Usage 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n r-scrollbarWidth-2eszeu\"\n      onScroll={[Function]}\n      onTouchEnd={[Function]}\n      onTouchMove={[Function]}\n      onTouchStart={[Function]}\n      onWheel={[Function]}\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxFlex\": 1,\n          \"WebkitBoxOrient\": \"vertical\",\n          \"WebkitFlexDirection\": \"column\",\n          \"WebkitFlexGrow\": 1,\n          \"WebkitFlexShrink\": 1,\n          \"WebkitOverflowScrolling\": \"touch\",\n          \"WebkitTransform\": \"translateZ(0px)\",\n          \"flexDirection\": \"column\",\n          \"flexGrow\": 1,\n          \"flexShrink\": 1,\n          \"msFlexDirection\": \"column\",\n          \"msFlexNegative\": 1,\n          \"msFlexPositive\": 1,\n          \"overflowX\": \"hidden\",\n          \"overflowY\": \"auto\",\n          \"transform\": \"translateZ(0px)\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"dataSet\": Object {},\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"paddingBottom\": \"32px\",\n              \"paddingTop\": \"32px\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"24px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Why us?\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"32px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"vertical\",\n                \"WebkitFlexDirection\": \"column\",\n                \"flexDirection\": \"column\",\n                \"msFlexDirection\": \"column\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(165,243,252,1.00)\",\n                  \"borderBottomLeftRadius\": \"12px\",\n                  \"borderBottomRightRadius\": \"12px\",\n                  \"borderTopLeftRadius\": \"12px\",\n                  \"borderTopRightRadius\": \"12px\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": \"12px\",\n                  \"marginLeft\": \"12px\",\n                  \"marginRight\": \"12px\",\n                  \"marginTop\": \"12px\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"paddingBottom\": \"12px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"12px\",\n                  \"width\": \"140px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"height\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"18px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                    \"textAlign\": \"center\",\n                  }\n                }\n              >\n                Secure Checkout\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(165,243,252,1.00)\",\n                  \"borderBottomLeftRadius\": \"12px\",\n                  \"borderBottomRightRadius\": \"12px\",\n                  \"borderTopLeftRadius\": \"12px\",\n                  \"borderTopRightRadius\": \"12px\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": \"12px\",\n                  \"marginLeft\": \"12px\",\n                  \"marginRight\": \"12px\",\n                  \"marginTop\": \"12px\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"paddingBottom\": \"12px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"12px\",\n                  \"width\": \"140px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"height\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"18px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                    \"textAlign\": \"center\",\n                  }\n                }\n              >\n                Secure Checkout\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(165,243,252,1.00)\",\n                  \"borderBottomLeftRadius\": \"12px\",\n                  \"borderBottomRightRadius\": \"12px\",\n                  \"borderTopLeftRadius\": \"12px\",\n                  \"borderTopRightRadius\": \"12px\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": \"12px\",\n                  \"marginLeft\": \"12px\",\n                  \"marginRight\": \"12px\",\n                  \"marginTop\": \"12px\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"paddingBottom\": \"12px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"12px\",\n                  \"width\": \"140px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"height\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"18px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                    \"textAlign\": \"center\",\n                  }\n                }\n              >\n                Fast Turn Around\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots useClipboard Usage 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"maxWidth\": \"300px\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"flexDirection\": \"row\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"overflowX\": \"auto\",\n                \"overflowY\": \"auto\",\n              }\n            }\n          >\n            <input\n              autoCapitalize=\"sentences\"\n              autoComplete=\"on\"\n              autoCorrect=\"on\"\n              className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n              dir=\"auto\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onSelect={[Function]}\n              placeholder=\"Copy From\"\n              readOnly={false}\n              spellCheck={true}\n              style={\n                Object {\n                  \"WebkitFlex\": 1,\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"cursor\": \"auto\",\n                  \"flex\": 1,\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"100%\",\n                  \"lineHeight\": \"1.5em\",\n                  \"msFlex\": \"1 1 0%\",\n                  \"outline\": \"none\",\n                  \"outlineWidth\": \"0px\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"width\": \"100%\",\n                }\n              }\n              type=\"text\"\n              value=\"Hello\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Copy\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"flexDirection\": \"row\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"overflowX\": \"auto\",\n                \"overflowY\": \"auto\",\n              }\n            }\n          >\n            <input\n              autoCapitalize=\"sentences\"\n              autoComplete=\"on\"\n              autoCorrect=\"on\"\n              className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n              dir=\"auto\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onSelect={[Function]}\n              placeholder=\"Paste Here\"\n              readOnly={false}\n              spellCheck={true}\n              style={\n                Object {\n                  \"WebkitFlex\": 1,\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"cursor\": \"auto\",\n                  \"flex\": 1,\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"100%\",\n                  \"lineHeight\": \"1.5em\",\n                  \"msFlex\": \"1 1 0%\",\n                  \"outline\": \"none\",\n                  \"outlineWidth\": \"0px\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"width\": \"100%\",\n                }\n              }\n              type=\"text\"\n              value=\"\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Paste\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots useColorMode Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitFlex\": 1,\n        \"flex\": 1,\n        \"msFlex\": \"1 1 0%\",\n      }\n    }\n  >\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitFlex\": 1,\n            \"backgroundColor\": \"rgba(250,250,249,1.00)\",\n            \"flex\": 1,\n            \"marginTop\": \"40px\",\n            \"maxWidth\": \"300px\",\n            \"msFlex\": \"1 1 0%\",\n            \"paddingBottom\": \"16px\",\n            \"paddingLeft\": \"16px\",\n            \"paddingRight\": \"16px\",\n            \"paddingTop\": \"16px\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"display\": \"flex\",\n              \"fontSize\": \"18px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n              \"marginBottom\": \"80px\",\n            }\n          }\n        >\n          The active color mode is\n           \n          <span\n            className=\"css-text-901oao css-textHasAncestor-16my406\"\n            style={\n              Object {\n                \"fontSize\": \"18px\",\n                \"fontWeight\": \"700\",\n              }\n            }\n          >\n            light\n          </span>\n        </div>\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"height\": \"40px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Toggle\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots useColorModeValue Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitFlex\": 1,\n        \"flex\": 1,\n        \"msFlex\": \"1 1 0%\",\n      }\n    }\n  >\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitFlex\": 1,\n            \"backgroundColor\": \"rgba(250,250,249,1.00)\",\n            \"flex\": 1,\n            \"marginTop\": \"40px\",\n            \"maxWidth\": \"300px\",\n            \"msFlex\": \"1 1 0%\",\n            \"paddingBottom\": \"16px\",\n            \"paddingLeft\": \"16px\",\n            \"paddingRight\": \"16px\",\n            \"paddingTop\": \"16px\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"display\": \"flex\",\n              \"fontSize\": \"18px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n              \"marginBottom\": \"80px\",\n            }\n          }\n        >\n          The active color mode is\n           \n          <span\n            className=\"css-text-901oao css-textHasAncestor-16my406\"\n            style={\n              Object {\n                \"fontSize\": \"18px\",\n                \"fontWeight\": \"700\",\n              }\n            }\n          >\n            Light\n          </span>\n        </div>\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"height\": \"40px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Toggle\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots useContrastText Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(24,24,27,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(255,255,255,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                NativeBase\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(0,0,0,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                NativeBase\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots useContrastText Variations 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"rgba(236,254,255,1.00)\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginBottom\": \"4px\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"10px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"10px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(0,0,0,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            NativeBase\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"rgba(207,250,254,1.00)\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginBottom\": \"4px\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"10px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"10px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(0,0,0,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            NativeBase\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"rgba(165,243,252,1.00)\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginBottom\": \"4px\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"10px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"10px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(0,0,0,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            NativeBase\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"rgba(103,232,249,1.00)\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginBottom\": \"4px\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"10px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"10px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(255,255,255,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            NativeBase\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"rgba(34,211,238,1.00)\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginBottom\": \"4px\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"10px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"10px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(255,255,255,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            NativeBase\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"rgba(6,182,212,1.00)\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginBottom\": \"4px\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"10px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"10px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(255,255,255,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            NativeBase\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginBottom\": \"4px\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"10px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"10px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(255,255,255,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            NativeBase\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"rgba(14,116,144,1.00)\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginBottom\": \"4px\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"10px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"10px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(255,255,255,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            NativeBase\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"rgba(21,94,117,1.00)\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginBottom\": \"4px\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"10px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"10px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(255,255,255,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            NativeBase\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"rgba(22,78,99,1.00)\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginBottom\": \"4px\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"10px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"10px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(255,255,255,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            NativeBase\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"rgba(79,70,229,1.00)\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginTop\": \"8px\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"10px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"10px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(250,250,250,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            Toggle Accessible Colors\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots useDisclose Usage 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Open Modal\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots useMediaQuery MaxHeight 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"borderBottomColor\": \"rgba(156,163,175,1.00)\",\n            \"borderBottomLeftRadius\": \"6px\",\n            \"borderBottomRightRadius\": \"6px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(156,163,175,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(156,163,175,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(156,163,175,1.00)\",\n            \"borderTopLeftRadius\": \"6px\",\n            \"borderTopRightRadius\": \"6px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"maxWidth\": \"400px\",\n            \"msFlexDirection\": \"row\",\n            \"paddingBottom\": \"16px\",\n            \"paddingLeft\": \"16px\",\n            \"paddingRight\": \"16px\",\n            \"paddingTop\": \"16px\",\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"borderBottomLeftRadius\": \"6px\",\n              \"borderBottomRightRadius\": \"6px\",\n              \"borderTopLeftRadius\": \"6px\",\n              \"borderTopRightRadius\": \"6px\",\n              \"flex\": 1,\n              \"height\": \"150px\",\n              \"msFlex\": \"1 1 0%\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            id=\"animatedComponent\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                \"height\": \"100%\",\n                \"opacity\": 0,\n                \"width\": \"100%\",\n              }\n            }\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"width\": \"32px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlex\": 3,\n              \"flex\": 3,\n              \"msFlex\": \"3 1 0%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"height\": \"40px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              id=\"animatedComponent\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"vertical\",\n                \"WebkitFlexDirection\": \"column\",\n                \"flexDirection\": \"column\",\n                \"msFlexDirection\": \"column\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"12px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"12px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"12px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"75%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"20px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"20px\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitFlex\": 2,\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"flex\": 2,\n                  \"height\": \"12px\",\n                  \"msFlex\": \"2 1 0%\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitFlex\": 1,\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"flex\": 1,\n                  \"height\": \"12px\",\n                  \"msFlex\": \"1 1 0%\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots useMediaQuery MinWidth 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"borderBottomColor\": \"rgba(156,163,175,1.00)\",\n            \"borderBottomLeftRadius\": \"6px\",\n            \"borderBottomRightRadius\": \"6px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(156,163,175,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(156,163,175,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(156,163,175,1.00)\",\n            \"borderTopLeftRadius\": \"6px\",\n            \"borderTopRightRadius\": \"6px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"maxWidth\": \"400px\",\n            \"msFlexDirection\": \"row\",\n            \"paddingBottom\": \"16px\",\n            \"paddingLeft\": \"16px\",\n            \"paddingRight\": \"16px\",\n            \"paddingTop\": \"16px\",\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"borderBottomLeftRadius\": \"6px\",\n              \"borderBottomRightRadius\": \"6px\",\n              \"borderTopLeftRadius\": \"6px\",\n              \"borderTopRightRadius\": \"6px\",\n              \"flex\": 1,\n              \"height\": \"150px\",\n              \"msFlex\": \"1 1 0%\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            id=\"animatedComponent\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                \"height\": \"100%\",\n                \"opacity\": 0,\n                \"width\": \"100%\",\n              }\n            }\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"width\": \"32px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlex\": 3,\n              \"flex\": 3,\n              \"msFlex\": \"3 1 0%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"height\": \"40px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              id=\"animatedComponent\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"vertical\",\n                \"WebkitFlexDirection\": \"column\",\n                \"flexDirection\": \"column\",\n                \"msFlexDirection\": \"column\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"12px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"12px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"12px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"75%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"20px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"20px\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitFlex\": 2,\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"flex\": 2,\n                  \"height\": \"12px\",\n                  \"msFlex\": \"2 1 0%\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitFlex\": 1,\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"flex\": 1,\n                  \"height\": \"12px\",\n                  \"msFlex\": \"1 1 0%\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots useMediaQuery Orientation 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"borderBottomColor\": \"rgba(156,163,175,1.00)\",\n            \"borderBottomLeftRadius\": \"6px\",\n            \"borderBottomRightRadius\": \"6px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(156,163,175,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(156,163,175,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(156,163,175,1.00)\",\n            \"borderTopLeftRadius\": \"6px\",\n            \"borderTopRightRadius\": \"6px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"maxWidth\": \"400px\",\n            \"msFlexDirection\": \"row\",\n            \"paddingBottom\": \"16px\",\n            \"paddingLeft\": \"16px\",\n            \"paddingRight\": \"16px\",\n            \"paddingTop\": \"16px\",\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlex\": 3,\n              \"flex\": 3,\n              \"msFlex\": \"3 1 0%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"height\": \"40px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              id=\"animatedComponent\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"vertical\",\n                \"WebkitFlexDirection\": \"column\",\n                \"flexDirection\": \"column\",\n                \"msFlexDirection\": \"column\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"12px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"12px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"12px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"75%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"20px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"20px\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitFlex\": 2,\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"flex\": 2,\n                  \"height\": \"12px\",\n                  \"msFlex\": \"2 1 0%\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitFlex\": 1,\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"flex\": 1,\n                  \"height\": \"12px\",\n                  \"msFlex\": \"1 1 0%\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots useSafeArea Fixed 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitFlex\": 1,\n        \"flex\": 1,\n        \"msFlex\": \"1 1 0%\",\n      }\n    }\n  >\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"backgroundColor\": \"rgba(45,212,191,1.00)\",\n          \"height\": \"200px\",\n          \"paddingTop\": \"32px\",\n          \"width\": \"200px\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        NativeBase\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots useSafeArea Flexible 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitFlex\": 1,\n        \"flex\": 1,\n        \"msFlex\": \"1 1 0%\",\n      }\n    }\n  >\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"backgroundColor\": \"rgba(45,212,191,1.00)\",\n          \"height\": \"200px\",\n          \"width\": \"200px\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        NativeBase\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots useSafeArea Hook 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitFlex\": 1,\n        \"flex\": 1,\n        \"msFlex\": \"1 1 0%\",\n      }\n    }\n  >\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"backgroundColor\": \"rgba(45,212,191,1.00)\",\n          \"height\": \"200px\",\n          \"paddingTop\": \"8px\",\n          \"width\": \"200px\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        NativeBase\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots useSx Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"rgba(147,197,253,1.00)\",\n          \"height\": \"192px\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"paddingBottom\": \"8px\",\n          \"paddingLeft\": \"8px\",\n          \"paddingRight\": \"8px\",\n          \"paddingTop\": \"8px\",\n          \"width\": \"192px\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(124,45,18,1.00)\",\n            \"height\": \"48px\",\n            \"textAlign\": \"center\",\n            \"width\": \"48px\",\n          }\n        }\n      >\n        New Feat useSx in NativeBase\n      </div>\n    </div>\n  </div>\n</div>\n`;\n"
  },
  {
    "path": "example/tests/storybook.test.js.snap.web",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Storyshots Actionsheet Composition 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Actionsheet\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Actionsheet Custom Backdrop 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"10px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"10px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(250,250,250,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            Actionsheet\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Actionsheet DisableOverlay 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Actionsheet\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Actionsheet Icon 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Actionsheet\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Actionsheet Usage 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Actionsheet\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Alert Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"start\",\n            \"WebkitJustifyContent\": \"flex-start\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(186,230,253,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"justifyContent\": \"flex-start\",\n            \"maxWidth\": \"400px\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"start\",\n            \"paddingBottom\": \"12px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"12px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexShrink\": 1,\n              \"flexShrink\": 1,\n              \"msFlexNegative\": 1,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"justify\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitFlexShrink\": 1,\n                \"WebkitJustifyContent\": \"space-between\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"flexShrink\": 1,\n                \"justifyContent\": \"space-between\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexNegative\": 1,\n                \"msFlexPack\": \"justify\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitFlexShrink\": 1,\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"flexShrink\": 1,\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexNegative\": 1,\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(3,105,161,1.00)\",\n                      \"height\": \"16px\",\n                      \"width\": \"16px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M12 0C9.62663 0 7.30655 0.703788 5.33316 2.02236C3.35977 3.34094 1.8217 5.21509 0.913451 7.4078C0.00519948 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6689 1.83649 18.807 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0865C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6935 24 14.3734 24 12C23.9966 8.81846 22.7312 5.76821 20.4815 3.51852C18.2318 1.26883 15.1815 0.00344108 12 0ZM12.25 5C12.5467 5 12.8367 5.08797 13.0834 5.25279C13.33 5.41762 13.5223 5.65189 13.6358 5.92597C13.7494 6.20006 13.7791 6.50166 13.7212 6.79263C13.6633 7.08361 13.5204 7.35088 13.3107 7.56066C13.1009 7.77044 12.8336 7.9133 12.5426 7.97118C12.2517 8.02905 11.9501 7.99935 11.676 7.88582C11.4019 7.77229 11.1676 7.58003 11.0028 7.33335C10.838 7.08668 10.75 6.79667 10.75 6.5C10.75 6.10217 10.908 5.72064 11.1893 5.43934C11.4706 5.15803 11.8522 5 12.25 5ZM14.5 18.5H10.5C10.2348 18.5 9.98043 18.3946 9.7929 18.2071C9.60536 18.0196 9.5 17.7652 9.5 17.5C9.5 17.2348 9.60536 16.9804 9.7929 16.7929C9.98043 16.6054 10.2348 16.5 10.5 16.5H11.25C11.3163 16.5 11.3799 16.4737 11.4268 16.4268C11.4737 16.3799 11.5 16.3163 11.5 16.25V11.75C11.5 11.6837 11.4737 11.6201 11.4268 11.5732C11.3799 11.5263 11.3163 11.5 11.25 11.5H10.5C10.2348 11.5 9.98043 11.3946 9.7929 11.2071C9.60536 11.0196 9.5 10.7652 9.5 10.5C9.5 10.2348 9.60536 9.98043 9.7929 9.79289C9.98043 9.60536 10.2348 9.5 10.5 9.5H11.5C12.0304 9.5 12.5391 9.71071 12.9142 10.0858C13.2893 10.4609 13.5 10.9696 13.5 11.5V16.25C13.5 16.3163 13.5263 16.3799 13.5732 16.4268C13.6201 16.4737 13.6837 16.5 13.75 16.5H14.5C14.7652 16.5 15.0196 16.6054 15.2071 16.7929C15.3946 16.9804 15.5 17.2348 15.5 17.5C15.5 17.7652 15.3946 18.0196 15.2071 18.2071C15.0196 18.3946 14.7652 18.5 14.5 18.5Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(31,41,55,1.00)\",\n                    \"fontSize\": \"16px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.25em\",\n                  }\n                }\n              >\n                We are going live in July!\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"10px\",\n                  \"paddingRight\": \"10px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <svg\n                role=\"img\"\n                stroke=\"\"\n                style={\n                  Object {\n                    \"color\": \"rgba(75,85,99,1.00)\",\n                    \"height\": \"12px\",\n                    \"width\": \"12px\",\n                  }\n                }\n                viewBox=\"0 0 24 24\"\n              >\n                <g>\n                  <path\n                    d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                    fill=\"currentColor\"\n                    stroke=\"\"\n                  />\n                </g>\n              </svg>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"4px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"paddingLeft\": \"24px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(75,85,99,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              We are happy to announce that we are going live on July 28th. Get ready!\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Alert ColorScheme 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"marginLeft\": \"12px\",\n          \"marginRight\": \"12px\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"start\",\n            \"WebkitJustifyContent\": \"flex-start\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(254,202,202,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"justifyContent\": \"flex-start\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"start\",\n            \"paddingBottom\": \"12px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"12px\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexShrink\": 1,\n              \"flexShrink\": 1,\n              \"msFlexNegative\": 1,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"justify\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitFlexShrink\": 1,\n                \"WebkitJustifyContent\": \"space-between\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"flexShrink\": 1,\n                \"justifyContent\": \"space-between\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexNegative\": 1,\n                \"msFlexPack\": \"justify\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitFlexShrink\": 1,\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"flexShrink\": 1,\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexNegative\": 1,\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(185,28,28,1.00)\",\n                      \"height\": \"16px\",\n                      \"width\": \"16px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M12 0C9.62663 0 7.30655 0.703788 5.33316 2.02236C3.35977 3.34094 1.8217 5.21509 0.913451 7.4078C0.00519948 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6689 1.83649 18.807 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0865C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6935 24 14.3734 24 12C23.9966 8.81846 22.7312 5.76821 20.4815 3.51852C18.2318 1.26883 15.1815 0.00344108 12 0ZM12.25 5C12.5467 5 12.8367 5.08797 13.0834 5.25279C13.33 5.41762 13.5223 5.65189 13.6358 5.92597C13.7494 6.20006 13.7791 6.50166 13.7212 6.79263C13.6633 7.08361 13.5204 7.35088 13.3107 7.56066C13.1009 7.77044 12.8336 7.9133 12.5426 7.97118C12.2517 8.02905 11.9501 7.99935 11.676 7.88582C11.4019 7.77229 11.1676 7.58003 11.0028 7.33335C10.838 7.08668 10.75 6.79667 10.75 6.5C10.75 6.10217 10.908 5.72064 11.1893 5.43934C11.4706 5.15803 11.8522 5 12.25 5ZM14.5 18.5H10.5C10.2348 18.5 9.98043 18.3946 9.7929 18.2071C9.60536 18.0196 9.5 17.7652 9.5 17.5C9.5 17.2348 9.60536 16.9804 9.7929 16.7929C9.98043 16.6054 10.2348 16.5 10.5 16.5H11.25C11.3163 16.5 11.3799 16.4737 11.4268 16.4268C11.4737 16.3799 11.5 16.3163 11.5 16.25V11.75C11.5 11.6837 11.4737 11.6201 11.4268 11.5732C11.3799 11.5263 11.3163 11.5 11.25 11.5H10.5C10.2348 11.5 9.98043 11.3946 9.7929 11.2071C9.60536 11.0196 9.5 10.7652 9.5 10.5C9.5 10.2348 9.60536 9.98043 9.7929 9.79289C9.98043 9.60536 10.2348 9.5 10.5 9.5H11.5C12.0304 9.5 12.5391 9.71071 12.9142 10.0858C13.2893 10.4609 13.5 10.9696 13.5 11.5V16.25C13.5 16.3163 13.5263 16.3799 13.5732 16.4268C13.6201 16.4737 13.6837 16.5 13.75 16.5H14.5C14.7652 16.5 15.0196 16.6054 15.2071 16.7929C15.3946 16.9804 15.5 17.2348 15.5 17.5C15.5 17.7652 15.3946 18.0196 15.2071 18.2071C15.0196 18.3946 14.7652 18.5 14.5 18.5Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(31,41,55,1.00)\",\n                    \"fontSize\": \"16px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Please try again later!\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"10px\",\n                  \"paddingRight\": \"10px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <svg\n                role=\"img\"\n                stroke=\"\"\n                style={\n                  Object {\n                    \"color\": \"rgba(75,85,99,1.00)\",\n                    \"height\": \"12px\",\n                    \"width\": \"12px\",\n                  }\n                }\n                viewBox=\"0 0 24 24\"\n              >\n                <g>\n                  <path\n                    d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                    fill=\"currentColor\"\n                    stroke=\"\"\n                  />\n                </g>\n              </svg>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"paddingLeft\": \"24px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(75,85,99,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Your coupon could not be processed at this time.\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"start\",\n            \"WebkitJustifyContent\": \"flex-start\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(254,215,170,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"justifyContent\": \"flex-start\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"start\",\n            \"paddingBottom\": \"12px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"12px\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexShrink\": 1,\n              \"flexShrink\": 1,\n              \"msFlexNegative\": 1,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"justify\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitFlexShrink\": 1,\n                \"WebkitJustifyContent\": \"space-between\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"flexShrink\": 1,\n                \"justifyContent\": \"space-between\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexNegative\": 1,\n                \"msFlexPack\": \"justify\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitFlexShrink\": 1,\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"flexShrink\": 1,\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexNegative\": 1,\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(194,65,12,1.00)\",\n                      \"height\": \"16px\",\n                      \"width\": \"16px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M12 0C9.62663 0 7.30655 0.703788 5.33316 2.02236C3.35977 3.34094 1.8217 5.21509 0.913451 7.4078C0.00519948 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6689 1.83649 18.807 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0865C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6935 24 14.3734 24 12C23.9966 8.81846 22.7312 5.76821 20.4815 3.51852C18.2318 1.26883 15.1815 0.00344108 12 0ZM12.25 5C12.5467 5 12.8367 5.08797 13.0834 5.25279C13.33 5.41762 13.5223 5.65189 13.6358 5.92597C13.7494 6.20006 13.7791 6.50166 13.7212 6.79263C13.6633 7.08361 13.5204 7.35088 13.3107 7.56066C13.1009 7.77044 12.8336 7.9133 12.5426 7.97118C12.2517 8.02905 11.9501 7.99935 11.676 7.88582C11.4019 7.77229 11.1676 7.58003 11.0028 7.33335C10.838 7.08668 10.75 6.79667 10.75 6.5C10.75 6.10217 10.908 5.72064 11.1893 5.43934C11.4706 5.15803 11.8522 5 12.25 5ZM14.5 18.5H10.5C10.2348 18.5 9.98043 18.3946 9.7929 18.2071C9.60536 18.0196 9.5 17.7652 9.5 17.5C9.5 17.2348 9.60536 16.9804 9.7929 16.7929C9.98043 16.6054 10.2348 16.5 10.5 16.5H11.25C11.3163 16.5 11.3799 16.4737 11.4268 16.4268C11.4737 16.3799 11.5 16.3163 11.5 16.25V11.75C11.5 11.6837 11.4737 11.6201 11.4268 11.5732C11.3799 11.5263 11.3163 11.5 11.25 11.5H10.5C10.2348 11.5 9.98043 11.3946 9.7929 11.2071C9.60536 11.0196 9.5 10.7652 9.5 10.5C9.5 10.2348 9.60536 9.98043 9.7929 9.79289C9.98043 9.60536 10.2348 9.5 10.5 9.5H11.5C12.0304 9.5 12.5391 9.71071 12.9142 10.0858C13.2893 10.4609 13.5 10.9696 13.5 11.5V16.25C13.5 16.3163 13.5263 16.3799 13.5732 16.4268C13.6201 16.4737 13.6837 16.5 13.75 16.5H14.5C14.7652 16.5 15.0196 16.6054 15.2071 16.7929C15.3946 16.9804 15.5 17.2348 15.5 17.5C15.5 17.7652 15.3946 18.0196 15.2071 18.2071C15.0196 18.3946 14.7652 18.5 14.5 18.5Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(31,41,55,1.00)\",\n                    \"fontSize\": \"16px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Please try again later!\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"10px\",\n                  \"paddingRight\": \"10px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <svg\n                role=\"img\"\n                stroke=\"\"\n                style={\n                  Object {\n                    \"color\": \"rgba(75,85,99,1.00)\",\n                    \"height\": \"12px\",\n                    \"width\": \"12px\",\n                  }\n                }\n                viewBox=\"0 0 24 24\"\n              >\n                <g>\n                  <path\n                    d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                    fill=\"currentColor\"\n                    stroke=\"\"\n                  />\n                </g>\n              </svg>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"paddingLeft\": \"24px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(75,85,99,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Your coupon could not be processed at this time.\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"start\",\n            \"WebkitJustifyContent\": \"flex-start\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(251,207,232,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"justifyContent\": \"flex-start\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"start\",\n            \"paddingBottom\": \"12px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"12px\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexShrink\": 1,\n              \"flexShrink\": 1,\n              \"msFlexNegative\": 1,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"justify\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitFlexShrink\": 1,\n                \"WebkitJustifyContent\": \"space-between\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"flexShrink\": 1,\n                \"justifyContent\": \"space-between\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexNegative\": 1,\n                \"msFlexPack\": \"justify\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitFlexShrink\": 1,\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"flexShrink\": 1,\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexNegative\": 1,\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(190,24,93,1.00)\",\n                      \"height\": \"16px\",\n                      \"width\": \"16px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M12 0C9.62663 0 7.30655 0.703788 5.33316 2.02236C3.35977 3.34094 1.8217 5.21509 0.913451 7.4078C0.00519948 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6689 1.83649 18.807 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0865C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6935 24 14.3734 24 12C23.9966 8.81846 22.7312 5.76821 20.4815 3.51852C18.2318 1.26883 15.1815 0.00344108 12 0ZM12.25 5C12.5467 5 12.8367 5.08797 13.0834 5.25279C13.33 5.41762 13.5223 5.65189 13.6358 5.92597C13.7494 6.20006 13.7791 6.50166 13.7212 6.79263C13.6633 7.08361 13.5204 7.35088 13.3107 7.56066C13.1009 7.77044 12.8336 7.9133 12.5426 7.97118C12.2517 8.02905 11.9501 7.99935 11.676 7.88582C11.4019 7.77229 11.1676 7.58003 11.0028 7.33335C10.838 7.08668 10.75 6.79667 10.75 6.5C10.75 6.10217 10.908 5.72064 11.1893 5.43934C11.4706 5.15803 11.8522 5 12.25 5ZM14.5 18.5H10.5C10.2348 18.5 9.98043 18.3946 9.7929 18.2071C9.60536 18.0196 9.5 17.7652 9.5 17.5C9.5 17.2348 9.60536 16.9804 9.7929 16.7929C9.98043 16.6054 10.2348 16.5 10.5 16.5H11.25C11.3163 16.5 11.3799 16.4737 11.4268 16.4268C11.4737 16.3799 11.5 16.3163 11.5 16.25V11.75C11.5 11.6837 11.4737 11.6201 11.4268 11.5732C11.3799 11.5263 11.3163 11.5 11.25 11.5H10.5C10.2348 11.5 9.98043 11.3946 9.7929 11.2071C9.60536 11.0196 9.5 10.7652 9.5 10.5C9.5 10.2348 9.60536 9.98043 9.7929 9.79289C9.98043 9.60536 10.2348 9.5 10.5 9.5H11.5C12.0304 9.5 12.5391 9.71071 12.9142 10.0858C13.2893 10.4609 13.5 10.9696 13.5 11.5V16.25C13.5 16.3163 13.5263 16.3799 13.5732 16.4268C13.6201 16.4737 13.6837 16.5 13.75 16.5H14.5C14.7652 16.5 15.0196 16.6054 15.2071 16.7929C15.3946 16.9804 15.5 17.2348 15.5 17.5C15.5 17.7652 15.3946 18.0196 15.2071 18.2071C15.0196 18.3946 14.7652 18.5 14.5 18.5Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(31,41,55,1.00)\",\n                    \"fontSize\": \"16px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Please try again later!\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"10px\",\n                  \"paddingRight\": \"10px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <svg\n                role=\"img\"\n                stroke=\"\"\n                style={\n                  Object {\n                    \"color\": \"rgba(75,85,99,1.00)\",\n                    \"height\": \"12px\",\n                    \"width\": \"12px\",\n                  }\n                }\n                viewBox=\"0 0 24 24\"\n              >\n                <g>\n                  <path\n                    d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                    fill=\"currentColor\"\n                    stroke=\"\"\n                  />\n                </g>\n              </svg>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"paddingLeft\": \"24px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(75,85,99,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Your coupon could not be processed at this time.\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Alert Composition 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"maxWidth\": \"400px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"start\",\n              \"WebkitJustifyContent\": \"flex-start\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(187,247,208,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"justifyContent\": \"flex-start\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"start\",\n              \"paddingBottom\": \"12px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"12px\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexShrink\": 1,\n                \"flexShrink\": 1,\n                \"msFlexNegative\": 1,\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"justify\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitFlexShrink\": 1,\n                  \"WebkitJustifyContent\": \"space-between\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"flexShrink\": 1,\n                  \"justifyContent\": \"space-between\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexNegative\": 1,\n                  \"msFlexPack\": \"justify\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitFlexShrink\": 1,\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"flexShrink\": 1,\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexNegative\": 1,\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(21,128,61,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"16px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"500\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Application received!\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"4px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n                onBlur={[Function]}\n                onClick={[Function]}\n                onContextMenu={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                role=\"button\"\n                style={\n                  Object {\n                    \"MozUserSelect\": \"none\",\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"WebkitUserSelect\": \"none\",\n                    \"alignItems\": \"center\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"cursor\": \"pointer\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexPack\": \"center\",\n                    \"msTouchAction\": \"manipulation\",\n                    \"msUserSelect\": \"none\",\n                    \"paddingBottom\": \"10px\",\n                    \"paddingLeft\": \"10px\",\n                    \"paddingRight\": \"10px\",\n                    \"paddingTop\": \"10px\",\n                    \"touchAction\": \"manipulation\",\n                    \"userSelect\": \"none\",\n                  }\n                }\n                tabIndex=\"0\"\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(75,85,99,1.00)\",\n                      \"height\": \"12px\",\n                      \"width\": \"12px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"paddingLeft\": \"24px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Your application has been received. We will review your application and respond within the next 48 hours.\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"20px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"start\",\n              \"WebkitJustifyContent\": \"flex-start\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(187,247,208,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"justifyContent\": \"flex-start\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"start\",\n              \"paddingBottom\": \"12px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"12px\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitFlexShrink\": 1,\n                \"alignItems\": \"center\",\n                \"flexShrink\": 1,\n                \"msFlexAlign\": \"center\",\n                \"msFlexNegative\": 1,\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <svg\n                role=\"img\"\n                stroke=\"\"\n                style={\n                  Object {\n                    \"color\": \"rgba(21,128,61,1.00)\",\n                    \"height\": \"20px\",\n                    \"width\": \"20px\",\n                  }\n                }\n                viewBox=\"0 0 24 24\"\n              >\n                <g>\n                  <path\n                    d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z\"\n                    fill=\"currentColor\"\n                    stroke=\"\"\n                  />\n                </g>\n              </svg>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"4px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"500\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Application received!\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"4px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                    \"textAlign\": \"center\",\n                  }\n                }\n              >\n                Your application has been received. We will review your application and respond within the next 48 hours.\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Alert Status 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"maxWidth\": \"400px\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"start\",\n            \"WebkitJustifyContent\": \"flex-start\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(187,247,208,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"justifyContent\": \"flex-start\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"start\",\n            \"paddingBottom\": \"12px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"12px\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexShrink\": 1,\n              \"flexShrink\": 1,\n              \"msFlexNegative\": 1,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"justify\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitFlexShrink\": 1,\n                \"WebkitJustifyContent\": \"space-between\",\n                \"flexDirection\": \"row\",\n                \"flexShrink\": 1,\n                \"justifyContent\": \"space-between\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexNegative\": 1,\n                \"msFlexPack\": \"justify\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitFlexShrink\": 1,\n                  \"flexDirection\": \"row\",\n                  \"flexShrink\": 1,\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexNegative\": 1,\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(21,128,61,1.00)\",\n                      \"height\": \"16px\",\n                      \"marginTop\": \"4px\",\n                      \"width\": \"16px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(31,41,55,1.00)\",\n                    \"fontSize\": \"16px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Selection successfully moved!\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"10px\",\n                  \"paddingRight\": \"10px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <svg\n                role=\"img\"\n                stroke=\"\"\n                style={\n                  Object {\n                    \"color\": \"rgba(75,85,99,1.00)\",\n                    \"height\": \"12px\",\n                    \"width\": \"12px\",\n                  }\n                }\n                viewBox=\"0 0 24 24\"\n              >\n                <g>\n                  <path\n                    d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                    fill=\"currentColor\"\n                    stroke=\"\"\n                  />\n                </g>\n              </svg>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"12px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"start\",\n            \"WebkitJustifyContent\": \"flex-start\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(254,202,202,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"justifyContent\": \"flex-start\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"start\",\n            \"paddingBottom\": \"12px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"12px\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexShrink\": 1,\n              \"flexShrink\": 1,\n              \"msFlexNegative\": 1,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"justify\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitFlexShrink\": 1,\n                \"WebkitJustifyContent\": \"space-between\",\n                \"flexDirection\": \"row\",\n                \"flexShrink\": 1,\n                \"justifyContent\": \"space-between\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexNegative\": 1,\n                \"msFlexPack\": \"justify\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitFlexShrink\": 1,\n                  \"flexDirection\": \"row\",\n                  \"flexShrink\": 1,\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexNegative\": 1,\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(185,28,28,1.00)\",\n                      \"height\": \"16px\",\n                      \"marginTop\": \"4px\",\n                      \"width\": \"16px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <g\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    >\n                      <path\n                        d=\"M13.9193 18.4271C13.8992 17.9392 13.6816 17.4813 13.3178 17.1478C12.9545 16.8148 12.4731 16.631 11.975 16.6304H11.9746H11.945V16.6304L11.9392 16.6305C11.6898 16.6348 11.4434 16.6864 11.2142 16.7827L11.333 17.0655L11.2142 16.7827C10.9851 16.879 10.7773 17.0183 10.6035 17.1931C10.4296 17.368 10.2932 17.5751 10.2031 17.8026C10.113 18.0302 10.0712 18.2732 10.0806 18.5171L10.0807 18.5176C10.1001 19.0055 10.3169 19.4638 10.6802 19.7979C11.043 20.1315 11.5241 20.3162 12.0222 20.3177H12.0233H12.0529V20.3178L12.058 20.3177C12.3081 20.3138 12.5552 20.2624 12.785 20.1661C13.0148 20.0698 13.2232 19.9303 13.3974 19.7549C13.5716 19.5795 13.7081 19.3718 13.7981 19.1436C13.8881 18.9153 13.9295 18.6716 13.9193 18.4271ZM13.9193 18.4271L13.5863 18.4408M13.9193 18.4271C13.9193 18.4271 13.9193 18.4271 13.9193 18.427L13.5863 18.4408M13.5863 18.4408C13.5945 18.6386 13.5611 18.836 13.488 19.0213C13.415 19.2066 13.3037 19.3762 13.1609 19.52C13.018 19.6638 12.8464 19.779 12.6561 19.8587C12.4658 19.9385 12.2607 19.9812 12.0529 19.9844H12.0233C11.6062 19.9831 11.2058 19.8284 10.9059 19.5525C10.6059 19.2767 10.4296 18.9011 10.4137 18.5043C10.4061 18.3069 10.4399 18.1101 10.513 17.9254C10.5862 17.7406 10.6973 17.5715 10.8399 17.4281C10.9824 17.2847 11.1536 17.1698 11.3434 17.09C11.5331 17.0103 11.7376 16.9674 11.945 16.9638H11.9746C12.3916 16.9642 12.7922 17.1182 13.0926 17.3936C13.393 17.6689 13.5699 18.0442 13.5863 18.4408ZM23.4665 20.2125L23.4665 20.2125C23.6068 20.4676 23.6751 20.7517 23.6658 21.0376C23.6566 21.3234 23.57 21.6033 23.4131 21.8501C23.2562 22.097 23.0337 22.3031 22.7658 22.4469C22.4978 22.5907 22.1942 22.6667 21.8847 22.6667H21.8846H2.11538H2.11533C1.80576 22.6667 1.50222 22.5907 1.23422 22.4469C0.96631 22.3031 0.743845 22.097 0.586879 21.8501L0.305565 22.0289L0.586879 21.8501C0.429998 21.6033 0.343434 21.3234 0.334166 21.0376C0.324898 20.7517 0.393165 20.4676 0.533517 20.2125L0.53353 20.2125L10.4192 2.23977C10.5681 1.96911 10.7933 1.74021 11.0721 1.5796C11.3511 1.41893 11.6722 1.33333 12.0005 1.33333C12.3289 1.33333 12.65 1.41893 12.9289 1.5796C13.2078 1.74021 13.4329 1.96911 13.5819 2.23977L23.4665 20.2125ZM11.0224 7.44182C10.7599 7.69176 10.6091 8.03434 10.6091 8.39521V14.4365C10.6091 14.7974 10.7599 15.1399 11.0224 15.3899C11.2843 15.6393 11.6363 15.7767 12 15.7767C12.3637 15.7767 12.7157 15.6393 12.9776 15.3899C13.2401 15.1399 13.3909 14.7974 13.3909 14.4365V8.39521C13.3909 8.03434 13.2401 7.69176 12.9776 7.44182C12.7157 7.19242 12.3637 7.05499 12 7.05499C11.6363 7.05499 11.2843 7.19242 11.0224 7.44182Z\"\n                        stroke=\"currentColor\"\n                        strokeWidth=\"0.666667\"\n                      />\n                    </g>\n                  </g>\n                </svg>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(31,41,55,1.00)\",\n                    \"fontSize\": \"16px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Please try again later!\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"10px\",\n                  \"paddingRight\": \"10px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <svg\n                role=\"img\"\n                stroke=\"\"\n                style={\n                  Object {\n                    \"color\": \"rgba(75,85,99,1.00)\",\n                    \"height\": \"12px\",\n                    \"width\": \"12px\",\n                  }\n                }\n                viewBox=\"0 0 24 24\"\n              >\n                <g>\n                  <path\n                    d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                    fill=\"currentColor\"\n                    stroke=\"\"\n                  />\n                </g>\n              </svg>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"12px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"start\",\n            \"WebkitJustifyContent\": \"flex-start\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(186,230,253,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"justifyContent\": \"flex-start\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"start\",\n            \"paddingBottom\": \"12px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"12px\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexShrink\": 1,\n              \"flexShrink\": 1,\n              \"msFlexNegative\": 1,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"justify\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitFlexShrink\": 1,\n                \"WebkitJustifyContent\": \"space-between\",\n                \"flexDirection\": \"row\",\n                \"flexShrink\": 1,\n                \"justifyContent\": \"space-between\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexNegative\": 1,\n                \"msFlexPack\": \"justify\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitFlexShrink\": 1,\n                  \"flexDirection\": \"row\",\n                  \"flexShrink\": 1,\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexNegative\": 1,\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(3,105,161,1.00)\",\n                      \"height\": \"16px\",\n                      \"marginTop\": \"4px\",\n                      \"width\": \"16px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M12 0C9.62663 0 7.30655 0.703788 5.33316 2.02236C3.35977 3.34094 1.8217 5.21509 0.913451 7.4078C0.00519948 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6689 1.83649 18.807 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0865C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6935 24 14.3734 24 12C23.9966 8.81846 22.7312 5.76821 20.4815 3.51852C18.2318 1.26883 15.1815 0.00344108 12 0ZM12.25 5C12.5467 5 12.8367 5.08797 13.0834 5.25279C13.33 5.41762 13.5223 5.65189 13.6358 5.92597C13.7494 6.20006 13.7791 6.50166 13.7212 6.79263C13.6633 7.08361 13.5204 7.35088 13.3107 7.56066C13.1009 7.77044 12.8336 7.9133 12.5426 7.97118C12.2517 8.02905 11.9501 7.99935 11.676 7.88582C11.4019 7.77229 11.1676 7.58003 11.0028 7.33335C10.838 7.08668 10.75 6.79667 10.75 6.5C10.75 6.10217 10.908 5.72064 11.1893 5.43934C11.4706 5.15803 11.8522 5 12.25 5ZM14.5 18.5H10.5C10.2348 18.5 9.98043 18.3946 9.7929 18.2071C9.60536 18.0196 9.5 17.7652 9.5 17.5C9.5 17.2348 9.60536 16.9804 9.7929 16.7929C9.98043 16.6054 10.2348 16.5 10.5 16.5H11.25C11.3163 16.5 11.3799 16.4737 11.4268 16.4268C11.4737 16.3799 11.5 16.3163 11.5 16.25V11.75C11.5 11.6837 11.4737 11.6201 11.4268 11.5732C11.3799 11.5263 11.3163 11.5 11.25 11.5H10.5C10.2348 11.5 9.98043 11.3946 9.7929 11.2071C9.60536 11.0196 9.5 10.7652 9.5 10.5C9.5 10.2348 9.60536 9.98043 9.7929 9.79289C9.98043 9.60536 10.2348 9.5 10.5 9.5H11.5C12.0304 9.5 12.5391 9.71071 12.9142 10.0858C13.2893 10.4609 13.5 10.9696 13.5 11.5V16.25C13.5 16.3163 13.5263 16.3799 13.5732 16.4268C13.6201 16.4737 13.6837 16.5 13.75 16.5H14.5C14.7652 16.5 15.0196 16.6054 15.2071 16.7929C15.3946 16.9804 15.5 17.2348 15.5 17.5C15.5 17.7652 15.3946 18.0196 15.2071 18.2071C15.0196 18.3946 14.7652 18.5 14.5 18.5Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(31,41,55,1.00)\",\n                    \"fontSize\": \"16px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                We are going live in July!\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"10px\",\n                  \"paddingRight\": \"10px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <svg\n                role=\"img\"\n                stroke=\"\"\n                style={\n                  Object {\n                    \"color\": \"rgba(75,85,99,1.00)\",\n                    \"height\": \"12px\",\n                    \"width\": \"12px\",\n                  }\n                }\n                viewBox=\"0 0 24 24\"\n              >\n                <g>\n                  <path\n                    d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                    fill=\"currentColor\"\n                    stroke=\"\"\n                  />\n                </g>\n              </svg>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"12px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"start\",\n            \"WebkitJustifyContent\": \"flex-start\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(254,215,170,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"justifyContent\": \"flex-start\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"start\",\n            \"paddingBottom\": \"12px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"12px\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexShrink\": 1,\n              \"flexShrink\": 1,\n              \"msFlexNegative\": 1,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"justify\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitFlexShrink\": 1,\n                \"WebkitJustifyContent\": \"space-between\",\n                \"flexDirection\": \"row\",\n                \"flexShrink\": 1,\n                \"justifyContent\": \"space-between\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexNegative\": 1,\n                \"msFlexPack\": \"justify\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitFlexShrink\": 1,\n                  \"flexDirection\": \"row\",\n                  \"flexShrink\": 1,\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexNegative\": 1,\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(194,65,12,1.00)\",\n                      \"height\": \"16px\",\n                      \"marginTop\": \"4px\",\n                      \"width\": \"16px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M11.9836 0.00267822C8.77744 0.0551662 5.72075 1.36728 3.47427 3.65538C2.35024 4.77447 1.46338 6.10869 0.866705 7.57831C0.270027 9.04793 -0.0242179 10.6228 0.00155827 12.2087C-0.000286057 13.7583 0.303697 15.2931 0.896087 16.7251C1.48848 18.1571 2.35763 19.458 3.45373 20.5535C4.54983 21.6489 5.85133 22.5173 7.28365 23.1089C8.71596 23.7004 10.2509 24.0035 11.8006 24.0007H12.0146C15.2217 23.9677 18.2847 22.6638 20.5316 20.3751C22.7785 18.0864 24.0257 14.9999 23.9996 11.7927C24.0033 10.2243 23.6933 8.6709 23.0879 7.22398C22.4825 5.77706 21.5939 4.4658 20.4744 3.36731C19.3548 2.26882 18.0269 1.40527 16.5688 0.827453C15.1106 0.249636 13.5517 -0.0307856 11.9836 0.00267822ZM10.5007 16.5433C10.4935 16.3473 10.5254 16.1517 10.5947 15.9682C10.6639 15.7846 10.7691 15.6167 10.904 15.4742C11.0389 15.3318 11.2009 15.2177 11.3804 15.1386C11.5599 15.0594 11.7534 15.0169 11.9496 15.0135H11.9766C12.3712 15.0142 12.7501 15.1677 13.034 15.4417C13.3179 15.7157 13.4847 16.089 13.4995 16.4833C13.5068 16.6794 13.4749 16.875 13.4057 17.0586C13.3365 17.2423 13.2314 17.4102 13.0965 17.5527C12.9615 17.6952 12.7995 17.8093 12.6199 17.8884C12.4403 17.9674 12.2468 18.0099 12.0506 18.0132H12.0236C11.6291 18.0119 11.2505 17.8583 10.9667 17.5844C10.6829 17.3105 10.5159 16.9375 10.5007 16.5433ZM11.0007 12.5017V6.50215C11.0007 6.23695 11.106 5.98262 11.2935 5.7951C11.481 5.60758 11.7354 5.50223 12.0006 5.50223C12.2658 5.50223 12.5201 5.60758 12.7076 5.7951C12.8951 5.98262 13.0005 6.23695 13.0005 6.50215V12.5017C13.0005 12.7669 12.8951 13.0212 12.7076 13.2087C12.5201 13.3962 12.2658 13.5016 12.0006 13.5016C11.7354 13.5016 11.481 13.3962 11.2935 13.2087C11.106 13.0212 11.0007 12.7669 11.0007 12.5017Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(31,41,55,1.00)\",\n                    \"fontSize\": \"16px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Poor internet connection.\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"10px\",\n                  \"paddingRight\": \"10px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <svg\n                role=\"img\"\n                stroke=\"\"\n                style={\n                  Object {\n                    \"color\": \"rgba(75,85,99,1.00)\",\n                    \"height\": \"12px\",\n                    \"width\": \"12px\",\n                  }\n                }\n                viewBox=\"0 0 24 24\"\n              >\n                <g>\n                  <path\n                    d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                    fill=\"currentColor\"\n                    stroke=\"\"\n                  />\n                </g>\n              </svg>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Alert Usage 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"start\",\n            \"WebkitJustifyContent\": \"flex-start\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(186,230,253,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"justifyContent\": \"flex-start\",\n            \"maxWidth\": \"400px\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"start\",\n            \"paddingBottom\": \"12px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"12px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexShrink\": 1,\n              \"flexShrink\": 1,\n              \"msFlexNegative\": 1,\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"justify\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitFlexShrink\": 1,\n                \"WebkitJustifyContent\": \"space-between\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"flexShrink\": 1,\n                \"justifyContent\": \"space-between\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexNegative\": 1,\n                \"msFlexPack\": \"justify\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitFlexShrink\": 1,\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"flexShrink\": 1,\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexNegative\": 1,\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(3,105,161,1.00)\",\n                      \"height\": \"16px\",\n                      \"width\": \"16px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M12 0C9.62663 0 7.30655 0.703788 5.33316 2.02236C3.35977 3.34094 1.8217 5.21509 0.913451 7.4078C0.00519948 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6689 1.83649 18.807 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0865C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6935 24 14.3734 24 12C23.9966 8.81846 22.7312 5.76821 20.4815 3.51852C18.2318 1.26883 15.1815 0.00344108 12 0ZM12.25 5C12.5467 5 12.8367 5.08797 13.0834 5.25279C13.33 5.41762 13.5223 5.65189 13.6358 5.92597C13.7494 6.20006 13.7791 6.50166 13.7212 6.79263C13.6633 7.08361 13.5204 7.35088 13.3107 7.56066C13.1009 7.77044 12.8336 7.9133 12.5426 7.97118C12.2517 8.02905 11.9501 7.99935 11.676 7.88582C11.4019 7.77229 11.1676 7.58003 11.0028 7.33335C10.838 7.08668 10.75 6.79667 10.75 6.5C10.75 6.10217 10.908 5.72064 11.1893 5.43934C11.4706 5.15803 11.8522 5 12.25 5ZM14.5 18.5H10.5C10.2348 18.5 9.98043 18.3946 9.7929 18.2071C9.60536 18.0196 9.5 17.7652 9.5 17.5C9.5 17.2348 9.60536 16.9804 9.7929 16.7929C9.98043 16.6054 10.2348 16.5 10.5 16.5H11.25C11.3163 16.5 11.3799 16.4737 11.4268 16.4268C11.4737 16.3799 11.5 16.3163 11.5 16.25V11.75C11.5 11.6837 11.4737 11.6201 11.4268 11.5732C11.3799 11.5263 11.3163 11.5 11.25 11.5H10.5C10.2348 11.5 9.98043 11.3946 9.7929 11.2071C9.60536 11.0196 9.5 10.7652 9.5 10.5C9.5 10.2348 9.60536 9.98043 9.7929 9.79289C9.98043 9.60536 10.2348 9.5 10.5 9.5H11.5C12.0304 9.5 12.5391 9.71071 12.9142 10.0858C13.2893 10.4609 13.5 10.9696 13.5 11.5V16.25C13.5 16.3163 13.5263 16.3799 13.5732 16.4268C13.6201 16.4737 13.6837 16.5 13.75 16.5H14.5C14.7652 16.5 15.0196 16.6054 15.2071 16.7929C15.3946 16.9804 15.5 17.2348 15.5 17.5C15.5 17.7652 15.3946 18.0196 15.2071 18.2071C15.0196 18.3946 14.7652 18.5 14.5 18.5Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(31,41,55,1.00)\",\n                    \"fontSize\": \"16px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                We are going live in July!\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"10px\",\n                  \"paddingRight\": \"10px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <svg\n                role=\"img\"\n                stroke=\"\"\n                style={\n                  Object {\n                    \"color\": \"rgba(75,85,99,1.00)\",\n                    \"height\": \"12px\",\n                    \"width\": \"12px\",\n                  }\n                }\n                viewBox=\"0 0 24 24\"\n              >\n                <g>\n                  <path\n                    d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                    fill=\"currentColor\"\n                    stroke=\"\"\n                  />\n                </g>\n              </svg>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"paddingLeft\": \"24px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(75,85,99,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              We are happy to announce that we are going live on July 28th. Get ready!\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Alert Variant 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      onScroll={[Function]}\n      onTouchEnd={[Function]}\n      onTouchMove={[Function]}\n      onTouchStart={[Function]}\n      onWheel={[Function]}\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxFlex\": 1,\n          \"WebkitBoxOrient\": \"vertical\",\n          \"WebkitFlexDirection\": \"column\",\n          \"WebkitFlexGrow\": 1,\n          \"WebkitFlexShrink\": 1,\n          \"WebkitOverflowScrolling\": \"touch\",\n          \"WebkitTransform\": \"translateZ(0px)\",\n          \"flexDirection\": \"column\",\n          \"flexGrow\": 1,\n          \"flexShrink\": 1,\n          \"marginTop\": \"20px\",\n          \"msFlexDirection\": \"column\",\n          \"msFlexNegative\": 1,\n          \"msFlexPositive\": 1,\n          \"overflowX\": \"hidden\",\n          \"overflowY\": \"auto\",\n          \"transform\": \"translateZ(0px)\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"dataSet\": Object {},\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"vertical\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"column\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"column\",\n              \"justifyContent\": \"center\",\n              \"marginRight\": \"20px\",\n              \"maxWidth\": \"400px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"column\",\n              \"msFlexPack\": \"center\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginBottom\": \"16px\",\n                \"textAlign\": \"center\",\n              }\n            }\n          >\n            solid\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"start\",\n                \"WebkitJustifyContent\": \"flex-start\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(21,128,61,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"justifyContent\": \"flex-start\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"start\",\n                \"paddingBottom\": \"12px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"12px\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitFlexShrink\": 1,\n                  \"flexShrink\": 1,\n                  \"msFlexNegative\": 1,\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"justify\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitFlexShrink\": 1,\n                    \"WebkitJustifyContent\": \"space-between\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"flexShrink\": 1,\n                    \"justifyContent\": \"space-between\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexNegative\": 1,\n                    \"msFlexPack\": \"justify\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxDirection\": \"normal\",\n                      \"WebkitBoxOrient\": \"horizontal\",\n                      \"WebkitFlexDirection\": \"row\",\n                      \"WebkitFlexShrink\": 1,\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                      \"flexShrink\": 1,\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexDirection\": \"row\",\n                      \"msFlexNegative\": 1,\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                  >\n                    <svg\n                      role=\"img\"\n                      stroke=\"\"\n                      style={\n                        Object {\n                          \"color\": \"rgba(250,250,250,1.00)\",\n                          \"height\": \"16px\",\n                          \"width\": \"16px\",\n                        }\n                      }\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <g>\n                        <path\n                          d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z\"\n                          fill=\"currentColor\"\n                          stroke=\"\"\n                        />\n                      </g>\n                    </svg>\n                  </div>\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"width\": \"8px\",\n                      }\n                    }\n                  />\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(250,250,249,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Selection successfully moved!\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"marginBottom\": \"10px\",\n                \"marginTop\": \"20px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginBottom\": \"16px\",\n                \"textAlign\": \"center\",\n              }\n            }\n          >\n            left-accent\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"start\",\n                \"WebkitJustifyContent\": \"flex-start\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(187,247,208,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderLeftColor\": \"rgba(21,128,61,1.00)\",\n                \"borderLeftWidth\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"justifyContent\": \"flex-start\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"start\",\n                \"paddingBottom\": \"12px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"12px\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitFlexShrink\": 1,\n                  \"flexShrink\": 1,\n                  \"msFlexNegative\": 1,\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"justify\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitFlexShrink\": 1,\n                    \"WebkitJustifyContent\": \"space-between\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"flexShrink\": 1,\n                    \"justifyContent\": \"space-between\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexNegative\": 1,\n                    \"msFlexPack\": \"justify\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxDirection\": \"normal\",\n                      \"WebkitBoxOrient\": \"horizontal\",\n                      \"WebkitFlexDirection\": \"row\",\n                      \"WebkitFlexShrink\": 1,\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                      \"flexShrink\": 1,\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexDirection\": \"row\",\n                      \"msFlexNegative\": 1,\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                  >\n                    <svg\n                      role=\"img\"\n                      stroke=\"\"\n                      style={\n                        Object {\n                          \"color\": \"rgba(21,128,61,1.00)\",\n                          \"height\": \"16px\",\n                          \"width\": \"16px\",\n                        }\n                      }\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <g>\n                        <path\n                          d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z\"\n                          fill=\"currentColor\"\n                          stroke=\"\"\n                        />\n                      </g>\n                    </svg>\n                  </div>\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"width\": \"8px\",\n                      }\n                    }\n                  />\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(31,41,55,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Selection successfully moved!\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"marginBottom\": \"10px\",\n                \"marginTop\": \"20px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginBottom\": \"16px\",\n                \"textAlign\": \"center\",\n              }\n            }\n          >\n            top-accent\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"start\",\n                \"WebkitJustifyContent\": \"flex-start\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(187,247,208,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopColor\": \"rgba(21,128,61,1.00)\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"borderTopWidth\": \"4px\",\n                \"justifyContent\": \"flex-start\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"start\",\n                \"paddingBottom\": \"12px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"12px\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitFlexShrink\": 1,\n                  \"flexShrink\": 1,\n                  \"msFlexNegative\": 1,\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"justify\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitFlexShrink\": 1,\n                    \"WebkitJustifyContent\": \"space-between\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"flexShrink\": 1,\n                    \"justifyContent\": \"space-between\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexNegative\": 1,\n                    \"msFlexPack\": \"justify\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxDirection\": \"normal\",\n                      \"WebkitBoxOrient\": \"horizontal\",\n                      \"WebkitFlexDirection\": \"row\",\n                      \"WebkitFlexShrink\": 1,\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                      \"flexShrink\": 1,\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexDirection\": \"row\",\n                      \"msFlexNegative\": 1,\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                  >\n                    <svg\n                      role=\"img\"\n                      stroke=\"\"\n                      style={\n                        Object {\n                          \"color\": \"rgba(21,128,61,1.00)\",\n                          \"height\": \"16px\",\n                          \"width\": \"16px\",\n                        }\n                      }\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <g>\n                        <path\n                          d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z\"\n                          fill=\"currentColor\"\n                          stroke=\"\"\n                        />\n                      </g>\n                    </svg>\n                  </div>\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"width\": \"8px\",\n                      }\n                    }\n                  />\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(31,41,55,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Selection successfully moved!\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"marginBottom\": \"10px\",\n                \"marginTop\": \"20px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginBottom\": \"16px\",\n                \"textAlign\": \"center\",\n              }\n            }\n          >\n            outline\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"start\",\n                \"WebkitJustifyContent\": \"flex-start\",\n                \"alignItems\": \"center\",\n                \"borderBottomColor\": \"rgba(21,128,61,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(21,128,61,1.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(21,128,61,1.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(21,128,61,1.00)\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"borderTopWidth\": \"1px\",\n                \"justifyContent\": \"flex-start\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"start\",\n                \"paddingBottom\": \"12px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"12px\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitFlexShrink\": 1,\n                  \"flexShrink\": 1,\n                  \"msFlexNegative\": 1,\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"justify\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitFlexShrink\": 1,\n                    \"WebkitJustifyContent\": \"space-between\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"flexShrink\": 1,\n                    \"justifyContent\": \"space-between\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexNegative\": 1,\n                    \"msFlexPack\": \"justify\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxDirection\": \"normal\",\n                      \"WebkitBoxOrient\": \"horizontal\",\n                      \"WebkitFlexDirection\": \"row\",\n                      \"WebkitFlexShrink\": 1,\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                      \"flexShrink\": 1,\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexDirection\": \"row\",\n                      \"msFlexNegative\": 1,\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                  >\n                    <svg\n                      role=\"img\"\n                      stroke=\"\"\n                      style={\n                        Object {\n                          \"color\": \"rgba(21,128,61,1.00)\",\n                          \"height\": \"16px\",\n                          \"width\": \"16px\",\n                        }\n                      }\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <g>\n                        <path\n                          d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z\"\n                          fill=\"currentColor\"\n                          stroke=\"\"\n                        />\n                      </g>\n                    </svg>\n                  </div>\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"width\": \"8px\",\n                      }\n                    }\n                  />\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(23,23,23,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Selection successfully moved!\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"marginBottom\": \"10px\",\n                \"marginTop\": \"20px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginBottom\": \"16px\",\n                \"textAlign\": \"center\",\n              }\n            }\n          >\n            subtle\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"start\",\n                \"WebkitJustifyContent\": \"flex-start\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(187,247,208,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"justifyContent\": \"flex-start\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"start\",\n                \"paddingBottom\": \"12px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"12px\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitFlexShrink\": 1,\n                  \"flexShrink\": 1,\n                  \"msFlexNegative\": 1,\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"justify\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitFlexShrink\": 1,\n                    \"WebkitJustifyContent\": \"space-between\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"flexShrink\": 1,\n                    \"justifyContent\": \"space-between\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexNegative\": 1,\n                    \"msFlexPack\": \"justify\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxDirection\": \"normal\",\n                      \"WebkitBoxOrient\": \"horizontal\",\n                      \"WebkitFlexDirection\": \"row\",\n                      \"WebkitFlexShrink\": 1,\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                      \"flexShrink\": 1,\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexDirection\": \"row\",\n                      \"msFlexNegative\": 1,\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                  >\n                    <svg\n                      role=\"img\"\n                      stroke=\"\"\n                      style={\n                        Object {\n                          \"color\": \"rgba(21,128,61,1.00)\",\n                          \"height\": \"16px\",\n                          \"width\": \"16px\",\n                        }\n                      }\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <g>\n                        <path\n                          d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z\"\n                          fill=\"currentColor\"\n                          stroke=\"\"\n                        />\n                      </g>\n                    </svg>\n                  </div>\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"width\": \"8px\",\n                      }\n                    }\n                  />\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(31,41,55,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Selection successfully moved!\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"marginBottom\": \"10px\",\n                \"marginTop\": \"20px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginBottom\": \"16px\",\n                \"textAlign\": \"center\",\n              }\n            }\n          >\n            outline-light\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"start\",\n                \"WebkitJustifyContent\": \"flex-start\",\n                \"alignItems\": \"center\",\n                \"borderBottomColor\": \"rgba(21,128,61,0.40)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(21,128,61,0.40)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(21,128,61,0.40)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(21,128,61,0.40)\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"borderTopWidth\": \"1px\",\n                \"justifyContent\": \"flex-start\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"start\",\n                \"paddingBottom\": \"12px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"12px\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitFlexShrink\": 1,\n                  \"flexShrink\": 1,\n                  \"msFlexNegative\": 1,\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"justify\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitFlexShrink\": 1,\n                    \"WebkitJustifyContent\": \"space-between\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"flexShrink\": 1,\n                    \"justifyContent\": \"space-between\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexNegative\": 1,\n                    \"msFlexPack\": \"justify\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxDirection\": \"normal\",\n                      \"WebkitBoxOrient\": \"horizontal\",\n                      \"WebkitFlexDirection\": \"row\",\n                      \"WebkitFlexShrink\": 1,\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                      \"flexShrink\": 1,\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexDirection\": \"row\",\n                      \"msFlexNegative\": 1,\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                  >\n                    <svg\n                      role=\"img\"\n                      stroke=\"\"\n                      style={\n                        Object {\n                          \"color\": \"rgba(21,128,61,1.00)\",\n                          \"height\": \"16px\",\n                          \"width\": \"16px\",\n                        }\n                      }\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <g>\n                        <path\n                          d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z\"\n                          fill=\"currentColor\"\n                          stroke=\"\"\n                        />\n                      </g>\n                    </svg>\n                  </div>\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"width\": \"8px\",\n                      }\n                    }\n                  />\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(23,23,23,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Selection successfully moved!\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"marginBottom\": \"10px\",\n                \"marginTop\": \"20px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Alert action 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"MozTransition\": \"height 400ms\",\n            \"WebkitTransition\": \"height 400ms\",\n            \"height\": \"0px\",\n            \"overflowX\": \"hidden\",\n            \"overflowY\": \"hidden\",\n            \"transition\": \"height 400ms\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"overflowX\": \"auto\",\n              \"overflowY\": \"auto\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"start\",\n                \"WebkitJustifyContent\": \"flex-start\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(254,202,202,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"justifyContent\": \"flex-start\",\n                \"maxWidth\": \"400px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"start\",\n                \"paddingBottom\": \"12px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"12px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitFlexShrink\": 1,\n                  \"flexShrink\": 1,\n                  \"msFlexNegative\": 1,\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"justify\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitFlexShrink\": 1,\n                    \"WebkitJustifyContent\": \"space-between\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"flexShrink\": 1,\n                    \"justifyContent\": \"space-between\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexNegative\": 1,\n                    \"msFlexPack\": \"justify\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxDirection\": \"normal\",\n                      \"WebkitBoxOrient\": \"horizontal\",\n                      \"WebkitFlexDirection\": \"row\",\n                      \"WebkitFlexShrink\": 1,\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                      \"flexShrink\": 1,\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexDirection\": \"row\",\n                      \"msFlexNegative\": 1,\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                  >\n                    <svg\n                      role=\"img\"\n                      stroke=\"\"\n                      style={\n                        Object {\n                          \"color\": \"rgba(185,28,28,1.00)\",\n                          \"height\": \"16px\",\n                          \"width\": \"16px\",\n                        }\n                      }\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <g>\n                        <g\n                          fill=\"currentColor\"\n                          stroke=\"\"\n                        >\n                          <path\n                            d=\"M13.9193 18.4271C13.8992 17.9392 13.6816 17.4813 13.3178 17.1478C12.9545 16.8148 12.4731 16.631 11.975 16.6304H11.9746H11.945V16.6304L11.9392 16.6305C11.6898 16.6348 11.4434 16.6864 11.2142 16.7827L11.333 17.0655L11.2142 16.7827C10.9851 16.879 10.7773 17.0183 10.6035 17.1931C10.4296 17.368 10.2932 17.5751 10.2031 17.8026C10.113 18.0302 10.0712 18.2732 10.0806 18.5171L10.0807 18.5176C10.1001 19.0055 10.3169 19.4638 10.6802 19.7979C11.043 20.1315 11.5241 20.3162 12.0222 20.3177H12.0233H12.0529V20.3178L12.058 20.3177C12.3081 20.3138 12.5552 20.2624 12.785 20.1661C13.0148 20.0698 13.2232 19.9303 13.3974 19.7549C13.5716 19.5795 13.7081 19.3718 13.7981 19.1436C13.8881 18.9153 13.9295 18.6716 13.9193 18.4271ZM13.9193 18.4271L13.5863 18.4408M13.9193 18.4271C13.9193 18.4271 13.9193 18.4271 13.9193 18.427L13.5863 18.4408M13.5863 18.4408C13.5945 18.6386 13.5611 18.836 13.488 19.0213C13.415 19.2066 13.3037 19.3762 13.1609 19.52C13.018 19.6638 12.8464 19.779 12.6561 19.8587C12.4658 19.9385 12.2607 19.9812 12.0529 19.9844H12.0233C11.6062 19.9831 11.2058 19.8284 10.9059 19.5525C10.6059 19.2767 10.4296 18.9011 10.4137 18.5043C10.4061 18.3069 10.4399 18.1101 10.513 17.9254C10.5862 17.7406 10.6973 17.5715 10.8399 17.4281C10.9824 17.2847 11.1536 17.1698 11.3434 17.09C11.5331 17.0103 11.7376 16.9674 11.945 16.9638H11.9746C12.3916 16.9642 12.7922 17.1182 13.0926 17.3936C13.393 17.6689 13.5699 18.0442 13.5863 18.4408ZM23.4665 20.2125L23.4665 20.2125C23.6068 20.4676 23.6751 20.7517 23.6658 21.0376C23.6566 21.3234 23.57 21.6033 23.4131 21.8501C23.2562 22.097 23.0337 22.3031 22.7658 22.4469C22.4978 22.5907 22.1942 22.6667 21.8847 22.6667H21.8846H2.11538H2.11533C1.80576 22.6667 1.50222 22.5907 1.23422 22.4469C0.96631 22.3031 0.743845 22.097 0.586879 21.8501L0.305565 22.0289L0.586879 21.8501C0.429998 21.6033 0.343434 21.3234 0.334166 21.0376C0.324898 20.7517 0.393165 20.4676 0.533517 20.2125L0.53353 20.2125L10.4192 2.23977C10.5681 1.96911 10.7933 1.74021 11.0721 1.5796C11.3511 1.41893 11.6722 1.33333 12.0005 1.33333C12.3289 1.33333 12.65 1.41893 12.9289 1.5796C13.2078 1.74021 13.4329 1.96911 13.5819 2.23977L23.4665 20.2125ZM11.0224 7.44182C10.7599 7.69176 10.6091 8.03434 10.6091 8.39521V14.4365C10.6091 14.7974 10.7599 15.1399 11.0224 15.3899C11.2843 15.6393 11.6363 15.7767 12 15.7767C12.3637 15.7767 12.7157 15.6393 12.9776 15.3899C13.2401 15.1399 13.3909 14.7974 13.3909 14.4365V8.39521C13.3909 8.03434 13.2401 7.69176 12.9776 7.44182C12.7157 7.19242 12.3637 7.05499 12 7.05499C11.6363 7.05499 11.2843 7.19242 11.0224 7.44182Z\"\n                            stroke=\"currentColor\"\n                            strokeWidth=\"0.666667\"\n                          />\n                        </g>\n                      </g>\n                    </svg>\n                  </div>\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"width\": \"8px\",\n                      }\n                    }\n                  />\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(23,23,23,1.00)\",\n                        \"fontSize\": \"16px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"500\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Please try again later!\n                  </div>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n                  onBlur={[Function]}\n                  onClick={[Function]}\n                  onContextMenu={[Function]}\n                  onFocus={[Function]}\n                  onKeyDown={[Function]}\n                  role=\"button\"\n                  style={\n                    Object {\n                      \"MozUserSelect\": \"none\",\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxDirection\": \"normal\",\n                      \"WebkitBoxOrient\": \"horizontal\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitFlexDirection\": \"row\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"WebkitUserSelect\": \"none\",\n                      \"alignItems\": \"center\",\n                      \"borderBottomLeftRadius\": \"4px\",\n                      \"borderBottomRightRadius\": \"4px\",\n                      \"borderTopLeftRadius\": \"4px\",\n                      \"borderTopRightRadius\": \"4px\",\n                      \"cursor\": \"pointer\",\n                      \"flexDirection\": \"row\",\n                      \"justifyContent\": \"center\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexDirection\": \"row\",\n                      \"msFlexPack\": \"center\",\n                      \"msTouchAction\": \"manipulation\",\n                      \"msUserSelect\": \"none\",\n                      \"paddingBottom\": \"10px\",\n                      \"paddingLeft\": \"10px\",\n                      \"paddingRight\": \"10px\",\n                      \"paddingTop\": \"10px\",\n                      \"touchAction\": \"manipulation\",\n                      \"userSelect\": \"none\",\n                    }\n                  }\n                  tabIndex=\"0\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(75,85,99,1.00)\",\n                        \"height\": \"12px\",\n                        \"width\": \"12px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"height\": \"4px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"paddingLeft\": \"24px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Your coupon could not be processed at this time.\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"marginLeft\": \"auto\",\n            \"marginRight\": \"auto\",\n            \"marginTop\": \"32px\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"8px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"8px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Re-Open\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots AlertDialog Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(225,29,72,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Delete Customer\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots AlertDialog Transition 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Discard\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots AspectRatio Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"height\": \"200px\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"backgroundColor\": \"rgba(248,113,113,1.00)\",\n            \"bottom\": \"0px\",\n            \"left\": \"0px\",\n            \"position\": \"absolute\",\n            \"right\": \"0px\",\n            \"top\": \"0px\",\n          }\n        }\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots AspectRatio EmbedImage 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"height\": \"200px\",\n        }\n      }\n    >\n      <div\n        aria-label=\"Picture of a Flower\"\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitFlexBasis\": \"auto\",\n            \"bottom\": \"0px\",\n            \"flexBasis\": \"auto\",\n            \"left\": \"0px\",\n            \"maxWidth\": \"100%\",\n            \"msFlexPreferredSize\": \"auto\",\n            \"overflowX\": \"hidden\",\n            \"overflowY\": \"hidden\",\n            \"position\": \"absolute\",\n            \"right\": \"0px\",\n            \"top\": \"0px\",\n            \"zIndex\": 0,\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"backgroundPosition\": \"center\",\n              \"backgroundRepeat\": \"no-repeat\",\n              \"backgroundSize\": \"cover\",\n              \"bottom\": \"0px\",\n              \"height\": \"100%\",\n              \"left\": \"0px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"width\": \"100%\",\n              \"zIndex\": -1,\n            }\n          }\n          suppressHydrationWarning={true}\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Avatar AvatarBadge 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(56,189,248,1.00)\",\n            \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n            \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"height\": \"24px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"position\": \"relative\",\n            \"width\": \"24px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"--\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"100%\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(34,197,94,1.00)\",\n              \"borderBottomColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderBottomWidth\": \"2px\",\n              \"borderLeftColor\": \"rgba(250,250,250,1.00)\",\n              \"borderLeftWidth\": \"2px\",\n              \"borderRightColor\": \"rgba(250,250,250,1.00)\",\n              \"borderRightWidth\": \"2px\",\n              \"borderTopColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"borderTopWidth\": \"2px\",\n              \"bottom\": \"0px\",\n              \"height\": \"8px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"width\": \"8px\",\n            }\n          }\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(245,158,11,1.00)\",\n            \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n            \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"height\": \"32px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"position\": \"relative\",\n            \"width\": \"32px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"--\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"100%\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(34,197,94,1.00)\",\n              \"borderBottomColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderBottomWidth\": \"2px\",\n              \"borderLeftColor\": \"rgba(250,250,250,1.00)\",\n              \"borderLeftWidth\": \"2px\",\n              \"borderRightColor\": \"rgba(250,250,250,1.00)\",\n              \"borderRightWidth\": \"2px\",\n              \"borderTopColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"borderTopWidth\": \"2px\",\n              \"bottom\": \"0px\",\n              \"height\": \"12px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"width\": \"12px\",\n            }\n          }\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(245,158,11,1.00)\",\n            \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n            \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"height\": \"48px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"position\": \"relative\",\n            \"width\": \"48px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"--\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"100%\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(34,197,94,1.00)\",\n              \"borderBottomColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderBottomWidth\": \"2px\",\n              \"borderLeftColor\": \"rgba(250,250,250,1.00)\",\n              \"borderLeftWidth\": \"2px\",\n              \"borderRightColor\": \"rgba(250,250,250,1.00)\",\n              \"borderRightWidth\": \"2px\",\n              \"borderTopColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"borderTopWidth\": \"2px\",\n              \"bottom\": \"0px\",\n              \"height\": \"16px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"width\": \"16px\",\n            }\n          }\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(245,158,11,1.00)\",\n            \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n            \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"height\": \"64px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"position\": \"relative\",\n            \"width\": \"64px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"--\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"100%\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(34,197,94,1.00)\",\n              \"borderBottomColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderBottomWidth\": \"2px\",\n              \"borderLeftColor\": \"rgba(250,250,250,1.00)\",\n              \"borderLeftWidth\": \"2px\",\n              \"borderRightColor\": \"rgba(250,250,250,1.00)\",\n              \"borderRightWidth\": \"2px\",\n              \"borderTopColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"borderTopWidth\": \"2px\",\n              \"bottom\": \"0px\",\n              \"height\": \"20px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"width\": \"20px\",\n            }\n          }\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(245,158,11,1.00)\",\n            \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n            \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"height\": \"96px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"position\": \"relative\",\n            \"width\": \"96px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"--\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"100%\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(34,197,94,1.00)\",\n              \"borderBottomColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderBottomWidth\": \"2px\",\n              \"borderLeftColor\": \"rgba(250,250,250,1.00)\",\n              \"borderLeftWidth\": \"2px\",\n              \"borderRightColor\": \"rgba(250,250,250,1.00)\",\n              \"borderRightWidth\": \"2px\",\n              \"borderTopColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"borderTopWidth\": \"2px\",\n              \"bottom\": \"0px\",\n              \"height\": \"24px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"width\": \"24px\",\n            }\n          }\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(245,158,11,1.00)\",\n            \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n            \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"height\": \"128px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"position\": \"relative\",\n            \"width\": \"128px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"--\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"100%\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(34,197,94,1.00)\",\n              \"borderBottomColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderBottomWidth\": \"2px\",\n              \"borderLeftColor\": \"rgba(250,250,250,1.00)\",\n              \"borderLeftWidth\": \"2px\",\n              \"borderRightColor\": \"rgba(250,250,250,1.00)\",\n              \"borderRightWidth\": \"2px\",\n              \"borderTopColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"borderTopWidth\": \"2px\",\n              \"bottom\": \"0px\",\n              \"height\": \"28px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"width\": \"28px\",\n            }\n          }\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Avatar AvatarGroup 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"reverse\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row-reverse\",\n            \"flexDirection\": \"row-reverse\",\n            \"msFlexDirection\": \"row-reverse\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(82,82,91,1.00)\",\n              \"borderBottomColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderBottomWidth\": \"2px\",\n              \"borderLeftColor\": \"rgba(250,250,250,1.00)\",\n              \"borderLeftWidth\": \"2px\",\n              \"borderRightColor\": \"rgba(250,250,250,1.00)\",\n              \"borderRightWidth\": \"2px\",\n              \"borderTopColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"borderTopWidth\": \"2px\",\n              \"height\": \"64px\",\n              \"justifyContent\": \"center\",\n              \"marginLeft\": \"-16px\",\n              \"marginTop\": \"0px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"position\": \"relative\",\n              \"width\": \"64px\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(250,250,250,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"600\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            + 5\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(99,102,241,1.00)\",\n              \"borderBottomColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderBottomWidth\": \"2px\",\n              \"borderLeftColor\": \"rgba(250,250,250,1.00)\",\n              \"borderLeftWidth\": \"2px\",\n              \"borderRightColor\": \"rgba(250,250,250,1.00)\",\n              \"borderRightWidth\": \"2px\",\n              \"borderTopColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"borderTopWidth\": \"2px\",\n              \"height\": \"64px\",\n              \"justifyContent\": \"center\",\n              \"marginLeft\": \"-16px\",\n              \"marginTop\": \"0px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"position\": \"relative\",\n              \"width\": \"64px\",\n            }\n          }\n        >\n          <div\n            aria-label=\"--\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"100%\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(6,182,212,1.00)\",\n              \"borderBottomColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderBottomWidth\": \"2px\",\n              \"borderLeftColor\": \"rgba(250,250,250,1.00)\",\n              \"borderLeftWidth\": \"2px\",\n              \"borderRightColor\": \"rgba(250,250,250,1.00)\",\n              \"borderRightWidth\": \"2px\",\n              \"borderTopColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"borderTopWidth\": \"2px\",\n              \"height\": \"64px\",\n              \"justifyContent\": \"center\",\n              \"marginLeft\": \"-16px\",\n              \"marginTop\": \"0px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"position\": \"relative\",\n              \"width\": \"64px\",\n            }\n          }\n        >\n          <div\n            aria-label=\"--\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"100%\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(34,197,94,1.00)\",\n              \"borderBottomColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderBottomWidth\": \"2px\",\n              \"borderLeftColor\": \"rgba(250,250,250,1.00)\",\n              \"borderLeftWidth\": \"2px\",\n              \"borderRightColor\": \"rgba(250,250,250,1.00)\",\n              \"borderRightWidth\": \"2px\",\n              \"borderTopColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"borderTopWidth\": \"2px\",\n              \"height\": \"64px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"position\": \"relative\",\n              \"width\": \"64px\",\n            }\n          }\n        >\n          <div\n            aria-label=\"--\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"100%\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Avatar Fallback 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginLeft\": \"auto\",\n          \"marginRight\": \"auto\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(34,197,94,1.00)\",\n            \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n            \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"height\": \"48px\",\n            \"justifyContent\": \"center\",\n            \"marginRight\": \"4px\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"position\": \"relative\",\n            \"width\": \"48px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"--\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"100%\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(245,158,11,1.00)\",\n            \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n            \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"height\": \"48px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"position\": \"relative\",\n            \"width\": \"48px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"--\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"100%\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(56,189,248,1.00)\",\n            \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n            \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"height\": \"48px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"position\": \"relative\",\n            \"width\": \"48px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"--\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"100%\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Avatar Playground 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"rgba(13,148,136,1.00)\",\n          \"borderBottomColor\": \"rgba(0,0,0,1.00)\",\n          \"borderBottomLeftRadius\": \"999px\",\n          \"borderBottomRightRadius\": \"999px\",\n          \"borderBottomWidth\": \"2px\",\n          \"borderLeftColor\": \"rgba(0,0,0,1.00)\",\n          \"borderLeftWidth\": \"2px\",\n          \"borderRightColor\": \"rgba(0,0,0,1.00)\",\n          \"borderRightWidth\": \"2px\",\n          \"borderTopColor\": \"rgba(0,0,0,1.00)\",\n          \"borderTopLeftRadius\": \"999px\",\n          \"borderTopRightRadius\": \"999px\",\n          \"borderTopWidth\": \"2px\",\n          \"height\": \"48px\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"position\": \"relative\",\n          \"width\": \"48px\",\n        }\n      }\n    >\n      <div\n        aria-label=\"--\"\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitFlexBasis\": \"auto\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"flexBasis\": \"auto\",\n            \"height\": \"100%\",\n            \"maxWidth\": \"100%\",\n            \"msFlexPreferredSize\": \"auto\",\n            \"overflowX\": \"hidden\",\n            \"overflowY\": \"hidden\",\n            \"width\": \"100%\",\n            \"zIndex\": 0,\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"backgroundPosition\": \"center\",\n              \"backgroundRepeat\": \"no-repeat\",\n              \"backgroundSize\": \"cover\",\n              \"bottom\": \"0px\",\n              \"height\": \"100%\",\n              \"left\": \"0px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"width\": \"100%\",\n              \"zIndex\": -1,\n            }\n          }\n          suppressHydrationWarning={true}\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"backgroundColor\": \"rgba(254,202,202,1.00)\",\n            \"borderBottomColor\": \"rgba(250,250,250,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderBottomWidth\": \"2px\",\n            \"borderLeftColor\": \"rgba(250,250,250,1.00)\",\n            \"borderLeftWidth\": \"2px\",\n            \"borderRightColor\": \"rgba(250,250,250,1.00)\",\n            \"borderRightWidth\": \"2px\",\n            \"borderTopColor\": \"rgba(250,250,250,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"borderTopWidth\": \"2px\",\n            \"bottom\": \"0px\",\n            \"height\": \"16px\",\n            \"position\": \"absolute\",\n            \"right\": \"0px\",\n            \"width\": \"16px\",\n          }\n        }\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Avatar Size 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"alignItems\": \"center\",\n            \"msFlexAlign\": \"center\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitAlignSelf\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"alignSelf\": \"center\",\n              \"backgroundColor\": \"rgba(34,197,94,1.00)\",\n              \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n              \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n              \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"height\": \"24px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexItemAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"msGridRowAlign\": \"center\",\n              \"position\": \"relative\",\n              \"width\": \"24px\",\n            }\n          }\n        >\n          <div\n            aria-label=\"--\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"100%\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitAlignSelf\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"alignSelf\": \"center\",\n              \"backgroundColor\": \"rgba(6,182,212,1.00)\",\n              \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n              \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n              \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"height\": \"32px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexItemAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"msGridRowAlign\": \"center\",\n              \"position\": \"relative\",\n              \"width\": \"32px\",\n            }\n          }\n        >\n          <div\n            aria-label=\"--\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"100%\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitAlignSelf\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"alignSelf\": \"center\",\n              \"backgroundColor\": \"rgba(99,102,241,1.00)\",\n              \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n              \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n              \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"height\": \"48px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexItemAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"msGridRowAlign\": \"center\",\n              \"position\": \"relative\",\n              \"width\": \"48px\",\n            }\n          }\n        >\n          <div\n            aria-label=\"--\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"100%\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitAlignSelf\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"alignSelf\": \"center\",\n              \"backgroundColor\": \"rgba(245,158,11,1.00)\",\n              \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n              \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n              \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"height\": \"64px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexItemAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"msGridRowAlign\": \"center\",\n              \"position\": \"relative\",\n              \"width\": \"64px\",\n            }\n          }\n        >\n          <div\n            aria-label=\"--\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"100%\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitAlignSelf\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"alignSelf\": \"center\",\n              \"backgroundColor\": \"rgba(219,39,119,1.00)\",\n              \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n              \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n              \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"height\": \"96px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexItemAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"msGridRowAlign\": \"center\",\n              \"position\": \"relative\",\n              \"width\": \"96px\",\n            }\n          }\n        >\n          <div\n            aria-label=\"--\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"100%\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitAlignSelf\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"alignSelf\": \"center\",\n              \"backgroundColor\": \"rgba(147,51,234,1.00)\",\n              \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n              \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n              \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"height\": \"128px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexItemAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"msGridRowAlign\": \"center\",\n              \"position\": \"relative\",\n              \"width\": \"128px\",\n            }\n          }\n        >\n          <div\n            aria-label=\"--\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"100%\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Avatar Usage 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(34,197,94,1.00)\",\n            \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n            \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"height\": \"48px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"position\": \"relative\",\n            \"width\": \"48px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"--\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"100%\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(6,182,212,1.00)\",\n            \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n            \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"height\": \"48px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"position\": \"relative\",\n            \"width\": \"48px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"--\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"100%\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(99,102,241,1.00)\",\n            \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n            \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"height\": \"48px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"position\": \"relative\",\n            \"width\": \"48px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"--\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"100%\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(245,158,11,1.00)\",\n            \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n            \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"height\": \"48px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"position\": \"relative\",\n            \"width\": \"48px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"--\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"100%\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Badge Color 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitFlexDirection\": \"row\",\n          \"flexDirection\": \"row\",\n          \"marginLeft\": \"auto\",\n          \"marginRight\": \"auto\",\n          \"msFlexDirection\": \"row\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(220,252,231,1.00)\",\n            \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n            \"borderBottomLeftRadius\": \"2px\",\n            \"borderBottomRightRadius\": \"2px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n            \"borderTopLeftRadius\": \"2px\",\n            \"borderTopRightRadius\": \"2px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"paddingBottom\": \"2px\",\n            \"paddingLeft\": \"8px\",\n            \"paddingRight\": \"8px\",\n            \"paddingTop\": \"2px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(20,83,45,1.00)\",\n                \"fontSize\": \"12px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            SUCCESS\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(255,228,230,1.00)\",\n            \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n            \"borderBottomLeftRadius\": \"2px\",\n            \"borderBottomRightRadius\": \"2px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n            \"borderTopLeftRadius\": \"2px\",\n            \"borderTopRightRadius\": \"2px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"paddingBottom\": \"2px\",\n            \"paddingLeft\": \"8px\",\n            \"paddingRight\": \"8px\",\n            \"paddingTop\": \"2px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(136,19,55,1.00)\",\n                \"fontSize\": \"12px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            DANGER\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(224,242,254,1.00)\",\n            \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n            \"borderBottomLeftRadius\": \"2px\",\n            \"borderBottomRightRadius\": \"2px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n            \"borderTopLeftRadius\": \"2px\",\n            \"borderTopRightRadius\": \"2px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"paddingBottom\": \"2px\",\n            \"paddingLeft\": \"8px\",\n            \"paddingRight\": \"8px\",\n            \"paddingTop\": \"2px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(12,74,110,1.00)\",\n                \"fontSize\": \"12px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            INFO\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(243,244,246,1.00)\",\n            \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n            \"borderBottomLeftRadius\": \"2px\",\n            \"borderBottomRightRadius\": \"2px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n            \"borderTopLeftRadius\": \"2px\",\n            \"borderTopRightRadius\": \"2px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"paddingBottom\": \"2px\",\n            \"paddingLeft\": \"8px\",\n            \"paddingRight\": \"8px\",\n            \"paddingTop\": \"2px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(17,24,39,1.00)\",\n                \"fontSize\": \"12px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            DARK\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Badge Composition 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitAlignSelf\": \"flex-end\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"alignSelf\": \"flex-end\",\n              \"backgroundColor\": \"rgba(225,29,72,1.00)\",\n              \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderBottomWidth\": \"1px\",\n              \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n              \"borderLeftWidth\": \"1px\",\n              \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n              \"borderRightWidth\": \"1px\",\n              \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"borderTopWidth\": \"1px\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"marginBottom\": \"-16px\",\n              \"marginRight\": \"-16px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexItemAlign\": \"end\",\n              \"msFlexPack\": \"center\",\n              \"paddingBottom\": \"2px\",\n              \"paddingLeft\": \"8px\",\n              \"paddingRight\": \"8px\",\n              \"paddingTop\": \"2px\",\n              \"zIndex\": 1,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"500\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              2\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(6,182,212,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"marginLeft\": \"auto\",\n              \"marginRight\": \"auto\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"8px\",\n              \"paddingRight\": \"8px\",\n              \"paddingTop\": \"8px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Notifications\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Badge Icon 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"vertical\",\n          \"WebkitFlexDirection\": \"column\",\n          \"flexDirection\": \"column\",\n          \"msFlexDirection\": \"column\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(220,252,231,1.00)\",\n            \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n            \"borderBottomLeftRadius\": \"2px\",\n            \"borderBottomRightRadius\": \"2px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n            \"borderTopLeftRadius\": \"2px\",\n            \"borderTopRightRadius\": \"2px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"paddingBottom\": \"2px\",\n            \"paddingLeft\": \"8px\",\n            \"paddingRight\": \"8px\",\n            \"paddingTop\": \"2px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(20,83,45,1.00)\",\n                \"fontSize\": \"12px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            SUCCESS\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"width\": \"4px\",\n            }\n          }\n        />\n        <svg\n          role=\"img\"\n          stroke=\"\"\n          style={\n            Object {\n              \"color\": \"rgba(20,83,45,1.00)\",\n              \"height\": \"8px\",\n              \"width\": \"8px\",\n            }\n          }\n          viewBox=\"0 0 24 24\"\n        >\n          <g>\n            <path\n              d=\"M13.25 10.75V2H10.75V10.75H2V13.25H10.75V22H13.25V13.25H22V10.75H13.25Z\"\n              fill=\"currentColor\"\n              stroke=\"\"\n            />\n          </g>\n        </svg>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(234,88,12,1.00)\",\n            \"borderBottomLeftRadius\": \"2px\",\n            \"borderBottomRightRadius\": \"2px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(234,88,12,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(234,88,12,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(234,88,12,1.00)\",\n            \"borderTopLeftRadius\": \"2px\",\n            \"borderTopRightRadius\": \"2px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"paddingBottom\": \"2px\",\n            \"paddingLeft\": \"8px\",\n            \"paddingRight\": \"8px\",\n            \"paddingTop\": \"2px\",\n          }\n        }\n      >\n        <svg\n          role=\"img\"\n          stroke=\"\"\n          style={\n            Object {\n              \"color\": \"rgba(234,88,12,1.00)\",\n              \"height\": \"8px\",\n              \"width\": \"8px\",\n            }\n          }\n          viewBox=\"0 0 24 24\"\n        >\n          <g>\n            <path\n              d=\"M13.25 10.75V2H10.75V10.75H2V13.25H10.75V22H13.25V13.25H22V10.75H13.25Z\"\n              fill=\"currentColor\"\n              stroke=\"\"\n            />\n          </g>\n        </svg>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"width\": \"4px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(234,88,12,1.00)\",\n                \"fontSize\": \"12px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            SUCCESS\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Badge Playground 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"rgba(22,163,74,1.00)\",\n          \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n          \"borderBottomLeftRadius\": \"2px\",\n          \"borderBottomRightRadius\": \"2px\",\n          \"borderBottomWidth\": \"1px\",\n          \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n          \"borderLeftWidth\": \"1px\",\n          \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n          \"borderRightWidth\": \"1px\",\n          \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n          \"borderTopLeftRadius\": \"2px\",\n          \"borderTopRightRadius\": \"2px\",\n          \"borderTopWidth\": \"1px\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"paddingBottom\": \"2px\",\n          \"paddingLeft\": \"8px\",\n          \"paddingRight\": \"8px\",\n          \"paddingTop\": \"2px\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(250,250,250,1.00)\",\n              \"fontSize\": \"12px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"500\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          NATIVEBASE\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Badge Usage 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(245,245,245,1.00)\",\n            \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n            \"borderBottomLeftRadius\": \"2px\",\n            \"borderBottomRightRadius\": \"2px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n            \"borderTopLeftRadius\": \"2px\",\n            \"borderTopRightRadius\": \"2px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"paddingBottom\": \"2px\",\n            \"paddingLeft\": \"8px\",\n            \"paddingRight\": \"8px\",\n            \"paddingTop\": \"2px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"12px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            NEW FEATURE\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Badge Variants 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"flexDirection\": \"row\",\n            \"marginLeft\": \"auto\",\n            \"marginRight\": \"auto\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitAlignSelf\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"rgba(82,82,82,1.00)\",\n                \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"2px\",\n                \"borderBottomRightRadius\": \"2px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n                \"borderTopLeftRadius\": \"2px\",\n                \"borderTopRightRadius\": \"2px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexItemAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msGridRowAlign\": \"center\",\n                \"paddingBottom\": \"2px\",\n                \"paddingLeft\": \"8px\",\n                \"paddingRight\": \"8px\",\n                \"paddingTop\": \"2px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                DEFAULT\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitAlignSelf\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"rgba(22,163,74,1.00)\",\n                \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"2px\",\n                \"borderBottomRightRadius\": \"2px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n                \"borderTopLeftRadius\": \"2px\",\n                \"borderTopRightRadius\": \"2px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexItemAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msGridRowAlign\": \"center\",\n                \"paddingBottom\": \"2px\",\n                \"paddingLeft\": \"8px\",\n                \"paddingRight\": \"8px\",\n                \"paddingTop\": \"2px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                SUCCESS\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitAlignSelf\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"rgba(220,38,38,1.00)\",\n                \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"2px\",\n                \"borderBottomRightRadius\": \"2px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n                \"borderTopLeftRadius\": \"2px\",\n                \"borderTopRightRadius\": \"2px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexItemAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msGridRowAlign\": \"center\",\n                \"paddingBottom\": \"2px\",\n                \"paddingLeft\": \"8px\",\n                \"paddingRight\": \"8px\",\n                \"paddingTop\": \"2px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                ERROR\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitAlignSelf\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"rgba(2,132,199,1.00)\",\n                \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"2px\",\n                \"borderBottomRightRadius\": \"2px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n                \"borderTopLeftRadius\": \"2px\",\n                \"borderTopRightRadius\": \"2px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexItemAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msGridRowAlign\": \"center\",\n                \"paddingBottom\": \"2px\",\n                \"paddingLeft\": \"8px\",\n                \"paddingRight\": \"8px\",\n                \"paddingTop\": \"2px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                INFO\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitAlignSelf\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"rgba(234,88,12,1.00)\",\n                \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"2px\",\n                \"borderBottomRightRadius\": \"2px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n                \"borderTopLeftRadius\": \"2px\",\n                \"borderTopRightRadius\": \"2px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexItemAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msGridRowAlign\": \"center\",\n                \"paddingBottom\": \"2px\",\n                \"paddingLeft\": \"8px\",\n                \"paddingRight\": \"8px\",\n                \"paddingTop\": \"2px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                WARNING\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"width\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitAlignSelf\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"borderBottomColor\": \"rgba(82,82,82,1.00)\",\n                \"borderBottomLeftRadius\": \"2px\",\n                \"borderBottomRightRadius\": \"2px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(82,82,82,1.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(82,82,82,1.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(82,82,82,1.00)\",\n                \"borderTopLeftRadius\": \"2px\",\n                \"borderTopRightRadius\": \"2px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexItemAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msGridRowAlign\": \"center\",\n                \"paddingBottom\": \"2px\",\n                \"paddingLeft\": \"8px\",\n                \"paddingRight\": \"8px\",\n                \"paddingTop\": \"2px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(82,82,82,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                DEFAULT\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitAlignSelf\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"borderBottomColor\": \"rgba(22,163,74,1.00)\",\n                \"borderBottomLeftRadius\": \"2px\",\n                \"borderBottomRightRadius\": \"2px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(22,163,74,1.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(22,163,74,1.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(22,163,74,1.00)\",\n                \"borderTopLeftRadius\": \"2px\",\n                \"borderTopRightRadius\": \"2px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexItemAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msGridRowAlign\": \"center\",\n                \"paddingBottom\": \"2px\",\n                \"paddingLeft\": \"8px\",\n                \"paddingRight\": \"8px\",\n                \"paddingTop\": \"2px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(22,163,74,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                SUCCESS\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitAlignSelf\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"borderBottomColor\": \"rgba(220,38,38,1.00)\",\n                \"borderBottomLeftRadius\": \"2px\",\n                \"borderBottomRightRadius\": \"2px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(220,38,38,1.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(220,38,38,1.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(220,38,38,1.00)\",\n                \"borderTopLeftRadius\": \"2px\",\n                \"borderTopRightRadius\": \"2px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexItemAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msGridRowAlign\": \"center\",\n                \"paddingBottom\": \"2px\",\n                \"paddingLeft\": \"8px\",\n                \"paddingRight\": \"8px\",\n                \"paddingTop\": \"2px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(220,38,38,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                ERROR\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitAlignSelf\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"borderBottomColor\": \"rgba(2,132,199,1.00)\",\n                \"borderBottomLeftRadius\": \"2px\",\n                \"borderBottomRightRadius\": \"2px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(2,132,199,1.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(2,132,199,1.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(2,132,199,1.00)\",\n                \"borderTopLeftRadius\": \"2px\",\n                \"borderTopRightRadius\": \"2px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexItemAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msGridRowAlign\": \"center\",\n                \"paddingBottom\": \"2px\",\n                \"paddingLeft\": \"8px\",\n                \"paddingRight\": \"8px\",\n                \"paddingTop\": \"2px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(2,132,199,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                INFO\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitAlignSelf\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"borderBottomColor\": \"rgba(234,88,12,1.00)\",\n                \"borderBottomLeftRadius\": \"2px\",\n                \"borderBottomRightRadius\": \"2px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(234,88,12,1.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(234,88,12,1.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(234,88,12,1.00)\",\n                \"borderTopLeftRadius\": \"2px\",\n                \"borderTopRightRadius\": \"2px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexItemAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msGridRowAlign\": \"center\",\n                \"paddingBottom\": \"2px\",\n                \"paddingLeft\": \"8px\",\n                \"paddingRight\": \"8px\",\n                \"paddingTop\": \"2px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(234,88,12,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                WARNING\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"width\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitAlignSelf\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"rgba(245,245,245,1.00)\",\n                \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"2px\",\n                \"borderBottomRightRadius\": \"2px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n                \"borderTopLeftRadius\": \"2px\",\n                \"borderTopRightRadius\": \"2px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexItemAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msGridRowAlign\": \"center\",\n                \"paddingBottom\": \"2px\",\n                \"paddingLeft\": \"8px\",\n                \"paddingRight\": \"8px\",\n                \"paddingTop\": \"2px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                DEFAULT\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitAlignSelf\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"rgba(220,252,231,1.00)\",\n                \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"2px\",\n                \"borderBottomRightRadius\": \"2px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n                \"borderTopLeftRadius\": \"2px\",\n                \"borderTopRightRadius\": \"2px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexItemAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msGridRowAlign\": \"center\",\n                \"paddingBottom\": \"2px\",\n                \"paddingLeft\": \"8px\",\n                \"paddingRight\": \"8px\",\n                \"paddingTop\": \"2px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(20,83,45,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                SUCCESS\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitAlignSelf\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"rgba(254,226,226,1.00)\",\n                \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"2px\",\n                \"borderBottomRightRadius\": \"2px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n                \"borderTopLeftRadius\": \"2px\",\n                \"borderTopRightRadius\": \"2px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexItemAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msGridRowAlign\": \"center\",\n                \"paddingBottom\": \"2px\",\n                \"paddingLeft\": \"8px\",\n                \"paddingRight\": \"8px\",\n                \"paddingTop\": \"2px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(127,29,29,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                ERROR\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitAlignSelf\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"rgba(224,242,254,1.00)\",\n                \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"2px\",\n                \"borderBottomRightRadius\": \"2px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n                \"borderTopLeftRadius\": \"2px\",\n                \"borderTopRightRadius\": \"2px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexItemAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msGridRowAlign\": \"center\",\n                \"paddingBottom\": \"2px\",\n                \"paddingLeft\": \"8px\",\n                \"paddingRight\": \"8px\",\n                \"paddingTop\": \"2px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(12,74,110,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                INFO\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitAlignSelf\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"rgba(255,237,213,1.00)\",\n                \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"2px\",\n                \"borderBottomRightRadius\": \"2px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n                \"borderTopLeftRadius\": \"2px\",\n                \"borderTopRightRadius\": \"2px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexItemAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msGridRowAlign\": \"center\",\n                \"paddingBottom\": \"2px\",\n                \"paddingLeft\": \"8px\",\n                \"paddingRight\": \"8px\",\n                \"paddingTop\": \"2px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(124,45,18,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                WARNING\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Box Basic Box 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignSelf\": \"center\",\n            \"alignSelf\": \"center\",\n            \"backgroundColor\": \"rgba(6,182,212,1.00)\",\n            \"msFlexItemAlign\": \"center\",\n            \"msGridRowAlign\": \"center\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(250,250,249,1.00)\",\n              \"fontSize\": \"16px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"500\",\n              \"letterSpacing\": \"0.025em\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          This is a Box\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Box Composition 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n            \"borderBottomColor\": \"rgba(229,231,235,1.00)\",\n            \"borderBottomLeftRadius\": \"8px\",\n            \"borderBottomRightRadius\": \"8px\",\n            \"borderBottomWidth\": \"0px\",\n            \"borderLeftColor\": \"rgba(229,231,235,1.00)\",\n            \"borderLeftWidth\": \"0px\",\n            \"borderRightColor\": \"rgba(229,231,235,1.00)\",\n            \"borderRightWidth\": \"0px\",\n            \"borderTopColor\": \"rgba(229,231,235,1.00)\",\n            \"borderTopLeftRadius\": \"8px\",\n            \"borderTopRightRadius\": \"8px\",\n            \"borderTopWidth\": \"0px\",\n            \"boxShadow\": \"0px 1px 2.22px rgba(0,0,0,0.22)\",\n            \"maxWidth\": \"320px\",\n            \"overflowX\": \"hidden\",\n            \"overflowY\": \"hidden\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              aria-label=\"image\"\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitFlexBasis\": \"auto\",\n                  \"bottom\": \"0px\",\n                  \"flexBasis\": \"auto\",\n                  \"left\": \"0px\",\n                  \"maxWidth\": \"100%\",\n                  \"msFlexPreferredSize\": \"auto\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"zIndex\": 0,\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                    \"backgroundPosition\": \"center\",\n                    \"backgroundRepeat\": \"no-repeat\",\n                    \"backgroundSize\": \"cover\",\n                    \"bottom\": \"0px\",\n                    \"height\": \"100%\",\n                    \"left\": \"0px\",\n                    \"position\": \"absolute\",\n                    \"right\": \"0px\",\n                    \"top\": \"0px\",\n                    \"width\": \"100%\",\n                    \"zIndex\": -1,\n                  }\n                }\n                suppressHydrationWarning={true}\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(139,92,246,1.00)\",\n                \"bottom\": \"0px\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"paddingBottom\": \"6px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"6px\",\n                \"position\": \"absolute\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,249,1.00)\",\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              PHOTOS\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"paddingBottom\": \"16px\",\n              \"paddingLeft\": \"16px\",\n              \"paddingRight\": \"16px\",\n              \"paddingTop\": \"16px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"20px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.25em\",\n                  \"marginLeft\": \"-4px\",\n                }\n              }\n            >\n              The Garden City\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(139,92,246,1.00)\",\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"500\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginLeft\": \"-2px\",\n                  \"marginTop\": \"-4px\",\n                }\n              }\n            >\n              The Silicon Valley of India.\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            Bengaluru (also called Bangalore) is the center of India's high-tech industry. The city is also known for its parks and nightlife.\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"justify\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"space-between\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"space-between\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"justify\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(75,85,99,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                6 mins ago\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Box LinearGradient Box 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"backgroundImage\": \"linear-gradient(90deg, rgba(125,211,252,1.00),rgba(91,33,182,1.00))\",\n          \"borderBottomLeftRadius\": \"12px\",\n          \"borderBottomRightRadius\": \"12px\",\n          \"borderTopLeftRadius\": \"12px\",\n          \"borderTopRightRadius\": \"12px\",\n          \"paddingBottom\": \"48px\",\n          \"paddingLeft\": \"48px\",\n          \"paddingRight\": \"48px\",\n          \"paddingTop\": \"48px\",\n          \"width\": \"288px\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(250,250,249,1.00)\",\n            \"fontSize\": \"16px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"500\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n            \"textAlign\": \"center\",\n          }\n        }\n      >\n        This is a Box with Linear Gradient\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Box With Ref 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"backgroundColor\": \"rgba(6,182,212,1.00)\",\n          \"boxShadow\": \"0px 1px 2.22px rgba(0,0,0,0.22)\",\n          \"paddingBottom\": \"16px\",\n          \"paddingLeft\": \"16px\",\n          \"paddingRight\": \"16px\",\n          \"paddingTop\": \"16px\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(255,255,255,1.00)\",\n            \"fontSize\": \"16px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        This is a Box\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Breadcrumb Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"24px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n            \"marginBottom\": \"16px\",\n          }\n        }\n      >\n        Default Breadcrumb\n      </div>\n      <nav\n        aria-label=\"Breadcrumb\"\n        className=\"css-view-1dbjc4n\"\n        role=\"navigation\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxLines\": \"multiple\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitFlexWrap\": \"wrap\",\n            \"display\": \"flex\",\n            \"flexDirection\": \"row\",\n            \"flexWrap\": \"wrap\",\n            \"height\": \"auto\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexWrap\": \"wrap\",\n            \"width\": \"auto\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"flexDirection\": \"row\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <a\n            aria-current=\"page\"\n            className=\"css-reset-4rbku5 css-cursor-18t94o4 css-view-1dbjc4n\"\n            href=\"https://github.com/GeekyAnts/nativebase\"\n            role=\"link\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"msFlexDirection\": \"row\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"color\": \"rgba(239,68,68,1.00)\",\n                  \"display\": \"flex\",\n                  \"flexDirection\": \"row\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"height\": \"auto\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"msFlexDirection\": \"row\",\n                  \"width\": \"auto\",\n                }\n              }\n            >\n              Home (This is currently active)\n            </div>\n          </a>\n        </div>\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          role=\"presentation\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n              \"marginLeft\": \"8px\",\n              \"marginRight\": \"8px\",\n            }\n          }\n        >\n          /\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"flexDirection\": \"row\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <a\n            className=\"css-reset-4rbku5 css-cursor-18t94o4 css-view-1dbjc4n\"\n            href=\"https://alpha.nativebase.io/\"\n            role=\"link\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"msFlexDirection\": \"row\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"display\": \"flex\",\n                  \"flexDirection\": \"row\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"auto\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"msFlexDirection\": \"row\",\n                  \"width\": \"auto\",\n                }\n              }\n            >\n              Docs\n            </div>\n          </a>\n        </div>\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          role=\"presentation\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n              \"marginLeft\": \"8px\",\n              \"marginRight\": \"8px\",\n            }\n          }\n        >\n          /\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"flexDirection\": \"row\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <a\n            className=\"css-reset-4rbku5 css-cursor-18t94o4 css-view-1dbjc4n\"\n            href=\"https://github.com/GeekyAnts/nativebase\"\n            role=\"link\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"msFlexDirection\": \"row\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"display\": \"flex\",\n                  \"flexDirection\": \"row\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"auto\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"msFlexDirection\": \"row\",\n                  \"width\": \"auto\",\n                }\n              }\n            >\n              Github\n            </div>\n          </a>\n        </div>\n      </nav>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Breadcrumb Collapsible 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"24px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n            \"marginBottom\": \"16px\",\n          }\n        }\n      >\n        Breadcrumb Collapsible\n      </div>\n      <nav\n        aria-label=\"Breadcrumb\"\n        className=\"css-view-1dbjc4n\"\n        role=\"navigation\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxLines\": \"multiple\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitFlexWrap\": \"wrap\",\n            \"display\": \"flex\",\n            \"flexDirection\": \"row\",\n            \"flexWrap\": \"wrap\",\n            \"height\": \"auto\",\n            \"marginTop\": \"12px\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexWrap\": \"wrap\",\n            \"width\": \"auto\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"flexDirection\": \"row\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            role=\"link\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"msFlexDirection\": \"row\",\n                \"width\": \"auto\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"display\": \"flex\",\n                    \"flexDirection\": \"row\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"auto\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                    \"msFlexDirection\": \"row\",\n                    \"width\": \"auto\",\n                  }\n                }\n              >\n                Home\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          role=\"presentation\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n              \"marginLeft\": \"8px\",\n              \"marginRight\": \"8px\",\n            }\n          }\n        >\n          /\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"cursor\": \"pointer\",\n              \"msTouchAction\": \"manipulation\",\n              \"touchAction\": \"manipulation\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <svg\n            role=\"img\"\n            stroke=\"\"\n            style={\n              Object {\n                \"color\": \"rgba(115,115,115,1.00)\",\n                \"height\": \"16px\",\n                \"width\": \"16px\",\n              }\n            }\n            viewBox=\"0 0 32.055 32.055\"\n          >\n            <g>\n              <g\n                fill=\"currentColor\"\n                stroke=\"\"\n              >\n                <path\n                  d=\"M3.968,12.061C1.775,12.061,0,13.835,0,16.027c0,2.192,1.773,3.967,3.968,3.967c2.189,0,3.966-1.772,3.966-3.967   C7.934,13.835,6.157,12.061,3.968,12.061z M16.233,12.061c-2.188,0-3.968,1.773-3.968,3.965c0,2.192,1.778,3.967,3.968,3.967   s3.97-1.772,3.97-3.967C20.201,13.835,18.423,12.061,16.233,12.061z M28.09,12.061c-2.192,0-3.969,1.774-3.969,3.967   c0,2.19,1.774,3.965,3.969,3.965c2.188,0,3.965-1.772,3.965-3.965S30.278,12.061,28.09,12.061z\"\n                />\n              </g>\n            </g>\n          </svg>\n        </div>\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          role=\"presentation\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n              \"marginLeft\": \"8px\",\n              \"marginRight\": \"8px\",\n            }\n          }\n        >\n          /\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"flexDirection\": \"row\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <a\n            aria-current=\"page\"\n            className=\"css-reset-4rbku5 css-cursor-18t94o4 css-view-1dbjc4n\"\n            href=\"https://github.com/GeekyAnts/nativebase\"\n            role=\"link\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"msFlexDirection\": \"row\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"color\": \"rgba(239,68,68,1.00)\",\n                    \"display\": \"flex\",\n                    \"flexDirection\": \"row\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"height\": \"auto\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                    \"msFlexDirection\": \"row\",\n                    \"width\": \"auto\",\n                  }\n                }\n              >\n                Github (This is currently active)\n              </div>\n            </div>\n          </a>\n        </div>\n      </nav>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"marginTop\": \"12px\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"0px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"0px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"0px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"0px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"12px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"12px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(82,82,91,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Expand\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Breadcrumb ComponentSeparator 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"24px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n            \"marginBottom\": \"16px\",\n          }\n        }\n      >\n        Breadcrumb with Custom Separator\n      </div>\n      <nav\n        aria-label=\"Breadcrumb\"\n        className=\"css-view-1dbjc4n\"\n        role=\"navigation\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxLines\": \"multiple\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitFlexWrap\": \"wrap\",\n            \"display\": \"flex\",\n            \"flexDirection\": \"row\",\n            \"flexWrap\": \"wrap\",\n            \"height\": \"auto\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexWrap\": \"wrap\",\n            \"width\": \"auto\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"flexDirection\": \"row\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            aria-current=\"page\"\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            role=\"link\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"msFlexDirection\": \"row\",\n                \"width\": \"auto\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"textDecoration\": \"none\",\n                }\n              }\n            >\n              Home (This is currently active)\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"flexDirection\": \"row\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <a\n            className=\"css-reset-4rbku5 css-cursor-18t94o4 css-view-1dbjc4n\"\n            href=\"https://alpha.nativebase.io/\"\n            role=\"link\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"msFlexDirection\": \"row\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"textDecoration\": \"none\",\n                }\n              }\n            >\n              Docs\n            </div>\n          </a>\n        </div>\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"flexDirection\": \"row\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <a\n            className=\"css-reset-4rbku5 css-cursor-18t94o4 css-view-1dbjc4n\"\n            href=\"https://github.com/GeekyAnts/nativebase\"\n            role=\"link\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"msFlexDirection\": \"row\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"textDecoration\": \"none\",\n                }\n              }\n            >\n              Github\n            </div>\n          </a>\n        </div>\n      </nav>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Breadcrumb Composition 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"24px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n            \"marginBottom\": \"16px\",\n          }\n        }\n      >\n        Breadcrumb Composition\n      </div>\n      <nav\n        aria-label=\"Breadcrumb\"\n        className=\"css-view-1dbjc4n\"\n        role=\"navigation\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxLines\": \"multiple\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitFlexWrap\": \"wrap\",\n            \"display\": \"flex\",\n            \"flexDirection\": \"row\",\n            \"flexWrap\": \"wrap\",\n            \"height\": \"auto\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexWrap\": \"wrap\",\n            \"width\": \"auto\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"flexDirection\": \"row\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            role=\"link\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"msFlexDirection\": \"row\",\n                \"width\": \"auto\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"display\": \"flex\",\n                    \"flexDirection\": \"row\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"auto\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                    \"msFlexDirection\": \"row\",\n                    \"width\": \"auto\",\n                  }\n                }\n              >\n                Home\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          role=\"presentation\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n              \"marginLeft\": \"8px\",\n              \"marginRight\": \"8px\",\n            }\n          }\n        >\n          /\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"flexDirection\": \"row\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <a\n            className=\"css-reset-4rbku5 css-cursor-18t94o4 css-view-1dbjc4n\"\n            href=\"https://alpha.nativebase.io/\"\n            role=\"link\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"msFlexDirection\": \"row\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"display\": \"flex\",\n                    \"flexDirection\": \"row\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"auto\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                    \"msFlexDirection\": \"row\",\n                    \"width\": \"auto\",\n                  }\n                }\n              >\n                Docs\n              </div>\n            </div>\n          </a>\n        </div>\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          role=\"presentation\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n              \"marginLeft\": \"8px\",\n              \"marginRight\": \"8px\",\n            }\n          }\n        >\n          /\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"flexDirection\": \"row\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <a\n            aria-current=\"page\"\n            className=\"css-reset-4rbku5 css-cursor-18t94o4 css-view-1dbjc4n\"\n            href=\"https://github.com/GeekyAnts/nativebase\"\n            role=\"link\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"msFlexDirection\": \"row\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"display\": \"flex\",\n                    \"flexDirection\": \"row\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"height\": \"auto\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                    \"msFlexDirection\": \"row\",\n                    \"width\": \"auto\",\n                  }\n                }\n              >\n                Github (This is currently active)\n              </div>\n            </div>\n          </a>\n        </div>\n      </nav>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Breadcrumb Separators 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"24px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n            \"marginBottom\": \"16px\",\n          }\n        }\n      >\n        Breadcrumb with String Separator\n      </div>\n      <nav\n        aria-label=\"Breadcrumb\"\n        className=\"css-view-1dbjc4n\"\n        role=\"navigation\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxLines\": \"multiple\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitFlexWrap\": \"wrap\",\n            \"display\": \"flex\",\n            \"flexDirection\": \"row\",\n            \"flexWrap\": \"wrap\",\n            \"height\": \"auto\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexWrap\": \"wrap\",\n            \"width\": \"auto\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"flexDirection\": \"row\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            aria-current=\"page\"\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            role=\"link\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"msFlexDirection\": \"row\",\n                \"width\": \"auto\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"color\": \"rgba(239,68,68,1.00)\",\n                  \"display\": \"flex\",\n                  \"flexDirection\": \"row\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"height\": \"auto\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"msFlexDirection\": \"row\",\n                  \"width\": \"auto\",\n                }\n              }\n            >\n              Home (This is currently active)\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          role=\"presentation\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n              \"marginLeft\": \"8px\",\n              \"marginRight\": \"8px\",\n            }\n          }\n        >\n          -\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"flexDirection\": \"row\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <a\n            className=\"css-reset-4rbku5 css-cursor-18t94o4 css-view-1dbjc4n\"\n            href=\"https://alpha.nativebase.io/\"\n            role=\"link\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"msFlexDirection\": \"row\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"textDecoration\": \"none\",\n                }\n              }\n            >\n              Docs\n            </div>\n          </a>\n        </div>\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          role=\"presentation\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n              \"marginLeft\": \"8px\",\n              \"marginRight\": \"8px\",\n            }\n          }\n        >\n          -\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"flexDirection\": \"row\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <a\n            className=\"css-reset-4rbku5 css-cursor-18t94o4 css-view-1dbjc4n\"\n            href=\"https://github.com/GeekyAnts/nativebase\"\n            role=\"link\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"height\": \"auto\",\n                \"msFlexDirection\": \"row\",\n                \"width\": \"auto\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"textDecoration\": \"none\",\n                }\n              }\n            >\n              Github\n            </div>\n          </a>\n        </div>\n      </nav>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Button Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Click Me\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Button Composition 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n          \"borderBottomLeftRadius\": \"999px\",\n          \"borderBottomRightRadius\": \"999px\",\n          \"borderBottomWidth\": \"2px\",\n          \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n          \"borderLeftWidth\": \"2px\",\n          \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n          \"borderRightWidth\": \"2px\",\n          \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n          \"borderTopLeftRadius\": \"999px\",\n          \"borderTopRightRadius\": \"999px\",\n          \"borderTopWidth\": \"2px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"height\": \"48px\",\n          \"justifyContent\": \"center\",\n          \"marginLeft\": \"auto\",\n          \"marginRight\": \"auto\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"10px\",\n          \"paddingLeft\": \"20px\",\n          \"paddingRight\": \"20px\",\n          \"paddingTop\": \"10px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(8,145,178,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            SHOP NOW\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Button Icons 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"vertical\",\n          \"WebkitFlexDirection\": \"column\",\n          \"flexDirection\": \"column\",\n          \"msFlexDirection\": \"column\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"6px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Upload\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(207,250,254,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(22,78,99,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Download\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"6px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Button Loading 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"vertical\",\n          \"WebkitFlexDirection\": \"column\",\n          \"alignItems\": \"center\",\n          \"flexDirection\": \"column\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"column\",\n        }\n      }\n    >\n      <div\n        aria-disabled={true}\n        className=\"css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"not-allowed\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msUserSelect\": \"none\",\n            \"opacity\": 0.4,\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"-1\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            aria-label=\"loading\"\n            aria-valuemax={1}\n            aria-valuemin={0}\n            className=\"css-view-1dbjc4n\"\n            role=\"progressbar\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"dataSet\": Object {},\n                \"focusable\": false,\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n r-animationKeyframes-127358a\"\n              style={\n                Object {\n                  \"WebkitAnimationDuration\": \"0.75s\",\n                  \"WebkitAnimationIterationCount\": \"infinite\",\n                  \"WebkitAnimationTimingFunction\": \"linear\",\n                  \"animationDuration\": \"0.75s\",\n                  \"animationIterationCount\": \"infinite\",\n                  \"animationTimingFunction\": \"linear\",\n                  \"height\": \"20px\",\n                  \"width\": \"20px\",\n                }\n              }\n            >\n              <svg\n                height=\"100%\"\n                viewBox=\"0 0 32 32\"\n                width=\"100%\"\n              >\n                <circle\n                  cx=\"16\"\n                  cy=\"16\"\n                  fill=\"none\"\n                  r=\"14\"\n                  strokeWidth=\"4\"\n                  style={\n                    Object {\n                      \"opacity\": 0.2,\n                      \"stroke\": \"#fafafa\",\n                    }\n                  }\n                />\n                <circle\n                  cx=\"16\"\n                  cy=\"16\"\n                  fill=\"none\"\n                  r=\"14\"\n                  strokeWidth=\"4\"\n                  style={\n                    Object {\n                      \"stroke\": \"#fafafa\",\n                      \"strokeDasharray\": 80,\n                      \"strokeDashoffset\": 60,\n                    }\n                  }\n                />\n              </svg>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        aria-disabled={true}\n        className=\"css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"not-allowed\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msUserSelect\": \"none\",\n            \"opacity\": 0.4,\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"-1\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            aria-label=\"loading\"\n            aria-valuemax={1}\n            aria-valuemin={0}\n            className=\"css-view-1dbjc4n\"\n            role=\"progressbar\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"dataSet\": Object {},\n                \"focusable\": false,\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n r-animationKeyframes-127358a\"\n              style={\n                Object {\n                  \"WebkitAnimationDuration\": \"0.75s\",\n                  \"WebkitAnimationIterationCount\": \"infinite\",\n                  \"WebkitAnimationTimingFunction\": \"linear\",\n                  \"animationDuration\": \"0.75s\",\n                  \"animationIterationCount\": \"infinite\",\n                  \"animationTimingFunction\": \"linear\",\n                  \"height\": \"20px\",\n                  \"width\": \"20px\",\n                }\n              }\n            >\n              <svg\n                height=\"100%\"\n                viewBox=\"0 0 32 32\"\n                width=\"100%\"\n              >\n                <circle\n                  cx=\"16\"\n                  cy=\"16\"\n                  fill=\"none\"\n                  r=\"14\"\n                  strokeWidth=\"4\"\n                  style={\n                    Object {\n                      \"opacity\": 0.2,\n                      \"stroke\": \"#fafafa\",\n                    }\n                  }\n                />\n                <circle\n                  cx=\"16\"\n                  cy=\"16\"\n                  fill=\"none\"\n                  r=\"14\"\n                  strokeWidth=\"4\"\n                  style={\n                    Object {\n                      \"stroke\": \"#fafafa\",\n                      \"strokeDasharray\": 80,\n                      \"strokeDashoffset\": 60,\n                    }\n                  }\n                />\n              </svg>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"6px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Submitting\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        aria-disabled={true}\n        className=\"css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"not-allowed\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msUserSelect\": \"none\",\n            \"opacity\": 0.4,\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"-1\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Submitting\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"6px\",\n              }\n            }\n          />\n          <div\n            aria-label=\"loading\"\n            aria-valuemax={1}\n            aria-valuemin={0}\n            className=\"css-view-1dbjc4n\"\n            role=\"progressbar\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"dataSet\": Object {},\n                \"focusable\": false,\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n r-animationKeyframes-127358a\"\n              style={\n                Object {\n                  \"WebkitAnimationDuration\": \"0.75s\",\n                  \"WebkitAnimationIterationCount\": \"infinite\",\n                  \"WebkitAnimationTimingFunction\": \"linear\",\n                  \"animationDuration\": \"0.75s\",\n                  \"animationIterationCount\": \"infinite\",\n                  \"animationTimingFunction\": \"linear\",\n                  \"height\": \"20px\",\n                  \"width\": \"20px\",\n                }\n              }\n            >\n              <svg\n                height=\"100%\"\n                viewBox=\"0 0 32 32\"\n                width=\"100%\"\n              >\n                <circle\n                  cx=\"16\"\n                  cy=\"16\"\n                  fill=\"none\"\n                  r=\"14\"\n                  strokeWidth=\"4\"\n                  style={\n                    Object {\n                      \"opacity\": 0.2,\n                      \"stroke\": \"#fafafa\",\n                    }\n                  }\n                />\n                <circle\n                  cx=\"16\"\n                  cy=\"16\"\n                  fill=\"none\"\n                  r=\"14\"\n                  strokeWidth=\"4\"\n                  style={\n                    Object {\n                      \"stroke\": \"#fafafa\",\n                      \"strokeDasharray\": 80,\n                      \"strokeDashoffset\": 60,\n                    }\n                  }\n                />\n              </svg>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        aria-disabled={true}\n        className=\"css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(251,191,36,0.70)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"not-allowed\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msUserSelect\": \"none\",\n            \"opacity\": 0.4,\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"-1\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            aria-label=\"loading\"\n            aria-valuemax={1}\n            aria-valuemin={0}\n            className=\"css-view-1dbjc4n\"\n            role=\"progressbar\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"dataSet\": Object {},\n                \"focusable\": false,\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n r-animationKeyframes-127358a\"\n              style={\n                Object {\n                  \"WebkitAnimationDuration\": \"0.75s\",\n                  \"WebkitAnimationIterationCount\": \"infinite\",\n                  \"WebkitAnimationTimingFunction\": \"linear\",\n                  \"animationDuration\": \"0.75s\",\n                  \"animationIterationCount\": \"infinite\",\n                  \"animationTimingFunction\": \"linear\",\n                  \"height\": \"20px\",\n                  \"width\": \"20px\",\n                }\n              }\n            >\n              <svg\n                height=\"100%\"\n                viewBox=\"0 0 32 32\"\n                width=\"100%\"\n              >\n                <circle\n                  cx=\"16\"\n                  cy=\"16\"\n                  fill=\"none\"\n                  r=\"14\"\n                  strokeWidth=\"4\"\n                  style={\n                    Object {\n                      \"opacity\": 0.2,\n                      \"stroke\": \"#FFFFFF\",\n                    }\n                  }\n                />\n                <circle\n                  cx=\"16\"\n                  cy=\"16\"\n                  fill=\"none\"\n                  r=\"14\"\n                  strokeWidth=\"4\"\n                  style={\n                    Object {\n                      \"stroke\": \"#FFFFFF\",\n                      \"strokeDasharray\": 80,\n                      \"strokeDashoffset\": 60,\n                    }\n                  }\n                />\n              </svg>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"6px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(55,65,81,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Submitting\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        aria-disabled={true}\n        className=\"css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"1px\",\n            \"cursor\": \"not-allowed\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msUserSelect\": \"none\",\n            \"opacity\": 0.4,\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"-1\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            aria-label=\"loading\"\n            aria-valuemax={1}\n            aria-valuemin={0}\n            className=\"css-view-1dbjc4n\"\n            role=\"progressbar\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"dataSet\": Object {},\n                \"focusable\": false,\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n r-animationKeyframes-127358a\"\n              style={\n                Object {\n                  \"WebkitAnimationDuration\": \"0.75s\",\n                  \"WebkitAnimationIterationCount\": \"infinite\",\n                  \"WebkitAnimationTimingFunction\": \"linear\",\n                  \"animationDuration\": \"0.75s\",\n                  \"animationIterationCount\": \"infinite\",\n                  \"animationTimingFunction\": \"linear\",\n                  \"height\": \"20px\",\n                  \"width\": \"20px\",\n                }\n              }\n            >\n              <svg\n                height=\"100%\"\n                viewBox=\"0 0 32 32\"\n                width=\"100%\"\n              >\n                <circle\n                  cx=\"16\"\n                  cy=\"16\"\n                  fill=\"none\"\n                  r=\"14\"\n                  strokeWidth=\"4\"\n                  style={\n                    Object {\n                      \"opacity\": 0.2,\n                      \"stroke\": \"#0891b2\",\n                    }\n                  }\n                />\n                <circle\n                  cx=\"16\"\n                  cy=\"16\"\n                  fill=\"none\"\n                  r=\"14\"\n                  strokeWidth=\"4\"\n                  style={\n                    Object {\n                      \"stroke\": \"#0891b2\",\n                      \"strokeDasharray\": 80,\n                      \"strokeDashoffset\": 60,\n                    }\n                  }\n                />\n              </svg>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"6px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(8,145,178,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Submitting\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Button Sizes 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"8px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"8px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"10px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              BUTTON\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"8px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"8px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              BUTTON\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              BUTTON\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"12px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"12px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              BUTTON\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Button Variants 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n r-scrollbarWidth-2eszeu\"\n      onScroll={[Function]}\n      onTouchEnd={[Function]}\n      onTouchMove={[Function]}\n      onTouchStart={[Function]}\n      onWheel={[Function]}\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxFlex\": 1,\n          \"WebkitBoxOrient\": \"vertical\",\n          \"WebkitFlexDirection\": \"column\",\n          \"WebkitFlexGrow\": 1,\n          \"WebkitFlexShrink\": 1,\n          \"WebkitOverflowScrolling\": \"touch\",\n          \"WebkitTransform\": \"translateZ(0px)\",\n          \"flexDirection\": \"column\",\n          \"flexGrow\": 1,\n          \"flexShrink\": 1,\n          \"msFlexDirection\": \"column\",\n          \"msFlexNegative\": 1,\n          \"msFlexPositive\": 1,\n          \"overflowX\": \"hidden\",\n          \"overflowY\": \"auto\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"transform\": \"translateZ(0px)\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"dataSet\": Object {},\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"marginTop\": \"16px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"paddingLeft\": \"8px\",\n              \"paddingRight\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Solid\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"vertical\",\n                \"WebkitFlexDirection\": \"column\",\n                \"flexDirection\": \"column\",\n                \"marginBottom\": \"10px\",\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"column\",\n              }\n            }\n          >\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(250,250,250,1.00)\",\n                        \"fontSize\": \"12px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    PRIMARY\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(219,39,119,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(250,250,250,1.00)\",\n                        \"fontSize\": \"12px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    SECONDARY\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"8px\",\n                }\n              }\n            />\n            <div\n              aria-disabled={true}\n              className=\"css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"not-allowed\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msUserSelect\": \"none\",\n                  \"opacity\": 0.4,\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"-1\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(250,250,250,1.00)\",\n                        \"fontSize\": \"12px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    DISABLED\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Subtle\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"vertical\",\n                \"WebkitFlexDirection\": \"column\",\n                \"flexDirection\": \"column\",\n                \"marginBottom\": \"10px\",\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"column\",\n              }\n            }\n          >\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(207,250,254,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(22,78,99,1.00)\",\n                        \"fontSize\": \"12px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    PRIMARY\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(252,231,243,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(131,24,67,1.00)\",\n                        \"fontSize\": \"12px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    SECONDARY\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"8px\",\n                }\n              }\n            />\n            <div\n              aria-disabled={true}\n              className=\"css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(207,250,254,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"not-allowed\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msUserSelect\": \"none\",\n                  \"opacity\": 0.4,\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"-1\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(22,78,99,1.00)\",\n                        \"fontSize\": \"12px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    DISABLED\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Outline\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"vertical\",\n                \"WebkitFlexDirection\": \"column\",\n                \"flexDirection\": \"column\",\n                \"marginBottom\": \"10px\",\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"column\",\n              }\n            }\n          >\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(8,145,178,1.00)\",\n                        \"fontSize\": \"12px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    PRIMARY\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(219,39,119,1.00)\",\n                        \"fontSize\": \"12px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    SECONDARY\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"8px\",\n                }\n              }\n            />\n            <div\n              aria-disabled={true}\n              className=\"css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"cursor\": \"not-allowed\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msUserSelect\": \"none\",\n                  \"opacity\": 0.4,\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"-1\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(8,145,178,1.00)\",\n                        \"fontSize\": \"12px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    DISABLED\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Link\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"vertical\",\n                \"WebkitFlexDirection\": \"column\",\n                \"flexDirection\": \"column\",\n                \"marginBottom\": \"10px\",\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"column\",\n              }\n            }\n          >\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(8,145,178,1.00)\",\n                        \"fontSize\": \"12px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    PRIMARY\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(219,39,119,1.00)\",\n                        \"fontSize\": \"12px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    SECONDARY\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"8px\",\n                }\n              }\n            />\n            <div\n              aria-disabled={true}\n              className=\"css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"not-allowed\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msUserSelect\": \"none\",\n                  \"opacity\": 0.4,\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"-1\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(8,145,178,1.00)\",\n                        \"fontSize\": \"12px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    DISABLED\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Ghost\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"vertical\",\n                \"WebkitFlexDirection\": \"column\",\n                \"flexDirection\": \"column\",\n                \"marginBottom\": \"10px\",\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"column\",\n              }\n            }\n          >\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(8,145,178,1.00)\",\n                        \"fontSize\": \"12px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    PRIMARY\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(219,39,119,1.00)\",\n                        \"fontSize\": \"12px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    SECONDARY\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"8px\",\n                }\n              }\n            />\n            <div\n              aria-disabled={true}\n              className=\"css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"not-allowed\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msUserSelect\": \"none\",\n                  \"opacity\": 0.4,\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"-1\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(8,145,178,1.00)\",\n                        \"fontSize\": \"12px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    DISABLED\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Unstyled\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"vertical\",\n                \"WebkitFlexDirection\": \"column\",\n                \"flexDirection\": \"column\",\n                \"marginBottom\": \"10px\",\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"column\",\n              }\n            }\n          >\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(23,23,23,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Unstyled\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Button WithRef 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"8px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"8px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(31,41,55,1.00)\",\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Send\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots ButtonGroup Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitFlexDirection\": \"row\",\n          \"flexDirection\": \"row\",\n          \"marginLeft\": \"auto\",\n          \"marginRight\": \"auto\",\n          \"msFlexDirection\": \"row\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(37,99,235,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"0px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"0px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"8px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"8px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Edit\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"0px\",\n          }\n        }\n      />\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"0px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"0px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"0px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"1px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"8px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"8px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(37,99,235,1.00)\",\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Save\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots ButtonGroup Sizes 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"20px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n            \"marginBottom\": \"40px\",\n          }\n        }\n      >\n        Sizes\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"vertical\",\n            \"WebkitFlexDirection\": \"column\",\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"column\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"column\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"8px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"8px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontSize\": \"10px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  BUTTON\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"12px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"8px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"8px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontSize\": \"12px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  BUTTON\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"12px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  BUTTON\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"12px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"12px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"12px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontSize\": \"16px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  BUTTON\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots ButtonGroup Variants 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      onScroll={[Function]}\n      onTouchEnd={[Function]}\n      onTouchMove={[Function]}\n      onTouchStart={[Function]}\n      onWheel={[Function]}\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxFlex\": 1,\n          \"WebkitBoxOrient\": \"vertical\",\n          \"WebkitFlexDirection\": \"column\",\n          \"WebkitFlexGrow\": 1,\n          \"WebkitFlexShrink\": 1,\n          \"WebkitOverflowScrolling\": \"touch\",\n          \"WebkitTransform\": \"translateZ(0px)\",\n          \"flexDirection\": \"column\",\n          \"flexGrow\": 1,\n          \"flexShrink\": 1,\n          \"msFlexDirection\": \"column\",\n          \"msFlexNegative\": 1,\n          \"msFlexPositive\": 1,\n          \"overflowX\": \"hidden\",\n          \"overflowY\": \"auto\",\n          \"transform\": \"translateZ(0px)\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"dataSet\": Object {},\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"marginTop\": \"16px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Solid\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"marginBottom\": \"10px\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(13,148,136,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(250,250,250,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Save\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(225,29,72,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(250,250,250,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Cancel\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Subtle\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"marginBottom\": \"10px\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(204,251,241,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(19,78,74,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Save\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(255,228,230,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(136,19,55,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Cancel\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Outline\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"marginBottom\": \"10px\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(13,148,136,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Save\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(225,29,72,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Cancel\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Link\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"marginBottom\": \"10px\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(13,148,136,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Save\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(225,29,72,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Cancel\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Ghost\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"marginBottom\": \"10px\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(13,148,136,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Save\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(225,29,72,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Cancel\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Unstyled\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"marginBottom\": \"10px\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(23,23,23,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Save\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(23,23,23,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Cancel\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots ButtonGroup direction 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"paddingLeft\": \"8px\",\n          \"paddingRight\": \"8px\",\n          \"width\": \"50%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"display\": \"flex\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"20px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.25em\",\n              \"marginBottom\": \"16px\",\n            }\n          }\n        >\n          Row\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"flexDirection\": \"row\",\n              \"marginLeft\": \"auto\",\n              \"marginRight\": \"auto\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(13,148,136,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Save\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(225,29,72,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Cancel\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          aria-orientation=\"horizontal\"\n          className=\"css-view-1dbjc4n\"\n          role=\"separator\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n              \"height\": \"1px\",\n              \"marginTop\": \"20px\",\n              \"width\": \"100%\",\n            }\n          }\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"10px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"display\": \"flex\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"20px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.25em\",\n              \"marginBottom\": \"16px\",\n            }\n          }\n        >\n          Column\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"vertical\",\n              \"WebkitFlexDirection\": \"column\",\n              \"flexDirection\": \"column\",\n              \"marginLeft\": \"auto\",\n              \"marginRight\": \"auto\",\n              \"msFlexDirection\": \"column\",\n            }\n          }\n        >\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(13,148,136,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Save\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(225,29,72,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Cancel\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots ButtonGroup isAttached 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      onScroll={[Function]}\n      onTouchEnd={[Function]}\n      onTouchMove={[Function]}\n      onTouchStart={[Function]}\n      onWheel={[Function]}\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxFlex\": 1,\n          \"WebkitBoxOrient\": \"vertical\",\n          \"WebkitFlexDirection\": \"column\",\n          \"WebkitFlexGrow\": 1,\n          \"WebkitFlexShrink\": 1,\n          \"WebkitOverflowScrolling\": \"touch\",\n          \"WebkitTransform\": \"translateZ(0px)\",\n          \"flexDirection\": \"column\",\n          \"flexGrow\": 1,\n          \"flexShrink\": 1,\n          \"msFlexDirection\": \"column\",\n          \"msFlexNegative\": 1,\n          \"msFlexPositive\": 1,\n          \"overflowX\": \"hidden\",\n          \"overflowY\": \"auto\",\n          \"transform\": \"translateZ(0px)\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"dataSet\": Object {},\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"marginTop\": \"16px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Solid\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"marginBottom\": \"10px\",\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(13,148,136,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"0px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"0px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(250,250,250,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Save\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"0px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(225,29,72,1.00)\",\n                  \"borderBottomLeftRadius\": \"0px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderLeftWidth\": \"0px\",\n                  \"borderTopLeftRadius\": \"0px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(250,250,250,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Cancel\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Outline\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"marginBottom\": \"10px\",\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"0px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"0px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(13,148,136,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Save\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"0px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"0px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderLeftWidth\": \"0px\",\n                  \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderTopLeftRadius\": \"0px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(225,29,72,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Cancel\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Link\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"marginBottom\": \"10px\",\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"0px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"0px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(13,148,136,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Save\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"0px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"0px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderLeftWidth\": \"0px\",\n                  \"borderTopLeftRadius\": \"0px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(225,29,72,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Cancel\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Ghost\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"marginBottom\": \"10px\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(13,148,136,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Save\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(225,29,72,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Cancel\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Unstyled\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"marginBottom\": \"10px\",\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"0px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"0px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(23,23,23,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Save\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"0px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomLeftRadius\": \"0px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderLeftWidth\": \"0px\",\n                  \"borderTopLeftRadius\": \"0px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(23,23,23,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Cancel\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Card Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"backgroundColor\": \"rgba(14,116,144,1.00)\",\n          \"borderBottomLeftRadius\": \"6px\",\n          \"borderBottomRightRadius\": \"6px\",\n          \"borderTopLeftRadius\": \"6px\",\n          \"borderTopRightRadius\": \"6px\",\n          \"boxShadow\": \"0px 2px 3.84px rgba(0,0,0,0.25)\",\n          \"overflowX\": \"hidden\",\n          \"overflowY\": \"hidden\",\n          \"paddingBottom\": \"16px\",\n          \"paddingLeft\": \"16px\",\n          \"paddingRight\": \"16px\",\n          \"paddingTop\": \"16px\",\n          \"width\": \"296px\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"flex-start\",\n            \"WebkitBoxAlign\": \"start\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"flex-start\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"start\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(236,254,255,1.00)\",\n              \"fontSize\": \"12px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"500\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          Open Source\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxFlex\": 1,\n              \"WebkitFlexGrow\": 1,\n              \"flexGrow\": 1,\n              \"msFlexPositive\": 1,\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n        />\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(207,250,254,1.00)\",\n              \"fontSize\": \"10px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          1 month ago\n        </div>\n      </div>\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(236,254,255,1.00)\",\n            \"fontSize\": \"18px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"500\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n            \"marginTop\": \"8px\",\n          }\n        }\n      >\n        NativeBase\n      </div>\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(255,255,255,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n            \"marginTop\": \"4px\",\n          }\n        }\n      >\n        NativeBase is a component library that enables devs to build universal design systems.\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"vertical\",\n            \"WebkitFlexDirection\": \"column\",\n            \"display\": \"flex\",\n            \"flexDirection\": \"column\",\n            \"msFlexDirection\": \"column\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(34,211,238,1.00)\",\n              \"fontSize\": \"12px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"500\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n              \"marginTop\": \"8px\",\n            }\n          }\n        >\n          Read More\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Center Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(34,211,238,1.00)\",\n            \"display\": \"flex\",\n            \"height\": \"200px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"200px\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(255,255,255,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          This is the Center\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Center SquareCircle 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitFlexDirection\": \"row\",\n          \"flexDirection\": \"row\",\n          \"msFlexDirection\": \"row\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(244,114,182,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"height\": \"40px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"40px\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"12px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(34,211,238,1.00)\",\n            \"height\": \"40px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"40px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(255,255,255,1.00)\",\n                \"fontSize\": \"18px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            20\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Center WithIcons 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitFlexDirection\": \"row\",\n          \"flexDirection\": \"row\",\n          \"msFlexDirection\": \"row\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(34,211,238,1.00)\",\n            \"display\": \"flex\",\n            \"height\": \"40px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"40px\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"4px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(244,114,182,1.00)\",\n            \"display\": \"flex\",\n            \"height\": \"40px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"40px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(255,255,255,1.00)\",\n                \"fontSize\": \"18px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            20\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Checkbox Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitFlexDirection\": \"row\",\n          \"flexDirection\": \"row\",\n          \"msFlexDirection\": \"row\",\n        }\n      }\n    >\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          style={\n            Object {\n              \"border\": 0,\n              \"clip\": \"rect(0 0 0 0)\",\n              \"clipPath\": \"inset(50%)\",\n              \"height\": 1,\n              \"margin\": \"0 -1px -1px 0\",\n              \"overflow\": \"hidden\",\n              \"padding\": 0,\n              \"position\": \"absolute\",\n              \"whiteSpace\": \"nowrap\",\n              \"width\": 1,\n            }\n          }\n        >\n          <input\n            aria-checked={false}\n            aria-label=\"This is a dummy checkbox\"\n            checked={false}\n            disabled={false}\n            onBlur={[Function]}\n            onChange={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onKeyUp={[Function]}\n            onMouseDown={[Function]}\n            onMouseEnter={[Function]}\n            onMouseLeave={[Function]}\n            onMouseUp={[Function]}\n            onTouchCancel={[Function]}\n            onTouchEnd={[Function]}\n            onTouchMove={[Function]}\n            onTouchStart={[Function]}\n            type=\"checkbox\"\n            value=\"test\"\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"start\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"flex-start\",\n              \"alignItems\": \"center\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"start\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              aria-label=\"This is a dummy checkbox\"\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                  \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"2px\",\n                  \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderLeftWidth\": \"2px\",\n                  \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderRightWidth\": \"2px\",\n                  \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"2px\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"opacity\": 1,\n                  \"paddingBottom\": \"2px\",\n                  \"paddingLeft\": \"2px\",\n                  \"paddingRight\": \"2px\",\n                  \"paddingTop\": \"2px\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"height\": \"12px\",\n                    \"width\": \"12px\",\n                  }\n                }\n              />\n            </div>\n          </div>\n        </div>\n      </label>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"24px\",\n          }\n        }\n      />\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          style={\n            Object {\n              \"border\": 0,\n              \"clip\": \"rect(0 0 0 0)\",\n              \"clipPath\": \"inset(50%)\",\n              \"height\": 1,\n              \"margin\": \"0 -1px -1px 0\",\n              \"overflow\": \"hidden\",\n              \"padding\": 0,\n              \"position\": \"absolute\",\n              \"whiteSpace\": \"nowrap\",\n              \"width\": 1,\n            }\n          }\n        >\n          <input\n            aria-checked={true}\n            aria-label=\"This is a dummy checkbox\"\n            checked={true}\n            disabled={false}\n            onBlur={[Function]}\n            onChange={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onKeyUp={[Function]}\n            onMouseDown={[Function]}\n            onMouseEnter={[Function]}\n            onMouseLeave={[Function]}\n            onMouseUp={[Function]}\n            onTouchCancel={[Function]}\n            onTouchEnd={[Function]}\n            onTouchMove={[Function]}\n            onTouchStart={[Function]}\n            type=\"checkbox\"\n            value=\"test\"\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"start\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"flex-start\",\n              \"alignItems\": \"center\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"start\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              aria-label=\"This is a dummy checkbox\"\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderBottomColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"2px\",\n                  \"borderLeftColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderLeftWidth\": \"2px\",\n                  \"borderRightColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderRightWidth\": \"2px\",\n                  \"borderTopColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"2px\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"opacity\": 1,\n                  \"paddingBottom\": \"2px\",\n                  \"paddingLeft\": \"2px\",\n                  \"paddingRight\": \"2px\",\n                  \"paddingTop\": \"2px\",\n                }\n              }\n            >\n              <svg\n                role=\"img\"\n                stroke=\"\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"height\": \"12px\",\n                    \"width\": \"12px\",\n                  }\n                }\n                viewBox=\"0 0 24 24\"\n              >\n                <g>\n                  <path\n                    d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                    fill=\"currentColor\"\n                    stroke=\"\"\n                  />\n                </g>\n              </svg>\n            </div>\n          </div>\n        </div>\n      </label>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Checkbox Checkbox Group 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"baseline\",\n              \"WebkitBoxAlign\": \"baseline\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"baseline\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"baseline\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"18px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Hobbies\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Selected: (\n              2\n              )\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          aria-label=\"pick an item\"\n          className=\"css-view-1dbjc4n\"\n          id=\"react-aria-0-1\"\n          role=\"group\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"flex-start\",\n              \"WebkitBoxAlign\": \"start\",\n              \"alignItems\": \"flex-start\",\n              \"msFlexAlign\": \"start\",\n            }\n          }\n        >\n          <label\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              style={\n                Object {\n                  \"border\": 0,\n                  \"clip\": \"rect(0 0 0 0)\",\n                  \"clipPath\": \"inset(50%)\",\n                  \"height\": 1,\n                  \"margin\": \"0 -1px -1px 0\",\n                  \"overflow\": \"hidden\",\n                  \"padding\": 0,\n                  \"position\": \"absolute\",\n                  \"whiteSpace\": \"nowrap\",\n                  \"width\": 1,\n                }\n              }\n            >\n              <input\n                aria-checked={true}\n                checked={true}\n                disabled={false}\n                onBlur={[Function]}\n                onChange={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onKeyUp={[Function]}\n                onMouseDown={[Function]}\n                onMouseEnter={[Function]}\n                onMouseLeave={[Function]}\n                onMouseUp={[Function]}\n                onTouchCancel={[Function]}\n                onTouchEnd={[Function]}\n                onTouchMove={[Function]}\n                onTouchStart={[Function]}\n                readOnly={false}\n                type=\"checkbox\"\n                value=\"Photography\"\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"start\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"flex-start\",\n                  \"alignItems\": \"center\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"flex-start\",\n                  \"marginBottom\": \"4px\",\n                  \"marginTop\": \"4px\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"start\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"rgba(22,163,74,1.00)\",\n                      \"borderBottomColor\": \"rgba(22,163,74,1.00)\",\n                      \"borderBottomLeftRadius\": \"4px\",\n                      \"borderBottomRightRadius\": \"4px\",\n                      \"borderBottomWidth\": \"2px\",\n                      \"borderLeftColor\": \"rgba(22,163,74,1.00)\",\n                      \"borderLeftWidth\": \"2px\",\n                      \"borderRightColor\": \"rgba(22,163,74,1.00)\",\n                      \"borderRightWidth\": \"2px\",\n                      \"borderTopColor\": \"rgba(22,163,74,1.00)\",\n                      \"borderTopLeftRadius\": \"4px\",\n                      \"borderTopRightRadius\": \"4px\",\n                      \"borderTopWidth\": \"2px\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                      \"opacity\": 1,\n                      \"paddingBottom\": \"2px\",\n                      \"paddingLeft\": \"2px\",\n                      \"paddingRight\": \"2px\",\n                      \"paddingTop\": \"2px\",\n                    }\n                  }\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(250,250,250,1.00)\",\n                        \"height\": \"12px\",\n                        \"width\": \"12px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(0,0,0,1.00)\",\n                    \"fontSize\": \"16px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                    \"marginLeft\": \"8px\",\n                  }\n                }\n              >\n                Photography\n              </div>\n            </div>\n          </label>\n          <label\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              style={\n                Object {\n                  \"border\": 0,\n                  \"clip\": \"rect(0 0 0 0)\",\n                  \"clipPath\": \"inset(50%)\",\n                  \"height\": 1,\n                  \"margin\": \"0 -1px -1px 0\",\n                  \"overflow\": \"hidden\",\n                  \"padding\": 0,\n                  \"position\": \"absolute\",\n                  \"whiteSpace\": \"nowrap\",\n                  \"width\": 1,\n                }\n              }\n            >\n              <input\n                aria-checked={false}\n                checked={false}\n                disabled={false}\n                onBlur={[Function]}\n                onChange={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onKeyUp={[Function]}\n                onMouseDown={[Function]}\n                onMouseEnter={[Function]}\n                onMouseLeave={[Function]}\n                onMouseUp={[Function]}\n                onTouchCancel={[Function]}\n                onTouchEnd={[Function]}\n                onTouchMove={[Function]}\n                onTouchStart={[Function]}\n                readOnly={false}\n                type=\"checkbox\"\n                value=\"Writing\"\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"start\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"flex-start\",\n                  \"alignItems\": \"center\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"flex-start\",\n                  \"marginBottom\": \"4px\",\n                  \"marginTop\": \"4px\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"start\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                      \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderBottomLeftRadius\": \"4px\",\n                      \"borderBottomRightRadius\": \"4px\",\n                      \"borderBottomWidth\": \"2px\",\n                      \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderLeftWidth\": \"2px\",\n                      \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderRightWidth\": \"2px\",\n                      \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderTopLeftRadius\": \"4px\",\n                      \"borderTopRightRadius\": \"4px\",\n                      \"borderTopWidth\": \"2px\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                      \"opacity\": 1,\n                      \"paddingBottom\": \"2px\",\n                      \"paddingLeft\": \"2px\",\n                      \"paddingRight\": \"2px\",\n                      \"paddingTop\": \"2px\",\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(250,250,250,1.00)\",\n                        \"height\": \"12px\",\n                        \"width\": \"12px\",\n                      }\n                    }\n                  />\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(0,0,0,1.00)\",\n                    \"fontSize\": \"16px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                    \"marginLeft\": \"8px\",\n                  }\n                }\n              >\n                Writing\n              </div>\n            </div>\n          </label>\n          <label\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              style={\n                Object {\n                  \"border\": 0,\n                  \"clip\": \"rect(0 0 0 0)\",\n                  \"clipPath\": \"inset(50%)\",\n                  \"height\": 1,\n                  \"margin\": \"0 -1px -1px 0\",\n                  \"overflow\": \"hidden\",\n                  \"padding\": 0,\n                  \"position\": \"absolute\",\n                  \"whiteSpace\": \"nowrap\",\n                  \"width\": 1,\n                }\n              }\n            >\n              <input\n                aria-checked={true}\n                checked={true}\n                disabled={false}\n                onBlur={[Function]}\n                onChange={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onKeyUp={[Function]}\n                onMouseDown={[Function]}\n                onMouseEnter={[Function]}\n                onMouseLeave={[Function]}\n                onMouseUp={[Function]}\n                onTouchCancel={[Function]}\n                onTouchEnd={[Function]}\n                onTouchMove={[Function]}\n                onTouchStart={[Function]}\n                readOnly={false}\n                type=\"checkbox\"\n                value=\"Gardening\"\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"start\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"flex-start\",\n                  \"alignItems\": \"center\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"flex-start\",\n                  \"marginBottom\": \"4px\",\n                  \"marginTop\": \"4px\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"start\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"rgba(22,163,74,1.00)\",\n                      \"borderBottomColor\": \"rgba(22,163,74,1.00)\",\n                      \"borderBottomLeftRadius\": \"4px\",\n                      \"borderBottomRightRadius\": \"4px\",\n                      \"borderBottomWidth\": \"2px\",\n                      \"borderLeftColor\": \"rgba(22,163,74,1.00)\",\n                      \"borderLeftWidth\": \"2px\",\n                      \"borderRightColor\": \"rgba(22,163,74,1.00)\",\n                      \"borderRightWidth\": \"2px\",\n                      \"borderTopColor\": \"rgba(22,163,74,1.00)\",\n                      \"borderTopLeftRadius\": \"4px\",\n                      \"borderTopRightRadius\": \"4px\",\n                      \"borderTopWidth\": \"2px\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                      \"opacity\": 1,\n                      \"paddingBottom\": \"2px\",\n                      \"paddingLeft\": \"2px\",\n                      \"paddingRight\": \"2px\",\n                      \"paddingTop\": \"2px\",\n                    }\n                  }\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(250,250,250,1.00)\",\n                        \"height\": \"12px\",\n                        \"width\": \"12px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(0,0,0,1.00)\",\n                    \"fontSize\": \"16px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                    \"marginLeft\": \"8px\",\n                  }\n                }\n              >\n                Gardening\n              </div>\n            </div>\n          </label>\n          <label\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              style={\n                Object {\n                  \"border\": 0,\n                  \"clip\": \"rect(0 0 0 0)\",\n                  \"clipPath\": \"inset(50%)\",\n                  \"height\": 1,\n                  \"margin\": \"0 -1px -1px 0\",\n                  \"overflow\": \"hidden\",\n                  \"padding\": 0,\n                  \"position\": \"absolute\",\n                  \"whiteSpace\": \"nowrap\",\n                  \"width\": 1,\n                }\n              }\n            >\n              <input\n                aria-checked={false}\n                checked={false}\n                disabled={false}\n                onBlur={[Function]}\n                onChange={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onKeyUp={[Function]}\n                onMouseDown={[Function]}\n                onMouseEnter={[Function]}\n                onMouseLeave={[Function]}\n                onMouseUp={[Function]}\n                onTouchCancel={[Function]}\n                onTouchEnd={[Function]}\n                onTouchMove={[Function]}\n                onTouchStart={[Function]}\n                readOnly={false}\n                type=\"checkbox\"\n                value=\"Cooking\"\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"start\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"flex-start\",\n                  \"alignItems\": \"center\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"flex-start\",\n                  \"marginBottom\": \"4px\",\n                  \"marginTop\": \"4px\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"start\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                      \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderBottomLeftRadius\": \"4px\",\n                      \"borderBottomRightRadius\": \"4px\",\n                      \"borderBottomWidth\": \"2px\",\n                      \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderLeftWidth\": \"2px\",\n                      \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderRightWidth\": \"2px\",\n                      \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderTopLeftRadius\": \"4px\",\n                      \"borderTopRightRadius\": \"4px\",\n                      \"borderTopWidth\": \"2px\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                      \"opacity\": 1,\n                      \"paddingBottom\": \"2px\",\n                      \"paddingLeft\": \"2px\",\n                      \"paddingRight\": \"2px\",\n                      \"paddingTop\": \"2px\",\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(250,250,250,1.00)\",\n                        \"height\": \"12px\",\n                        \"width\": \"12px\",\n                      }\n                    }\n                  />\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(0,0,0,1.00)\",\n                    \"fontSize\": \"16px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                    \"marginLeft\": \"8px\",\n                  }\n                }\n              >\n                Cooking\n              </div>\n            </div>\n          </label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Checkbox Controlled checkbox 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      aria-label=\"choose numbers\"\n      className=\"css-view-1dbjc4n\"\n      id=\"react-aria-0-1\"\n      role=\"group\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"flex-start\",\n          \"WebkitBoxAlign\": \"start\",\n          \"alignItems\": \"flex-start\",\n          \"msFlexAlign\": \"start\",\n        }\n      }\n    >\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          style={\n            Object {\n              \"border\": 0,\n              \"clip\": \"rect(0 0 0 0)\",\n              \"clipPath\": \"inset(50%)\",\n              \"height\": 1,\n              \"margin\": \"0 -1px -1px 0\",\n              \"overflow\": \"hidden\",\n              \"padding\": 0,\n              \"position\": \"absolute\",\n              \"whiteSpace\": \"nowrap\",\n              \"width\": 1,\n            }\n          }\n        >\n          <input\n            aria-checked={false}\n            checked={false}\n            disabled={false}\n            onBlur={[Function]}\n            onChange={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onKeyUp={[Function]}\n            onMouseDown={[Function]}\n            onMouseEnter={[Function]}\n            onMouseLeave={[Function]}\n            onMouseUp={[Function]}\n            onTouchCancel={[Function]}\n            onTouchEnd={[Function]}\n            onTouchMove={[Function]}\n            onTouchStart={[Function]}\n            readOnly={false}\n            type=\"checkbox\"\n            value=\"one\"\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"start\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"flex-start\",\n              \"alignItems\": \"center\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"marginBottom\": \"8px\",\n              \"marginTop\": \"8px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"start\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                  \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"2px\",\n                  \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderLeftWidth\": \"2px\",\n                  \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderRightWidth\": \"2px\",\n                  \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"2px\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"opacity\": 1,\n                  \"paddingBottom\": \"2px\",\n                  \"paddingLeft\": \"2px\",\n                  \"paddingRight\": \"2px\",\n                  \"paddingTop\": \"2px\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"height\": \"12px\",\n                    \"width\": \"12px\",\n                  }\n                }\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(0,0,0,1.00)\",\n                \"fontSize\": \"16px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginLeft\": \"8px\",\n              }\n            }\n          >\n            UX Research\n          </div>\n        </div>\n      </label>\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          style={\n            Object {\n              \"border\": 0,\n              \"clip\": \"rect(0 0 0 0)\",\n              \"clipPath\": \"inset(50%)\",\n              \"height\": 1,\n              \"margin\": \"0 -1px -1px 0\",\n              \"overflow\": \"hidden\",\n              \"padding\": 0,\n              \"position\": \"absolute\",\n              \"whiteSpace\": \"nowrap\",\n              \"width\": 1,\n            }\n          }\n        >\n          <input\n            aria-checked={false}\n            checked={false}\n            disabled={false}\n            onBlur={[Function]}\n            onChange={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onKeyUp={[Function]}\n            onMouseDown={[Function]}\n            onMouseEnter={[Function]}\n            onMouseLeave={[Function]}\n            onMouseUp={[Function]}\n            onTouchCancel={[Function]}\n            onTouchEnd={[Function]}\n            onTouchMove={[Function]}\n            onTouchStart={[Function]}\n            readOnly={false}\n            type=\"checkbox\"\n            value=\"two\"\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"start\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"flex-start\",\n              \"alignItems\": \"center\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"start\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                  \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"2px\",\n                  \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderLeftWidth\": \"2px\",\n                  \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderRightWidth\": \"2px\",\n                  \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"2px\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"opacity\": 1,\n                  \"paddingBottom\": \"2px\",\n                  \"paddingLeft\": \"2px\",\n                  \"paddingRight\": \"2px\",\n                  \"paddingTop\": \"2px\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"height\": \"12px\",\n                    \"width\": \"12px\",\n                  }\n                }\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(0,0,0,1.00)\",\n                \"fontSize\": \"16px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginLeft\": \"8px\",\n              }\n            }\n          >\n            Software Development\n          </div>\n        </div>\n      </label>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Checkbox Custom Color 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"flex-start\",\n            \"WebkitBoxAlign\": \"start\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"vertical\",\n            \"WebkitFlexDirection\": \"column\",\n            \"alignItems\": \"flex-start\",\n            \"flexDirection\": \"column\",\n            \"msFlexAlign\": \"start\",\n            \"msFlexDirection\": \"column\",\n          }\n        }\n      >\n        <label\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              aria-checked={true}\n              checked={true}\n              disabled={false}\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              type=\"checkbox\"\n              value=\"danger\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"start\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"flex-start\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"start\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(225,29,72,1.00)\",\n                    \"borderBottomColor\": \"rgba(225,29,72,1.00)\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(225,29,72,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(225,29,72,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(225,29,72,1.00)\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": \"2px\",\n                    \"paddingLeft\": \"2px\",\n                    \"paddingRight\": \"2px\",\n                    \"paddingTop\": \"2px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"height\": \"12px\",\n                      \"width\": \"12px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(0,0,0,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginLeft\": \"8px\",\n                }\n              }\n            >\n              Danger\n            </div>\n          </div>\n        </label>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"12px\",\n            }\n          }\n        />\n        <label\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              aria-checked={true}\n              checked={true}\n              disabled={false}\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              type=\"checkbox\"\n              value=\"info\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"start\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"flex-start\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"start\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(2,132,199,1.00)\",\n                    \"borderBottomColor\": \"rgba(2,132,199,1.00)\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(2,132,199,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(2,132,199,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(2,132,199,1.00)\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": \"2px\",\n                    \"paddingLeft\": \"2px\",\n                    \"paddingRight\": \"2px\",\n                    \"paddingTop\": \"2px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"height\": \"12px\",\n                      \"width\": \"12px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(0,0,0,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginLeft\": \"8px\",\n                }\n              }\n            >\n              Info\n            </div>\n          </div>\n        </label>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"12px\",\n            }\n          }\n        />\n        <label\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              aria-checked={true}\n              checked={true}\n              disabled={false}\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              type=\"checkbox\"\n              value=\"orange\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"start\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"flex-start\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"start\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(234,88,12,1.00)\",\n                    \"borderBottomColor\": \"rgba(234,88,12,1.00)\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(234,88,12,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(234,88,12,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(234,88,12,1.00)\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": \"2px\",\n                    \"paddingLeft\": \"2px\",\n                    \"paddingRight\": \"2px\",\n                    \"paddingTop\": \"2px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"height\": \"12px\",\n                      \"width\": \"12px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(0,0,0,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginLeft\": \"8px\",\n                }\n              }\n            >\n              Orange\n            </div>\n          </div>\n        </label>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"12px\",\n            }\n          }\n        />\n        <label\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              aria-checked={true}\n              checked={true}\n              disabled={false}\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              type=\"checkbox\"\n              value=\"purple\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"start\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"flex-start\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"start\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(147,51,234,1.00)\",\n                    \"borderBottomColor\": \"rgba(147,51,234,1.00)\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(147,51,234,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(147,51,234,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(147,51,234,1.00)\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": \"2px\",\n                    \"paddingLeft\": \"2px\",\n                    \"paddingRight\": \"2px\",\n                    \"paddingTop\": \"2px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"height\": \"12px\",\n                      \"width\": \"12px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(0,0,0,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginLeft\": \"8px\",\n                }\n              }\n            >\n              Purple\n            </div>\n          </div>\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Checkbox Custom Icon 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"flex-start\",\n            \"WebkitBoxAlign\": \"start\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"vertical\",\n            \"WebkitFlexDirection\": \"column\",\n            \"alignItems\": \"flex-start\",\n            \"flexDirection\": \"column\",\n            \"msFlexAlign\": \"start\",\n            \"msFlexDirection\": \"column\",\n          }\n        }\n      >\n        <label\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              aria-checked={true}\n              checked={true}\n              disabled={false}\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              type=\"checkbox\"\n              value=\"orange\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"start\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"flex-start\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"start\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(234,88,12,1.00)\",\n                    \"borderBottomColor\": \"rgba(234,88,12,1.00)\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(234,88,12,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(234,88,12,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(234,88,12,1.00)\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": \"2px\",\n                    \"paddingLeft\": \"2px\",\n                    \"paddingRight\": \"2px\",\n                    \"paddingTop\": \"2px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                />\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(0,0,0,1.00)\",\n                  \"fontSize\": \"18px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginLeft\": \"8px\",\n                }\n              }\n            >\n              Darts\n            </div>\n          </div>\n        </label>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"12px\",\n            }\n          }\n        />\n        <label\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              aria-checked={true}\n              checked={true}\n              disabled={false}\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              type=\"checkbox\"\n              value=\"dark\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"start\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"flex-start\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"start\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(212,212,216,1.00)\",\n                    \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": \"2px\",\n                    \"paddingLeft\": \"2px\",\n                    \"paddingRight\": \"2px\",\n                    \"paddingTop\": \"2px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                />\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(0,0,0,1.00)\",\n                  \"fontSize\": \"18px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginLeft\": \"8px\",\n                }\n              }\n            >\n              Movie\n            </div>\n          </div>\n        </label>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"12px\",\n            }\n          }\n        />\n        <label\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              aria-checked={true}\n              checked={true}\n              disabled={false}\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              type=\"checkbox\"\n              value=\"red\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"start\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"flex-start\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"start\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(220,38,38,1.00)\",\n                    \"borderBottomColor\": \"rgba(220,38,38,1.00)\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(220,38,38,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(220,38,38,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(220,38,38,1.00)\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": \"2px\",\n                    \"paddingLeft\": \"2px\",\n                    \"paddingRight\": \"2px\",\n                    \"paddingTop\": \"2px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                />\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(0,0,0,1.00)\",\n                  \"fontSize\": \"18px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginLeft\": \"8px\",\n                }\n              }\n            >\n              Camping\n            </div>\n          </div>\n        </label>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"12px\",\n            }\n          }\n        />\n        <label\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              aria-checked={true}\n              checked={true}\n              disabled={false}\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              type=\"checkbox\"\n              value=\"blue\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"start\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"flex-start\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"start\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(37,99,235,1.00)\",\n                    \"borderBottomColor\": \"rgba(37,99,235,1.00)\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(37,99,235,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(37,99,235,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(37,99,235,1.00)\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": \"2px\",\n                    \"paddingLeft\": \"2px\",\n                    \"paddingRight\": \"2px\",\n                    \"paddingTop\": \"2px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                />\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(0,0,0,1.00)\",\n                  \"fontSize\": \"18px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginLeft\": \"8px\",\n                }\n              }\n            >\n              Chess\n            </div>\n          </div>\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Checkbox Disabled 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n    >\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          style={\n            Object {\n              \"border\": 0,\n              \"clip\": \"rect(0 0 0 0)\",\n              \"clipPath\": \"inset(50%)\",\n              \"height\": 1,\n              \"margin\": \"0 -1px -1px 0\",\n              \"overflow\": \"hidden\",\n              \"padding\": 0,\n              \"position\": \"absolute\",\n              \"whiteSpace\": \"nowrap\",\n              \"width\": 1,\n            }\n          }\n        >\n          <input\n            aria-checked={false}\n            checked={false}\n            disabled={true}\n            onBlur={[Function]}\n            onChange={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onKeyUp={[Function]}\n            onMouseDown={[Function]}\n            onMouseEnter={[Function]}\n            onMouseLeave={[Function]}\n            onMouseUp={[Function]}\n            onTouchCancel={[Function]}\n            onTouchEnd={[Function]}\n            onTouchMove={[Function]}\n            onTouchStart={[Function]}\n            type=\"checkbox\"\n            value=\"one\"\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"start\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"flex-start\",\n              \"alignItems\": \"center\",\n              \"cursor\": \"not-allowed\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"start\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                  \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"2px\",\n                  \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderLeftWidth\": \"2px\",\n                  \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderRightWidth\": \"2px\",\n                  \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"2px\",\n                  \"cursor\": \"not-allowed\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"opacity\": 0.4,\n                  \"paddingBottom\": \"2px\",\n                  \"paddingLeft\": \"2px\",\n                  \"paddingRight\": \"2px\",\n                  \"paddingTop\": \"2px\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"height\": \"12px\",\n                    \"width\": \"12px\",\n                  }\n                }\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(0,0,0,1.00)\",\n                \"fontSize\": \"16px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginLeft\": \"8px\",\n              }\n            }\n          >\n            UX Research\n          </div>\n        </div>\n      </label>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          style={\n            Object {\n              \"border\": 0,\n              \"clip\": \"rect(0 0 0 0)\",\n              \"clipPath\": \"inset(50%)\",\n              \"height\": 1,\n              \"margin\": \"0 -1px -1px 0\",\n              \"overflow\": \"hidden\",\n              \"padding\": 0,\n              \"position\": \"absolute\",\n              \"whiteSpace\": \"nowrap\",\n              \"width\": 1,\n            }\n          }\n        >\n          <input\n            aria-checked={true}\n            checked={true}\n            disabled={true}\n            onBlur={[Function]}\n            onChange={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onKeyUp={[Function]}\n            onMouseDown={[Function]}\n            onMouseEnter={[Function]}\n            onMouseLeave={[Function]}\n            onMouseUp={[Function]}\n            onTouchCancel={[Function]}\n            onTouchEnd={[Function]}\n            onTouchMove={[Function]}\n            onTouchStart={[Function]}\n            type=\"checkbox\"\n            value=\"two\"\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"start\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"flex-start\",\n              \"alignItems\": \"center\",\n              \"cursor\": \"not-allowed\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"start\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderBottomColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"2px\",\n                  \"borderLeftColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderLeftWidth\": \"2px\",\n                  \"borderRightColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderRightWidth\": \"2px\",\n                  \"borderTopColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"2px\",\n                  \"cursor\": \"not-allowed\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"opacity\": 0.4,\n                  \"paddingBottom\": \"2px\",\n                  \"paddingLeft\": \"2px\",\n                  \"paddingRight\": \"2px\",\n                  \"paddingTop\": \"2px\",\n                }\n              }\n            >\n              <svg\n                role=\"img\"\n                stroke=\"\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"height\": \"12px\",\n                    \"width\": \"12px\",\n                  }\n                }\n                viewBox=\"0 0 24 24\"\n              >\n                <g>\n                  <path\n                    d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                    fill=\"currentColor\"\n                    stroke=\"\"\n                  />\n                </g>\n              </svg>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(0,0,0,1.00)\",\n                \"fontSize\": \"16px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginLeft\": \"8px\",\n              }\n            }\n          >\n            Software Development\n          </div>\n        </div>\n      </label>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Checkbox Form Controlled 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"flex-start\",\n            \"WebkitBoxAlign\": \"start\",\n            \"alignItems\": \"flex-start\",\n            \"maxWidth\": \"80%\",\n            \"msFlexAlign\": \"start\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <label\n            className=\"css-view-1dbjc4n\"\n            id=\"field-69-label\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"start\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"flex-start\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n                \"marginBottom\": \"4px\",\n                \"marginTop\": \"4px\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"start\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(115,115,115,1.00)\",\n                  \"fontSize\": \"18px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Preferred contact method\n            </div>\n          </label>\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"16px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            Selected Values: \n          </div>\n          <div\n            aria-label=\"choose multiple items\"\n            className=\"css-view-1dbjc4n\"\n            id=\"react-aria-0-1\"\n            role=\"group\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"flex-start\",\n                \"WebkitBoxAlign\": \"start\",\n                \"alignItems\": \"flex-start\",\n                \"marginTop\": \"8px\",\n                \"msFlexAlign\": \"start\",\n              }\n            }\n          >\n            <label\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                style={\n                  Object {\n                    \"border\": 0,\n                    \"clip\": \"rect(0 0 0 0)\",\n                    \"clipPath\": \"inset(50%)\",\n                    \"height\": 1,\n                    \"margin\": \"0 -1px -1px 0\",\n                    \"overflow\": \"hidden\",\n                    \"padding\": 0,\n                    \"position\": \"absolute\",\n                    \"whiteSpace\": \"nowrap\",\n                    \"width\": 1,\n                  }\n                }\n              >\n                <input\n                  aria-checked={true}\n                  checked={true}\n                  disabled={false}\n                  onBlur={[Function]}\n                  onChange={[Function]}\n                  onClick={[Function]}\n                  onFocus={[Function]}\n                  onKeyDown={[Function]}\n                  onKeyUp={[Function]}\n                  onMouseDown={[Function]}\n                  onMouseEnter={[Function]}\n                  onMouseLeave={[Function]}\n                  onMouseUp={[Function]}\n                  onTouchCancel={[Function]}\n                  onTouchEnd={[Function]}\n                  onTouchMove={[Function]}\n                  onTouchStart={[Function]}\n                  readOnly={false}\n                  required={false}\n                  type=\"checkbox\"\n                  value=\"Phone\"\n                />\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"start\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitJustifyContent\": \"flex-start\",\n                    \"alignItems\": \"center\",\n                    \"cursor\": \"pointer\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"flex-start\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexPack\": \"start\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                  />\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    id=\"field-69\"\n                    style={\n                      Object {\n                        \"WebkitAlignItems\": \"center\",\n                        \"WebkitBoxAlign\": \"center\",\n                        \"WebkitBoxPack\": \"center\",\n                        \"WebkitJustifyContent\": \"center\",\n                        \"alignItems\": \"center\",\n                        \"backgroundColor\": \"rgba(22,163,74,1.00)\",\n                        \"borderBottomColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderBottomLeftRadius\": \"4px\",\n                        \"borderBottomRightRadius\": \"4px\",\n                        \"borderBottomWidth\": \"2px\",\n                        \"borderLeftColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderLeftWidth\": \"2px\",\n                        \"borderRightColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderRightWidth\": \"2px\",\n                        \"borderTopColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderTopLeftRadius\": \"4px\",\n                        \"borderTopRightRadius\": \"4px\",\n                        \"borderTopWidth\": \"2px\",\n                        \"display\": \"flex\",\n                        \"justifyContent\": \"center\",\n                        \"msFlexAlign\": \"center\",\n                        \"msFlexPack\": \"center\",\n                        \"opacity\": 1,\n                        \"paddingBottom\": \"2px\",\n                        \"paddingLeft\": \"2px\",\n                        \"paddingRight\": \"2px\",\n                        \"paddingTop\": \"2px\",\n                      }\n                    }\n                  >\n                    <svg\n                      role=\"img\"\n                      stroke=\"\"\n                      style={\n                        Object {\n                          \"color\": \"rgba(250,250,250,1.00)\",\n                          \"height\": \"12px\",\n                          \"width\": \"12px\",\n                        }\n                      }\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <g>\n                        <path\n                          d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                          fill=\"currentColor\"\n                          stroke=\"\"\n                        />\n                      </g>\n                    </svg>\n                  </div>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(0,0,0,1.00)\",\n                      \"fontSize\": \"16px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"marginLeft\": \"8px\",\n                    }\n                  }\n                >\n                  Phone\n                </div>\n              </div>\n            </label>\n            <label\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                style={\n                  Object {\n                    \"border\": 0,\n                    \"clip\": \"rect(0 0 0 0)\",\n                    \"clipPath\": \"inset(50%)\",\n                    \"height\": 1,\n                    \"margin\": \"0 -1px -1px 0\",\n                    \"overflow\": \"hidden\",\n                    \"padding\": 0,\n                    \"position\": \"absolute\",\n                    \"whiteSpace\": \"nowrap\",\n                    \"width\": 1,\n                  }\n                }\n              >\n                <input\n                  aria-checked={true}\n                  checked={true}\n                  disabled={false}\n                  onBlur={[Function]}\n                  onChange={[Function]}\n                  onClick={[Function]}\n                  onFocus={[Function]}\n                  onKeyDown={[Function]}\n                  onKeyUp={[Function]}\n                  onMouseDown={[Function]}\n                  onMouseEnter={[Function]}\n                  onMouseLeave={[Function]}\n                  onMouseUp={[Function]}\n                  onTouchCancel={[Function]}\n                  onTouchEnd={[Function]}\n                  onTouchMove={[Function]}\n                  onTouchStart={[Function]}\n                  readOnly={false}\n                  required={false}\n                  type=\"checkbox\"\n                  value=\"Email\"\n                />\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"start\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitJustifyContent\": \"flex-start\",\n                    \"alignItems\": \"center\",\n                    \"cursor\": \"pointer\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"flex-start\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexPack\": \"start\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                  />\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    id=\"field-69\"\n                    style={\n                      Object {\n                        \"WebkitAlignItems\": \"center\",\n                        \"WebkitBoxAlign\": \"center\",\n                        \"WebkitBoxPack\": \"center\",\n                        \"WebkitJustifyContent\": \"center\",\n                        \"alignItems\": \"center\",\n                        \"backgroundColor\": \"rgba(22,163,74,1.00)\",\n                        \"borderBottomColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderBottomLeftRadius\": \"4px\",\n                        \"borderBottomRightRadius\": \"4px\",\n                        \"borderBottomWidth\": \"2px\",\n                        \"borderLeftColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderLeftWidth\": \"2px\",\n                        \"borderRightColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderRightWidth\": \"2px\",\n                        \"borderTopColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderTopLeftRadius\": \"4px\",\n                        \"borderTopRightRadius\": \"4px\",\n                        \"borderTopWidth\": \"2px\",\n                        \"display\": \"flex\",\n                        \"justifyContent\": \"center\",\n                        \"msFlexAlign\": \"center\",\n                        \"msFlexPack\": \"center\",\n                        \"opacity\": 1,\n                        \"paddingBottom\": \"2px\",\n                        \"paddingLeft\": \"2px\",\n                        \"paddingRight\": \"2px\",\n                        \"paddingTop\": \"2px\",\n                      }\n                    }\n                  >\n                    <svg\n                      role=\"img\"\n                      stroke=\"\"\n                      style={\n                        Object {\n                          \"color\": \"rgba(250,250,250,1.00)\",\n                          \"height\": \"12px\",\n                          \"width\": \"12px\",\n                        }\n                      }\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <g>\n                        <path\n                          d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                          fill=\"currentColor\"\n                          stroke=\"\"\n                        />\n                      </g>\n                    </svg>\n                  </div>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(0,0,0,1.00)\",\n                      \"fontSize\": \"16px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"marginLeft\": \"8px\",\n                    }\n                  }\n                >\n                  Email\n                </div>\n              </div>\n            </label>\n            <label\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                style={\n                  Object {\n                    \"border\": 0,\n                    \"clip\": \"rect(0 0 0 0)\",\n                    \"clipPath\": \"inset(50%)\",\n                    \"height\": 1,\n                    \"margin\": \"0 -1px -1px 0\",\n                    \"overflow\": \"hidden\",\n                    \"padding\": 0,\n                    \"position\": \"absolute\",\n                    \"whiteSpace\": \"nowrap\",\n                    \"width\": 1,\n                  }\n                }\n              >\n                <input\n                  aria-checked={false}\n                  checked={false}\n                  disabled={false}\n                  onBlur={[Function]}\n                  onChange={[Function]}\n                  onClick={[Function]}\n                  onFocus={[Function]}\n                  onKeyDown={[Function]}\n                  onKeyUp={[Function]}\n                  onMouseDown={[Function]}\n                  onMouseEnter={[Function]}\n                  onMouseLeave={[Function]}\n                  onMouseUp={[Function]}\n                  onTouchCancel={[Function]}\n                  onTouchEnd={[Function]}\n                  onTouchMove={[Function]}\n                  onTouchStart={[Function]}\n                  readOnly={false}\n                  required={false}\n                  type=\"checkbox\"\n                  value=\"Message\"\n                />\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"start\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitJustifyContent\": \"flex-start\",\n                    \"alignItems\": \"center\",\n                    \"cursor\": \"pointer\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"flex-start\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexPack\": \"start\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                  />\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    id=\"field-69\"\n                    style={\n                      Object {\n                        \"WebkitAlignItems\": \"center\",\n                        \"WebkitBoxAlign\": \"center\",\n                        \"WebkitBoxPack\": \"center\",\n                        \"WebkitJustifyContent\": \"center\",\n                        \"alignItems\": \"center\",\n                        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                        \"borderBottomColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderBottomLeftRadius\": \"4px\",\n                        \"borderBottomRightRadius\": \"4px\",\n                        \"borderBottomWidth\": \"2px\",\n                        \"borderLeftColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderLeftWidth\": \"2px\",\n                        \"borderRightColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderRightWidth\": \"2px\",\n                        \"borderTopColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderTopLeftRadius\": \"4px\",\n                        \"borderTopRightRadius\": \"4px\",\n                        \"borderTopWidth\": \"2px\",\n                        \"display\": \"flex\",\n                        \"justifyContent\": \"center\",\n                        \"msFlexAlign\": \"center\",\n                        \"msFlexPack\": \"center\",\n                        \"opacity\": 1,\n                        \"paddingBottom\": \"2px\",\n                        \"paddingLeft\": \"2px\",\n                        \"paddingRight\": \"2px\",\n                        \"paddingTop\": \"2px\",\n                      }\n                    }\n                  >\n                    <div\n                      className=\"css-view-1dbjc4n\"\n                      style={\n                        Object {\n                          \"color\": \"rgba(250,250,250,1.00)\",\n                          \"height\": \"12px\",\n                          \"width\": \"12px\",\n                        }\n                      }\n                    />\n                  </div>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(0,0,0,1.00)\",\n                      \"fontSize\": \"16px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"marginLeft\": \"8px\",\n                    }\n                  }\n                >\n                  Message\n                </div>\n              </div>\n            </label>\n            <label\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                style={\n                  Object {\n                    \"border\": 0,\n                    \"clip\": \"rect(0 0 0 0)\",\n                    \"clipPath\": \"inset(50%)\",\n                    \"height\": 1,\n                    \"margin\": \"0 -1px -1px 0\",\n                    \"overflow\": \"hidden\",\n                    \"padding\": 0,\n                    \"position\": \"absolute\",\n                    \"whiteSpace\": \"nowrap\",\n                    \"width\": 1,\n                  }\n                }\n              >\n                <input\n                  aria-checked={false}\n                  checked={false}\n                  disabled={false}\n                  onBlur={[Function]}\n                  onChange={[Function]}\n                  onClick={[Function]}\n                  onFocus={[Function]}\n                  onKeyDown={[Function]}\n                  onKeyUp={[Function]}\n                  onMouseDown={[Function]}\n                  onMouseEnter={[Function]}\n                  onMouseLeave={[Function]}\n                  onMouseUp={[Function]}\n                  onTouchCancel={[Function]}\n                  onTouchEnd={[Function]}\n                  onTouchMove={[Function]}\n                  onTouchStart={[Function]}\n                  readOnly={false}\n                  required={false}\n                  type=\"checkbox\"\n                  value=\"Fax\"\n                />\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"start\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitJustifyContent\": \"flex-start\",\n                    \"alignItems\": \"center\",\n                    \"cursor\": \"pointer\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"flex-start\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexPack\": \"start\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                  />\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    id=\"field-69\"\n                    style={\n                      Object {\n                        \"WebkitAlignItems\": \"center\",\n                        \"WebkitBoxAlign\": \"center\",\n                        \"WebkitBoxPack\": \"center\",\n                        \"WebkitJustifyContent\": \"center\",\n                        \"alignItems\": \"center\",\n                        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                        \"borderBottomColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderBottomLeftRadius\": \"4px\",\n                        \"borderBottomRightRadius\": \"4px\",\n                        \"borderBottomWidth\": \"2px\",\n                        \"borderLeftColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderLeftWidth\": \"2px\",\n                        \"borderRightColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderRightWidth\": \"2px\",\n                        \"borderTopColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderTopLeftRadius\": \"4px\",\n                        \"borderTopRightRadius\": \"4px\",\n                        \"borderTopWidth\": \"2px\",\n                        \"display\": \"flex\",\n                        \"justifyContent\": \"center\",\n                        \"msFlexAlign\": \"center\",\n                        \"msFlexPack\": \"center\",\n                        \"opacity\": 1,\n                        \"paddingBottom\": \"2px\",\n                        \"paddingLeft\": \"2px\",\n                        \"paddingRight\": \"2px\",\n                        \"paddingTop\": \"2px\",\n                      }\n                    }\n                  >\n                    <div\n                      className=\"css-view-1dbjc4n\"\n                      style={\n                        Object {\n                          \"color\": \"rgba(250,250,250,1.00)\",\n                          \"height\": \"12px\",\n                          \"width\": \"12px\",\n                        }\n                      }\n                    />\n                  </div>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(0,0,0,1.00)\",\n                      \"fontSize\": \"16px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"marginLeft\": \"8px\",\n                    }\n                  }\n                >\n                  Fax\n                </div>\n              </div>\n            </label>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            id=\"field-69\"\n            style={\n              Object {\n                \"marginTop\": \"8px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"flex-start\",\n                  \"WebkitBoxAlign\": \"start\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"flex-start\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"start\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <svg\n                role=\"img\"\n                stroke=\"\"\n                style={\n                  Object {\n                    \"color\": \"rgba(220,38,38,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"height\": \"12px\",\n                    \"marginTop\": \"4px\",\n                    \"width\": \"12px\",\n                  }\n                }\n                viewBox=\"0 0 16 16\"\n              >\n                <g>\n                  <path\n                    d=\"M8 16C6.41775 16 4.87103 15.5308 3.55544 14.6518C2.23985 13.7727 1.21447 12.5233 0.608967 11.0615C0.00346627 9.59966 -0.15496 7.99113 0.153721 6.43928C0.462403 4.88743 1.22433 3.46197 2.34315 2.34315C3.46197 1.22433 4.88743 0.462403 6.43928 0.153721C7.99113 -0.15496 9.59966 0.00346627 11.0615 0.608967C12.5233 1.21447 13.7727 2.23985 14.6518 3.55544C15.5308 4.87103 16 6.41775 16 8C16 10.1217 15.1571 12.1566 13.6569 13.6569C12.1566 15.1571 10.1217 16 8 16ZM8 14.4C9.2658 14.4 10.5032 14.0246 11.5556 13.3214C12.6081 12.6182 13.4284 11.6186 13.9128 10.4492C14.3972 9.27973 14.524 7.9929 14.277 6.75142C14.0301 5.50995 13.4205 4.36958 12.5255 3.47452C11.6304 2.57946 10.4901 1.96992 9.24858 1.72298C8.0071 1.47603 6.72028 1.60277 5.55083 2.08717C4.38138 2.57158 3.38184 3.39188 2.6786 4.44435C1.97536 5.49683 1.6 6.7342 1.6 8C1.6 9.69739 2.27429 11.3253 3.47452 12.5255C4.67475 13.7257 6.30262 14.4 8 14.4ZM7.2 10.4H8.8V12H7.2V10.4ZM7.2 4H8.8V8.8H7.2V4Z\"\n                    fill=\"currentColor\"\n                    stroke=\"\"\n                  />\n                </g>\n              </svg>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"4px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(220,38,38,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                You must select at least three methods\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Checkbox Invalid 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <label\n      className=\"css-view-1dbjc4n\"\n    >\n      <div\n        style={\n          Object {\n            \"border\": 0,\n            \"clip\": \"rect(0 0 0 0)\",\n            \"clipPath\": \"inset(50%)\",\n            \"height\": 1,\n            \"margin\": \"0 -1px -1px 0\",\n            \"overflow\": \"hidden\",\n            \"padding\": 0,\n            \"position\": \"absolute\",\n            \"whiteSpace\": \"nowrap\",\n            \"width\": 1,\n          }\n        }\n      >\n        <input\n          aria-checked={false}\n          checked={false}\n          disabled={false}\n          onBlur={[Function]}\n          onChange={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onKeyUp={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          onMouseUp={[Function]}\n          onTouchCancel={[Function]}\n          onTouchEnd={[Function]}\n          onTouchMove={[Function]}\n          onTouchStart={[Function]}\n          type=\"checkbox\"\n          value=\"invalid\"\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"start\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"flex-start\",\n            \"alignItems\": \"center\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"flex-start\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"start\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                \"borderBottomColor\": \"rgba(220,38,38,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderBottomWidth\": \"2px\",\n                \"borderLeftColor\": \"rgba(220,38,38,1.00)\",\n                \"borderLeftWidth\": \"2px\",\n                \"borderRightColor\": \"rgba(220,38,38,1.00)\",\n                \"borderRightWidth\": \"2px\",\n                \"borderTopColor\": \"rgba(220,38,38,1.00)\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"borderTopWidth\": \"2px\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"opacity\": 1,\n                \"paddingBottom\": \"2px\",\n                \"paddingLeft\": \"2px\",\n                \"paddingRight\": \"2px\",\n                \"paddingTop\": \"2px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"height\": \"12px\",\n                  \"width\": \"12px\",\n                }\n              }\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"width\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(0,0,0,1.00)\",\n              \"fontSize\": \"16px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n              \"marginLeft\": \"8px\",\n            }\n          }\n        >\n          Software Development\n        </div>\n      </div>\n    </label>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Checkbox Playground 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"justify\",\n          \"WebkitJustifyContent\": \"space-between\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"space-between\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"justify\",\n        }\n      }\n    >\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          style={\n            Object {\n              \"border\": 0,\n              \"clip\": \"rect(0 0 0 0)\",\n              \"clipPath\": \"inset(50%)\",\n              \"height\": 1,\n              \"margin\": \"0 -1px -1px 0\",\n              \"overflow\": \"hidden\",\n              \"padding\": 0,\n              \"position\": \"absolute\",\n              \"whiteSpace\": \"nowrap\",\n              \"width\": 1,\n            }\n          }\n        >\n          <input\n            aria-checked={true}\n            checked={true}\n            disabled={false}\n            onBlur={[Function]}\n            onChange={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onKeyUp={[Function]}\n            onMouseDown={[Function]}\n            onMouseEnter={[Function]}\n            onMouseLeave={[Function]}\n            onMouseUp={[Function]}\n            onTouchCancel={[Function]}\n            onTouchEnd={[Function]}\n            onTouchMove={[Function]}\n            onTouchStart={[Function]}\n            type=\"checkbox\"\n            value=\"Cool\"\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"start\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"flex-start\",\n              \"alignItems\": \"center\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"start\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderBottomColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"2px\",\n                  \"borderLeftColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderLeftWidth\": \"2px\",\n                  \"borderRightColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderRightWidth\": \"2px\",\n                  \"borderTopColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"2px\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"opacity\": 1,\n                  \"paddingBottom\": \"2px\",\n                  \"paddingLeft\": \"2px\",\n                  \"paddingRight\": \"2px\",\n                  \"paddingTop\": \"2px\",\n                }\n              }\n            >\n              <svg\n                role=\"img\"\n                stroke=\"\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"height\": \"16px\",\n                    \"width\": \"16px\",\n                  }\n                }\n                viewBox=\"0 0 24 24\"\n              >\n                <g>\n                  <path\n                    d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                    fill=\"currentColor\"\n                    stroke=\"\"\n                  />\n                </g>\n              </svg>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(0,0,0,1.00)\",\n                \"fontSize\": \"18px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginLeft\": \"8px\",\n              }\n            }\n          >\n            Yes\n          </div>\n        </div>\n      </label>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Checkbox Size 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n      >\n        <label\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              aria-checked={true}\n              checked={true}\n              disabled={false}\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              type=\"checkbox\"\n              value=\"red\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"start\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"flex-start\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"start\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderBottomColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": \"2px\",\n                    \"paddingLeft\": \"2px\",\n                    \"paddingRight\": \"2px\",\n                    \"paddingTop\": \"2px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"height\": \"12px\",\n                      \"width\": \"12px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(0,0,0,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginLeft\": \"8px\",\n                }\n              }\n            >\n              UX Research\n            </div>\n          </div>\n        </label>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"12px\",\n            }\n          }\n        />\n        <label\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              aria-checked={true}\n              checked={true}\n              disabled={false}\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              type=\"checkbox\"\n              value=\"green\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"start\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"flex-start\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"start\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderBottomColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": \"2px\",\n                    \"paddingLeft\": \"2px\",\n                    \"paddingRight\": \"2px\",\n                    \"paddingTop\": \"2px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"height\": \"16px\",\n                      \"width\": \"16px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(0,0,0,1.00)\",\n                  \"fontSize\": \"18px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginLeft\": \"8px\",\n                }\n              }\n            >\n              UX Research\n            </div>\n          </div>\n        </label>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"12px\",\n            }\n          }\n        />\n        <label\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              aria-checked={true}\n              checked={true}\n              disabled={false}\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              type=\"checkbox\"\n              value=\"yellow\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"start\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"flex-start\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"start\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderBottomColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"opacity\": 1,\n                    \"paddingBottom\": \"2px\",\n                    \"paddingLeft\": \"2px\",\n                    \"paddingRight\": \"2px\",\n                    \"paddingTop\": \"2px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"height\": \"20px\",\n                      \"width\": \"20px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(0,0,0,1.00)\",\n                  \"fontSize\": \"20px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginLeft\": \"8px\",\n                }\n              }\n            >\n              UX Research\n            </div>\n          </div>\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Checkbox Uncontrolled checkbox 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      aria-label=\"choose values\"\n      className=\"css-view-1dbjc4n\"\n      id=\"react-aria-0-1\"\n      role=\"group\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"flex-start\",\n          \"WebkitBoxAlign\": \"start\",\n          \"alignItems\": \"flex-start\",\n          \"msFlexAlign\": \"start\",\n        }\n      }\n    >\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          style={\n            Object {\n              \"border\": 0,\n              \"clip\": \"rect(0 0 0 0)\",\n              \"clipPath\": \"inset(50%)\",\n              \"height\": 1,\n              \"margin\": \"0 -1px -1px 0\",\n              \"overflow\": \"hidden\",\n              \"padding\": 0,\n              \"position\": \"absolute\",\n              \"whiteSpace\": \"nowrap\",\n              \"width\": 1,\n            }\n          }\n        >\n          <input\n            aria-checked={false}\n            checked={false}\n            disabled={false}\n            onBlur={[Function]}\n            onChange={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onKeyUp={[Function]}\n            onMouseDown={[Function]}\n            onMouseEnter={[Function]}\n            onMouseLeave={[Function]}\n            onMouseUp={[Function]}\n            onTouchCancel={[Function]}\n            onTouchEnd={[Function]}\n            onTouchMove={[Function]}\n            onTouchStart={[Function]}\n            readOnly={false}\n            type=\"checkbox\"\n            value=\"one\"\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"start\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"flex-start\",\n              \"alignItems\": \"center\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"marginBottom\": \"8px\",\n              \"marginTop\": \"8px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"start\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                  \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"2px\",\n                  \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderLeftWidth\": \"2px\",\n                  \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderRightWidth\": \"2px\",\n                  \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"2px\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"opacity\": 1,\n                  \"paddingBottom\": \"2px\",\n                  \"paddingLeft\": \"2px\",\n                  \"paddingRight\": \"2px\",\n                  \"paddingTop\": \"2px\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"height\": \"12px\",\n                    \"width\": \"12px\",\n                  }\n                }\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(0,0,0,1.00)\",\n                \"fontSize\": \"16px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginLeft\": \"8px\",\n              }\n            }\n          >\n            UX Research\n          </div>\n        </div>\n      </label>\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          style={\n            Object {\n              \"border\": 0,\n              \"clip\": \"rect(0 0 0 0)\",\n              \"clipPath\": \"inset(50%)\",\n              \"height\": 1,\n              \"margin\": \"0 -1px -1px 0\",\n              \"overflow\": \"hidden\",\n              \"padding\": 0,\n              \"position\": \"absolute\",\n              \"whiteSpace\": \"nowrap\",\n              \"width\": 1,\n            }\n          }\n        >\n          <input\n            aria-checked={false}\n            checked={false}\n            disabled={false}\n            onBlur={[Function]}\n            onChange={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onKeyUp={[Function]}\n            onMouseDown={[Function]}\n            onMouseEnter={[Function]}\n            onMouseLeave={[Function]}\n            onMouseUp={[Function]}\n            onTouchCancel={[Function]}\n            onTouchEnd={[Function]}\n            onTouchMove={[Function]}\n            onTouchStart={[Function]}\n            readOnly={false}\n            type=\"checkbox\"\n            value=\"two\"\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"start\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"flex-start\",\n              \"alignItems\": \"center\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"start\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                  \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"2px\",\n                  \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderLeftWidth\": \"2px\",\n                  \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderRightWidth\": \"2px\",\n                  \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"2px\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"opacity\": 1,\n                  \"paddingBottom\": \"2px\",\n                  \"paddingLeft\": \"2px\",\n                  \"paddingRight\": \"2px\",\n                  \"paddingTop\": \"2px\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"height\": \"12px\",\n                    \"width\": \"12px\",\n                  }\n                }\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(0,0,0,1.00)\",\n                \"fontSize\": \"16px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginLeft\": \"8px\",\n              }\n            }\n          >\n            Software Development\n          </div>\n        </div>\n      </label>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Checkbox With Ref 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"flex-start\",\n          \"WebkitBoxAlign\": \"start\",\n          \"alignItems\": \"flex-start\",\n          \"msFlexAlign\": \"start\",\n        }\n      }\n    >\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          style={\n            Object {\n              \"border\": 0,\n              \"clip\": \"rect(0 0 0 0)\",\n              \"clipPath\": \"inset(50%)\",\n              \"height\": 1,\n              \"margin\": \"0 -1px -1px 0\",\n              \"overflow\": \"hidden\",\n              \"padding\": 0,\n              \"position\": \"absolute\",\n              \"whiteSpace\": \"nowrap\",\n              \"width\": 1,\n            }\n          }\n        >\n          <input\n            aria-checked={false}\n            checked={false}\n            disabled={false}\n            onBlur={[Function]}\n            onChange={[Function]}\n            onClick={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onKeyUp={[Function]}\n            onMouseDown={[Function]}\n            onMouseEnter={[Function]}\n            onMouseLeave={[Function]}\n            onMouseUp={[Function]}\n            onTouchCancel={[Function]}\n            onTouchEnd={[Function]}\n            onTouchMove={[Function]}\n            onTouchStart={[Function]}\n            type=\"checkbox\"\n            value=\"success\"\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"start\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"flex-start\",\n              \"alignItems\": \"center\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"start\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                  \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"2px\",\n                  \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderLeftWidth\": \"2px\",\n                  \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderRightWidth\": \"2px\",\n                  \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"2px\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"opacity\": 1,\n                  \"paddingBottom\": \"2px\",\n                  \"paddingLeft\": \"2px\",\n                  \"paddingRight\": \"2px\",\n                  \"paddingTop\": \"2px\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"height\": \"12px\",\n                    \"width\": \"12px\",\n                  }\n                }\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(0,0,0,1.00)\",\n                \"fontSize\": \"16px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginLeft\": \"8px\",\n              }\n            }\n          >\n            Archery\n          </div>\n        </div>\n      </label>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Column Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"backgroundColor\": \"rgba(34,197,94,1.00)\",\n            \"height\": \"100px\",\n            \"width\": \"100px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"backgroundColor\": \"rgba(147,197,253,1.00)\",\n            \"height\": \"100px\",\n            \"width\": \"100px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"backgroundColor\": \"rgba(255,99,71,1.00)\",\n            \"height\": \"100px\",\n            \"width\": \"100px\",\n          }\n        }\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Container Playground 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"maxWidth\": \"80%\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"24px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n          }\n        }\n      >\n        Benefits to a joint design and development system\n      </div>\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        There are many benefits to a joint design and development system. Not only does it bring benefits to the design team, but it also brings benefits to engineering teams. It makes sure that our experiences have a consistent look and feel, not just in our design specs, but in production\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Container Usage 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"flex-start\",\n            \"WebkitBoxAlign\": \"start\",\n            \"alignItems\": \"flex-start\",\n            \"maxWidth\": \"80%\",\n            \"msFlexAlign\": \"start\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"24px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.25em\",\n            }\n          }\n        >\n          A component library for the\n          <span\n            className=\"css-text-901oao css-textHasAncestor-16my406\"\n            style={\n              Object {\n                \"color\": \"rgba(16,185,129,1.00)\",\n              }\n            }\n          >\n             React Ecosystem\n          </span>\n        </div>\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"500\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n              \"marginTop\": \"12px\",\n            }\n          }\n        >\n          NativeBase is a simple, modular and accessible component library that gives you building blocks to build you React applications.\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Custom Theme Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n      }\n    }\n  >\n    <div\n      className=\"css-text-901oao\"\n      dir=\"auto\"\n      style={\n        Object {\n          \"color\": \"rgba(255,119,204,1.00)\",\n          \"fontSize\": \"24px\",\n          \"fontStyle\": \"normal\",\n          \"fontWeight\": \"700\",\n          \"letterSpacing\": \"0px\",\n          \"lineHeight\": \"1.25em\",\n        }\n      }\n    >\n       I'm a Heading\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n    />\n    <div\n      className=\"css-text-901oao\"\n      dir=\"auto\"\n      style={\n        Object {\n          \"color\": \"rgba(17,170,204,1.00)\",\n          \"fontSize\": \"24px\",\n          \"fontStyle\": \"normal\",\n          \"fontWeight\": \"700\",\n          \"letterSpacing\": \"0px\",\n          \"lineHeight\": \"1.25em\",\n        }\n      }\n    >\n       I'm a Heading\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Custom Theme CustomizingBase 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"display\": \"flex\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n      }\n    }\n  >\n    <div\n      className=\"css-text-901oao\"\n      dir=\"auto\"\n      style={\n        Object {\n          \"color\": \"rgba(52,211,153,1.00)\",\n          \"fontSize\": \"32px\",\n          \"fontStyle\": \"normal\",\n          \"fontWeight\": \"400\",\n          \"letterSpacing\": \"0px\",\n          \"lineHeight\": \"1.5em\",\n        }\n      }\n    >\n      NativeBase\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Custom Theme CustomizingComponents 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(31,41,55,1.00)\",\n        \"display\": \"flex\",\n        \"height\": \"100%\",\n        \"justifyContent\": \"center\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n      }\n    }\n  >\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitFlex\": 1,\n          \"flex\": 1,\n          \"msFlex\": \"1 1 0%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlex\": 1,\n            \"WebkitJustifyContent\": \"center\",\n            \"flex\": 1,\n            \"justifyContent\": \"center\",\n            \"marginBottom\": \"16px\",\n            \"marginTop\": \"16px\",\n            \"msFlex\": \"1 1 0%\",\n            \"msFlexPack\": \"center\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"color\": \"rgba(250,250,249,1.00)\",\n              \"fontSize\": \"24px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"justifyContent\": \"center\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.25em\",\n              \"marginBottom\": \"4px\",\n              \"msFlexPack\": \"center\",\n            }\n          }\n        >\n          Inbox\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"borderBottomColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"6px\",\n              \"borderBottomRightRadius\": \"6px\",\n              \"borderLeftColor\": \"rgba(250,250,250,1.00)\",\n              \"borderRightColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopLeftRadius\": \"6px\",\n              \"borderTopRightRadius\": \"6px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"justify\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"space-between\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"space-between\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"justify\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n                    \"borderBottomColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderBottomLeftRadius\": \"6px\",\n                    \"borderBottomRightRadius\": \"6px\",\n                    \"borderLeftColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderRightColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderTopColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderTopLeftRadius\": \"6px\",\n                    \"borderTopRightRadius\": \"6px\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"marginRight\": \"16px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"position\": \"relative\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  aria-label=\"--\"\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitFlexBasis\": \"auto\",\n                      \"borderBottomLeftRadius\": \"9999px\",\n                      \"borderBottomRightRadius\": \"9999px\",\n                      \"borderTopLeftRadius\": \"9999px\",\n                      \"borderTopRightRadius\": \"9999px\",\n                      \"flexBasis\": \"auto\",\n                      \"height\": \"100%\",\n                      \"maxWidth\": \"100%\",\n                      \"msFlexPreferredSize\": \"auto\",\n                      \"overflowX\": \"hidden\",\n                      \"overflowY\": \"hidden\",\n                      \"width\": \"100%\",\n                      \"zIndex\": 0,\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                        \"backgroundPosition\": \"center\",\n                        \"backgroundRepeat\": \"no-repeat\",\n                        \"backgroundSize\": \"cover\",\n                        \"bottom\": \"0px\",\n                        \"height\": \"100%\",\n                        \"left\": \"0px\",\n                        \"position\": \"absolute\",\n                        \"right\": \"0px\",\n                        \"top\": \"0px\",\n                        \"width\": \"100%\",\n                        \"zIndex\": -1,\n                      }\n                    }\n                    suppressHydrationWarning={true}\n                  />\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontSize\": \"20px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"500\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.25em\",\n                    }\n                  }\n                >\n                  Ankur\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(231,229,228,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Software Engineer\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"borderBottomColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"6px\",\n              \"borderBottomRightRadius\": \"6px\",\n              \"borderLeftColor\": \"rgba(250,250,250,1.00)\",\n              \"borderRightColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopLeftRadius\": \"6px\",\n              \"borderTopRightRadius\": \"6px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"justify\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"space-between\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"space-between\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"justify\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n                    \"borderBottomColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderBottomLeftRadius\": \"6px\",\n                    \"borderBottomRightRadius\": \"6px\",\n                    \"borderLeftColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderRightColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderTopColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderTopLeftRadius\": \"6px\",\n                    \"borderTopRightRadius\": \"6px\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"marginRight\": \"16px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"position\": \"relative\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  aria-label=\"--\"\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitFlexBasis\": \"auto\",\n                      \"borderBottomLeftRadius\": \"9999px\",\n                      \"borderBottomRightRadius\": \"9999px\",\n                      \"borderTopLeftRadius\": \"9999px\",\n                      \"borderTopRightRadius\": \"9999px\",\n                      \"flexBasis\": \"auto\",\n                      \"height\": \"100%\",\n                      \"maxWidth\": \"100%\",\n                      \"msFlexPreferredSize\": \"auto\",\n                      \"overflowX\": \"hidden\",\n                      \"overflowY\": \"hidden\",\n                      \"width\": \"100%\",\n                      \"zIndex\": 0,\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                        \"backgroundPosition\": \"center\",\n                        \"backgroundRepeat\": \"no-repeat\",\n                        \"backgroundSize\": \"cover\",\n                        \"bottom\": \"0px\",\n                        \"height\": \"100%\",\n                        \"left\": \"0px\",\n                        \"position\": \"absolute\",\n                        \"right\": \"0px\",\n                        \"top\": \"0px\",\n                        \"width\": \"100%\",\n                        \"zIndex\": -1,\n                      }\n                    }\n                    suppressHydrationWarning={true}\n                  />\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontSize\": \"20px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"500\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.25em\",\n                    }\n                  }\n                >\n                  Rehman\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(231,229,228,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Software Engineer\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"borderBottomColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"6px\",\n              \"borderBottomRightRadius\": \"6px\",\n              \"borderLeftColor\": \"rgba(250,250,250,1.00)\",\n              \"borderRightColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopLeftRadius\": \"6px\",\n              \"borderTopRightRadius\": \"6px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"justify\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"space-between\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"space-between\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"justify\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n                    \"borderBottomColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderBottomLeftRadius\": \"6px\",\n                    \"borderBottomRightRadius\": \"6px\",\n                    \"borderLeftColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderRightColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderTopColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderTopLeftRadius\": \"6px\",\n                    \"borderTopRightRadius\": \"6px\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"marginRight\": \"16px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"position\": \"relative\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  aria-label=\"--\"\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitFlexBasis\": \"auto\",\n                      \"borderBottomLeftRadius\": \"9999px\",\n                      \"borderBottomRightRadius\": \"9999px\",\n                      \"borderTopLeftRadius\": \"9999px\",\n                      \"borderTopRightRadius\": \"9999px\",\n                      \"flexBasis\": \"auto\",\n                      \"height\": \"100%\",\n                      \"maxWidth\": \"100%\",\n                      \"msFlexPreferredSize\": \"auto\",\n                      \"overflowX\": \"hidden\",\n                      \"overflowY\": \"hidden\",\n                      \"width\": \"100%\",\n                      \"zIndex\": 0,\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                        \"backgroundPosition\": \"center\",\n                        \"backgroundRepeat\": \"no-repeat\",\n                        \"backgroundSize\": \"cover\",\n                        \"bottom\": \"0px\",\n                        \"height\": \"100%\",\n                        \"left\": \"0px\",\n                        \"position\": \"absolute\",\n                        \"right\": \"0px\",\n                        \"top\": \"0px\",\n                        \"width\": \"100%\",\n                        \"zIndex\": -1,\n                      }\n                    }\n                    suppressHydrationWarning={true}\n                  />\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontSize\": \"20px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"500\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.25em\",\n                    }\n                  }\n                >\n                  Rohit\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(231,229,228,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Software Engineer\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n            }\n          }\n        >\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginTop\": \"16px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Change mode\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Custom Theme CustomizingTheme 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(31,41,55,1.00)\",\n        \"display\": \"flex\",\n        \"height\": \"100%\",\n        \"justifyContent\": \"center\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n      }\n    }\n  >\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitFlex\": 1,\n          \"flex\": 1,\n          \"msFlex\": \"1 1 0%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlex\": 1,\n            \"WebkitJustifyContent\": \"center\",\n            \"flex\": 1,\n            \"justifyContent\": \"center\",\n            \"marginBottom\": \"16px\",\n            \"marginTop\": \"16px\",\n            \"msFlex\": \"1 1 0%\",\n            \"msFlexPack\": \"center\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"color\": \"rgba(250,250,249,1.00)\",\n              \"fontFamily\": \"monospace,monospace\",\n              \"fontSize\": \"24px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"justifyContent\": \"center\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.25em\",\n              \"marginBottom\": \"4px\",\n              \"msFlexPack\": \"center\",\n            }\n          }\n        >\n          Inbox\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"borderBottomColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"6px\",\n              \"borderBottomRightRadius\": \"6px\",\n              \"borderLeftColor\": \"rgba(250,250,250,1.00)\",\n              \"borderRightColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopLeftRadius\": \"6px\",\n              \"borderTopRightRadius\": \"6px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"justify\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"space-between\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"space-between\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"justify\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n                    \"borderBottomColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderLeftColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderRightColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderTopColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"marginRight\": \"16px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"position\": \"relative\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  aria-label=\"--\"\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitFlexBasis\": \"auto\",\n                      \"borderBottomLeftRadius\": \"9999px\",\n                      \"borderBottomRightRadius\": \"9999px\",\n                      \"borderTopLeftRadius\": \"9999px\",\n                      \"borderTopRightRadius\": \"9999px\",\n                      \"flexBasis\": \"auto\",\n                      \"height\": \"100%\",\n                      \"maxWidth\": \"100%\",\n                      \"msFlexPreferredSize\": \"auto\",\n                      \"overflowX\": \"hidden\",\n                      \"overflowY\": \"hidden\",\n                      \"width\": \"100%\",\n                      \"zIndex\": 0,\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                        \"backgroundPosition\": \"center\",\n                        \"backgroundRepeat\": \"no-repeat\",\n                        \"backgroundSize\": \"cover\",\n                        \"bottom\": \"0px\",\n                        \"height\": \"100%\",\n                        \"left\": \"0px\",\n                        \"position\": \"absolute\",\n                        \"right\": \"0px\",\n                        \"top\": \"0px\",\n                        \"width\": \"100%\",\n                        \"zIndex\": -1,\n                      }\n                    }\n                    suppressHydrationWarning={true}\n                  />\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontFamily\": \"monospace,monospace\",\n                      \"fontSize\": \"20px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"500\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.25em\",\n                    }\n                  }\n                >\n                  Ankur\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(231,229,228,1.00)\",\n                      \"fontFamily\": \"monospace,monospace\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Software Engineer\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"borderBottomColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"6px\",\n              \"borderBottomRightRadius\": \"6px\",\n              \"borderLeftColor\": \"rgba(250,250,250,1.00)\",\n              \"borderRightColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopLeftRadius\": \"6px\",\n              \"borderTopRightRadius\": \"6px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"justify\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"space-between\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"space-between\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"justify\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n                    \"borderBottomColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderLeftColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderRightColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderTopColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"marginRight\": \"16px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"position\": \"relative\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  aria-label=\"--\"\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitFlexBasis\": \"auto\",\n                      \"borderBottomLeftRadius\": \"9999px\",\n                      \"borderBottomRightRadius\": \"9999px\",\n                      \"borderTopLeftRadius\": \"9999px\",\n                      \"borderTopRightRadius\": \"9999px\",\n                      \"flexBasis\": \"auto\",\n                      \"height\": \"100%\",\n                      \"maxWidth\": \"100%\",\n                      \"msFlexPreferredSize\": \"auto\",\n                      \"overflowX\": \"hidden\",\n                      \"overflowY\": \"hidden\",\n                      \"width\": \"100%\",\n                      \"zIndex\": 0,\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                        \"backgroundPosition\": \"center\",\n                        \"backgroundRepeat\": \"no-repeat\",\n                        \"backgroundSize\": \"cover\",\n                        \"bottom\": \"0px\",\n                        \"height\": \"100%\",\n                        \"left\": \"0px\",\n                        \"position\": \"absolute\",\n                        \"right\": \"0px\",\n                        \"top\": \"0px\",\n                        \"width\": \"100%\",\n                        \"zIndex\": -1,\n                      }\n                    }\n                    suppressHydrationWarning={true}\n                  />\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontFamily\": \"monospace,monospace\",\n                      \"fontSize\": \"20px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"500\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.25em\",\n                    }\n                  }\n                >\n                  Rehman\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(231,229,228,1.00)\",\n                      \"fontFamily\": \"monospace,monospace\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Software Engineer\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"borderBottomColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"6px\",\n              \"borderBottomRightRadius\": \"6px\",\n              \"borderLeftColor\": \"rgba(250,250,250,1.00)\",\n              \"borderRightColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopColor\": \"rgba(250,250,250,1.00)\",\n              \"borderTopLeftRadius\": \"6px\",\n              \"borderTopRightRadius\": \"6px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"justify\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"space-between\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"space-between\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"justify\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n                    \"borderBottomColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderLeftColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderRightColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderTopColor\": \"rgba(255,255,255,1.00)\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"marginRight\": \"16px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"position\": \"relative\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  aria-label=\"--\"\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitFlexBasis\": \"auto\",\n                      \"borderBottomLeftRadius\": \"9999px\",\n                      \"borderBottomRightRadius\": \"9999px\",\n                      \"borderTopLeftRadius\": \"9999px\",\n                      \"borderTopRightRadius\": \"9999px\",\n                      \"flexBasis\": \"auto\",\n                      \"height\": \"100%\",\n                      \"maxWidth\": \"100%\",\n                      \"msFlexPreferredSize\": \"auto\",\n                      \"overflowX\": \"hidden\",\n                      \"overflowY\": \"hidden\",\n                      \"width\": \"100%\",\n                      \"zIndex\": 0,\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                        \"backgroundPosition\": \"center\",\n                        \"backgroundRepeat\": \"no-repeat\",\n                        \"backgroundSize\": \"cover\",\n                        \"bottom\": \"0px\",\n                        \"height\": \"100%\",\n                        \"left\": \"0px\",\n                        \"position\": \"absolute\",\n                        \"right\": \"0px\",\n                        \"top\": \"0px\",\n                        \"width\": \"100%\",\n                        \"zIndex\": -1,\n                      }\n                    }\n                    suppressHydrationWarning={true}\n                  />\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontFamily\": \"monospace,monospace\",\n                      \"fontSize\": \"20px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"500\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.25em\",\n                    }\n                  }\n                >\n                  Rohit\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(231,229,228,1.00)\",\n                      \"fontFamily\": \"monospace,monospace\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Software Engineer\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n            }\n          }\n        >\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginTop\": \"16px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontFamily\": \"monospace,monospace\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Change mode\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Custom Theme CustomizingVariant 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"display\": \"flex\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n      }\n    }\n  >\n    <div\n      className=\"css-view-1dbjc4n\"\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(5,150,105,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Default Button\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(16,185,129,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Rounded Button\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Divider Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"140px\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"flexDirection\": \"row\",\n              \"fontSize\": \"24px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.25em\",\n              \"marginLeft\": \"12px\",\n              \"marginRight\": \"12px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          Chrome\n        </div>\n        <div\n          aria-orientation=\"horizontal\"\n          className=\"css-view-1dbjc4n\"\n          role=\"separator\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(38,38,38,1.00)\",\n              \"height\": \"1px\",\n              \"marginBottom\": \"8px\",\n              \"marginTop\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n        />\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"flexDirection\": \"row\",\n              \"fontSize\": \"24px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.25em\",\n              \"marginLeft\": \"12px\",\n              \"marginRight\": \"12px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          Firefox\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Divider Composition 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"display\": \"flex\",\n            \"flexDirection\": \"row\",\n            \"height\": \"58px\",\n            \"msFlexDirection\": \"row\",\n            \"paddingBottom\": \"16px\",\n            \"paddingLeft\": \"16px\",\n            \"paddingRight\": \"16px\",\n            \"paddingTop\": \"16px\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          Simple\n        </div>\n        <div\n          aria-orientation=\"vertical\"\n          className=\"css-view-1dbjc4n\"\n          role=\"separator\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(16,185,129,1.00)\",\n              \"height\": \"100%\",\n              \"marginLeft\": \"8px\",\n              \"marginRight\": \"8px\",\n              \"width\": \"2px\",\n            }\n          }\n        />\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          Easy\n        </div>\n        <div\n          aria-orientation=\"vertical\"\n          className=\"css-view-1dbjc4n\"\n          role=\"separator\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(99,102,241,1.00)\",\n              \"height\": \"100%\",\n              \"marginLeft\": \"8px\",\n              \"marginRight\": \"8px\",\n              \"width\": \"2px\",\n            }\n          }\n        />\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          Beautiful\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Divider Orientation 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"160px\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"24px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.25em\",\n              \"marginLeft\": \"auto\",\n              \"marginRight\": \"auto\",\n            }\n          }\n        >\n          Shoes\n        </div>\n        <div\n          aria-orientation=\"horizontal\"\n          className=\"css-view-1dbjc4n\"\n          role=\"separator\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(38,38,38,1.00)\",\n              \"height\": \"1px\",\n              \"marginBottom\": \"8px\",\n              \"marginTop\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"space-evenly\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"space-evenly\",\n              \"display\": \"flex\",\n              \"flexDirection\": \"row\",\n              \"height\": \"60px\",\n              \"justifyContent\": \"space-evenly\",\n              \"marginLeft\": \"12px\",\n              \"marginRight\": \"12px\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"space-evenly\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"24px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n                \"paddingBottom\": \"8px\",\n                \"paddingTop\": \"8px\",\n              }\n            }\n          >\n            Girls\n          </div>\n          <div\n            aria-orientation=\"vertical\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(38,38,38,1.00)\",\n                \"height\": \"100%\",\n                \"marginLeft\": \"12px\",\n                \"marginRight\": \"12px\",\n                \"width\": \"1px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"24px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n                \"paddingBottom\": \"8px\",\n                \"paddingTop\": \"8px\",\n              }\n            }\n          >\n            Boys\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Examples Signin Screen 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"maxWidth\": \"290px\",\n            \"paddingBottom\": \"32px\",\n            \"paddingLeft\": \"8px\",\n            \"paddingRight\": \"8px\",\n            \"paddingTop\": \"32px\",\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(31,41,55,1.00)\",\n              \"fontSize\": \"24px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"600\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.25em\",\n            }\n          }\n        >\n          Welcome\n        </div>\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(75,85,99,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"500\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.25em\",\n              \"marginTop\": \"4px\",\n            }\n          }\n        >\n          Sign in to continue!\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"marginTop\": \"20px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <label\n              className=\"css-view-1dbjc4n\"\n              id=\"field-265-label\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"start\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"flex-start\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"flex-start\",\n                  \"marginBottom\": \"4px\",\n                  \"marginTop\": \"4px\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"start\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(115,115,115,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Email ID\n              </div>\n            </label>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"overflowX\": \"auto\",\n                  \"overflowY\": \"auto\",\n                }\n              }\n            >\n              <input\n                autoCapitalize=\"sentences\"\n                autoComplete=\"on\"\n                autoCorrect=\"on\"\n                className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n                dir=\"auto\"\n                disabled={false}\n                id=\"field-265-input\"\n                onBlur={[Function]}\n                onChange={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onSelect={[Function]}\n                readOnly={false}\n                spellCheck={true}\n                style={\n                  Object {\n                    \"WebkitFlex\": 1,\n                    \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"cursor\": \"auto\",\n                    \"flex\": 1,\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"lineHeight\": \"1.5em\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"outline\": \"none\",\n                    \"outlineWidth\": \"0px\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"12px\",\n                    \"paddingRight\": \"12px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"100%\",\n                  }\n                }\n                type=\"text\"\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <label\n              className=\"css-view-1dbjc4n\"\n              id=\"field-266-label\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"start\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"flex-start\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"flex-start\",\n                  \"marginBottom\": \"4px\",\n                  \"marginTop\": \"4px\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"start\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(115,115,115,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Password\n              </div>\n            </label>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"overflowX\": \"auto\",\n                  \"overflowY\": \"auto\",\n                }\n              }\n            >\n              <input\n                autoCapitalize=\"sentences\"\n                autoComplete=\"on\"\n                autoCorrect=\"on\"\n                className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n                dir=\"auto\"\n                disabled={false}\n                id=\"field-266-input\"\n                onBlur={[Function]}\n                onChange={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onSelect={[Function]}\n                readOnly={false}\n                spellCheck={true}\n                style={\n                  Object {\n                    \"WebkitFlex\": 1,\n                    \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"cursor\": \"auto\",\n                    \"flex\": 1,\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"lineHeight\": \"1.5em\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"outline\": \"none\",\n                    \"outlineWidth\": \"0px\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"12px\",\n                    \"paddingRight\": \"12px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"100%\",\n                  }\n                }\n                type=\"password\"\n              />\n            </div>\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              role=\"link\"\n              style={\n                Object {\n                  \"WebkitAlignSelf\": \"flex-end\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignSelf\": \"flex-end\",\n                  \"flexDirection\": \"row\",\n                  \"height\": \"auto\",\n                  \"marginTop\": \"4px\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexItemAlign\": \"end\",\n                  \"width\": \"auto\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(99,102,241,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                    \"textDecoration\": \"underline\",\n                  }\n                }\n              >\n                Forget Password?\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(79,70,229,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginTop\": \"8px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Sign in\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginTop\": \"24px\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(75,85,99,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              I'm a new user.\n               \n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <a\n              className=\"css-reset-4rbku5 css-cursor-18t94o4 css-view-1dbjc4n\"\n              href=\"#\"\n              role=\"link\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"flexDirection\": \"row\",\n                  \"height\": \"auto\",\n                  \"msFlexDirection\": \"row\",\n                  \"width\": \"auto\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(99,102,241,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                    \"textDecoration\": \"underline\",\n                  }\n                }\n              >\n                Sign Up\n              </div>\n            </a>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Examples Signup Screen 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"maxWidth\": \"290px\",\n            \"paddingBottom\": \"32px\",\n            \"paddingLeft\": \"8px\",\n            \"paddingRight\": \"8px\",\n            \"paddingTop\": \"32px\",\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(31,41,55,1.00)\",\n              \"fontSize\": \"24px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"600\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.25em\",\n            }\n          }\n        >\n          Welcome\n        </div>\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(75,85,99,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"500\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.25em\",\n              \"marginTop\": \"4px\",\n            }\n          }\n        >\n          Sign up to continue!\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"marginTop\": \"20px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <label\n              className=\"css-view-1dbjc4n\"\n              id=\"field-268-label\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"start\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"flex-start\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"flex-start\",\n                  \"marginBottom\": \"4px\",\n                  \"marginTop\": \"4px\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"start\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(115,115,115,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Email\n              </div>\n            </label>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"overflowX\": \"auto\",\n                  \"overflowY\": \"auto\",\n                }\n              }\n            >\n              <input\n                autoCapitalize=\"sentences\"\n                autoComplete=\"on\"\n                autoCorrect=\"on\"\n                className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n                dir=\"auto\"\n                disabled={false}\n                id=\"field-268-input\"\n                onBlur={[Function]}\n                onChange={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onSelect={[Function]}\n                readOnly={false}\n                spellCheck={true}\n                style={\n                  Object {\n                    \"WebkitFlex\": 1,\n                    \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"cursor\": \"auto\",\n                    \"flex\": 1,\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"lineHeight\": \"1.5em\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"outline\": \"none\",\n                    \"outlineWidth\": \"0px\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"12px\",\n                    \"paddingRight\": \"12px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"100%\",\n                  }\n                }\n                type=\"text\"\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <label\n              className=\"css-view-1dbjc4n\"\n              id=\"field-269-label\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"start\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"flex-start\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"flex-start\",\n                  \"marginBottom\": \"4px\",\n                  \"marginTop\": \"4px\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"start\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(115,115,115,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Password\n              </div>\n            </label>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"overflowX\": \"auto\",\n                  \"overflowY\": \"auto\",\n                }\n              }\n            >\n              <input\n                autoCapitalize=\"sentences\"\n                autoComplete=\"on\"\n                autoCorrect=\"on\"\n                className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n                dir=\"auto\"\n                disabled={false}\n                id=\"field-269-input\"\n                onBlur={[Function]}\n                onChange={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onSelect={[Function]}\n                readOnly={false}\n                spellCheck={true}\n                style={\n                  Object {\n                    \"WebkitFlex\": 1,\n                    \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"cursor\": \"auto\",\n                    \"flex\": 1,\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"lineHeight\": \"1.5em\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"outline\": \"none\",\n                    \"outlineWidth\": \"0px\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"12px\",\n                    \"paddingRight\": \"12px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"100%\",\n                  }\n                }\n                type=\"password\"\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <label\n              className=\"css-view-1dbjc4n\"\n              id=\"field-270-label\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"start\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"flex-start\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"flex-start\",\n                  \"marginBottom\": \"4px\",\n                  \"marginTop\": \"4px\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"start\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(115,115,115,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Confirm Password\n              </div>\n            </label>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"overflowX\": \"auto\",\n                  \"overflowY\": \"auto\",\n                }\n              }\n            >\n              <input\n                autoCapitalize=\"sentences\"\n                autoComplete=\"on\"\n                autoCorrect=\"on\"\n                className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n                dir=\"auto\"\n                disabled={false}\n                id=\"field-270-input\"\n                onBlur={[Function]}\n                onChange={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onSelect={[Function]}\n                readOnly={false}\n                spellCheck={true}\n                style={\n                  Object {\n                    \"WebkitFlex\": 1,\n                    \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"cursor\": \"auto\",\n                    \"flex\": 1,\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"lineHeight\": \"1.5em\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"outline\": \"none\",\n                    \"outlineWidth\": \"0px\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"12px\",\n                    \"paddingRight\": \"12px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"100%\",\n                  }\n                }\n                type=\"password\"\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(79,70,229,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginTop\": \"8px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Sign up\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Examples Todo App 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"maxWidth\": \"300px\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"20px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.25em\",\n              \"marginBottom\": \"8px\",\n            }\n          }\n        >\n          Wednesday\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlex\": 1,\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"flex\": 1,\n                  \"flexDirection\": \"row\",\n                  \"msFlex\": \"1 1 0%\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"overflowX\": \"auto\",\n                  \"overflowY\": \"auto\",\n                }\n              }\n            >\n              <input\n                autoCapitalize=\"sentences\"\n                autoComplete=\"on\"\n                autoCorrect=\"on\"\n                className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n                dir=\"auto\"\n                onBlur={[Function]}\n                onChange={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onSelect={[Function]}\n                placeholder=\"Add Task\"\n                readOnly={false}\n                spellCheck={true}\n                style={\n                  Object {\n                    \"WebkitFlex\": 1,\n                    \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"cursor\": \"auto\",\n                    \"flex\": 1,\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"lineHeight\": \"1.5em\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"outline\": \"none\",\n                    \"outlineWidth\": \"0px\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"12px\",\n                    \"paddingRight\": \"12px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"100%\",\n                  }\n                }\n                type=\"text\"\n                value=\"\"\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"10px\",\n                  \"paddingRight\": \"10px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"justify\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"space-between\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"space-between\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"justify\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <label\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  style={\n                    Object {\n                      \"border\": 0,\n                      \"clip\": \"rect(0 0 0 0)\",\n                      \"clipPath\": \"inset(50%)\",\n                      \"height\": 1,\n                      \"margin\": \"0 -1px -1px 0\",\n                      \"overflow\": \"hidden\",\n                      \"padding\": 0,\n                      \"position\": \"absolute\",\n                      \"whiteSpace\": \"nowrap\",\n                      \"width\": 1,\n                    }\n                  }\n                >\n                  <input\n                    aria-checked={true}\n                    checked={true}\n                    disabled={false}\n                    onBlur={[Function]}\n                    onChange={[Function]}\n                    onClick={[Function]}\n                    onFocus={[Function]}\n                    onKeyDown={[Function]}\n                    onKeyUp={[Function]}\n                    onMouseDown={[Function]}\n                    onMouseEnter={[Function]}\n                    onMouseLeave={[Function]}\n                    onMouseUp={[Function]}\n                    onTouchCancel={[Function]}\n                    onTouchEnd={[Function]}\n                    onTouchMove={[Function]}\n                    onTouchStart={[Function]}\n                    type=\"checkbox\"\n                    value=\"Code\"\n                  />\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxDirection\": \"normal\",\n                      \"WebkitBoxOrient\": \"horizontal\",\n                      \"WebkitBoxPack\": \"start\",\n                      \"WebkitFlexDirection\": \"row\",\n                      \"WebkitJustifyContent\": \"flex-start\",\n                      \"alignItems\": \"center\",\n                      \"cursor\": \"pointer\",\n                      \"flexDirection\": \"row\",\n                      \"justifyContent\": \"flex-start\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexDirection\": \"row\",\n                      \"msFlexPack\": \"start\",\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"WebkitAlignItems\": \"center\",\n                        \"WebkitBoxAlign\": \"center\",\n                        \"WebkitBoxPack\": \"center\",\n                        \"WebkitJustifyContent\": \"center\",\n                        \"alignItems\": \"center\",\n                        \"display\": \"flex\",\n                        \"justifyContent\": \"center\",\n                        \"msFlexAlign\": \"center\",\n                        \"msFlexPack\": \"center\",\n                      }\n                    }\n                  >\n                    <div\n                      className=\"css-view-1dbjc4n\"\n                    />\n                    <div\n                      className=\"css-view-1dbjc4n\"\n                      style={\n                        Object {\n                          \"WebkitAlignItems\": \"center\",\n                          \"WebkitBoxAlign\": \"center\",\n                          \"WebkitBoxPack\": \"center\",\n                          \"WebkitJustifyContent\": \"center\",\n                          \"alignItems\": \"center\",\n                          \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                          \"borderBottomColor\": \"rgba(8,145,178,1.00)\",\n                          \"borderBottomLeftRadius\": \"4px\",\n                          \"borderBottomRightRadius\": \"4px\",\n                          \"borderBottomWidth\": \"2px\",\n                          \"borderLeftColor\": \"rgba(8,145,178,1.00)\",\n                          \"borderLeftWidth\": \"2px\",\n                          \"borderRightColor\": \"rgba(8,145,178,1.00)\",\n                          \"borderRightWidth\": \"2px\",\n                          \"borderTopColor\": \"rgba(8,145,178,1.00)\",\n                          \"borderTopLeftRadius\": \"4px\",\n                          \"borderTopRightRadius\": \"4px\",\n                          \"borderTopWidth\": \"2px\",\n                          \"display\": \"flex\",\n                          \"justifyContent\": \"center\",\n                          \"msFlexAlign\": \"center\",\n                          \"msFlexPack\": \"center\",\n                          \"opacity\": 1,\n                          \"paddingBottom\": \"2px\",\n                          \"paddingLeft\": \"2px\",\n                          \"paddingRight\": \"2px\",\n                          \"paddingTop\": \"2px\",\n                        }\n                      }\n                    >\n                      <svg\n                        role=\"img\"\n                        stroke=\"\"\n                        style={\n                          Object {\n                            \"color\": \"rgba(250,250,250,1.00)\",\n                            \"height\": \"12px\",\n                            \"width\": \"12px\",\n                          }\n                        }\n                        viewBox=\"0 0 24 24\"\n                      >\n                        <g>\n                          <path\n                            d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                            fill=\"currentColor\"\n                            stroke=\"\"\n                          />\n                        </g>\n                      </svg>\n                    </div>\n                  </div>\n                </div>\n              </label>\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                onClick={[Function]}\n                style={\n                  Object {\n                    \"WebkitFlexShrink\": 1,\n                    \"color\": \"rgba(161,161,170,1.00)\",\n                    \"cursor\": \"pointer\",\n                    \"flexShrink\": 1,\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"msFlexNegative\": 1,\n                    \"textAlign\": \"left\",\n                    \"textDecoration\": \"line-through\",\n                    \"width\": \"100%\",\n                  }\n                }\n              >\n                Code\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n                onBlur={[Function]}\n                onClick={[Function]}\n                onContextMenu={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                role=\"button\"\n                style={\n                  Object {\n                    \"MozUserSelect\": \"none\",\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"WebkitUserSelect\": \"none\",\n                    \"alignItems\": \"center\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"cursor\": \"pointer\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexPack\": \"center\",\n                    \"msTouchAction\": \"manipulation\",\n                    \"msUserSelect\": \"none\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"8px\",\n                    \"paddingRight\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"touchAction\": \"manipulation\",\n                    \"userSelect\": \"none\",\n                  }\n                }\n                tabIndex=\"0\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                />\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"justify\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"space-between\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"space-between\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"justify\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <label\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  style={\n                    Object {\n                      \"border\": 0,\n                      \"clip\": \"rect(0 0 0 0)\",\n                      \"clipPath\": \"inset(50%)\",\n                      \"height\": 1,\n                      \"margin\": \"0 -1px -1px 0\",\n                      \"overflow\": \"hidden\",\n                      \"padding\": 0,\n                      \"position\": \"absolute\",\n                      \"whiteSpace\": \"nowrap\",\n                      \"width\": 1,\n                    }\n                  }\n                >\n                  <input\n                    aria-checked={false}\n                    checked={false}\n                    disabled={false}\n                    onBlur={[Function]}\n                    onChange={[Function]}\n                    onClick={[Function]}\n                    onFocus={[Function]}\n                    onKeyDown={[Function]}\n                    onKeyUp={[Function]}\n                    onMouseDown={[Function]}\n                    onMouseEnter={[Function]}\n                    onMouseLeave={[Function]}\n                    onMouseUp={[Function]}\n                    onTouchCancel={[Function]}\n                    onTouchEnd={[Function]}\n                    onTouchMove={[Function]}\n                    onTouchStart={[Function]}\n                    type=\"checkbox\"\n                    value=\"Meeting with team at 9\"\n                  />\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxDirection\": \"normal\",\n                      \"WebkitBoxOrient\": \"horizontal\",\n                      \"WebkitBoxPack\": \"start\",\n                      \"WebkitFlexDirection\": \"row\",\n                      \"WebkitJustifyContent\": \"flex-start\",\n                      \"alignItems\": \"center\",\n                      \"cursor\": \"pointer\",\n                      \"flexDirection\": \"row\",\n                      \"justifyContent\": \"flex-start\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexDirection\": \"row\",\n                      \"msFlexPack\": \"start\",\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"WebkitAlignItems\": \"center\",\n                        \"WebkitBoxAlign\": \"center\",\n                        \"WebkitBoxPack\": \"center\",\n                        \"WebkitJustifyContent\": \"center\",\n                        \"alignItems\": \"center\",\n                        \"display\": \"flex\",\n                        \"justifyContent\": \"center\",\n                        \"msFlexAlign\": \"center\",\n                        \"msFlexPack\": \"center\",\n                      }\n                    }\n                  >\n                    <div\n                      className=\"css-view-1dbjc4n\"\n                    />\n                    <div\n                      className=\"css-view-1dbjc4n\"\n                      style={\n                        Object {\n                          \"WebkitAlignItems\": \"center\",\n                          \"WebkitBoxAlign\": \"center\",\n                          \"WebkitBoxPack\": \"center\",\n                          \"WebkitJustifyContent\": \"center\",\n                          \"alignItems\": \"center\",\n                          \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                          \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                          \"borderBottomLeftRadius\": \"4px\",\n                          \"borderBottomRightRadius\": \"4px\",\n                          \"borderBottomWidth\": \"2px\",\n                          \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                          \"borderLeftWidth\": \"2px\",\n                          \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                          \"borderRightWidth\": \"2px\",\n                          \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                          \"borderTopLeftRadius\": \"4px\",\n                          \"borderTopRightRadius\": \"4px\",\n                          \"borderTopWidth\": \"2px\",\n                          \"display\": \"flex\",\n                          \"justifyContent\": \"center\",\n                          \"msFlexAlign\": \"center\",\n                          \"msFlexPack\": \"center\",\n                          \"opacity\": 1,\n                          \"paddingBottom\": \"2px\",\n                          \"paddingLeft\": \"2px\",\n                          \"paddingRight\": \"2px\",\n                          \"paddingTop\": \"2px\",\n                        }\n                      }\n                    >\n                      <div\n                        className=\"css-view-1dbjc4n\"\n                        style={\n                          Object {\n                            \"color\": \"rgba(250,250,250,1.00)\",\n                            \"height\": \"12px\",\n                            \"width\": \"12px\",\n                          }\n                        }\n                      />\n                    </div>\n                  </div>\n                </div>\n              </label>\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                onClick={[Function]}\n                style={\n                  Object {\n                    \"WebkitFlexShrink\": 1,\n                    \"color\": \"rgba(31,41,55,1.00)\",\n                    \"cursor\": \"pointer\",\n                    \"flexShrink\": 1,\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"msFlexNegative\": 1,\n                    \"textAlign\": \"left\",\n                    \"width\": \"100%\",\n                  }\n                }\n              >\n                Meeting with team at 9\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n                onBlur={[Function]}\n                onClick={[Function]}\n                onContextMenu={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                role=\"button\"\n                style={\n                  Object {\n                    \"MozUserSelect\": \"none\",\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"WebkitUserSelect\": \"none\",\n                    \"alignItems\": \"center\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"cursor\": \"pointer\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexPack\": \"center\",\n                    \"msTouchAction\": \"manipulation\",\n                    \"msUserSelect\": \"none\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"8px\",\n                    \"paddingRight\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"touchAction\": \"manipulation\",\n                    \"userSelect\": \"none\",\n                  }\n                }\n                tabIndex=\"0\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                />\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"justify\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"space-between\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"space-between\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"justify\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <label\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  style={\n                    Object {\n                      \"border\": 0,\n                      \"clip\": \"rect(0 0 0 0)\",\n                      \"clipPath\": \"inset(50%)\",\n                      \"height\": 1,\n                      \"margin\": \"0 -1px -1px 0\",\n                      \"overflow\": \"hidden\",\n                      \"padding\": 0,\n                      \"position\": \"absolute\",\n                      \"whiteSpace\": \"nowrap\",\n                      \"width\": 1,\n                    }\n                  }\n                >\n                  <input\n                    aria-checked={false}\n                    checked={false}\n                    disabled={false}\n                    onBlur={[Function]}\n                    onChange={[Function]}\n                    onClick={[Function]}\n                    onFocus={[Function]}\n                    onKeyDown={[Function]}\n                    onKeyUp={[Function]}\n                    onMouseDown={[Function]}\n                    onMouseEnter={[Function]}\n                    onMouseLeave={[Function]}\n                    onMouseUp={[Function]}\n                    onTouchCancel={[Function]}\n                    onTouchEnd={[Function]}\n                    onTouchMove={[Function]}\n                    onTouchStart={[Function]}\n                    type=\"checkbox\"\n                    value=\"Check Emails\"\n                  />\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxDirection\": \"normal\",\n                      \"WebkitBoxOrient\": \"horizontal\",\n                      \"WebkitBoxPack\": \"start\",\n                      \"WebkitFlexDirection\": \"row\",\n                      \"WebkitJustifyContent\": \"flex-start\",\n                      \"alignItems\": \"center\",\n                      \"cursor\": \"pointer\",\n                      \"flexDirection\": \"row\",\n                      \"justifyContent\": \"flex-start\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexDirection\": \"row\",\n                      \"msFlexPack\": \"start\",\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"WebkitAlignItems\": \"center\",\n                        \"WebkitBoxAlign\": \"center\",\n                        \"WebkitBoxPack\": \"center\",\n                        \"WebkitJustifyContent\": \"center\",\n                        \"alignItems\": \"center\",\n                        \"display\": \"flex\",\n                        \"justifyContent\": \"center\",\n                        \"msFlexAlign\": \"center\",\n                        \"msFlexPack\": \"center\",\n                      }\n                    }\n                  >\n                    <div\n                      className=\"css-view-1dbjc4n\"\n                    />\n                    <div\n                      className=\"css-view-1dbjc4n\"\n                      style={\n                        Object {\n                          \"WebkitAlignItems\": \"center\",\n                          \"WebkitBoxAlign\": \"center\",\n                          \"WebkitBoxPack\": \"center\",\n                          \"WebkitJustifyContent\": \"center\",\n                          \"alignItems\": \"center\",\n                          \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                          \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                          \"borderBottomLeftRadius\": \"4px\",\n                          \"borderBottomRightRadius\": \"4px\",\n                          \"borderBottomWidth\": \"2px\",\n                          \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                          \"borderLeftWidth\": \"2px\",\n                          \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                          \"borderRightWidth\": \"2px\",\n                          \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                          \"borderTopLeftRadius\": \"4px\",\n                          \"borderTopRightRadius\": \"4px\",\n                          \"borderTopWidth\": \"2px\",\n                          \"display\": \"flex\",\n                          \"justifyContent\": \"center\",\n                          \"msFlexAlign\": \"center\",\n                          \"msFlexPack\": \"center\",\n                          \"opacity\": 1,\n                          \"paddingBottom\": \"2px\",\n                          \"paddingLeft\": \"2px\",\n                          \"paddingRight\": \"2px\",\n                          \"paddingTop\": \"2px\",\n                        }\n                      }\n                    >\n                      <div\n                        className=\"css-view-1dbjc4n\"\n                        style={\n                          Object {\n                            \"color\": \"rgba(250,250,250,1.00)\",\n                            \"height\": \"12px\",\n                            \"width\": \"12px\",\n                          }\n                        }\n                      />\n                    </div>\n                  </div>\n                </div>\n              </label>\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                onClick={[Function]}\n                style={\n                  Object {\n                    \"WebkitFlexShrink\": 1,\n                    \"color\": \"rgba(31,41,55,1.00)\",\n                    \"cursor\": \"pointer\",\n                    \"flexShrink\": 1,\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"msFlexNegative\": 1,\n                    \"textAlign\": \"left\",\n                    \"width\": \"100%\",\n                  }\n                }\n              >\n                Check Emails\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n                onBlur={[Function]}\n                onClick={[Function]}\n                onContextMenu={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                role=\"button\"\n                style={\n                  Object {\n                    \"MozUserSelect\": \"none\",\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"WebkitUserSelect\": \"none\",\n                    \"alignItems\": \"center\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"cursor\": \"pointer\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexPack\": \"center\",\n                    \"msTouchAction\": \"manipulation\",\n                    \"msUserSelect\": \"none\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"8px\",\n                    \"paddingRight\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"touchAction\": \"manipulation\",\n                    \"userSelect\": \"none\",\n                  }\n                }\n                tabIndex=\"0\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                />\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"justify\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"space-between\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"space-between\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"justify\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <label\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  style={\n                    Object {\n                      \"border\": 0,\n                      \"clip\": \"rect(0 0 0 0)\",\n                      \"clipPath\": \"inset(50%)\",\n                      \"height\": 1,\n                      \"margin\": \"0 -1px -1px 0\",\n                      \"overflow\": \"hidden\",\n                      \"padding\": 0,\n                      \"position\": \"absolute\",\n                      \"whiteSpace\": \"nowrap\",\n                      \"width\": 1,\n                    }\n                  }\n                >\n                  <input\n                    aria-checked={false}\n                    checked={false}\n                    disabled={false}\n                    onBlur={[Function]}\n                    onChange={[Function]}\n                    onClick={[Function]}\n                    onFocus={[Function]}\n                    onKeyDown={[Function]}\n                    onKeyUp={[Function]}\n                    onMouseDown={[Function]}\n                    onMouseEnter={[Function]}\n                    onMouseLeave={[Function]}\n                    onMouseUp={[Function]}\n                    onTouchCancel={[Function]}\n                    onTouchEnd={[Function]}\n                    onTouchMove={[Function]}\n                    onTouchStart={[Function]}\n                    type=\"checkbox\"\n                    value=\"Write an article\"\n                  />\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxDirection\": \"normal\",\n                      \"WebkitBoxOrient\": \"horizontal\",\n                      \"WebkitBoxPack\": \"start\",\n                      \"WebkitFlexDirection\": \"row\",\n                      \"WebkitJustifyContent\": \"flex-start\",\n                      \"alignItems\": \"center\",\n                      \"cursor\": \"pointer\",\n                      \"flexDirection\": \"row\",\n                      \"justifyContent\": \"flex-start\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexDirection\": \"row\",\n                      \"msFlexPack\": \"start\",\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"WebkitAlignItems\": \"center\",\n                        \"WebkitBoxAlign\": \"center\",\n                        \"WebkitBoxPack\": \"center\",\n                        \"WebkitJustifyContent\": \"center\",\n                        \"alignItems\": \"center\",\n                        \"display\": \"flex\",\n                        \"justifyContent\": \"center\",\n                        \"msFlexAlign\": \"center\",\n                        \"msFlexPack\": \"center\",\n                      }\n                    }\n                  >\n                    <div\n                      className=\"css-view-1dbjc4n\"\n                    />\n                    <div\n                      className=\"css-view-1dbjc4n\"\n                      style={\n                        Object {\n                          \"WebkitAlignItems\": \"center\",\n                          \"WebkitBoxAlign\": \"center\",\n                          \"WebkitBoxPack\": \"center\",\n                          \"WebkitJustifyContent\": \"center\",\n                          \"alignItems\": \"center\",\n                          \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                          \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                          \"borderBottomLeftRadius\": \"4px\",\n                          \"borderBottomRightRadius\": \"4px\",\n                          \"borderBottomWidth\": \"2px\",\n                          \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                          \"borderLeftWidth\": \"2px\",\n                          \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                          \"borderRightWidth\": \"2px\",\n                          \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                          \"borderTopLeftRadius\": \"4px\",\n                          \"borderTopRightRadius\": \"4px\",\n                          \"borderTopWidth\": \"2px\",\n                          \"display\": \"flex\",\n                          \"justifyContent\": \"center\",\n                          \"msFlexAlign\": \"center\",\n                          \"msFlexPack\": \"center\",\n                          \"opacity\": 1,\n                          \"paddingBottom\": \"2px\",\n                          \"paddingLeft\": \"2px\",\n                          \"paddingRight\": \"2px\",\n                          \"paddingTop\": \"2px\",\n                        }\n                      }\n                    >\n                      <div\n                        className=\"css-view-1dbjc4n\"\n                        style={\n                          Object {\n                            \"color\": \"rgba(250,250,250,1.00)\",\n                            \"height\": \"12px\",\n                            \"width\": \"12px\",\n                          }\n                        }\n                      />\n                    </div>\n                  </div>\n                </div>\n              </label>\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                onClick={[Function]}\n                style={\n                  Object {\n                    \"WebkitFlexShrink\": 1,\n                    \"color\": \"rgba(31,41,55,1.00)\",\n                    \"cursor\": \"pointer\",\n                    \"flexShrink\": 1,\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"msFlexNegative\": 1,\n                    \"textAlign\": \"left\",\n                    \"width\": \"100%\",\n                  }\n                }\n              >\n                Write an article\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n                onBlur={[Function]}\n                onClick={[Function]}\n                onContextMenu={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                role=\"button\"\n                style={\n                  Object {\n                    \"MozUserSelect\": \"none\",\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"WebkitUserSelect\": \"none\",\n                    \"alignItems\": \"center\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"cursor\": \"pointer\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexPack\": \"center\",\n                    \"msTouchAction\": \"manipulation\",\n                    \"msUserSelect\": \"none\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"8px\",\n                    \"paddingRight\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"touchAction\": \"manipulation\",\n                    \"userSelect\": \"none\",\n                  }\n                }\n                tabIndex=\"0\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Fab Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"height\": \"100px\",\n          \"position\": \"relative\",\n          \"width\": \"100%\",\n        }\n      }\n    />\n  </div>\n</div>\n`;\n\nexports[`Storyshots Fab CustomPosition 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"height\": \"200px\",\n          \"position\": \"relative\",\n          \"width\": \"100%\",\n        }\n      }\n    />\n  </div>\n</div>\n`;\n\nexports[`Storyshots Fab Placement 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"height\": \"400px\",\n          \"width\": \"100%\",\n        }\n      }\n    />\n  </div>\n</div>\n`;\n\nexports[`Storyshots FlatList Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"20px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n            \"paddingBottom\": \"12px\",\n            \"paddingLeft\": \"16px\",\n            \"paddingRight\": \"16px\",\n            \"paddingTop\": \"16px\",\n          }\n        }\n      >\n        Inbox\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        onScroll={[Function]}\n        onTouchEnd={[Function]}\n        onTouchMove={[Function]}\n        onTouchStart={[Function]}\n        onWheel={[Function]}\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxFlex\": 1,\n            \"WebkitBoxOrient\": \"vertical\",\n            \"WebkitFlexDirection\": \"column\",\n            \"WebkitFlexGrow\": 1,\n            \"WebkitFlexShrink\": 1,\n            \"WebkitOverflowScrolling\": \"touch\",\n            \"WebkitTransform\": \"translateZ(0px)\",\n            \"flexDirection\": \"column\",\n            \"flexGrow\": 1,\n            \"flexShrink\": 1,\n            \"msFlexDirection\": \"column\",\n            \"msFlexNegative\": 1,\n            \"msFlexPositive\": 1,\n            \"overflowX\": \"hidden\",\n            \"overflowY\": \"auto\",\n            \"transform\": \"translateZ(0px)\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"dataSet\": Object {},\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"borderBottomColor\": \"rgba(38,38,38,1.00)\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(38,38,38,1.00)\",\n                  \"borderRightColor\": \"rgba(38,38,38,1.00)\",\n                  \"borderTopColor\": \"rgba(38,38,38,1.00)\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"0px\",\n                  \"paddingRight\": \"0px\",\n                  \"paddingTop\": \"8px\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"justify\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitJustifyContent\": \"space-between\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"space-between\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexPack\": \"justify\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n                      \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n                      \"borderBottomLeftRadius\": \"9999px\",\n                      \"borderBottomRightRadius\": \"9999px\",\n                      \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n                      \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n                      \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n                      \"borderTopLeftRadius\": \"9999px\",\n                      \"borderTopRightRadius\": \"9999px\",\n                      \"height\": \"48px\",\n                      \"justifyContent\": \"center\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                      \"position\": \"relative\",\n                      \"width\": \"48px\",\n                    }\n                  }\n                >\n                  <div\n                    aria-label=\"--\"\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"WebkitFlexBasis\": \"auto\",\n                        \"borderBottomLeftRadius\": \"9999px\",\n                        \"borderBottomRightRadius\": \"9999px\",\n                        \"borderTopLeftRadius\": \"9999px\",\n                        \"borderTopRightRadius\": \"9999px\",\n                        \"flexBasis\": \"auto\",\n                        \"height\": \"100%\",\n                        \"maxWidth\": \"100%\",\n                        \"msFlexPreferredSize\": \"auto\",\n                        \"overflowX\": \"hidden\",\n                        \"overflowY\": \"hidden\",\n                        \"width\": \"100%\",\n                        \"zIndex\": 0,\n                      }\n                    }\n                  >\n                    <div\n                      className=\"css-view-1dbjc4n\"\n                      style={\n                        Object {\n                          \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                          \"backgroundPosition\": \"center\",\n                          \"backgroundRepeat\": \"no-repeat\",\n                          \"backgroundSize\": \"cover\",\n                          \"bottom\": \"0px\",\n                          \"height\": \"100%\",\n                          \"left\": \"0px\",\n                          \"position\": \"absolute\",\n                          \"right\": \"0px\",\n                          \"top\": \"0px\",\n                          \"width\": \"100%\",\n                          \"zIndex\": -1,\n                        }\n                      }\n                      suppressHydrationWarning={true}\n                    />\n                  </div>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(31,41,55,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"700\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Aafreen Khan\n                  </div>\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                  />\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(75,85,99,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Good Day!\n                  </div>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitBoxFlex\": 1,\n                      \"WebkitFlexGrow\": 1,\n                      \"flexGrow\": 1,\n                      \"msFlexPositive\": 1,\n                    }\n                  }\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"WebkitAlignSelf\": \"flex-start\",\n                      \"alignSelf\": \"flex-start\",\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"12px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"msFlexItemAlign\": \"start\",\n                    }\n                  }\n                >\n                  12:47 PM\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"borderBottomColor\": \"rgba(38,38,38,1.00)\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(38,38,38,1.00)\",\n                  \"borderRightColor\": \"rgba(38,38,38,1.00)\",\n                  \"borderTopColor\": \"rgba(38,38,38,1.00)\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"0px\",\n                  \"paddingRight\": \"0px\",\n                  \"paddingTop\": \"8px\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"justify\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitJustifyContent\": \"space-between\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"space-between\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexPack\": \"justify\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n                      \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n                      \"borderBottomLeftRadius\": \"9999px\",\n                      \"borderBottomRightRadius\": \"9999px\",\n                      \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n                      \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n                      \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n                      \"borderTopLeftRadius\": \"9999px\",\n                      \"borderTopRightRadius\": \"9999px\",\n                      \"height\": \"48px\",\n                      \"justifyContent\": \"center\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                      \"position\": \"relative\",\n                      \"width\": \"48px\",\n                    }\n                  }\n                >\n                  <div\n                    aria-label=\"--\"\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"WebkitFlexBasis\": \"auto\",\n                        \"borderBottomLeftRadius\": \"9999px\",\n                        \"borderBottomRightRadius\": \"9999px\",\n                        \"borderTopLeftRadius\": \"9999px\",\n                        \"borderTopRightRadius\": \"9999px\",\n                        \"flexBasis\": \"auto\",\n                        \"height\": \"100%\",\n                        \"maxWidth\": \"100%\",\n                        \"msFlexPreferredSize\": \"auto\",\n                        \"overflowX\": \"hidden\",\n                        \"overflowY\": \"hidden\",\n                        \"width\": \"100%\",\n                        \"zIndex\": 0,\n                      }\n                    }\n                  >\n                    <div\n                      className=\"css-view-1dbjc4n\"\n                      style={\n                        Object {\n                          \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                          \"backgroundPosition\": \"center\",\n                          \"backgroundRepeat\": \"no-repeat\",\n                          \"backgroundSize\": \"cover\",\n                          \"bottom\": \"0px\",\n                          \"height\": \"100%\",\n                          \"left\": \"0px\",\n                          \"position\": \"absolute\",\n                          \"right\": \"0px\",\n                          \"top\": \"0px\",\n                          \"width\": \"100%\",\n                          \"zIndex\": -1,\n                        }\n                      }\n                      suppressHydrationWarning={true}\n                    />\n                  </div>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(31,41,55,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"700\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Sujitha Mathur\n                  </div>\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                  />\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(75,85,99,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Cheer up, there!\n                  </div>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitBoxFlex\": 1,\n                      \"WebkitFlexGrow\": 1,\n                      \"flexGrow\": 1,\n                      \"msFlexPositive\": 1,\n                    }\n                  }\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"WebkitAlignSelf\": \"flex-start\",\n                      \"alignSelf\": \"flex-start\",\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"12px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"msFlexItemAlign\": \"start\",\n                    }\n                  }\n                >\n                  11:11 PM\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"borderBottomColor\": \"rgba(38,38,38,1.00)\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(38,38,38,1.00)\",\n                  \"borderRightColor\": \"rgba(38,38,38,1.00)\",\n                  \"borderTopColor\": \"rgba(38,38,38,1.00)\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"0px\",\n                  \"paddingRight\": \"0px\",\n                  \"paddingTop\": \"8px\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"justify\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitJustifyContent\": \"space-between\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"space-between\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexPack\": \"justify\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n                      \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n                      \"borderBottomLeftRadius\": \"9999px\",\n                      \"borderBottomRightRadius\": \"9999px\",\n                      \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n                      \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n                      \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n                      \"borderTopLeftRadius\": \"9999px\",\n                      \"borderTopRightRadius\": \"9999px\",\n                      \"height\": \"48px\",\n                      \"justifyContent\": \"center\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                      \"position\": \"relative\",\n                      \"width\": \"48px\",\n                    }\n                  }\n                >\n                  <div\n                    aria-label=\"--\"\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"WebkitFlexBasis\": \"auto\",\n                        \"borderBottomLeftRadius\": \"9999px\",\n                        \"borderBottomRightRadius\": \"9999px\",\n                        \"borderTopLeftRadius\": \"9999px\",\n                        \"borderTopRightRadius\": \"9999px\",\n                        \"flexBasis\": \"auto\",\n                        \"height\": \"100%\",\n                        \"maxWidth\": \"100%\",\n                        \"msFlexPreferredSize\": \"auto\",\n                        \"overflowX\": \"hidden\",\n                        \"overflowY\": \"hidden\",\n                        \"width\": \"100%\",\n                        \"zIndex\": 0,\n                      }\n                    }\n                  >\n                    <div\n                      className=\"css-view-1dbjc4n\"\n                      style={\n                        Object {\n                          \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                          \"backgroundPosition\": \"center\",\n                          \"backgroundRepeat\": \"no-repeat\",\n                          \"backgroundSize\": \"cover\",\n                          \"bottom\": \"0px\",\n                          \"height\": \"100%\",\n                          \"left\": \"0px\",\n                          \"position\": \"absolute\",\n                          \"right\": \"0px\",\n                          \"top\": \"0px\",\n                          \"width\": \"100%\",\n                          \"zIndex\": -1,\n                        }\n                      }\n                      suppressHydrationWarning={true}\n                    />\n                  </div>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(31,41,55,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"700\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Anci Barroco\n                  </div>\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                  />\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(75,85,99,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Good Day!\n                  </div>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitBoxFlex\": 1,\n                      \"WebkitFlexGrow\": 1,\n                      \"flexGrow\": 1,\n                      \"msFlexPositive\": 1,\n                    }\n                  }\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"WebkitAlignSelf\": \"flex-start\",\n                      \"alignSelf\": \"flex-start\",\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"12px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"msFlexItemAlign\": \"start\",\n                    }\n                  }\n                >\n                  6:22 PM\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"borderBottomColor\": \"rgba(38,38,38,1.00)\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(38,38,38,1.00)\",\n                  \"borderRightColor\": \"rgba(38,38,38,1.00)\",\n                  \"borderTopColor\": \"rgba(38,38,38,1.00)\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"0px\",\n                  \"paddingRight\": \"0px\",\n                  \"paddingTop\": \"8px\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"justify\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitJustifyContent\": \"space-between\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"space-between\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexPack\": \"justify\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n                      \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n                      \"borderBottomLeftRadius\": \"9999px\",\n                      \"borderBottomRightRadius\": \"9999px\",\n                      \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n                      \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n                      \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n                      \"borderTopLeftRadius\": \"9999px\",\n                      \"borderTopRightRadius\": \"9999px\",\n                      \"height\": \"48px\",\n                      \"justifyContent\": \"center\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                      \"position\": \"relative\",\n                      \"width\": \"48px\",\n                    }\n                  }\n                >\n                  <div\n                    aria-label=\"--\"\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"WebkitFlexBasis\": \"auto\",\n                        \"borderBottomLeftRadius\": \"9999px\",\n                        \"borderBottomRightRadius\": \"9999px\",\n                        \"borderTopLeftRadius\": \"9999px\",\n                        \"borderTopRightRadius\": \"9999px\",\n                        \"flexBasis\": \"auto\",\n                        \"height\": \"100%\",\n                        \"maxWidth\": \"100%\",\n                        \"msFlexPreferredSize\": \"auto\",\n                        \"overflowX\": \"hidden\",\n                        \"overflowY\": \"hidden\",\n                        \"width\": \"100%\",\n                        \"zIndex\": 0,\n                      }\n                    }\n                  >\n                    <div\n                      className=\"css-view-1dbjc4n\"\n                      style={\n                        Object {\n                          \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                          \"backgroundPosition\": \"center\",\n                          \"backgroundRepeat\": \"no-repeat\",\n                          \"backgroundSize\": \"cover\",\n                          \"bottom\": \"0px\",\n                          \"height\": \"100%\",\n                          \"left\": \"0px\",\n                          \"position\": \"absolute\",\n                          \"right\": \"0px\",\n                          \"top\": \"0px\",\n                          \"width\": \"100%\",\n                          \"zIndex\": -1,\n                        }\n                      }\n                      suppressHydrationWarning={true}\n                    />\n                  </div>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(31,41,55,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"700\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Aniket Kumar\n                  </div>\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                  />\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(75,85,99,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    All the best\n                  </div>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitBoxFlex\": 1,\n                      \"WebkitFlexGrow\": 1,\n                      \"flexGrow\": 1,\n                      \"msFlexPositive\": 1,\n                    }\n                  }\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"WebkitAlignSelf\": \"flex-start\",\n                      \"alignSelf\": \"flex-start\",\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"12px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"msFlexItemAlign\": \"start\",\n                    }\n                  }\n                >\n                  8:56 PM\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"borderBottomColor\": \"rgba(38,38,38,1.00)\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(38,38,38,1.00)\",\n                  \"borderRightColor\": \"rgba(38,38,38,1.00)\",\n                  \"borderTopColor\": \"rgba(38,38,38,1.00)\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"0px\",\n                  \"paddingRight\": \"0px\",\n                  \"paddingTop\": \"8px\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"justify\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitJustifyContent\": \"space-between\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"space-between\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexPack\": \"justify\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n                      \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n                      \"borderBottomLeftRadius\": \"9999px\",\n                      \"borderBottomRightRadius\": \"9999px\",\n                      \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n                      \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n                      \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n                      \"borderTopLeftRadius\": \"9999px\",\n                      \"borderTopRightRadius\": \"9999px\",\n                      \"height\": \"48px\",\n                      \"justifyContent\": \"center\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                      \"position\": \"relative\",\n                      \"width\": \"48px\",\n                    }\n                  }\n                >\n                  <div\n                    aria-label=\"--\"\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"WebkitFlexBasis\": \"auto\",\n                        \"borderBottomLeftRadius\": \"9999px\",\n                        \"borderBottomRightRadius\": \"9999px\",\n                        \"borderTopLeftRadius\": \"9999px\",\n                        \"borderTopRightRadius\": \"9999px\",\n                        \"flexBasis\": \"auto\",\n                        \"height\": \"100%\",\n                        \"maxWidth\": \"100%\",\n                        \"msFlexPreferredSize\": \"auto\",\n                        \"overflowX\": \"hidden\",\n                        \"overflowY\": \"hidden\",\n                        \"width\": \"100%\",\n                        \"zIndex\": 0,\n                      }\n                    }\n                  >\n                    <div\n                      className=\"css-view-1dbjc4n\"\n                      style={\n                        Object {\n                          \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                          \"backgroundPosition\": \"center\",\n                          \"backgroundRepeat\": \"no-repeat\",\n                          \"backgroundSize\": \"cover\",\n                          \"bottom\": \"0px\",\n                          \"height\": \"100%\",\n                          \"left\": \"0px\",\n                          \"position\": \"absolute\",\n                          \"right\": \"0px\",\n                          \"top\": \"0px\",\n                          \"width\": \"100%\",\n                          \"zIndex\": -1,\n                        }\n                      }\n                      suppressHydrationWarning={true}\n                    />\n                  </div>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(31,41,55,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"700\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Kiara\n                  </div>\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                  />\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(75,85,99,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    I will call today.\n                  </div>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitBoxFlex\": 1,\n                      \"WebkitFlexGrow\": 1,\n                      \"flexGrow\": 1,\n                      \"msFlexPositive\": 1,\n                    }\n                  }\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"WebkitAlignSelf\": \"flex-start\",\n                      \"alignSelf\": \"flex-start\",\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"12px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"msFlexItemAlign\": \"start\",\n                    }\n                  }\n                >\n                  12:47 PM\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Flex Basic Usage 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitFlex\": 1,\n          \"flex\": 1,\n          \"msFlex\": \"1 1 0%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        onScroll={[Function]}\n        onTouchEnd={[Function]}\n        onTouchMove={[Function]}\n        onTouchStart={[Function]}\n        onWheel={[Function]}\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxFlex\": 1,\n            \"WebkitBoxOrient\": \"vertical\",\n            \"WebkitFlexDirection\": \"column\",\n            \"WebkitFlexGrow\": 1,\n            \"WebkitFlexShrink\": 1,\n            \"WebkitOverflowScrolling\": \"touch\",\n            \"WebkitTransform\": \"translateZ(0px)\",\n            \"flexDirection\": \"column\",\n            \"flexGrow\": 1,\n            \"flexShrink\": 1,\n            \"msFlexDirection\": \"column\",\n            \"msFlexNegative\": 1,\n            \"msFlexPositive\": 1,\n            \"overflowX\": \"hidden\",\n            \"overflowY\": \"auto\",\n            \"transform\": \"translateZ(0px)\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"dataSet\": Object {},\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"20px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.25em\",\n                }\n              }\n            >\n              row\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"10px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"display\": \"flex\",\n                  \"flexDirection\": \"row\",\n                  \"marginBottom\": \"10px\",\n                  \"marginTop\": \"6px\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(207,250,254,1.00)\",\n                    \"display\": \"flex\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  100\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(165,243,252,1.00)\",\n                    \"display\": \"flex\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  200\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(103,232,249,1.00)\",\n                    \"display\": \"flex\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  300\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(34,211,238,1.00)\",\n                    \"display\": \"flex\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  400\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"10px\",\n                }\n              }\n            />\n            <div\n              aria-orientation=\"horizontal\"\n              className=\"css-view-1dbjc4n\"\n              role=\"separator\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                  \"height\": \"1px\",\n                  \"width\": \"100%\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"10px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"20px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.25em\",\n                }\n              }\n            >\n              column\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"10px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"vertical\",\n                  \"WebkitFlexDirection\": \"column\",\n                  \"display\": \"flex\",\n                  \"flexDirection\": \"column\",\n                  \"marginBottom\": \"10px\",\n                  \"marginTop\": \"6px\",\n                  \"msFlexDirection\": \"column\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(207,250,254,1.00)\",\n                    \"display\": \"flex\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  100\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(165,243,252,1.00)\",\n                    \"display\": \"flex\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  200\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(103,232,249,1.00)\",\n                    \"display\": \"flex\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  300\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(34,211,238,1.00)\",\n                    \"display\": \"flex\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  400\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"10px\",\n                }\n              }\n            />\n            <div\n              aria-orientation=\"horizontal\"\n              className=\"css-view-1dbjc4n\"\n              role=\"separator\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                  \"height\": \"1px\",\n                  \"width\": \"100%\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"10px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"20px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.25em\",\n                }\n              }\n            >\n              row-reverse\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"10px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"reverse\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row-reverse\",\n                  \"display\": \"flex\",\n                  \"flexDirection\": \"row-reverse\",\n                  \"marginBottom\": \"10px\",\n                  \"marginTop\": \"6px\",\n                  \"msFlexDirection\": \"row-reverse\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(207,250,254,1.00)\",\n                    \"display\": \"flex\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  100\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(165,243,252,1.00)\",\n                    \"display\": \"flex\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  200\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(103,232,249,1.00)\",\n                    \"display\": \"flex\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  300\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(34,211,238,1.00)\",\n                    \"display\": \"flex\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  400\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"10px\",\n                }\n              }\n            />\n            <div\n              aria-orientation=\"horizontal\"\n              className=\"css-view-1dbjc4n\"\n              role=\"separator\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                  \"height\": \"1px\",\n                  \"width\": \"100%\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"10px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"20px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.25em\",\n                }\n              }\n            >\n              column-reverse\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"10px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"reverse\",\n                  \"WebkitBoxOrient\": \"vertical\",\n                  \"WebkitFlexDirection\": \"column-reverse\",\n                  \"display\": \"flex\",\n                  \"flexDirection\": \"column-reverse\",\n                  \"marginBottom\": \"10px\",\n                  \"marginTop\": \"6px\",\n                  \"msFlexDirection\": \"column-reverse\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(207,250,254,1.00)\",\n                    \"display\": \"flex\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  100\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(165,243,252,1.00)\",\n                    \"display\": \"flex\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  200\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(103,232,249,1.00)\",\n                    \"display\": \"flex\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  300\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(34,211,238,1.00)\",\n                    \"display\": \"flex\",\n                    \"height\": \"64px\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"64px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(31,41,55,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  400\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"10px\",\n                }\n              }\n            />\n            <div\n              aria-orientation=\"horizontal\"\n              className=\"css-view-1dbjc4n\"\n              role=\"separator\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                  \"height\": \"1px\",\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Flex Spacer Example 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"vertical\",\n          \"WebkitFlexDirection\": \"column\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"flexDirection\": \"column\",\n          \"height\": \"160px\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"column\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(6,182,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"display\": \"flex\",\n            \"height\": \"64px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"64px\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(250,250,249,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"500\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          Box 1\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxFlex\": 1,\n            \"WebkitFlexGrow\": 1,\n            \"flexGrow\": 1,\n            \"msFlexPositive\": 1,\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(236,72,153,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"display\": \"flex\",\n            \"height\": \"64px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"64px\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(250,250,249,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"500\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          Box 2\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots FormControl CustomStyle 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      onScroll={[Function]}\n      onTouchEnd={[Function]}\n      onTouchMove={[Function]}\n      onTouchStart={[Function]}\n      onWheel={[Function]}\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxFlex\": 1,\n          \"WebkitBoxOrient\": \"vertical\",\n          \"WebkitFlexDirection\": \"column\",\n          \"WebkitFlexGrow\": 1,\n          \"WebkitFlexShrink\": 1,\n          \"WebkitOverflowScrolling\": \"touch\",\n          \"WebkitTransform\": \"translateZ(0px)\",\n          \"flexDirection\": \"column\",\n          \"flexGrow\": 1,\n          \"flexShrink\": 1,\n          \"msFlexDirection\": \"column\",\n          \"msFlexNegative\": 1,\n          \"msFlexPositive\": 1,\n          \"overflowX\": \"hidden\",\n          \"overflowY\": \"auto\",\n          \"transform\": \"translateZ(0px)\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"dataSet\": Object {},\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignSelf\": \"center\",\n              \"alignSelf\": \"center\",\n              \"marginTop\": \"16px\",\n              \"msFlexItemAlign\": \"center\",\n              \"msGridRowAlign\": \"center\",\n              \"paddingLeft\": \"16px\",\n              \"paddingRight\": \"16px\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"20px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginBottom\": \"16px\",\n                }\n              }\n            >\n              Default\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"marginBottom\": \"20px\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <label\n                className=\"css-view-1dbjc4n\"\n                id=\"field-87-label\"\n                style={\n                  Object {\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"start\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitJustifyContent\": \"flex-start\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"flex-start\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexPack\": \"start\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(115,115,115,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"500\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Project Title\n                </div>\n              </label>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderBottomWidth\": \"1px\",\n                    \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                    \"borderLeftWidth\": \"1px\",\n                    \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                    \"borderRightWidth\": \"1px\",\n                    \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"borderTopWidth\": \"1px\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"overflowX\": \"auto\",\n                    \"overflowY\": \"auto\",\n                  }\n                }\n              >\n                <input\n                  autoCapitalize=\"sentences\"\n                  autoComplete=\"on\"\n                  autoCorrect=\"on\"\n                  className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n                  dir=\"auto\"\n                  disabled={false}\n                  id=\"field-87-input\"\n                  onBlur={[Function]}\n                  onChange={[Function]}\n                  onFocus={[Function]}\n                  onKeyDown={[Function]}\n                  onSelect={[Function]}\n                  readOnly={false}\n                  spellCheck={true}\n                  style={\n                    Object {\n                      \"WebkitFlex\": 1,\n                      \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"cursor\": \"auto\",\n                      \"flex\": 1,\n                      \"fontSize\": \"12px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"height\": \"100%\",\n                      \"lineHeight\": \"1.5em\",\n                      \"msFlex\": \"1 1 0%\",\n                      \"outline\": \"none\",\n                      \"outlineWidth\": \"0px\",\n                      \"paddingBottom\": \"8px\",\n                      \"paddingLeft\": \"12px\",\n                      \"paddingRight\": \"12px\",\n                      \"paddingTop\": \"8px\",\n                      \"width\": \"100%\",\n                    }\n                  }\n                  type=\"text\"\n                />\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"field-87-feedback\"\n                style={\n                  Object {\n                    \"marginTop\": \"8px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(115,115,115,1.00)\",\n                      \"fontSize\": \"12px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Give your project a title.\n                </div>\n              </div>\n            </div>\n            <div\n              aria-orientation=\"horizontal\"\n              className=\"css-view-1dbjc4n\"\n              role=\"separator\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                  \"height\": \"1px\",\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"20px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginBottom\": \"16px\",\n                }\n              }\n            >\n              Disabled\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"marginBottom\": \"20px\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <label\n                className=\"css-view-1dbjc4n\"\n                id=\"field-88-label\"\n                style={\n                  Object {\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"start\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitJustifyContent\": \"flex-start\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"flex-start\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexPack\": \"start\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(161,161,170,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"700\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Project Title\n                </div>\n              </label>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderBottomWidth\": \"1px\",\n                    \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                    \"borderLeftWidth\": \"1px\",\n                    \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                    \"borderRightWidth\": \"1px\",\n                    \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"borderTopWidth\": \"1px\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"opacity\": 0.4,\n                    \"overflowX\": \"auto\",\n                    \"overflowY\": \"auto\",\n                  }\n                }\n              >\n                <input\n                  autoCapitalize=\"sentences\"\n                  autoComplete=\"on\"\n                  autoCorrect=\"on\"\n                  className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n                  dir=\"auto\"\n                  disabled={true}\n                  id=\"field-88-input\"\n                  onBlur={[Function]}\n                  onChange={[Function]}\n                  onFocus={[Function]}\n                  onKeyDown={[Function]}\n                  onSelect={[Function]}\n                  placeholder=\"Title\"\n                  readOnly={true}\n                  spellCheck={true}\n                  style={\n                    Object {\n                      \"WebkitFlex\": 1,\n                      \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"cursor\": \"not-allowed\",\n                      \"flex\": 1,\n                      \"fontSize\": \"12px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"height\": \"100%\",\n                      \"lineHeight\": \"1.5em\",\n                      \"msFlex\": \"1 1 0%\",\n                      \"outline\": \"none\",\n                      \"outlineWidth\": \"0px\",\n                      \"paddingBottom\": \"8px\",\n                      \"paddingLeft\": \"12px\",\n                      \"paddingRight\": \"12px\",\n                      \"paddingTop\": \"8px\",\n                      \"width\": \"100%\",\n                    }\n                  }\n                  type=\"text\"\n                />\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"field-88-feedback\"\n                style={\n                  Object {\n                    \"marginTop\": \"8px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(115,115,115,1.00)\",\n                      \"fontSize\": \"12px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Give your project a title.\n                </div>\n              </div>\n            </div>\n            <div\n              aria-orientation=\"horizontal\"\n              className=\"css-view-1dbjc4n\"\n              role=\"separator\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                  \"height\": \"1px\",\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"20px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginBottom\": \"16px\",\n                }\n              }\n            >\n              Invalid\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <label\n                className=\"css-view-1dbjc4n\"\n                id=\"field-89-label\"\n                style={\n                  Object {\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"start\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitJustifyContent\": \"flex-start\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"flex-start\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexPack\": \"start\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(115,115,115,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"500\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Project Title\n                </div>\n              </label>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderBottomWidth\": \"1px\",\n                    \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                    \"borderLeftWidth\": \"1px\",\n                    \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                    \"borderRightWidth\": \"1px\",\n                    \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"borderTopWidth\": \"1px\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"overflowX\": \"auto\",\n                    \"overflowY\": \"auto\",\n                  }\n                }\n              >\n                <input\n                  aria-invalid={true}\n                  autoCapitalize=\"sentences\"\n                  autoComplete=\"on\"\n                  autoCorrect=\"on\"\n                  className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n                  dir=\"auto\"\n                  disabled={false}\n                  id=\"field-89-input\"\n                  onBlur={[Function]}\n                  onChange={[Function]}\n                  onFocus={[Function]}\n                  onKeyDown={[Function]}\n                  onSelect={[Function]}\n                  placeholder=\"Title\"\n                  readOnly={false}\n                  spellCheck={true}\n                  style={\n                    Object {\n                      \"WebkitFlex\": 1,\n                      \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"cursor\": \"auto\",\n                      \"flex\": 1,\n                      \"fontSize\": \"12px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"height\": \"100%\",\n                      \"lineHeight\": \"1.5em\",\n                      \"msFlex\": \"1 1 0%\",\n                      \"outline\": \"none\",\n                      \"outlineWidth\": \"0px\",\n                      \"paddingBottom\": \"8px\",\n                      \"paddingLeft\": \"12px\",\n                      \"paddingRight\": \"12px\",\n                      \"paddingTop\": \"8px\",\n                      \"width\": \"100%\",\n                    }\n                  }\n                  type=\"text\"\n                />\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"field-89\"\n                style={\n                  Object {\n                    \"marginTop\": \"8px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxDirection\": \"normal\",\n                      \"WebkitBoxOrient\": \"horizontal\",\n                      \"WebkitFlexDirection\": \"row\",\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexDirection\": \"row\",\n                    }\n                  }\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(220,38,38,1.00)\",\n                        \"fontSize\": \"12px\",\n                        \"height\": \"12px\",\n                        \"width\": \"12px\",\n                      }\n                    }\n                    viewBox=\"0 0 16 16\"\n                  >\n                    <g>\n                      <path\n                        d=\"M8 16C6.41775 16 4.87103 15.5308 3.55544 14.6518C2.23985 13.7727 1.21447 12.5233 0.608967 11.0615C0.00346627 9.59966 -0.15496 7.99113 0.153721 6.43928C0.462403 4.88743 1.22433 3.46197 2.34315 2.34315C3.46197 1.22433 4.88743 0.462403 6.43928 0.153721C7.99113 -0.15496 9.59966 0.00346627 11.0615 0.608967C12.5233 1.21447 13.7727 2.23985 14.6518 3.55544C15.5308 4.87103 16 6.41775 16 8C16 10.1217 15.1571 12.1566 13.6569 13.6569C12.1566 15.1571 10.1217 16 8 16ZM8 14.4C9.2658 14.4 10.5032 14.0246 11.5556 13.3214C12.6081 12.6182 13.4284 11.6186 13.9128 10.4492C14.3972 9.27973 14.524 7.9929 14.277 6.75142C14.0301 5.50995 13.4205 4.36958 12.5255 3.47452C11.6304 2.57946 10.4901 1.96992 9.24858 1.72298C8.0071 1.47603 6.72028 1.60277 5.55083 2.08717C4.38138 2.57158 3.38184 3.39188 2.6786 4.44435C1.97536 5.49683 1.6 6.7342 1.6 8C1.6 9.69739 2.27429 11.3253 3.47452 12.5255C4.67475 13.7257 6.30262 14.4 8 14.4ZM7.2 10.4H8.8V12H7.2V10.4ZM7.2 4H8.8V8.8H7.2V4Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"width\": \"4px\",\n                      }\n                    }\n                  />\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(220,38,38,1.00)\",\n                        \"fontSize\": \"12px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Something is wrong.\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots FormControl Playground 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"width\": \"70%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"marginLeft\": \"16px\",\n            \"marginRight\": \"16px\",\n          }\n        }\n      >\n        <label\n          className=\"css-view-1dbjc4n\"\n          id=\"field-83-label\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"start\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"flex-start\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"marginBottom\": \"4px\",\n              \"marginTop\": \"4px\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"start\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(115,115,115,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            Favorite framework\n          </div>\n          <div\n            aria-hidden={true}\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            role=\"presentation\"\n            style={\n              Object {\n                \"color\": \"rgba(220,38,38,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            *\n          </div>\n        </label>\n        <div\n          className=\"css-view-1dbjc4n\"\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderBottomWidth\": \"1px\",\n              \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n              \"borderLeftWidth\": \"1px\",\n              \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n              \"borderRightWidth\": \"1px\",\n              \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"borderTopWidth\": \"1px\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"overflowX\": \"auto\",\n              \"overflowY\": \"auto\",\n            }\n          }\n        >\n          <input\n            aria-required={true}\n            autoCapitalize=\"sentences\"\n            autoComplete=\"on\"\n            autoCorrect=\"on\"\n            className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n            dir=\"auto\"\n            disabled={false}\n            id=\"field-83-input\"\n            onBlur={[Function]}\n            onChange={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onSelect={[Function]}\n            placeholder=\"Is it react?\"\n            readOnly={false}\n            required={true}\n            spellCheck={true}\n            style={\n              Object {\n                \"WebkitFlex\": 1,\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"cursor\": \"auto\",\n                \"flex\": 1,\n                \"fontSize\": \"12px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"height\": \"100%\",\n                \"lineHeight\": \"1.5em\",\n                \"msFlex\": \"1 1 0%\",\n                \"outline\": \"none\",\n                \"outlineWidth\": \"0px\",\n                \"paddingBottom\": \"8px\",\n                \"paddingLeft\": \"8px\",\n                \"paddingRight\": \"8px\",\n                \"paddingTop\": \"8px\",\n                \"width\": \"100%\",\n              }\n            }\n            type=\"text\"\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          id=\"field-83-feedback\"\n          style={\n            Object {\n              \"marginTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(115,115,115,1.00)\",\n                \"fontSize\": \"12px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            We'll keep this between us.\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots FormControl Usage 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"maxWidth\": \"300px\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"marginLeft\": \"16px\",\n                \"marginRight\": \"16px\",\n              }\n            }\n          >\n            <label\n              className=\"css-view-1dbjc4n\"\n              id=\"field-85-label\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"start\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"flex-start\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"flex-start\",\n                  \"marginBottom\": \"4px\",\n                  \"marginTop\": \"4px\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"start\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(115,115,115,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Password\n              </div>\n              <div\n                aria-hidden={true}\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                role=\"presentation\"\n                style={\n                  Object {\n                    \"color\": \"rgba(220,38,38,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                *\n              </div>\n            </label>\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"overflowX\": \"auto\",\n                  \"overflowY\": \"auto\",\n                }\n              }\n            >\n              <input\n                aria-required={true}\n                autoCapitalize=\"sentences\"\n                autoComplete=\"on\"\n                autoCorrect=\"on\"\n                className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n                defaultValue=\"12345\"\n                dir=\"auto\"\n                disabled={false}\n                id=\"field-85-input\"\n                onBlur={[Function]}\n                onChange={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onSelect={[Function]}\n                placeholder=\"password\"\n                readOnly={false}\n                required={true}\n                spellCheck={true}\n                style={\n                  Object {\n                    \"WebkitFlex\": 1,\n                    \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"cursor\": \"auto\",\n                    \"flex\": 1,\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"lineHeight\": \"1.5em\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"outline\": \"none\",\n                    \"outlineWidth\": \"0px\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"12px\",\n                    \"paddingRight\": \"12px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"100%\",\n                  }\n                }\n                type=\"password\"\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              id=\"field-85-feedback\"\n              style={\n                Object {\n                  \"marginTop\": \"8px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(115,115,115,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Must be atleast 6 characters.\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots HStack Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(103,232,249,1.00)\",\n            \"borderBottomLeftRadius\": \"6px\",\n            \"borderBottomRightRadius\": \"6px\",\n            \"borderTopLeftRadius\": \"6px\",\n            \"borderTopRightRadius\": \"6px\",\n            \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n            \"display\": \"flex\",\n            \"height\": \"160px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"80px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"12px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(6,182,212,1.00)\",\n            \"borderBottomLeftRadius\": \"6px\",\n            \"borderBottomRightRadius\": \"6px\",\n            \"borderTopLeftRadius\": \"6px\",\n            \"borderTopRightRadius\": \"6px\",\n            \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n            \"display\": \"flex\",\n            \"height\": \"160px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"80px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"12px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(14,116,144,1.00)\",\n            \"borderBottomLeftRadius\": \"6px\",\n            \"borderBottomRightRadius\": \"6px\",\n            \"borderTopLeftRadius\": \"6px\",\n            \"borderTopRightRadius\": \"6px\",\n            \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n            \"display\": \"flex\",\n            \"height\": \"160px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"80px\",\n          }\n        }\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Heading Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-text-901oao\"\n      dir=\"auto\"\n      style={\n        Object {\n          \"color\": \"rgba(23,23,23,1.00)\",\n          \"fontSize\": \"24px\",\n          \"fontStyle\": \"normal\",\n          \"fontWeight\": \"700\",\n          \"letterSpacing\": \"0px\",\n          \"lineHeight\": \"1.25em\",\n        }\n      }\n    >\n      I'm a Heading\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Heading Composition 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"30px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n            \"marginBottom\": \"16px\",\n          }\n        }\n      >\n        Heading\n      </div>\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"20px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        Headings are used for rendering headlines. Heading composes Text so you can use all the style props.\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Heading OverridenStyle 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-text-901oao\"\n      dir=\"auto\"\n      style={\n        Object {\n          \"color\": \"rgba(23,23,23,1.00)\",\n          \"fontSize\": \"50px\",\n          \"fontStyle\": \"normal\",\n          \"fontWeight\": \"700\",\n          \"letterSpacing\": \"0px\",\n          \"lineHeight\": \"1.25em\",\n        }\n      }\n    >\n      How are you?\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Heading Sizes 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n          }\n        }\n      >\n        xs\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"4px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"16px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n          }\n        }\n      >\n        sm\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"4px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"20px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n          }\n        }\n      >\n        md\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"4px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"24px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n          }\n        }\n      >\n        lg\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"4px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"30px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n          }\n        }\n      >\n        xl\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"4px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"36px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n          }\n        }\n      >\n        2xl\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"4px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"48px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0.05em\",\n            \"lineHeight\": \"1.25em\",\n          }\n        }\n      >\n        3xl\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"4px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"60px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0.05em\",\n            \"lineHeight\": \"1.25em\",\n          }\n        }\n      >\n        4xl\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Heading Truncate 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-text-901oao css-textOneLine-vcwn7f\"\n      dir=\"auto\"\n      style={\n        Object {\n          \"color\": \"rgba(23,23,23,1.00)\",\n          \"fontSize\": \"24px\",\n          \"fontStyle\": \"normal\",\n          \"fontWeight\": \"700\",\n          \"letterSpacing\": \"0px\",\n          \"lineHeight\": \"1.25em\",\n        }\n      }\n    >\n      NativeBase is a simple, modular and accessible component library that gives you building blocks to build you React applications.\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Hidden Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"backgroundColor\": \"rgba(253,186,116,1.00)\",\n            \"paddingBottom\": \"8px\",\n            \"paddingLeft\": \"8px\",\n            \"paddingRight\": \"8px\",\n            \"paddingTop\": \"8px\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          This text will be always visible.\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Hidden HiddenFromAndToBreakpoints 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"backgroundColor\": \"rgba(253,186,116,1.00)\",\n            \"paddingBottom\": \"8px\",\n            \"paddingLeft\": \"8px\",\n            \"paddingRight\": \"8px\",\n            \"paddingTop\": \"8px\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          This text will be always visible.\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"backgroundColor\": \"rgba(248,113,113,1.00)\",\n            \"paddingBottom\": \"8px\",\n            \"paddingLeft\": \"8px\",\n            \"paddingRight\": \"8px\",\n            \"paddingTop\": \"8px\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          This text will be hidden from sm to lg screens.\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"backgroundColor\": \"rgba(96,165,250,1.00)\",\n            \"paddingBottom\": \"8px\",\n            \"paddingLeft\": \"8px\",\n            \"paddingRight\": \"8px\",\n            \"paddingTop\": \"8px\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          This will be hidden from sm to all screen sizes.\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Hidden HiddenOnColorModes 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(75,85,99,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(255,255,255,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Change mode\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"display\": \"flex\",\n            \"justifyContent\": \"center\",\n            \"marginTop\": \"20px\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n          }\n        }\n      >\n        <div\n          aria-label=\"image\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"150px\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"150px\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Hidden HiddenOnPlatforms 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"backgroundColor\": \"rgba(253,186,116,1.00)\",\n            \"paddingBottom\": \"8px\",\n            \"paddingLeft\": \"8px\",\n            \"paddingRight\": \"8px\",\n            \"paddingTop\": \"8px\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          This text will be visible on every platform.\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Hidden HiddenOnlyOnBreakPoints 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"backgroundColor\": \"rgba(253,186,116,1.00)\",\n            \"paddingBottom\": \"8px\",\n            \"paddingLeft\": \"8px\",\n            \"paddingRight\": \"8px\",\n            \"paddingTop\": \"8px\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          This text will be visible on every screen size.\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"backgroundColor\": \"rgba(248,113,113,1.00)\",\n            \"paddingBottom\": \"8px\",\n            \"paddingLeft\": \"8px\",\n            \"paddingRight\": \"8px\",\n            \"paddingTop\": \"8px\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          This text will be hidden on sm and lg only.\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Icon All Icons 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        onScroll={[Function]}\n        onTouchEnd={[Function]}\n        onTouchMove={[Function]}\n        onTouchStart={[Function]}\n        onWheel={[Function]}\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxFlex\": 1,\n            \"WebkitBoxOrient\": \"vertical\",\n            \"WebkitFlexDirection\": \"column\",\n            \"WebkitFlexGrow\": 1,\n            \"WebkitFlexShrink\": 1,\n            \"WebkitOverflowScrolling\": \"touch\",\n            \"WebkitTransform\": \"translateZ(0px)\",\n            \"flexDirection\": \"column\",\n            \"flexGrow\": 1,\n            \"flexShrink\": 1,\n            \"msFlexDirection\": \"column\",\n            \"msFlexNegative\": 1,\n            \"msFlexPositive\": 1,\n            \"overflowX\": \"hidden\",\n            \"overflowY\": \"auto\",\n            \"transform\": \"translateZ(0px)\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"dataSet\": Object {},\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M13.25 10.75V2H10.75V10.75H2V13.25H10.75V22H13.25V13.25H22V10.75H13.25Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  add\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <g\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      >\n                        <path\n                          d=\"M13.0666 3.76375L6.43395 10.3964L5.58039 11.25H6.7875H21.5V12.75H6.7875H5.58192L6.43363 13.6032L13.0557 20.2372L12 21.2929L2.70711 12L12.0012 2.70586L13.0666 3.76375Z\"\n                          stroke=\"currentColor\"\n                        />\n                      </g>\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  arrow-back\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <g\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      >\n                        <path\n                          d=\"M10.9334 3.76375L17.5661 10.3964L18.4196 11.25H17.2125H2.5V12.75H17.2125H18.4181L17.5664 13.6032L10.9443 20.2372L12 21.2929L21.2929 12L11.9988 2.70586L10.9334 3.76375Z\"\n                          stroke=\"currentColor\"\n                        />\n                      </g>\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  arrow-forward\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <g\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      >\n                        <path\n                          d=\"M20.2362 13.0666L13.6036 6.43395L12.75 5.58039V6.7875L12.75 21.5H11.25L11.25 6.7875V5.58192L10.3968 6.43363L3.76282 13.0557L2.70711 12L12 2.70711L21.2941 12.0012L20.2362 13.0666Z\"\n                          stroke=\"currentColor\"\n                        />\n                      </g>\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  arrow-up\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <g\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      >\n                        <path\n                          d=\"M3.76375 10.9334L10.3964 17.5661L11.25 18.4196V17.2125L11.25 2.5H12.75L12.75 17.2125V18.4181L13.6032 17.5664L20.2372 10.9443L21.2929 12L12 21.2929L2.70586 11.9988L3.76375 10.9334Z\"\n                          stroke=\"currentColor\"\n                        />\n                      </g>\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  arrow-down\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  check\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  check-circle\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M20.2286 6L11.9973 14.3785L3.76862 6.00268L2 7.80293L12 18L22 7.80293L20.2286 6Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  chevron-down\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M18 3.77141L9.62148 12.0027L17.9973 20.2314L16.1971 22L6 12L16.1971 2L18 3.77141Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  chevron-left\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M6 3.77141L14.3785 12.0027L6.00268 20.2314L7.80293 22L18 12L7.80293 2L6 3.77141Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  chevron-right\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M20.2286 18L11.9973 9.62148L3.76862 17.9973L2 16.1971L12 6L22 16.1971L20.2286 18Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  chevron-up\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  circle\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  close\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 16 16\"\n                  >\n                    <g>\n                      <path\n                        d=\"M9.41 8l2.29-2.29c.19-.18.3-.43.3-.71a1.003 1.003 0 0 0-1.71-.71L8 6.59l-2.29-2.3a1.003 1.003 0 0 0-1.42 1.42L6.59 8 4.3 10.29c-.19.18-.3.43-.3.71a1.003 1.003 0 0 0 1.71.71L8 9.41l2.29 2.29c.18.19.43.3.71.3a1.003 1.003 0 0 0 .71-1.71L9.41 8z\"\n                        fill=\"currentColor\"\n                        fillRule=\"evenodd\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  small-close\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M22 5H2V7.47961H22V5ZM22 10.4795H2V12.9591H22V10.4795ZM2 15.959H22V18.4386H2V15.959Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  menu\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M12 0C9.62663 0 7.30655 0.703788 5.33316 2.02236C3.35977 3.34094 1.8217 5.21509 0.913451 7.4078C0.00519948 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6689 1.83649 18.807 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0865C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6935 24 14.3734 24 12C23.9966 8.81846 22.7312 5.76821 20.4815 3.51852C18.2318 1.26883 15.1815 0.00344108 12 0ZM12.25 5C12.5467 5 12.8367 5.08797 13.0834 5.25279C13.33 5.41762 13.5223 5.65189 13.6358 5.92597C13.7494 6.20006 13.7791 6.50166 13.7212 6.79263C13.6633 7.08361 13.5204 7.35088 13.3107 7.56066C13.1009 7.77044 12.8336 7.9133 12.5426 7.97118C12.2517 8.02905 11.9501 7.99935 11.676 7.88582C11.4019 7.77229 11.1676 7.58003 11.0028 7.33335C10.838 7.08668 10.75 6.79667 10.75 6.5C10.75 6.10217 10.908 5.72064 11.1893 5.43934C11.4706 5.15803 11.8522 5 12.25 5ZM14.5 18.5H10.5C10.2348 18.5 9.98043 18.3946 9.7929 18.2071C9.60536 18.0196 9.5 17.7652 9.5 17.5C9.5 17.2348 9.60536 16.9804 9.7929 16.7929C9.98043 16.6054 10.2348 16.5 10.5 16.5H11.25C11.3163 16.5 11.3799 16.4737 11.4268 16.4268C11.4737 16.3799 11.5 16.3163 11.5 16.25V11.75C11.5 11.6837 11.4737 11.6201 11.4268 11.5732C11.3799 11.5263 11.3163 11.5 11.25 11.5H10.5C10.2348 11.5 9.98043 11.3946 9.7929 11.2071C9.60536 11.0196 9.5 10.7652 9.5 10.5C9.5 10.2348 9.60536 9.98043 9.7929 9.79289C9.98043 9.60536 10.2348 9.5 10.5 9.5H11.5C12.0304 9.5 12.5391 9.71071 12.9142 10.0858C13.2893 10.4609 13.5 10.9696 13.5 11.5V16.25C13.5 16.3163 13.5263 16.3799 13.5732 16.4268C13.6201 16.4737 13.6837 16.5 13.75 16.5H14.5C14.7652 16.5 15.0196 16.6054 15.2071 16.7929C15.3946 16.9804 15.5 17.2348 15.5 17.5C15.5 17.7652 15.3946 18.0196 15.2071 18.2071C15.0196 18.3946 14.7652 18.5 14.5 18.5Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  info\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <g\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      >\n                        <path\n                          d=\"M11.9442 8.24C12.5628 8.24 13.0642 7.73856 13.0642 7.12C13.0642 6.50144 12.5628 6 11.9442 6C11.3257 6 10.8242 6.50144 10.8242 7.12C10.8242 7.73856 11.3257 8.24 11.9442 8.24Z\"\n                        />\n                        <path\n                          d=\"M14.4008 15.9996H12.8008V9.59961H10.4008C10.1886 9.59961 9.98513 9.68389 9.8351 9.83392C9.68507 9.98395 9.60078 10.1874 9.60078 10.3996C9.60078 10.6118 9.68507 10.8153 9.8351 10.9653C9.98513 11.1153 10.1886 11.1996 10.4008 11.1996H11.2008V15.9996H9.60078C9.38861 15.9996 9.18513 16.0839 9.0351 16.2339C8.88507 16.384 8.80078 16.5874 8.80078 16.7996C8.80078 17.0118 8.88507 17.2153 9.0351 17.3653C9.18513 17.5153 9.38861 17.5996 9.60078 17.5996H14.4008C14.613 17.5996 14.8164 17.5153 14.9665 17.3653C15.1165 17.2153 15.2008 17.0118 15.2008 16.7996C15.2008 16.5874 15.1165 16.384 14.9665 16.2339C14.8164 16.0839 14.613 15.9996 14.4008 15.9996Z\"\n                        />\n                        <path\n                          d=\"M12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17316C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8078C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 9.34783 20.9464 6.80429 19.0711 4.92893C17.1957 3.05357 14.6522 2 12 2ZM12 20.3333C10.3518 20.3333 8.74066 19.8446 7.37025 18.9289C5.99984 18.0132 4.93174 16.7117 4.30101 15.189C3.67028 13.6663 3.50525 11.9908 3.82679 10.3742C4.14834 8.75774 4.94201 7.27288 6.10745 6.10744C7.27288 4.942 8.75774 4.14833 10.3743 3.82679C11.9908 3.50525 13.6663 3.67027 15.189 4.301C16.7117 4.93173 18.0132 5.99984 18.9289 7.37025C19.8446 8.74066 20.3333 10.3518 20.3333 12C20.3333 13.0943 20.1178 14.178 19.699 15.189C19.2802 16.2001 18.6664 17.1187 17.8926 17.8926C17.1187 18.6664 16.2001 19.2802 15.189 19.699C14.178 20.1178 13.0944 20.3333 12 20.3333Z\"\n                        />\n                      </g>\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  info-outline\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M22 10.5H2V13H22V10.5Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  minus\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  moon\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M12 0C9.62663 0 7.30655 0.703787 5.33316 2.02236C3.35977 3.34094 1.8217 5.21508 0.913451 7.4078C0.00519943 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6688 1.83649 18.807 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0865C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6934 24 14.3734 24 12C23.9966 8.81846 22.7312 5.76821 20.4815 3.51852C18.2318 1.26883 15.1815 0.00344108 12 0V0ZM12 19C11.7033 19 11.4133 18.912 11.1666 18.7472C10.92 18.5824 10.7277 18.3481 10.6142 18.074C10.5007 17.7999 10.4709 17.4983 10.5288 17.2074C10.5867 16.9164 10.7296 16.6491 10.9393 16.4393C11.1491 16.2296 11.4164 16.0867 11.7074 16.0288C11.9983 15.9709 12.2999 16.0006 12.574 16.1142C12.8481 16.2277 13.0824 16.42 13.2472 16.6666C13.412 16.9133 13.5 17.2033 13.5 17.5C13.5 17.8978 13.342 18.2794 13.0607 18.5607C12.7794 18.842 12.3978 19 12 19ZM13.6 12.92C13.4216 12.9979 13.2698 13.1261 13.1632 13.289C13.0566 13.4519 12.9999 13.6423 13 13.837C13 14.1022 12.8946 14.3566 12.7071 14.5441C12.5196 14.7316 12.2652 14.837 12 14.837C11.7348 14.837 11.4804 14.7316 11.2929 14.5441C11.1054 14.3566 11 14.1022 11 13.837C10.9999 13.2532 11.1702 12.682 11.4899 12.1936C11.8096 11.7051 12.2649 11.3205 12.8 11.087C13.1305 10.9427 13.4159 10.7118 13.6259 10.4186C13.8359 10.1255 13.9627 9.78099 13.993 9.42163C14.0232 9.06228 13.9557 8.70144 13.7976 8.37731C13.6396 8.05317 13.3968 7.77781 13.095 7.58037C12.7932 7.38292 12.4437 7.27074 12.0834 7.25571C11.7231 7.24067 11.3654 7.32333 11.0482 7.49495C10.7311 7.66656 10.4662 7.92074 10.2817 8.23057C10.0971 8.54041 9.99982 8.89437 10 9.255C10 9.52021 9.89465 9.77457 9.70711 9.9621C9.51957 10.1496 9.26522 10.255 9 10.255C8.73479 10.255 8.48043 10.1496 8.2929 9.9621C8.10536 9.77457 8 9.52021 8 9.255C7.99999 8.53384 8.19495 7.82608 8.56423 7.20665C8.93352 6.58721 9.4634 6.07913 10.0978 5.73618C10.7322 5.39324 11.4475 5.22817 12.168 5.25847C12.8886 5.28876 13.5875 5.51329 14.1909 5.90828C14.7942 6.30327 15.2796 6.85404 15.5956 7.50229C15.9116 8.15054 16.0464 8.87216 15.9859 9.59077C15.9253 10.3094 15.6716 10.9983 15.2516 11.5845C14.8316 12.1707 14.261 12.6325 13.6 12.921V12.92Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  question\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <g\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      >\n                        <path\n                          d=\"M12 20.75C9.67936 20.75 7.45376 19.8281 5.81282 18.1872C4.17187 16.5462 3.25 14.3206 3.25 12C3.25 9.67936 4.17187 7.45376 5.81282 5.81282C7.45376 4.17187 9.67936 3.25 12 3.25C14.3206 3.25 16.5462 4.17187 18.1872 5.81282C19.8281 7.45376 20.75 9.67936 20.75 12C20.75 14.3206 19.8281 16.5462 18.1872 18.1872C16.5462 19.8281 14.3206 20.75 12 20.75ZM12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 9.34784 20.9464 6.8043 19.0711 4.92893C17.1957 3.05357 14.6522 2 12 2C9.34784 2 6.8043 3.05357 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C6.8043 20.9464 9.34784 22 12 22Z\"\n                        />\n                        <path\n                          d=\"M8.70533 9.34281C8.70369 9.38156 8.70999 9.42024 8.72385 9.45647C8.73771 9.4927 8.75883 9.52571 8.78592 9.55347C8.81301 9.58123 8.84549 9.60316 8.88136 9.6179C8.91724 9.63265 8.95575 9.6399 8.99453 9.63921H9.98453C10.1501 9.63921 10.2821 9.50361 10.3037 9.33921C10.4117 8.55201 10.9517 7.97841 11.9141 7.97841C12.7373 7.97841 13.4909 8.39001 13.4909 9.38001C13.4909 10.142 13.0421 10.4924 12.3329 11.0252C11.5253 11.612 10.8857 12.2972 10.9313 13.4096L10.9349 13.67C10.9362 13.7487 10.9684 13.8238 11.0245 13.879C11.0806 13.9343 11.1562 13.9652 11.2349 13.9652H12.2081C12.2877 13.9652 12.364 13.9336 12.4203 13.8773C12.4765 13.8211 12.5081 13.7448 12.5081 13.6652V13.5392C12.5081 12.6776 12.8357 12.4268 13.7201 11.756C14.4509 11.2004 15.2129 10.5836 15.2129 9.28881C15.2129 7.47561 13.6817 6.59961 12.0053 6.59961C10.4849 6.59961 8.81933 7.30761 8.70533 9.34281ZM10.5737 16.2584C10.5737 16.898 11.0837 17.3708 11.7857 17.3708C12.5165 17.3708 13.0193 16.898 13.0193 16.2584C13.0193 15.596 12.5153 15.1304 11.7845 15.1304C11.0837 15.1304 10.5737 15.596 10.5737 16.2584Z\"\n                        />\n                      </g>\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  question-outline\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M21.9399 20.5624L15.4474 14.0699C16.4549 12.7675 16.9999 11.175 16.9999 9.49997C16.9999 7.49498 16.2174 5.61498 14.8024 4.19749C13.3874 2.78 11.5025 2 9.49997 2C7.49748 2 5.61248 2.7825 4.19749 4.19749C2.78 5.61248 2 7.49498 2 9.49997C2 11.5025 2.7825 13.3874 4.19749 14.8024C5.61248 16.2199 7.49498 16.9999 9.49997 16.9999C11.175 16.9999 12.765 16.4549 14.0674 15.4499L20.5599 21.9399C20.579 21.959 20.6016 21.9741 20.6264 21.9844C20.6513 21.9947 20.678 22 20.7049 22C20.7318 22 20.7585 21.9947 20.7834 21.9844C20.8083 21.9741 20.8309 21.959 20.8499 21.9399L21.9399 20.8524C21.959 20.8334 21.9741 20.8108 21.9844 20.7859C21.9947 20.761 22 20.7343 22 20.7074C22 20.6805 21.9947 20.6538 21.9844 20.6289C21.9741 20.6041 21.959 20.5815 21.9399 20.5624ZM13.46 13.46C12.4 14.5174 10.995 15.0999 9.49997 15.0999C8.00497 15.0999 6.59998 14.5174 5.53998 13.46C4.48249 12.4 3.89999 10.995 3.89999 9.49997C3.89999 8.00497 4.48249 6.59748 5.53998 5.53998C6.59998 4.48249 8.00497 3.89999 9.49997 3.89999C10.995 3.89999 12.4025 4.47999 13.46 5.53998C14.5174 6.59998 15.0999 8.00497 15.0999 9.49997C15.0999 10.995 14.5174 12.4025 13.46 13.46Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  search\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <g\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      >\n                        <path\n                          d=\"M11.9996 7.21094C9.36096 7.21094 7.22266 9.34924 7.22266 11.9879C7.22266 14.6265 9.36096 16.7648 11.9996 16.7648C14.6382 16.7648 16.7765 14.6265 16.7765 11.9879C16.7765 9.34924 14.6382 7.21094 11.9996 7.21094ZM11.9996 14.7715C10.462 14.7715 9.21437 13.5255 9.21437 11.9863C9.21437 10.4487 10.462 9.20265 11.9996 9.20265C13.5356 9.20265 14.7832 10.4487 14.7832 11.9863C14.7832 13.5255 13.5356 14.7715 11.9996 14.7715Z\"\n                        />\n                        <path\n                          d=\"M13.1236 2.46526C13.1236 2.20873 12.9149 2 12.6599 2H11.3422C11.0857 2 10.877 2.20873 10.877 2.46526V5.48789C10.877 5.74283 11.0857 5.95315 11.3422 5.95315H12.6599C12.9149 5.95315 13.1236 5.74283 13.1236 5.48789V2.46526Z\"\n                        />\n                        <path\n                          d=\"M6.05371 4.46121C5.87206 4.28116 5.5757 4.28116 5.39565 4.46121L4.46512 5.39174C4.28507 5.57338 4.28507 5.86975 4.46512 6.0498L6.60183 8.18651C6.78347 8.36816 7.07984 8.36816 7.25989 8.18651L8.19042 7.25598C8.37206 7.07434 8.37206 6.77797 8.19042 6.59792L6.05371 4.46121Z\"\n                        />\n                        <path\n                          d=\"M2.46526 10.875C2.342 10.8754 2.2239 10.9246 2.13674 11.0117C2.04957 11.0989 2.00042 11.217 2 11.3403V12.658C2 12.9145 2.21033 13.1232 2.46686 13.1232H5.48789C5.74442 13.1232 5.95475 12.9145 5.95475 12.658V11.3419C5.95475 11.0869 5.74602 10.8766 5.48948 10.8766H2.46526V10.875Z\"\n                        />\n                        <path\n                          d=\"M4.46316 17.9472C4.28311 18.1288 4.28311 18.4252 4.46316 18.6052L5.39369 19.5358C5.57374 19.7158 5.87011 19.7158 6.05175 19.5358L8.18847 17.3975C8.37011 17.2158 8.37011 16.9194 8.18847 16.7394L7.25794 15.8089C7.07629 15.6288 6.77993 15.6288 6.59987 15.8089L4.46316 17.9472Z\"\n                        />\n                        <path\n                          d=\"M10.877 21.5344C10.877 21.7909 11.0857 21.9997 11.3438 21.9997H12.6599C12.9149 21.9997 13.1236 21.7893 13.1236 21.5344V18.5102C13.1236 18.2552 12.9149 18.0449 12.6583 18.0449L11.3422 18.0465C11.0857 18.0465 10.877 18.2552 10.877 18.5118V21.5344Z\"\n                        />\n                        <path\n                          d=\"M17.9484 19.5342C18.13 19.7142 18.4264 19.7142 18.6064 19.5342L19.537 18.6036C19.6242 18.5164 19.6732 18.398 19.6732 18.2746C19.6732 18.1512 19.6242 18.0329 19.537 17.9456L17.3987 15.8089C17.2186 15.6288 16.9222 15.6288 16.7406 15.8089L15.8101 16.7394C15.6284 16.921 15.6284 17.2174 15.8101 17.3975L17.9484 19.5342Z\"\n                        />\n                        <path\n                          d=\"M21.5348 13.1236C21.658 13.1232 21.7761 13.074 21.8633 12.9869C21.9505 12.8997 21.9996 12.7816 22 12.6583V11.3422C21.9996 11.219 21.9505 11.1009 21.8633 11.0137C21.7761 10.9265 21.658 10.8774 21.5348 10.877H18.5121C18.3889 10.8774 18.2708 10.9265 18.1836 11.0137C18.0964 11.1009 18.0473 11.219 18.0469 11.3422V12.6599C18.0469 12.9149 18.2556 13.1252 18.5121 13.1252L21.5348 13.1236Z\"\n                        />\n                        <path\n                          d=\"M19.5358 6.05175C19.7174 5.87011 19.7174 5.57374 19.5358 5.39369L18.6036 4.46316C18.4236 4.28311 18.1256 4.28311 17.9472 4.46316L15.8089 6.60147C15.6288 6.78152 15.6288 7.07789 15.8089 7.25953L16.7394 8.19006C16.921 8.3717 17.2174 8.3717 17.3975 8.19006L19.5358 6.05175Z\"\n                        />\n                      </g>\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  sun\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M11.9836 0.00267822C8.77744 0.0551662 5.72075 1.36728 3.47427 3.65538C2.35024 4.77447 1.46338 6.10869 0.866705 7.57831C0.270027 9.04793 -0.0242179 10.6228 0.00155827 12.2087C-0.000286057 13.7583 0.303697 15.2931 0.896087 16.7251C1.48848 18.1571 2.35763 19.458 3.45373 20.5535C4.54983 21.6489 5.85133 22.5173 7.28365 23.1089C8.71596 23.7004 10.2509 24.0035 11.8006 24.0007H12.0146C15.2217 23.9677 18.2847 22.6638 20.5316 20.3751C22.7785 18.0864 24.0257 14.9999 23.9996 11.7927C24.0033 10.2243 23.6933 8.6709 23.0879 7.22398C22.4825 5.77706 21.5939 4.4658 20.4744 3.36731C19.3548 2.26882 18.0269 1.40527 16.5688 0.827453C15.1106 0.249636 13.5517 -0.0307856 11.9836 0.00267822ZM10.5007 16.5433C10.4935 16.3473 10.5254 16.1517 10.5947 15.9682C10.6639 15.7846 10.7691 15.6167 10.904 15.4742C11.0389 15.3318 11.2009 15.2177 11.3804 15.1386C11.5599 15.0594 11.7534 15.0169 11.9496 15.0135H11.9766C12.3712 15.0142 12.7501 15.1677 13.034 15.4417C13.3179 15.7157 13.4847 16.089 13.4995 16.4833C13.5068 16.6794 13.4749 16.875 13.4057 17.0586C13.3365 17.2423 13.2314 17.4102 13.0965 17.5527C12.9615 17.6952 12.7995 17.8093 12.6199 17.8884C12.4403 17.9674 12.2468 18.0099 12.0506 18.0132H12.0236C11.6291 18.0119 11.2505 17.8583 10.9667 17.5844C10.6829 17.3105 10.5159 16.9375 10.5007 16.5433ZM11.0007 12.5017V6.50215C11.0007 6.23695 11.106 5.98262 11.2935 5.7951C11.481 5.60758 11.7354 5.50223 12.0006 5.50223C12.2658 5.50223 12.5201 5.60758 12.7076 5.7951C12.8951 5.98262 13.0005 6.23695 13.0005 6.50215V12.5017C13.0005 12.7669 12.8951 13.0212 12.7076 13.2087C12.5201 13.3962 12.2658 13.5016 12.0006 13.5016C11.7354 13.5016 11.481 13.3962 11.2935 13.2087C11.106 13.0212 11.0007 12.7669 11.0007 12.5017Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  warning-1\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <g\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      >\n                        <path\n                          d=\"M13.9193 18.4271C13.8992 17.9392 13.6816 17.4813 13.3178 17.1478C12.9545 16.8148 12.4731 16.631 11.975 16.6304H11.9746H11.945V16.6304L11.9392 16.6305C11.6898 16.6348 11.4434 16.6864 11.2142 16.7827L11.333 17.0655L11.2142 16.7827C10.9851 16.879 10.7773 17.0183 10.6035 17.1931C10.4296 17.368 10.2932 17.5751 10.2031 17.8026C10.113 18.0302 10.0712 18.2732 10.0806 18.5171L10.0807 18.5176C10.1001 19.0055 10.3169 19.4638 10.6802 19.7979C11.043 20.1315 11.5241 20.3162 12.0222 20.3177H12.0233H12.0529V20.3178L12.058 20.3177C12.3081 20.3138 12.5552 20.2624 12.785 20.1661C13.0148 20.0698 13.2232 19.9303 13.3974 19.7549C13.5716 19.5795 13.7081 19.3718 13.7981 19.1436C13.8881 18.9153 13.9295 18.6716 13.9193 18.4271ZM13.9193 18.4271L13.5863 18.4408M13.9193 18.4271C13.9193 18.4271 13.9193 18.4271 13.9193 18.427L13.5863 18.4408M13.5863 18.4408C13.5945 18.6386 13.5611 18.836 13.488 19.0213C13.415 19.2066 13.3037 19.3762 13.1609 19.52C13.018 19.6638 12.8464 19.779 12.6561 19.8587C12.4658 19.9385 12.2607 19.9812 12.0529 19.9844H12.0233C11.6062 19.9831 11.2058 19.8284 10.9059 19.5525C10.6059 19.2767 10.4296 18.9011 10.4137 18.5043C10.4061 18.3069 10.4399 18.1101 10.513 17.9254C10.5862 17.7406 10.6973 17.5715 10.8399 17.4281C10.9824 17.2847 11.1536 17.1698 11.3434 17.09C11.5331 17.0103 11.7376 16.9674 11.945 16.9638H11.9746C12.3916 16.9642 12.7922 17.1182 13.0926 17.3936C13.393 17.6689 13.5699 18.0442 13.5863 18.4408ZM23.4665 20.2125L23.4665 20.2125C23.6068 20.4676 23.6751 20.7517 23.6658 21.0376C23.6566 21.3234 23.57 21.6033 23.4131 21.8501C23.2562 22.097 23.0337 22.3031 22.7658 22.4469C22.4978 22.5907 22.1942 22.6667 21.8847 22.6667H21.8846H2.11538H2.11533C1.80576 22.6667 1.50222 22.5907 1.23422 22.4469C0.96631 22.3031 0.743845 22.097 0.586879 21.8501L0.305565 22.0289L0.586879 21.8501C0.429998 21.6033 0.343434 21.3234 0.334166 21.0376C0.324898 20.7517 0.393165 20.4676 0.533517 20.2125L0.53353 20.2125L10.4192 2.23977C10.5681 1.96911 10.7933 1.74021 11.0721 1.5796C11.3511 1.41893 11.6722 1.33333 12.0005 1.33333C12.3289 1.33333 12.65 1.41893 12.9289 1.5796C13.2078 1.74021 13.4329 1.96911 13.5819 2.23977L23.4665 20.2125ZM11.0224 7.44182C10.7599 7.69176 10.6091 8.03434 10.6091 8.39521V14.4365C10.6091 14.7974 10.7599 15.1399 11.0224 15.3899C11.2843 15.6393 11.6363 15.7767 12 15.7767C12.3637 15.7767 12.7157 15.6393 12.9776 15.3899C13.2401 15.1399 13.3909 14.7974 13.3909 14.4365V8.39521C13.3909 8.03434 13.2401 7.69176 12.9776 7.44182C12.7157 7.19242 12.3637 7.05499 12 7.05499C11.6363 7.05499 11.2843 7.19242 11.0224 7.44182Z\"\n                          stroke=\"currentColor\"\n                          strokeWidth=\"0.666667\"\n                        />\n                      </g>\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  warning-2\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 16 16\"\n                  >\n                    <g>\n                      <path\n                        d=\"M8 16C6.41775 16 4.87103 15.5308 3.55544 14.6518C2.23985 13.7727 1.21447 12.5233 0.608967 11.0615C0.00346627 9.59966 -0.15496 7.99113 0.153721 6.43928C0.462403 4.88743 1.22433 3.46197 2.34315 2.34315C3.46197 1.22433 4.88743 0.462403 6.43928 0.153721C7.99113 -0.15496 9.59966 0.00346627 11.0615 0.608967C12.5233 1.21447 13.7727 2.23985 14.6518 3.55544C15.5308 4.87103 16 6.41775 16 8C16 10.1217 15.1571 12.1566 13.6569 13.6569C12.1566 15.1571 10.1217 16 8 16ZM8 14.4C9.2658 14.4 10.5032 14.0246 11.5556 13.3214C12.6081 12.6182 13.4284 11.6186 13.9128 10.4492C14.3972 9.27973 14.524 7.9929 14.277 6.75142C14.0301 5.50995 13.4205 4.36958 12.5255 3.47452C11.6304 2.57946 10.4901 1.96992 9.24858 1.72298C8.0071 1.47603 6.72028 1.60277 5.55083 2.08717C4.38138 2.57158 3.38184 3.39188 2.6786 4.44435C1.97536 5.49683 1.6 6.7342 1.6 8C1.6 9.69739 2.27429 11.3253 3.47452 12.5255C4.67475 13.7257 6.30262 14.4 8 14.4ZM7.2 10.4H8.8V12H7.2V10.4ZM7.2 4H8.8V8.8H7.2V4Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  warning-outline\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 32.055 32.055\"\n                  >\n                    <g>\n                      <g\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      >\n                        <path\n                          d=\"M3.968,12.061C1.775,12.061,0,13.835,0,16.027c0,2.192,1.773,3.967,3.968,3.967c2.189,0,3.966-1.772,3.966-3.967   C7.934,13.835,6.157,12.061,3.968,12.061z M16.233,12.061c-2.188,0-3.968,1.773-3.968,3.965c0,2.192,1.778,3.967,3.968,3.967   s3.97-1.772,3.97-3.967C20.201,13.835,18.423,12.061,16.233,12.061z M28.09,12.061c-2.192,0-3.969,1.774-3.969,3.967   c0,2.19,1.774,3.965,3.969,3.965c2.188,0,3.965-1.772,3.965-3.965S30.278,12.061,28.09,12.061z\"\n                        />\n                      </g>\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  three-dots\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M18.0621 16.1487C17.2993 16.1487 16.6113 16.4451 16.0895 16.9223L8.93445 12.7495C8.98988 12.523 9.02482 12.2868 9.02482 12.0458C9.02482 11.8048 8.98988 11.5698 8.93445 11.3433L16.0136 7.21147C16.5679 7.73368 17.3006 8.02461 18.0621 8.02482C19.7237 8.02482 21.0745 6.67406 21.0745 5.01241C21.0745 3.35076 19.7237 2 18.0621 2C16.4004 2 15.0496 3.35076 15.0496 5.01241C15.0496 5.2534 15.0846 5.48958 15.14 5.71491L8.06085 9.84673C7.50628 9.32504 6.7738 9.0342 6.01241 9.03338C4.35077 9.03338 3 10.3841 3 12.0458C3 13.7074 4.35077 15.0582 6.01241 15.0582C6.77392 15.058 7.50661 14.7671 8.06085 14.2449L15.2159 18.4176C15.1632 18.633 15.1361 18.8538 15.1352 19.0756C15.1354 19.6541 15.3072 20.2196 15.6288 20.7005C15.9503 21.1814 16.4073 21.5562 16.9418 21.7775C17.4764 21.9988 18.0645 22.0567 18.6319 21.9437C19.1993 21.8308 19.7205 21.5522 20.1296 21.1431C20.5387 20.734 20.8173 20.2128 20.9302 19.6454C21.0432 19.078 20.9853 18.4898 20.764 17.9553C20.5427 17.4208 20.1679 16.9638 19.687 16.6423C19.2061 16.3207 18.6406 16.1489 18.0621 16.1487Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  share\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M12 0C5.376 0 0 5.376 0 12C0 18.624 5.376 24 12 24C18.624 24 24 18.624 24 12C24 5.376 18.624 0 12 0ZM9.6 17.4V6.6L16.8 12L9.6 17.4Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  play\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitFlex\": 1,\n                    \"alignItems\": \"center\",\n                    \"flex\": 1,\n                    \"height\": \"76px\",\n                    \"marginBottom\": \"12px\",\n                    \"marginLeft\": \"8px\",\n                    \"marginRight\": \"8px\",\n                    \"marginTop\": \"12px\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"76px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M1.75143 3.371C2.87321 2.22206 4.39447 1.57662 5.98067 1.57662C7.56686 1.57662 9.08812 2.22206 10.2099 3.371L11.9626 5.16516L13.7153 3.371C14.2671 2.78565 14.9272 2.31876 15.657 1.99756C16.3869 1.67637 17.1718 1.5073 17.9661 1.50023C18.7604 1.49316 19.5481 1.64823 20.2832 1.95638C21.0184 2.26453 21.6863 2.7196 22.2479 3.29504C22.8096 3.87047 23.2538 4.55474 23.5545 5.30793C23.8553 6.06112 24.0067 6.86813 23.9998 7.68189C23.9929 8.49564 23.8279 9.29984 23.5143 10.0476C23.2008 10.7953 22.7451 11.4715 22.1738 12.0369L11.9626 22.5L1.75143 12.0369C0.629991 10.8876 0 9.32904 0 7.70394C0 6.07885 0.629991 4.52029 1.75143 3.371Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"height\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                      \"textAlign\": \"center\",\n                    }\n                  }\n                >\n                  favourite\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"0px\",\n              }\n            }\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Icon Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitFlexDirection\": \"row\",\n          \"flexDirection\": \"row\",\n          \"msFlexDirection\": \"row\",\n        }\n      }\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(16,185,129,1.00)\",\n            \"height\": \"20px\",\n            \"marginTop\": \"2px\",\n            \"width\": \"20px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(16,185,129,1.00)\",\n            \"fontSize\": \"16px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        Order Placed Successfully\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Icon CreateIcon 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <svg\n      role=\"img\"\n      stroke=\"\"\n      style={\n        Object {\n          \"color\": \"rgba(115,115,115,1.00)\",\n          \"height\": \"48px\",\n          \"width\": \"48px\",\n        }\n      }\n      viewBox=\"0 0 36 36\"\n    >\n      <g>\n        <circle\n          cx=\"18\"\n          cy=\"18\"\n          fill=\"#06B6D4\"\n          r=\"17.5\"\n          stroke=\"#0E7490\"\n        />\n        <circle\n          cx=\"18\"\n          cy=\"18\"\n          fill=\"#FFFFFF\"\n          r=\"13.5\"\n          stroke=\"#0E7490\"\n        />\n        <circle\n          cx=\"18\"\n          cy=\"18\"\n          fill=\"#06B6D4\"\n          r=\"9.5\"\n          stroke=\"#0E7490\"\n        />\n        <circle\n          cx=\"18\"\n          cy=\"18\"\n          fill=\"#FFFFFF\"\n          r=\"5.5\"\n          stroke=\"#0E7490\"\n        />\n      </g>\n    </svg>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Icon CustomIcon 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(115,115,115,1.00)\",\n            \"height\": \"40px\",\n            \"width\": \"40px\",\n          }\n        }\n        viewBox=\"0 0 870 873\"\n      >\n        <g>\n          <g\n            fill=\"none\"\n            fillRule=\"nonzero\"\n            stroke=\"none\"\n            strokeWidth={1}\n          >\n            <path\n              d=\"M435 .1C194.8.1.1 194.8.1 435c0 187.3 118.4 346.9 284.4 408.1 3.3-29.9 15-57.2 32.7-79.6 12.1-15.4 26.9-28.5 43.9-38.4 2.1-5 4.6-10.6 7.1-16.6-50.3-26-84.7-78.1-84.7-138.6 0-51.7 25.3-97.7 64-125.9-10.9-20.6-21.3-40.2-31.8-58.2-18.1-31.5-46.7-59.7-68.4-78.9-21 11.9-47.8 4.7-59.7-16.3-11.9-21-4.7-47.8 16.3-59.7 21-11.9 47.4-4.7 59.7 15.9v.4c7.2 12.7 7.2 27.5 1.8 39.8 22.8 19.5 56.8 52.5 77.8 89 9.8 17 19.5 34.7 29.3 53.5 20.3-9.4 42.7-14.8 66.2-14.8 21.3 0 41.6 4.3 60.1 11.9 9.8-18.5 19.5-36.2 28.9-52.8 21-36.2 54.6-68.7 77.4-88.3-5.4-12.3-5.4-26.8 1.8-39.4v-.4c12.3-20.6 38.7-27.9 59.3-15.9 21 11.9 28.2 38.7 16.3 59.3-11.9 21-38.4 28.2-59.3 16.3-21.7 18.8-49.9 47.4-68 78.5-10.1 17.4-20.3 36.5-30.8 56.4 42 27.9 69.8 75.3 69.8 129.5 0 63-36.9 116.9-90.4 141.5.9 2.7 2 4.9 3 7.2 47 22.3 81.1 67.4 87.9 121.1C755.9 776 869.9 618.8 869.9 435 869.9 194.8 675.2.1 435 .1z\"\n              fill=\"#CA0000\"\n            />\n            <path\n              d=\"M284.8 843.3h.1-.1zM284.8 843.3c-.1 0-.3-.1-.4-.1.2 0 .3 0 .4.1z\"\n              fill=\"#FFF\"\n            />\n            <g\n              fill=\"#FFF\"\n              stroke=\"#FFF\"\n              strokeWidth={5}\n            >\n              <path\n                d=\"M485.2 5.8c-20.6-11.9-47-4.7-59.3 15.9v.4c-7.2 12.7-7.2 27.1-1.8 39.4-22.8 19.5-56.4 52.1-77.4 88.3-9.4 16.6-19.2 34.4-28.9 52.8-18.5-7.6-38.7-11.9-60.1-11.9-23.5 0-45.9 5.4-66.2 14.8-9.8-18.8-19.5-36.5-29.3-53.5-21-36.5-55-69.5-77.8-89 5.4-12.3 5.4-27.1-1.8-39.8v-.4C70.3 2.2 43.9-5.1 22.9 6.9 1.9 18.8-5.3 45.6 6.6 66.6c11.9 21 38.7 28.2 59.7 16.3 21.7 19.2 50.3 47.4 68.4 78.9 10.5 18.1 21 37.6 31.8 58.2-38.7 28.2-64 74.2-64 125.9 0 60.4 34.4 112.5 84.7 138.6-2.5 6.2-5.1 11.9-7.2 17-41.6 24.4-70.8 67.4-76.4 117.6 46.9 17.3 97.6 26.8 150.6 26.8 56.2 0 109.9-10.7 159.2-30.1-7.1-52.8-40.5-97.3-86.8-119.8-1.1-2.9-2.5-5.4-3.6-8.7 53.5-24.6 90.4-78.5 90.4-141.5 0-54.3-27.9-101.7-69.8-129.5 10.5-19.9 20.6-39.1 30.8-56.4 18.1-31.1 46.3-59.7 68-78.5 21 11.9 47.4 4.7 59.3-16.3 11.7-20.5 4.5-47.3-16.5-59.3z\"\n                transform=\"translate(181 224)\"\n              />\n            </g>\n          </g>\n        </g>\n      </svg>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Icon Integration with Third Party Icons 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"flexDirection\": \"row\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"width\": \"12px\",\n            }\n          }\n        />\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"width\": \"12px\",\n            }\n          }\n        />\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Icon Sizes 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"24px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n            \"marginBottom\": \"40px\",\n          }\n        }\n      >\n        Sizes\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"justifyContent\": \"center\",\n            \"msFlexPack\": \"center\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots IconButton Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"10px\",\n            \"paddingRight\": \"10px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots IconButton SVGIcon 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"10px\",\n            \"paddingRight\": \"10px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <svg\n          role=\"img\"\n          stroke=\"\"\n          strokeWidth=\"10\"\n          style={\n            Object {\n              \"color\": \"rgba(250,250,250,1.00)\",\n              \"height\": \"40px\",\n              \"width\": \"40px\",\n            }\n          }\n          viewBox=\"0 0 100 100\"\n        >\n          <g>\n            <path\n              d=\"M46.667 90v-.008c-4.922 0-11.021-2.695-13.333-6.66V40c5.521 0 10-4.479 10-10V13.333A3.33 3.33 0 0 1 46.667 10C54.029 10 60 15.97 60 23.333v13.333A3.331 3.331 0 0 0 63.334 40H80c5.52 0 10 4.479 10 10v30h-.004c0 5.52-4.477 9.992-9.996 10H46.667zM10 40h16.666v43.333H10z\"\n              fill=\"currentColor\"\n              stroke=\"\"\n            />\n          </g>\n        </svg>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"10px\",\n            \"paddingRight\": \"10px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <svg\n          role=\"img\"\n          stroke=\"\"\n          strokeWidth=\"10\"\n          style={\n            Object {\n              \"color\": \"rgba(2,132,199,1.00)\",\n              \"height\": \"40px\",\n              \"width\": \"40px\",\n            }\n          }\n          viewBox=\"0 0 100 100\"\n        >\n          <g>\n            <path\n              d=\"M46.667 90v-.008c-4.922 0-11.021-2.695-13.333-6.66V40c5.521 0 10-4.479 10-10V13.333A3.33 3.33 0 0 1 46.667 10C54.029 10 60 15.97 60 23.333v13.333A3.331 3.331 0 0 0 63.334 40H80c5.52 0 10 4.479 10 10v30h-.004c0 5.52-4.477 9.992-9.996 10H46.667zM10 40h16.666v43.333H10z\"\n              fill=\"currentColor\"\n              stroke=\"\"\n            />\n          </g>\n        </svg>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots IconButton Sizes 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"alignItems\": \"center\",\n            \"msFlexAlign\": \"center\",\n          }\n        }\n      >\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"6px\",\n              \"paddingLeft\": \"6px\",\n              \"paddingRight\": \"6px\",\n              \"paddingTop\": \"6px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"8px\",\n              \"paddingRight\": \"8px\",\n              \"paddingTop\": \"8px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"10px\",\n              \"paddingRight\": \"10px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"12px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"12px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots IconButton Variant 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"alignItems\": \"center\",\n            \"msFlexAlign\": \"center\",\n          }\n        }\n      >\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(79,70,229,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderBottomWidth\": \"1px\",\n              \"borderLeftColor\": \"rgba(79,70,229,1.00)\",\n              \"borderLeftWidth\": \"1px\",\n              \"borderRightColor\": \"rgba(79,70,229,1.00)\",\n              \"borderRightWidth\": \"1px\",\n              \"borderTopColor\": \"rgba(79,70,229,1.00)\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"borderTopWidth\": \"1px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"10px\",\n              \"paddingRight\": \"10px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(79,70,229,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"10px\",\n              \"paddingRight\": \"10px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"10px\",\n              \"paddingRight\": \"10px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Image Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        aria-label=\"Alternate Text\"\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitFlexBasis\": \"auto\",\n            \"flexBasis\": \"auto\",\n            \"height\": \"128px\",\n            \"maxWidth\": \"100%\",\n            \"msFlexPreferredSize\": \"auto\",\n            \"overflowX\": \"hidden\",\n            \"overflowY\": \"hidden\",\n            \"width\": \"128px\",\n            \"zIndex\": 0,\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"backgroundPosition\": \"center\",\n              \"backgroundRepeat\": \"no-repeat\",\n              \"backgroundSize\": \"cover\",\n              \"bottom\": \"0px\",\n              \"height\": \"100%\",\n              \"left\": \"0px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"width\": \"100%\",\n              \"zIndex\": -1,\n            }\n          }\n          suppressHydrationWarning={true}\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Image BorderRadius 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        aria-label=\"Alternate Text\"\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitFlexBasis\": \"auto\",\n            \"borderBottomLeftRadius\": \"100px\",\n            \"borderBottomRightRadius\": \"100px\",\n            \"borderTopLeftRadius\": \"100px\",\n            \"borderTopRightRadius\": \"100px\",\n            \"flexBasis\": \"auto\",\n            \"height\": \"150px\",\n            \"maxWidth\": \"100%\",\n            \"msFlexPreferredSize\": \"auto\",\n            \"overflowX\": \"hidden\",\n            \"overflowY\": \"hidden\",\n            \"width\": \"150px\",\n            \"zIndex\": 0,\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"backgroundPosition\": \"center\",\n              \"backgroundRepeat\": \"no-repeat\",\n              \"backgroundSize\": \"cover\",\n              \"bottom\": \"0px\",\n              \"height\": \"100%\",\n              \"left\": \"0px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"width\": \"100%\",\n              \"zIndex\": -1,\n            }\n          }\n          suppressHydrationWarning={true}\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Image FallbackElement 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        aria-label=\"fallback text\"\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitFlexBasis\": \"auto\",\n            \"borderBottomLeftRadius\": \"2px\",\n            \"borderBottomRightRadius\": \"2px\",\n            \"borderTopLeftRadius\": \"2px\",\n            \"borderTopRightRadius\": \"2px\",\n            \"flexBasis\": \"auto\",\n            \"height\": \"150px\",\n            \"maxWidth\": \"100%\",\n            \"msFlexPreferredSize\": \"auto\",\n            \"overflowX\": \"hidden\",\n            \"overflowY\": \"hidden\",\n            \"width\": \"150px\",\n            \"zIndex\": 0,\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"backgroundPosition\": \"center\",\n              \"backgroundRepeat\": \"no-repeat\",\n              \"backgroundSize\": \"cover\",\n              \"bottom\": \"0px\",\n              \"height\": \"100%\",\n              \"left\": \"0px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"width\": \"100%\",\n              \"zIndex\": -1,\n            }\n          }\n          suppressHydrationWarning={true}\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Image FallbackSupport 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        aria-label=\"fallback text\"\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitFlexBasis\": \"auto\",\n            \"borderBottomLeftRadius\": \"100px\",\n            \"borderBottomRightRadius\": \"100px\",\n            \"borderTopLeftRadius\": \"100px\",\n            \"borderTopRightRadius\": \"100px\",\n            \"flexBasis\": \"auto\",\n            \"height\": \"150px\",\n            \"maxWidth\": \"100%\",\n            \"msFlexPreferredSize\": \"auto\",\n            \"overflowX\": \"hidden\",\n            \"overflowY\": \"hidden\",\n            \"width\": \"150px\",\n            \"zIndex\": 0,\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"backgroundPosition\": \"center\",\n              \"backgroundRepeat\": \"no-repeat\",\n              \"backgroundSize\": \"cover\",\n              \"bottom\": \"0px\",\n              \"height\": \"100%\",\n              \"left\": \"0px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"width\": \"100%\",\n              \"zIndex\": -1,\n            }\n          }\n          suppressHydrationWarning={true}\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Image Sizes 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-text-901oao\"\n      dir=\"auto\"\n      style={\n        Object {\n          \"color\": \"rgba(23,23,23,1.00)\",\n          \"fontSize\": \"24px\",\n          \"fontStyle\": \"normal\",\n          \"fontWeight\": \"700\",\n          \"letterSpacing\": \"0px\",\n          \"lineHeight\": \"1.25em\",\n          \"marginBottom\": \"40px\",\n          \"marginTop\": \"12px\",\n          \"textAlign\": \"center\",\n        }\n      }\n    >\n      Image Sizes\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      onScroll={[Function]}\n      onTouchEnd={[Function]}\n      onTouchMove={[Function]}\n      onTouchStart={[Function]}\n      onWheel={[Function]}\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxFlex\": 1,\n          \"WebkitBoxOrient\": \"vertical\",\n          \"WebkitFlexDirection\": \"column\",\n          \"WebkitFlexGrow\": 1,\n          \"WebkitFlexShrink\": 1,\n          \"WebkitOverflowScrolling\": \"touch\",\n          \"WebkitTransform\": \"translateZ(0px)\",\n          \"flexDirection\": \"column\",\n          \"flexGrow\": 1,\n          \"flexShrink\": 1,\n          \"msFlexDirection\": \"column\",\n          \"msFlexNegative\": 1,\n          \"msFlexPositive\": 1,\n          \"overflowX\": \"hidden\",\n          \"overflowY\": \"auto\",\n          \"transform\": \"translateZ(0px)\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"dataSet\": Object {},\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"marginBottom\": \"24px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n            }\n          }\n        >\n          <div\n            aria-label=\"Alternate Text xs\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"40px\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"40px\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"8px\",\n              }\n            }\n          />\n          <div\n            aria-label=\"Alternate Text sm\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"64px\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"64px\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"8px\",\n              }\n            }\n          />\n          <div\n            aria-label=\"Alternate Text md\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"80px\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"80px\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"8px\",\n              }\n            }\n          />\n          <div\n            aria-label=\"Alternate Text lg\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"96px\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"96px\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"8px\",\n              }\n            }\n          />\n          <div\n            aria-label=\"Alternate Text xl\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"128px\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"128px\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"8px\",\n              }\n            }\n          />\n          <div\n            aria-label=\"Alternate Text 2xl\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"256px\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"256px\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Image WithRef 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        aria-label=\"Alternate Text\"\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitFlexBasis\": \"auto\",\n            \"flexBasis\": \"auto\",\n            \"height\": \"128px\",\n            \"maxWidth\": \"100%\",\n            \"msFlexPreferredSize\": \"auto\",\n            \"overflowX\": \"hidden\",\n            \"overflowY\": \"hidden\",\n            \"width\": \"128px\",\n            \"zIndex\": 0,\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"backgroundPosition\": \"center\",\n              \"backgroundRepeat\": \"no-repeat\",\n              \"backgroundSize\": \"cover\",\n              \"bottom\": \"0px\",\n              \"height\": \"100%\",\n              \"left\": \"0px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"width\": \"100%\",\n              \"zIndex\": -1,\n            }\n          }\n          suppressHydrationWarning={true}\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Input Addons 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"flexDirection\": \"row\",\n            \"msFlexDirection\": \"row\",\n            \"width\": \"70%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"0px\",\n              \"borderBottomWidth\": \"1px\",\n              \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n              \"borderLeftWidth\": \"1px\",\n              \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n              \"borderRightWidth\": \"0px\",\n              \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"0px\",\n              \"borderTopWidth\": \"1px\",\n              \"justifyContent\": \"center\",\n              \"marginRight\": \"0px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"8px\",\n              \"paddingRight\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            https://\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n              \"borderBottomLeftRadius\": \"0px\",\n              \"borderBottomRightRadius\": \"0px\",\n              \"borderBottomWidth\": \"1px\",\n              \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n              \"borderLeftWidth\": \"1px\",\n              \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n              \"borderRightWidth\": \"1px\",\n              \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n              \"borderTopLeftRadius\": \"0px\",\n              \"borderTopRightRadius\": \"0px\",\n              \"borderTopWidth\": \"1px\",\n              \"flexDirection\": \"row\",\n              \"marginLeft\": \"0px\",\n              \"marginRight\": \"0px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"overflowX\": \"auto\",\n              \"overflowY\": \"auto\",\n              \"width\": \"70%\",\n            }\n          }\n        >\n          <input\n            autoCapitalize=\"sentences\"\n            autoComplete=\"on\"\n            autoCorrect=\"on\"\n            className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n            dir=\"auto\"\n            onBlur={[Function]}\n            onChange={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onSelect={[Function]}\n            placeholder=\"nativebase\"\n            readOnly={false}\n            spellCheck={true}\n            style={\n              Object {\n                \"WebkitFlex\": 1,\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"0px\",\n                \"borderBottomRightRadius\": \"0px\",\n                \"borderTopLeftRadius\": \"0px\",\n                \"borderTopRightRadius\": \"0px\",\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"cursor\": \"auto\",\n                \"flex\": 1,\n                \"fontSize\": \"12px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"height\": \"100%\",\n                \"lineHeight\": \"1.5em\",\n                \"msFlex\": \"1 1 0%\",\n                \"outline\": \"none\",\n                \"outlineWidth\": \"0px\",\n                \"paddingBottom\": \"8px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"8px\",\n                \"width\": \"100%\",\n              }\n            }\n            type=\"text\"\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n              \"borderBottomLeftRadius\": \"0px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderBottomWidth\": \"1px\",\n              \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n              \"borderLeftWidth\": \"0px\",\n              \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n              \"borderRightWidth\": \"1px\",\n              \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n              \"borderTopLeftRadius\": \"0px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"borderTopWidth\": \"1px\",\n              \"justifyContent\": \"center\",\n              \"marginLeft\": \"0px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"8px\",\n              \"paddingRight\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            .io\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Input Elements 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"overflowX\": \"auto\",\n            \"overflowY\": \"auto\",\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n        />\n        <input\n          autoCapitalize=\"sentences\"\n          autoComplete=\"on\"\n          autoCorrect=\"on\"\n          className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n          dir=\"auto\"\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onSelect={[Function]}\n          placeholder=\"Name\"\n          readOnly={false}\n          spellCheck={true}\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"cursor\": \"auto\",\n              \"flex\": 1,\n              \"fontSize\": \"12px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"lineHeight\": \"1.5em\",\n              \"msFlex\": \"1 1 0%\",\n              \"outline\": \"none\",\n              \"outlineWidth\": \"0px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"text\"\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"overflowX\": \"auto\",\n            \"overflowY\": \"auto\",\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <input\n          autoCapitalize=\"sentences\"\n          autoComplete=\"on\"\n          autoCorrect=\"on\"\n          className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n          dir=\"auto\"\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onSelect={[Function]}\n          placeholder=\"Password\"\n          readOnly={false}\n          spellCheck={true}\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"cursor\": \"auto\",\n              \"flex\": 1,\n              \"fontSize\": \"12px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"lineHeight\": \"1.5em\",\n              \"msFlex\": \"1 1 0%\",\n              \"outline\": \"none\",\n              \"outlineWidth\": \"0px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"password\"\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          style={\n            Object {\n              \"cursor\": \"pointer\",\n              \"msTouchAction\": \"manipulation\",\n              \"touchAction\": \"manipulation\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Input Form Controlled 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"maxWidth\": \"300px\",\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <label\n          className=\"css-view-1dbjc4n\"\n          id=\"field-125-label\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"start\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"flex-start\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"marginBottom\": \"4px\",\n              \"marginTop\": \"4px\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"start\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(115,115,115,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            Password\n          </div>\n        </label>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderBottomWidth\": \"1px\",\n              \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n              \"borderLeftWidth\": \"1px\",\n              \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n              \"borderRightWidth\": \"1px\",\n              \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"borderTopWidth\": \"1px\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"overflowX\": \"auto\",\n              \"overflowY\": \"auto\",\n            }\n          }\n        >\n          <input\n            aria-invalid={true}\n            autoCapitalize=\"sentences\"\n            autoComplete=\"on\"\n            autoCorrect=\"on\"\n            className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n            dir=\"auto\"\n            disabled={false}\n            id=\"field-125-input\"\n            onBlur={[Function]}\n            onChange={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onSelect={[Function]}\n            placeholder=\"Enter password\"\n            readOnly={false}\n            spellCheck={true}\n            style={\n              Object {\n                \"WebkitFlex\": 1,\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"cursor\": \"auto\",\n                \"flex\": 1,\n                \"fontSize\": \"12px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"height\": \"100%\",\n                \"lineHeight\": \"1.5em\",\n                \"msFlex\": \"1 1 0%\",\n                \"outline\": \"none\",\n                \"outlineWidth\": \"0px\",\n                \"paddingBottom\": \"8px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"8px\",\n                \"width\": \"100%\",\n              }\n            }\n            type=\"text\"\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          id=\"field-125\"\n          style={\n            Object {\n              \"marginTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <svg\n              role=\"img\"\n              stroke=\"\"\n              style={\n                Object {\n                  \"color\": \"rgba(220,38,38,1.00)\",\n                  \"fontSize\": \"12px\",\n                  \"height\": \"12px\",\n                  \"width\": \"12px\",\n                }\n              }\n              viewBox=\"0 0 16 16\"\n            >\n              <g>\n                <path\n                  d=\"M8 16C6.41775 16 4.87103 15.5308 3.55544 14.6518C2.23985 13.7727 1.21447 12.5233 0.608967 11.0615C0.00346627 9.59966 -0.15496 7.99113 0.153721 6.43928C0.462403 4.88743 1.22433 3.46197 2.34315 2.34315C3.46197 1.22433 4.88743 0.462403 6.43928 0.153721C7.99113 -0.15496 9.59966 0.00346627 11.0615 0.608967C12.5233 1.21447 13.7727 2.23985 14.6518 3.55544C15.5308 4.87103 16 6.41775 16 8C16 10.1217 15.1571 12.1566 13.6569 13.6569C12.1566 15.1571 10.1217 16 8 16ZM8 14.4C9.2658 14.4 10.5032 14.0246 11.5556 13.3214C12.6081 12.6182 13.4284 11.6186 13.9128 10.4492C14.3972 9.27973 14.524 7.9929 14.277 6.75142C14.0301 5.50995 13.4205 4.36958 12.5255 3.47452C11.6304 2.57946 10.4901 1.96992 9.24858 1.72298C8.0071 1.47603 6.72028 1.60277 5.55083 2.08717C4.38138 2.57158 3.38184 3.39188 2.6786 4.44435C1.97536 5.49683 1.6 6.7342 1.6 8C1.6 9.69739 2.27429 11.3253 3.47452 12.5255C4.67475 13.7257 6.30262 14.4 8 14.4ZM7.2 10.4H8.8V12H7.2V10.4ZM7.2 4H8.8V8.8H7.2V4Z\"\n                  fill=\"currentColor\"\n                  stroke=\"\"\n                />\n              </g>\n            </svg>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"4px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(220,38,38,1.00)\",\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Try different from previous passwords.\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Input Password 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"overflowX\": \"auto\",\n            \"overflowY\": \"auto\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <input\n          autoCapitalize=\"sentences\"\n          autoComplete=\"on\"\n          autoCorrect=\"on\"\n          className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n          dir=\"auto\"\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onSelect={[Function]}\n          placeholder=\"Password\"\n          readOnly={false}\n          spellCheck={true}\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"cursor\": \"auto\",\n              \"flex\": 1,\n              \"fontSize\": \"12px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"lineHeight\": \"1.5em\",\n              \"msFlex\": \"1 1 0%\",\n              \"outline\": \"none\",\n              \"outlineWidth\": \"0px\",\n              \"paddingBottom\": \"0px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"0px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"password\"\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"0px\",\n              \"borderBottomRightRadius\": \"0px\",\n              \"borderTopLeftRadius\": \"0px\",\n              \"borderTopRightRadius\": \"0px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"height\": \"100%\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"8px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n              \"width\": \"16.666%\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"10px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Show\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Input Primary 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"marginLeft\": \"12px\",\n            \"marginRight\": \"12px\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"overflowX\": \"auto\",\n            \"overflowY\": \"auto\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <input\n          autoCapitalize=\"sentences\"\n          autoComplete=\"on\"\n          autoCorrect=\"on\"\n          className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n          dir=\"auto\"\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onSelect={[Function]}\n          placeholder=\"Input\"\n          readOnly={false}\n          spellCheck={true}\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"cursor\": \"auto\",\n              \"flex\": 1,\n              \"fontSize\": \"12px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"lineHeight\": \"1.5em\",\n              \"msFlex\": \"1 1 0%\",\n              \"outline\": \"none\",\n              \"outlineWidth\": \"0px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"text\"\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Input Size  1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"marginLeft\": \"auto\",\n          \"marginRight\": \"auto\",\n          \"maxWidth\": \"300px\",\n          \"width\": \"75%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"overflowX\": \"auto\",\n            \"overflowY\": \"auto\",\n          }\n        }\n      >\n        <input\n          autoCapitalize=\"sentences\"\n          autoComplete=\"on\"\n          autoCorrect=\"on\"\n          className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n          dir=\"auto\"\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onSelect={[Function]}\n          placeholder=\"xs Input\"\n          readOnly={false}\n          spellCheck={true}\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"cursor\": \"auto\",\n              \"flex\": 1,\n              \"fontSize\": \"10px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"lineHeight\": \"1.5em\",\n              \"msFlex\": \"1 1 0%\",\n              \"outline\": \"none\",\n              \"outlineWidth\": \"0px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"text\"\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"overflowX\": \"auto\",\n            \"overflowY\": \"auto\",\n          }\n        }\n      >\n        <input\n          autoCapitalize=\"sentences\"\n          autoComplete=\"on\"\n          autoCorrect=\"on\"\n          className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n          dir=\"auto\"\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onSelect={[Function]}\n          placeholder=\"sm Input\"\n          readOnly={false}\n          spellCheck={true}\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"cursor\": \"auto\",\n              \"flex\": 1,\n              \"fontSize\": \"12px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"lineHeight\": \"1.5em\",\n              \"msFlex\": \"1 1 0%\",\n              \"outline\": \"none\",\n              \"outlineWidth\": \"0px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"text\"\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"overflowX\": \"auto\",\n            \"overflowY\": \"auto\",\n          }\n        }\n      >\n        <input\n          autoCapitalize=\"sentences\"\n          autoComplete=\"on\"\n          autoCorrect=\"on\"\n          className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n          dir=\"auto\"\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onSelect={[Function]}\n          placeholder=\"md Input\"\n          readOnly={false}\n          spellCheck={true}\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"cursor\": \"auto\",\n              \"flex\": 1,\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"lineHeight\": \"1.5em\",\n              \"msFlex\": \"1 1 0%\",\n              \"outline\": \"none\",\n              \"outlineWidth\": \"0px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"text\"\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"overflowX\": \"auto\",\n            \"overflowY\": \"auto\",\n          }\n        }\n      >\n        <input\n          autoCapitalize=\"sentences\"\n          autoComplete=\"on\"\n          autoCorrect=\"on\"\n          className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n          dir=\"auto\"\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onSelect={[Function]}\n          placeholder=\"lg Input\"\n          readOnly={false}\n          spellCheck={true}\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"cursor\": \"auto\",\n              \"flex\": 1,\n              \"fontSize\": \"16px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"lineHeight\": \"1.5em\",\n              \"msFlex\": \"1 1 0%\",\n              \"outline\": \"none\",\n              \"outlineWidth\": \"0px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"text\"\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"overflowX\": \"auto\",\n            \"overflowY\": \"auto\",\n          }\n        }\n      >\n        <input\n          autoCapitalize=\"sentences\"\n          autoComplete=\"on\"\n          autoCorrect=\"on\"\n          className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n          dir=\"auto\"\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onSelect={[Function]}\n          placeholder=\"xl Input\"\n          readOnly={false}\n          spellCheck={true}\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"cursor\": \"auto\",\n              \"flex\": 1,\n              \"fontSize\": \"18px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"lineHeight\": \"1.5em\",\n              \"msFlex\": \"1 1 0%\",\n              \"outline\": \"none\",\n              \"outlineWidth\": \"0px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"text\"\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"overflowX\": \"auto\",\n            \"overflowY\": \"auto\",\n          }\n        }\n      >\n        <input\n          autoCapitalize=\"sentences\"\n          autoComplete=\"on\"\n          autoCorrect=\"on\"\n          className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n          dir=\"auto\"\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onSelect={[Function]}\n          placeholder=\"2xl Input\"\n          readOnly={false}\n          spellCheck={true}\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"cursor\": \"auto\",\n              \"flex\": 1,\n              \"fontSize\": \"20px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"lineHeight\": \"1.5em\",\n              \"msFlex\": \"1 1 0%\",\n              \"outline\": \"none\",\n              \"outlineWidth\": \"0px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"text\"\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Input Value Controlled 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"overflowX\": \"auto\",\n            \"overflowY\": \"auto\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <input\n          autoCapitalize=\"sentences\"\n          autoComplete=\"on\"\n          autoCorrect=\"on\"\n          className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n          dir=\"auto\"\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onSelect={[Function]}\n          placeholder=\"Value Controlled Input\"\n          readOnly={false}\n          spellCheck={true}\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"cursor\": \"auto\",\n              \"flex\": 1,\n              \"fontSize\": \"12px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"lineHeight\": \"1.5em\",\n              \"msFlex\": \"1 1 0%\",\n              \"outline\": \"none\",\n              \"outlineWidth\": \"0px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"text\"\n          value=\"\"\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Input Variants 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"marginLeft\": \"auto\",\n          \"marginRight\": \"auto\",\n          \"maxWidth\": \"300px\",\n          \"width\": \"75%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"overflowX\": \"auto\",\n            \"overflowY\": \"auto\",\n          }\n        }\n      >\n        <input\n          autoCapitalize=\"sentences\"\n          autoComplete=\"on\"\n          autoCorrect=\"on\"\n          className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n          dir=\"auto\"\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onSelect={[Function]}\n          placeholder=\"Outline\"\n          readOnly={false}\n          spellCheck={true}\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"cursor\": \"auto\",\n              \"flex\": 1,\n              \"fontSize\": \"12px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"lineHeight\": \"1.5em\",\n              \"msFlex\": \"1 1 0%\",\n              \"outline\": \"none\",\n              \"outlineWidth\": \"0px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"text\"\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(245,245,245,1.00)\",\n            \"borderBottomColor\": \"rgba(245,245,245,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(245,245,245,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(245,245,245,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(245,245,245,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"overflowX\": \"auto\",\n            \"overflowY\": \"auto\",\n          }\n        }\n      >\n        <input\n          autoCapitalize=\"sentences\"\n          autoComplete=\"on\"\n          autoCorrect=\"on\"\n          className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n          dir=\"auto\"\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onSelect={[Function]}\n          placeholder=\"Filled\"\n          readOnly={false}\n          spellCheck={true}\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"cursor\": \"auto\",\n              \"flex\": 1,\n              \"fontSize\": \"12px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"lineHeight\": \"1.5em\",\n              \"msFlex\": \"1 1 0%\",\n              \"outline\": \"none\",\n              \"outlineWidth\": \"0px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"text\"\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"0px\",\n            \"borderBottomRightRadius\": \"0px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"0px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"0px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"0px\",\n            \"borderTopRightRadius\": \"0px\",\n            \"borderTopWidth\": \"0px\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"overflowX\": \"auto\",\n            \"overflowY\": \"auto\",\n          }\n        }\n      >\n        <input\n          autoCapitalize=\"sentences\"\n          autoComplete=\"on\"\n          autoCorrect=\"on\"\n          className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n          dir=\"auto\"\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onSelect={[Function]}\n          placeholder=\"Underlined\"\n          readOnly={false}\n          spellCheck={true}\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"cursor\": \"auto\",\n              \"flex\": 1,\n              \"fontSize\": \"12px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"lineHeight\": \"1.5em\",\n              \"msFlex\": \"1 1 0%\",\n              \"outline\": \"none\",\n              \"outlineWidth\": \"0px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"0px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"text\"\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"0px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"0px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"0px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"0px\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"overflowX\": \"auto\",\n            \"overflowY\": \"auto\",\n          }\n        }\n      >\n        <input\n          autoCapitalize=\"sentences\"\n          autoComplete=\"on\"\n          autoCorrect=\"on\"\n          className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n          dir=\"auto\"\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onSelect={[Function]}\n          placeholder=\"Unstyled\"\n          readOnly={false}\n          spellCheck={true}\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"cursor\": \"auto\",\n              \"flex\": 1,\n              \"fontSize\": \"12px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"lineHeight\": \"1.5em\",\n              \"msFlex\": \"1 1 0%\",\n              \"outline\": \"none\",\n              \"outlineWidth\": \"0px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"text\"\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"overflowX\": \"auto\",\n            \"overflowY\": \"auto\",\n          }\n        }\n      >\n        <input\n          autoCapitalize=\"sentences\"\n          autoComplete=\"on\"\n          autoCorrect=\"on\"\n          className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n          dir=\"auto\"\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onSelect={[Function]}\n          placeholder=\"Round\"\n          readOnly={false}\n          spellCheck={true}\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"cursor\": \"auto\",\n              \"flex\": 1,\n              \"fontSize\": \"12px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"lineHeight\": \"1.5em\",\n              \"msFlex\": \"1 1 0%\",\n              \"outline\": \"none\",\n              \"outlineWidth\": \"0px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"text\"\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots KeyboardAvoidingView Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"height\": \"400px\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"display\": \"flex\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxPack\": \"end\",\n              \"WebkitFlex\": 1,\n              \"WebkitJustifyContent\": \"flex-end\",\n              \"flex\": 1,\n              \"justifyContent\": \"flex-end\",\n              \"maxWidth\": \"300px\",\n              \"msFlex\": \"1 1 0%\",\n              \"msFlexPack\": \"end\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"24px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n                \"marginBottom\": \"12px\",\n              }\n            }\n          >\n            Forgot Password\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(163,163,163,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            Not to worry! Enter email address associated with your account and we’ll send a link to reset your password.\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"marginBottom\": \"16px\",\n                \"marginTop\": \"40px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"overflowX\": \"auto\",\n                \"overflowY\": \"auto\",\n              }\n            }\n          >\n            <input\n              autoCapitalize=\"sentences\"\n              autoComplete=\"on\"\n              autoCorrect=\"on\"\n              className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n              dir=\"auto\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onSelect={[Function]}\n              placeholder=\"Email Address\"\n              readOnly={false}\n              spellCheck={true}\n              style={\n                Object {\n                  \"WebkitFlex\": 1,\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"cursor\": \"auto\",\n                  \"flex\": 1,\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"100%\",\n                  \"lineHeight\": \"1.5em\",\n                  \"msFlex\": \"1 1 0%\",\n                  \"outline\": \"none\",\n                  \"outlineWidth\": \"0px\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"width\": \"100%\",\n                }\n              }\n              type=\"text\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": \"16px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Proceed\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Link Composite Link Example 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <a\n        className=\"css-reset-4rbku5 css-cursor-18t94o4 css-view-1dbjc4n\"\n        href=\"https://nativebase.io\"\n        role=\"link\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"flexDirection\": \"row\",\n            \"height\": \"auto\",\n            \"msFlexDirection\": \"row\",\n            \"width\": \"auto\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(243,244,246,1.00)\",\n              \"borderBottomColor\": \"rgba(209,213,219,1.00)\",\n              \"borderBottomLeftRadius\": \"8px\",\n              \"borderBottomRightRadius\": \"8px\",\n              \"borderBottomWidth\": \"1px\",\n              \"borderLeftColor\": \"rgba(209,213,219,1.00)\",\n              \"borderLeftWidth\": \"1px\",\n              \"borderRightColor\": \"rgba(209,213,219,1.00)\",\n              \"borderRightWidth\": \"1px\",\n              \"borderTopColor\": \"rgba(209,213,219,1.00)\",\n              \"borderTopLeftRadius\": \"8px\",\n              \"borderTopRightRadius\": \"8px\",\n              \"borderTopWidth\": \"1px\",\n              \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n              \"paddingBottom\": \"20px\",\n              \"paddingLeft\": \"20px\",\n              \"paddingRight\": \"20px\",\n              \"paddingTop\": \"20px\",\n              \"width\": \"256px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(0,93,180,1.00)\",\n                  \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"paddingBottom\": \"2px\",\n                  \"paddingLeft\": \"8px\",\n                  \"paddingRight\": \"8px\",\n                  \"paddingTop\": \"2px\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(255,255,255,1.00)\",\n                      \"fontSize\": \"12px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"500\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Open Source\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxFlex\": 1,\n                  \"WebkitFlexGrow\": 1,\n                  \"flexGrow\": 1,\n                  \"msFlexPositive\": 1,\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(31,41,55,1.00)\",\n                  \"fontSize\": \"10px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              2020\n            </div>\n          </div>\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(31,41,55,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginTop\": \"12px\",\n              }\n            }\n          >\n            NativeBase v3\n          </div>\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(55,65,81,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginTop\": \"8px\",\n              }\n            }\n          >\n            NativeBase is a component library that enables devs to build universal design systems.\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"vertical\",\n                \"WebkitFlexDirection\": \"column\",\n                \"display\": \"flex\",\n                \"flexDirection\": \"column\",\n                \"msFlexDirection\": \"column\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(0,93,180,1.00)\",\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"500\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginTop\": \"8px\",\n                }\n              }\n            >\n              Read More\n            </div>\n          </div>\n        </div>\n      </a>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Link Custom Function onPress Link 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"backgroundColor\": \"rgba(99,102,241,1.00)\",\n            \"height\": \"100px\",\n            \"width\": \"100px\",\n          }\n        }\n      />\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onClick={[Function]}\n        role=\"link\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"flexDirection\": \"row\",\n            \"height\": \"auto\",\n            \"marginTop\": \"32px\",\n            \"msFlexDirection\": \"row\",\n            \"width\": \"auto\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(34,211,238,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(255,255,255,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            Change Color\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Link Default Link 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <a\n        className=\"css-reset-4rbku5 css-cursor-18t94o4 css-view-1dbjc4n\"\n        href=\"https://nativebase.io\"\n        role=\"link\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"flexDirection\": \"row\",\n            \"height\": \"auto\",\n            \"msFlexDirection\": \"row\",\n            \"width\": \"auto\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n              \"textDecoration\": \"underline\",\n            }\n          }\n        >\n          Click here to open documentation.\n        </div>\n      </a>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Link External Link 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n            \"marginLeft\": \"64px\",\n            \"marginRight\": \"64px\",\n          }\n        }\n      >\n        NativeBase is a component library that enables devs to build universal design systems. It is built on top of React Native, allowing you to develop apps for Android, iOS and the Web.\n         \n        <a\n          className=\"css-reset-4rbku5 css-cursor-18t94o4 css-view-1dbjc4n\"\n          href=\"https://nativebase.io\"\n          role=\"link\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"display\": \"inline-flex\",\n              \"flexDirection\": \"row\",\n              \"height\": \"auto\",\n              \"marginBottom\": \"-8px\",\n              \"marginTop\": \"-2px\",\n              \"msFlexDirection\": \"row\",\n              \"width\": \"auto\",\n            }\n          }\n        >\n          <span\n            className=\"css-text-901oao css-textHasAncestor-16my406\"\n            style={\n              Object {\n                \"color\": \"rgba(96,165,250,1.00)\",\n                \"textDecoration\": \"underline\",\n              }\n            }\n          >\n            Read More\n          </span>\n        </a>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Link Underline Link 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <a\n        className=\"css-reset-4rbku5 css-cursor-18t94o4 css-view-1dbjc4n\"\n        href=\"https://nativebase.io\"\n        role=\"link\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"flexDirection\": \"row\",\n            \"height\": \"auto\",\n            \"msFlexDirection\": \"row\",\n            \"width\": \"auto\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(6,182,212,1.00)\",\n              \"fontSize\": \"20px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n              \"textDecoration\": \"underline\",\n            }\n          }\n        >\n          Click me to open NativeBase website.\n        </div>\n      </a>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots List Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"width\": \"80%\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"24px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n          }\n        }\n      >\n        Topics (Plain List)\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n            \"borderTopWidth\": \"1px\",\n            \"marginBottom\": \"8px\",\n            \"marginTop\": \"8px\",\n            \"paddingBottom\": \"8px\",\n            \"paddingTop\": \"8px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"List-Item-1\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n              \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n              \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopWidth\": \"0px\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"paddingLeft\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlex\": 1,\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n                \"msFlex\": \"1 1 0%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Education\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          aria-label=\"List-Item-2\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n              \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n              \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"paddingLeft\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlex\": 1,\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n                \"msFlex\": \"1 1 0%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Health\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          aria-label=\"List-Item-3\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n              \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n              \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"paddingLeft\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlex\": 1,\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n                \"msFlex\": \"1 1 0%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Office\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          aria-label=\"List-Item-4\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n              \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n              \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"paddingLeft\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlex\": 1,\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n                \"msFlex\": \"1 1 0%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Sports\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots List List with Icon 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n          \"borderBottomWidth\": \"1px\",\n          \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n          \"borderLeftWidth\": \"1px\",\n          \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n          \"borderRightWidth\": \"1px\",\n          \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n          \"borderTopWidth\": \"1px\",\n          \"marginBottom\": \"8px\",\n          \"marginTop\": \"8px\",\n          \"paddingBottom\": \"8px\",\n          \"paddingTop\": \"8px\",\n          \"width\": \"320px\",\n        }\n      }\n    >\n      <div\n        aria-label=\"List-Item-1\"\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n            \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n            \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n            \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n            \"borderTopWidth\": \"0px\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"paddingBottom\": \"8px\",\n            \"paddingTop\": \"8px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"paddingLeft\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlex\": 1,\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flex\": 1,\n              \"flexDirection\": \"row\",\n              \"msFlex\": \"1 1 0%\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            Inbox\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n      <div\n        aria-label=\"List-Item-2\"\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n            \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n            \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n            \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"paddingBottom\": \"8px\",\n            \"paddingTop\": \"8px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"paddingLeft\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlex\": 1,\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flex\": 1,\n              \"flexDirection\": \"row\",\n              \"msFlex\": \"1 1 0%\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            Drafts\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n      <div\n        aria-label=\"List-Item-3\"\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n            \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n            \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n            \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"paddingBottom\": \"8px\",\n            \"paddingTop\": \"8px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"paddingLeft\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlex\": 1,\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flex\": 1,\n              \"flexDirection\": \"row\",\n              \"msFlex\": \"1 1 0%\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            Graphs and stats\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n      <div\n        aria-label=\"List-Item-4\"\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n            \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n            \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n            \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"paddingBottom\": \"8px\",\n            \"paddingTop\": \"8px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"paddingLeft\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlex\": 1,\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flex\": 1,\n              \"flexDirection\": \"row\",\n              \"msFlex\": \"1 1 0%\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            Attachments\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots List OrderedList 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"width\": \"80%\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"24px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n          }\n        }\n      >\n        Bill-#187 (Ordered List)\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n            \"borderTopWidth\": \"1px\",\n            \"marginBottom\": \"8px\",\n            \"marginTop\": \"8px\",\n            \"paddingBottom\": \"8px\",\n            \"paddingTop\": \"8px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"List-Item-1\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n              \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n              \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopWidth\": \"0px\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"paddingLeft\": \"8px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"marginRight\": \"8px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                1.\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlex\": 1,\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n                \"msFlex\": \"1 1 0%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Fruit Juice x 2\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          aria-label=\"List-Item-2\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n              \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n              \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"paddingLeft\": \"8px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"marginRight\": \"8px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                2.\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlex\": 1,\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n                \"msFlex\": \"1 1 0%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Cheddar cheese - 200g\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          aria-label=\"List-Item-3\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n              \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n              \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"paddingLeft\": \"8px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"marginRight\": \"8px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                3.\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlex\": 1,\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n                \"msFlex\": \"1 1 0%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Milk 1L x 2\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          aria-label=\"List-Item-4\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n              \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n              \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"paddingLeft\": \"8px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"marginRight\": \"8px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                4.\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlex\": 1,\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n                \"msFlex\": \"1 1 0%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Brown Bread - 400g\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots List Pressable List Items 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"width\": \"80%\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"backgroundColor\": \"rgba(34,211,238,1.00)\",\n            \"color\": \"rgba(255,255,255,1.00)\",\n            \"fontSize\": \"24px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n            \"paddingBottom\": \"16px\",\n            \"paddingLeft\": \"8px\",\n            \"paddingRight\": \"8px\",\n            \"paddingTop\": \"16px\",\n          }\n        }\n      >\n        Default Theme Color (Pressable List Items)\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n            \"borderTopWidth\": \"1px\",\n            \"marginBottom\": \"8px\",\n            \"marginTop\": \"8px\",\n            \"paddingBottom\": \"0px\",\n            \"paddingTop\": \"0px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"List-Item-1\"\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(34,211,238,1.00)\",\n              \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n              \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n              \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopWidth\": \"0px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msTouchAction\": \"manipulation\",\n              \"paddingBottom\": \"16px\",\n              \"paddingTop\": \"16px\",\n              \"touchAction\": \"manipulation\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"paddingLeft\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              primary.400\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n        />\n        <div\n          aria-label=\"List-Item-2\"\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(244,114,182,1.00)\",\n              \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n              \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n              \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msTouchAction\": \"manipulation\",\n              \"paddingBottom\": \"16px\",\n              \"paddingTop\": \"16px\",\n              \"touchAction\": \"manipulation\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"paddingLeft\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              secondary.400\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n        />\n        <div\n          aria-label=\"List-Item-3\"\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(52,211,153,1.00)\",\n              \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n              \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n              \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msTouchAction\": \"manipulation\",\n              \"paddingBottom\": \"16px\",\n              \"paddingTop\": \"16px\",\n              \"touchAction\": \"manipulation\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"paddingLeft\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              emerald.400\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n        />\n        <div\n          aria-label=\"List-Item-4\"\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(96,165,250,1.00)\",\n              \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n              \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n              \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msTouchAction\": \"manipulation\",\n              \"paddingBottom\": \"16px\",\n              \"paddingTop\": \"16px\",\n              \"touchAction\": \"manipulation\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"paddingLeft\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              blue.400\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots List StylingList 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"width\": \"80%\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"24px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n          }\n        }\n      >\n        Styled List\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n            \"borderTopWidth\": \"1px\",\n            \"marginBottom\": \"8px\",\n            \"marginTop\": \"8px\",\n            \"paddingBottom\": \"8px\",\n            \"paddingTop\": \"8px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"List-Item-11\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n              \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n              \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopWidth\": \"0px\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"paddingLeft\": \"8px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"marginRight\": \"8px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(217,119,6,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                11.\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlex\": 1,\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n                \"msFlex\": \"1 1 0%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(217,119,6,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Ocean's \n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          aria-label=\"List-Item-12\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n              \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n              \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"paddingLeft\": \"8px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"marginRight\": \"8px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(254,202,202,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                12.\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlex\": 1,\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n                \"msFlex\": \"1 1 0%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(254,202,202,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Ocean's \n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          aria-label=\"List-Item-13\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n              \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n              \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"paddingLeft\": \"8px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"marginRight\": \"8px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(45,212,191,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                13.\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlex\": 1,\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n                \"msFlex\": \"1 1 0%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(45,212,191,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Ocean's\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots List UnorderedList 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"width\": \"80%\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"24px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n          }\n        }\n      >\n        My Todos (Unordered List)\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n            \"borderTopWidth\": \"1px\",\n            \"marginBottom\": \"8px\",\n            \"marginTop\": \"8px\",\n            \"paddingBottom\": \"8px\",\n            \"paddingTop\": \"8px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"List-Item-1\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n              \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n              \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopWidth\": \"0px\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"paddingLeft\": \"8px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitTransform\": \"scale(1.5)\",\n                  \"marginRight\": \"8px\",\n                  \"transform\": \"scale(1.5)\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                •\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlex\": 1,\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n                \"msFlex\": \"1 1 0%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Get groceries by Tomorrow.\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          aria-label=\"List-Item-2\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n              \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n              \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"paddingLeft\": \"8px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitTransform\": \"scale(1.5)\",\n                  \"marginRight\": \"8px\",\n                  \"transform\": \"scale(1.5)\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                •\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlex\": 1,\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n                \"msFlex\": \"1 1 0%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Book appointment with the Doc.\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          aria-label=\"List-Item-3\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n              \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n              \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"paddingLeft\": \"8px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitTransform\": \"scale(1.5)\",\n                  \"marginRight\": \"8px\",\n                  \"transform\": \"scale(1.5)\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                •\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlex\": 1,\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n                \"msFlex\": \"1 1 0%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Bill payment - Electricity.\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          aria-label=\"List-Item-4\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n              \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n              \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n              \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"paddingBottom\": \"8px\",\n              \"paddingTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"paddingLeft\": \"8px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitTransform\": \"scale(1.5)\",\n                  \"marginRight\": \"8px\",\n                  \"transform\": \"scale(1.5)\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                •\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlex\": 1,\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flex\": 1,\n                \"flexDirection\": \"row\",\n                \"msFlex\": \"1 1 0%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Pay Telephone Bill\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots List VirtualizedList  1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      onScroll={[Function]}\n      onTouchEnd={[Function]}\n      onTouchMove={[Function]}\n      onTouchStart={[Function]}\n      onWheel={[Function]}\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxFlex\": 1,\n          \"WebkitBoxOrient\": \"vertical\",\n          \"WebkitFlexDirection\": \"column\",\n          \"WebkitFlexGrow\": 1,\n          \"WebkitFlexShrink\": 1,\n          \"WebkitOverflowScrolling\": \"touch\",\n          \"WebkitTransform\": \"translateZ(0px)\",\n          \"flexDirection\": \"column\",\n          \"flexGrow\": 1,\n          \"flexShrink\": 1,\n          \"msFlexDirection\": \"column\",\n          \"msFlexNegative\": 1,\n          \"msFlexPositive\": 1,\n          \"overflowX\": \"hidden\",\n          \"overflowY\": \"auto\",\n          \"transform\": \"translateZ(0px)\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            aria-label=\"List-Item-NaN\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(167,243,208,1.00)\",\n                \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n                \"borderBottomLeftRadius\": \"6px\",\n                \"borderBottomRightRadius\": \"6px\",\n                \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n                \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n                \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n                \"borderTopLeftRadius\": \"6px\",\n                \"borderTopRightRadius\": \"6px\",\n                \"borderTopWidth\": \"0px\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": \"8px\",\n                \"marginTop\": \"8px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"paddingBottom\": \"8px\",\n                \"paddingLeft\": \"16px\",\n                \"paddingRight\": \"16px\",\n                \"paddingTop\": \"8px\",\n                \"width\": \"128px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"paddingLeft\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlex\": 1,\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flex\": 1,\n                  \"flexDirection\": \"row\",\n                  \"msFlex\": \"1 1 0%\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"24px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Item 1\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            aria-label=\"List-Item-NaN\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(167,243,208,1.00)\",\n                \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n                \"borderBottomLeftRadius\": \"6px\",\n                \"borderBottomRightRadius\": \"6px\",\n                \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n                \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n                \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n                \"borderTopLeftRadius\": \"6px\",\n                \"borderTopRightRadius\": \"6px\",\n                \"borderTopWidth\": \"0px\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": \"8px\",\n                \"marginTop\": \"8px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"paddingBottom\": \"8px\",\n                \"paddingLeft\": \"16px\",\n                \"paddingRight\": \"16px\",\n                \"paddingTop\": \"8px\",\n                \"width\": \"128px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"paddingLeft\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlex\": 1,\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flex\": 1,\n                  \"flexDirection\": \"row\",\n                  \"msFlex\": \"1 1 0%\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"24px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Item 2\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            aria-label=\"List-Item-NaN\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(167,243,208,1.00)\",\n                \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n                \"borderBottomLeftRadius\": \"6px\",\n                \"borderBottomRightRadius\": \"6px\",\n                \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n                \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n                \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n                \"borderTopLeftRadius\": \"6px\",\n                \"borderTopRightRadius\": \"6px\",\n                \"borderTopWidth\": \"0px\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": \"8px\",\n                \"marginTop\": \"8px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"paddingBottom\": \"8px\",\n                \"paddingLeft\": \"16px\",\n                \"paddingRight\": \"16px\",\n                \"paddingTop\": \"8px\",\n                \"width\": \"128px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"paddingLeft\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlex\": 1,\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flex\": 1,\n                  \"flexDirection\": \"row\",\n                  \"msFlex\": \"1 1 0%\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"24px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Item 3\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            aria-label=\"List-Item-NaN\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(167,243,208,1.00)\",\n                \"borderBottomColor\": \"rgba(212,212,216,1.00)\",\n                \"borderBottomLeftRadius\": \"6px\",\n                \"borderBottomRightRadius\": \"6px\",\n                \"borderLeftColor\": \"rgba(212,212,216,1.00)\",\n                \"borderRightColor\": \"rgba(212,212,216,1.00)\",\n                \"borderTopColor\": \"rgba(212,212,216,1.00)\",\n                \"borderTopLeftRadius\": \"6px\",\n                \"borderTopRightRadius\": \"6px\",\n                \"borderTopWidth\": \"0px\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": \"8px\",\n                \"marginTop\": \"8px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"paddingBottom\": \"8px\",\n                \"paddingLeft\": \"16px\",\n                \"paddingRight\": \"16px\",\n                \"paddingTop\": \"8px\",\n                \"width\": \"128px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"paddingLeft\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlex\": 1,\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flex\": 1,\n                  \"flexDirection\": \"row\",\n                  \"msFlex\": \"1 1 0%\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"24px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Item 4\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"0px\",\n            }\n          }\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Menu Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"width\": \"90%\",\n        }\n      }\n    >\n      <div\n        aria-haspopup=\"menu\"\n        aria-label=\"More options menu\"\n        className=\"css-view-1dbjc4n\"\n        id=\"139\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onKeyDownCapture={[Function]}\n        style={\n          Object {\n            \"cursor\": \"pointer\",\n            \"msTouchAction\": \"manipulation\",\n            \"touchAction\": \"manipulation\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <svg\n          role=\"img\"\n          stroke=\"\"\n          style={\n            Object {\n              \"color\": \"rgba(115,115,115,1.00)\",\n              \"height\": \"16px\",\n              \"width\": \"16px\",\n            }\n          }\n          viewBox=\"0 0 24 24\"\n        >\n          <g>\n            <path\n              d=\"M22 5H2V7.47961H22V5ZM22 10.4795H2V12.9591H22V10.4795ZM2 15.959H22V18.4386H2V15.959Z\"\n              fill=\"currentColor\"\n              stroke=\"\"\n            />\n          </g>\n        </svg>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Menu Group 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"width\": \"90%\",\n        }\n      }\n    >\n      <div\n        aria-haspopup=\"menu\"\n        className=\"css-view-1dbjc4n\"\n        id=\"141\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onKeyDownCapture={[Function]}\n        style={\n          Object {\n            \"cursor\": \"pointer\",\n            \"msTouchAction\": \"manipulation\",\n            \"touchAction\": \"manipulation\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <svg\n          role=\"img\"\n          stroke=\"\"\n          style={\n            Object {\n              \"color\": \"rgba(115,115,115,1.00)\",\n              \"height\": \"16px\",\n              \"width\": \"16px\",\n            }\n          }\n          viewBox=\"0 0 24 24\"\n        >\n          <g>\n            <path\n              d=\"M22 5H2V7.47961H22V5ZM22 10.4795H2V12.9591H22V10.4795ZM2 15.959H22V18.4386H2V15.959Z\"\n              fill=\"currentColor\"\n              stroke=\"\"\n            />\n          </g>\n        </svg>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Menu Menu positions 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignSelf\": \"flex-start\",\n          \"alignSelf\": \"flex-start\",\n          \"msFlexItemAlign\": \"start\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        aria-haspopup=\"menu\"\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        id=\"145\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onKeyDownCapture={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitAlignSelf\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"alignSelf\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexItemAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"msGridRowAlign\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Menu\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"24px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"marginLeft\": \"0px\",\n            \"marginRight\": \"0px\",\n          }\n        }\n      >\n        <select\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          onTouchStart={[Function]}\n          style={\n            Object {\n              \"MozAppearance\": \"none\",\n              \"WebkitAppearance\": \"none\",\n              \"appearance\": \"none\",\n              \"height\": \"100%\",\n              \"opacity\": 0,\n              \"position\": \"absolute\",\n              \"width\": \"100%\",\n              \"zIndex\": 1,\n            }\n          }\n          value=\"auto\"\n        >\n          <option\n            disabled={true}\n            value=\"__NativebasePlaceholder__\"\n          />\n          <option\n            value=\"auto\"\n          >\n            auto\n          </option>\n          <option\n            value=\"top left\"\n          >\n            Top Left\n          </option>\n          <option\n            value=\"top\"\n          >\n            Top\n          </option>\n          <option\n            value=\"top right\"\n          >\n            Top Right\n          </option>\n          <option\n            value=\"right top\"\n          >\n            Right Top\n          </option>\n          <option\n            value=\"right\"\n          >\n            Right\n          </option>\n          <option\n            value=\"right bottom\"\n          >\n            Right Bottom\n          </option>\n          <option\n            value=\"bottom left\"\n          >\n            Bottom Left\n          </option>\n          <option\n            value=\"bottom\"\n          >\n            Bottom\n          </option>\n          <option\n            value=\"bottom right\"\n          >\n            Bottom Right\n          </option>\n          <option\n            value=\"left top\"\n          >\n            Left Top\n          </option>\n          <option\n            value=\"left\"\n          >\n            Left\n          </option>\n          <option\n            value=\"left bottom\"\n          >\n            Left Bottom\n          </option>\n        </select>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderBottomWidth\": \"1px\",\n              \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n              \"borderLeftWidth\": \"1px\",\n              \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n              \"borderRightWidth\": \"1px\",\n              \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"borderTopWidth\": \"1px\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"overflowX\": \"auto\",\n              \"overflowY\": \"auto\",\n            }\n          }\n        >\n          <input\n            aria-hidden={true}\n            autoCapitalize=\"sentences\"\n            autoComplete=\"on\"\n            autoCorrect=\"on\"\n            className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y r-pointerEvents-633pao\"\n            dir=\"auto\"\n            onBlur={[Function]}\n            onChange={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onSelect={[Function]}\n            readOnly={true}\n            spellCheck={true}\n            style={\n              Object {\n                \"WebkitFlex\": 1,\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"cursor\": \"auto\",\n                \"flex\": 1,\n                \"fontSize\": \"12px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"height\": \"100%\",\n                \"lineHeight\": \"1.5em\",\n                \"msFlex\": \"1 1 0%\",\n                \"outline\": \"none\",\n                \"outlineWidth\": \"0px\",\n                \"paddingBottom\": \"8px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"8px\",\n                \"width\": \"100%\",\n              }\n            }\n            tabIndex=\"-1\"\n            type=\"text\"\n            value=\"auto\"\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <svg\n            role=\"img\"\n            stroke=\"\"\n            style={\n              Object {\n                \"color\": \"rgba(115,115,115,1.00)\",\n                \"height\": \"24px\",\n                \"marginRight\": \"12px\",\n                \"paddingBottom\": \"4px\",\n                \"paddingLeft\": \"4px\",\n                \"paddingRight\": \"4px\",\n                \"paddingTop\": \"4px\",\n                \"width\": \"24px\",\n              }\n            }\n            viewBox=\"0 0 24 24\"\n          >\n            <g>\n              <path\n                d=\"M20.2286 6L11.9973 14.3785L3.76862 6.00268L2 7.80293L12 18L22 7.80293L20.2286 6Z\"\n                fill=\"currentColor\"\n                stroke=\"\"\n              />\n            </g>\n          </svg>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Menu MenuOptionsGroup 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"width\": \"90%\",\n        }\n      }\n    >\n      <div\n        aria-haspopup=\"menu\"\n        className=\"css-view-1dbjc4n\"\n        id=\"143\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onKeyDownCapture={[Function]}\n        style={\n          Object {\n            \"cursor\": \"pointer\",\n            \"msTouchAction\": \"manipulation\",\n            \"touchAction\": \"manipulation\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <svg\n          role=\"img\"\n          stroke=\"\"\n          style={\n            Object {\n              \"color\": \"rgba(115,115,115,1.00)\",\n              \"height\": \"16px\",\n              \"width\": \"16px\",\n            }\n          }\n          viewBox=\"0 0 24 24\"\n        >\n          <g>\n            <path\n              d=\"M22 5H2V7.47961H22V5ZM22 10.4795H2V12.9591H22V10.4795ZM2 15.959H22V18.4386H2V15.959Z\"\n              fill=\"currentColor\"\n              stroke=\"\"\n            />\n          </g>\n        </svg>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Modal Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Button\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Modal Modal Custom Backdrop 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Button\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Modal Modal Placement 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"vertical\",\n          \"WebkitFlexDirection\": \"column\",\n          \"flexDirection\": \"column\",\n          \"msFlexDirection\": \"column\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Top\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Bottom\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Center\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Left\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Right\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Modal Modal Ref Examples 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Open Modal\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"overflowX\": \"auto\",\n            \"overflowY\": \"auto\",\n            \"width\": \"128px\",\n          }\n        }\n      >\n        <input\n          autoCapitalize=\"sentences\"\n          autoComplete=\"on\"\n          autoCorrect=\"on\"\n          className=\"css-textinput-11aywtz r-placeholderTextColor-klosnv\"\n          dir=\"auto\"\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onSelect={[Function]}\n          placeholder=\"Enter the OTP\"\n          readOnly={false}\n          spellCheck={true}\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"cursor\": \"auto\",\n              \"flex\": 1,\n              \"fontSize\": \"12px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"lineHeight\": \"1.5em\",\n              \"msFlex\": \"1 1 0%\",\n              \"outline\": \"none\",\n              \"outlineWidth\": \"0px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"text\"\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Modal Modal Size Examples 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Open xs Modal\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Open sm Modal\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Open md Modal\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Open lg Modal\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Open xl Modal\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Open full Modal\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Modal Modal with Keyboard Avoid view 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n            \"width\": \"104px\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Open Modal\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"32px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n            \"textAlign\": \"center\",\n          }\n        }\n      >\n        Open modal and focus on the input element to see the effect.\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Modal Multiple modal 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Button\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Mode Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"bottom\": \"0px\",\n      \"left\": \"0px\",\n      \"position\": \"absolute\",\n      \"right\": \"0px\",\n      \"top\": \"0px\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitFlex\": 1,\n        \"flex\": 1,\n        \"msFlex\": \"1 1 0%\",\n      }\n    }\n  >\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"rgba(228,228,231,1.00)\",\n          \"display\": \"flex\",\n          \"height\": \"100%\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(252,165,165,1.00)\",\n            \"fontSize\": \"24px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n          }\n        }\n      >\n        I'm a Heading\n      </div>\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(37,99,235,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Change mode\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"flexDirection\": \"row\",\n            \"marginTop\": \"12px\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n              \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n              \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n              \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"height\": \"48px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"position\": \"relative\",\n              \"width\": \"48px\",\n            }\n          }\n        >\n          <div\n            aria-label=\"--\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"100%\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"width\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n              \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n              \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n              \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"height\": \"48px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"position\": \"relative\",\n              \"width\": \"48px\",\n            }\n          }\n        >\n          <div\n            aria-label=\"--\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"100%\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Mode DefaultMode 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"bottom\": \"0px\",\n      \"left\": \"0px\",\n      \"position\": \"absolute\",\n      \"right\": \"0px\",\n      \"top\": \"0px\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitFlex\": 1,\n        \"flex\": 1,\n        \"msFlex\": \"1 1 0%\",\n      }\n    }\n  >\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"rgba(39,39,42,1.00)\",\n          \"display\": \"flex\",\n          \"height\": \"100%\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(250,250,250,1.00)\",\n            \"fontSize\": \"24px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n          }\n        }\n      >\n        I'm a Heading\n      </div>\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(220,38,38,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Change mode\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"flexDirection\": \"row\",\n            \"marginTop\": \"12px\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n              \"borderBottomColor\": \"rgba(255,255,255,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderLeftColor\": \"rgba(255,255,255,1.00)\",\n              \"borderRightColor\": \"rgba(255,255,255,1.00)\",\n              \"borderTopColor\": \"rgba(255,255,255,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"height\": \"48px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"position\": \"relative\",\n              \"width\": \"48px\",\n            }\n          }\n        >\n          <div\n            aria-label=\"--\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"100%\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"width\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n              \"borderBottomColor\": \"rgba(255,255,255,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderLeftColor\": \"rgba(255,255,255,1.00)\",\n              \"borderRightColor\": \"rgba(255,255,255,1.00)\",\n              \"borderTopColor\": \"rgba(255,255,255,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"height\": \"48px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"position\": \"relative\",\n              \"width\": \"48px\",\n            }\n          }\n        >\n          <div\n            aria-label=\"--\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"100%\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Mode Persistence 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"bottom\": \"0px\",\n      \"left\": \"0px\",\n      \"position\": \"absolute\",\n      \"right\": \"0px\",\n      \"top\": \"0px\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitFlex\": 1,\n        \"flex\": 1,\n        \"msFlex\": \"1 1 0%\",\n      }\n    }\n  >\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"rgba(228,228,231,1.00)\",\n          \"display\": \"flex\",\n          \"height\": \"100%\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"24px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n          }\n        }\n      >\n        I'm a Heading\n      </div>\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(37,99,235,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Change mode\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"flexDirection\": \"row\",\n            \"marginTop\": \"12px\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n              \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n              \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n              \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"height\": \"48px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"position\": \"relative\",\n              \"width\": \"48px\",\n            }\n          }\n        >\n          <div\n            aria-label=\"--\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"100%\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"width\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n              \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n              \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n              \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"height\": \"48px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"position\": \"relative\",\n              \"width\": \"48px\",\n            }\n          }\n        >\n          <div\n            aria-label=\"--\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitFlexBasis\": \"auto\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"flexBasis\": \"auto\",\n                \"height\": \"100%\",\n                \"maxWidth\": \"100%\",\n                \"msFlexPreferredSize\": \"auto\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n                \"zIndex\": 0,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"backgroundPosition\": \"center\",\n                  \"backgroundRepeat\": \"no-repeat\",\n                  \"backgroundSize\": \"cover\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"100%\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"right\": \"0px\",\n                  \"top\": \"0px\",\n                  \"width\": \"100%\",\n                  \"zIndex\": -1,\n                }\n              }\n              suppressHydrationWarning={true}\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Popover Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          aria-expanded={false}\n          aria-haspopup={true}\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(225,29,72,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Delete Customer\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Popover Focus on Open 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          aria-expanded={false}\n          aria-haspopup={true}\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Edit Info\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Popover Popover positions 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignSelf\": \"flex-start\",\n            \"alignSelf\": \"flex-start\",\n            \"msFlexItemAlign\": \"start\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            aria-expanded={false}\n            aria-haspopup={true}\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitAlignSelf\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"alignSelf\": \"center\",\n                \"backgroundColor\": \"rgba(225,29,72,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexItemAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msGridRowAlign\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Delete Customer\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"24px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"marginLeft\": \"0px\",\n              \"marginRight\": \"0px\",\n            }\n          }\n        >\n          <select\n            onBlur={[Function]}\n            onChange={[Function]}\n            onFocus={[Function]}\n            onMouseEnter={[Function]}\n            onMouseLeave={[Function]}\n            onTouchStart={[Function]}\n            style={\n              Object {\n                \"MozAppearance\": \"none\",\n                \"WebkitAppearance\": \"none\",\n                \"appearance\": \"none\",\n                \"height\": \"100%\",\n                \"opacity\": 0,\n                \"position\": \"absolute\",\n                \"width\": \"100%\",\n                \"zIndex\": 1,\n              }\n            }\n            value=\"auto\"\n          >\n            <option\n              disabled={true}\n              value=\"__NativebasePlaceholder__\"\n            />\n            <option\n              value=\"auto\"\n            >\n              auto\n            </option>\n            <option\n              value=\"top left\"\n            >\n              Top Left\n            </option>\n            <option\n              value=\"top\"\n            >\n              Top\n            </option>\n            <option\n              value=\"top right\"\n            >\n              Top Right\n            </option>\n            <option\n              value=\"right top\"\n            >\n              Right Top\n            </option>\n            <option\n              value=\"right\"\n            >\n              Right\n            </option>\n            <option\n              value=\"right bottom\"\n            >\n              Right Bottom\n            </option>\n            <option\n              value=\"bottom left\"\n            >\n              Bottom Left\n            </option>\n            <option\n              value=\"bottom\"\n            >\n              Bottom\n            </option>\n            <option\n              value=\"bottom right\"\n            >\n              Bottom Right\n            </option>\n            <option\n              value=\"left top\"\n            >\n              Left Top\n            </option>\n            <option\n              value=\"left\"\n            >\n              Left\n            </option>\n            <option\n              value=\"left bottom\"\n            >\n              Left Bottom\n            </option>\n          </select>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"overflowX\": \"auto\",\n                \"overflowY\": \"auto\",\n              }\n            }\n          >\n            <input\n              aria-hidden={true}\n              autoCapitalize=\"sentences\"\n              autoComplete=\"on\"\n              autoCorrect=\"on\"\n              className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y r-pointerEvents-633pao\"\n              dir=\"auto\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onSelect={[Function]}\n              readOnly={true}\n              spellCheck={true}\n              style={\n                Object {\n                  \"WebkitFlex\": 1,\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"cursor\": \"auto\",\n                  \"flex\": 1,\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"100%\",\n                  \"lineHeight\": \"1.5em\",\n                  \"msFlex\": \"1 1 0%\",\n                  \"outline\": \"none\",\n                  \"outlineWidth\": \"0px\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"width\": \"100%\",\n                }\n              }\n              tabIndex=\"-1\"\n              type=\"text\"\n              value=\"auto\"\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <svg\n              role=\"img\"\n              stroke=\"\"\n              style={\n                Object {\n                  \"color\": \"rgba(115,115,115,1.00)\",\n                  \"height\": \"24px\",\n                  \"marginRight\": \"12px\",\n                  \"paddingBottom\": \"4px\",\n                  \"paddingLeft\": \"4px\",\n                  \"paddingRight\": \"4px\",\n                  \"paddingTop\": \"4px\",\n                  \"width\": \"24px\",\n                }\n              }\n              viewBox=\"0 0 24 24\"\n            >\n              <g>\n                <path\n                  d=\"M20.2286 6L11.9973 14.3785L3.76862 6.00268L2 7.80293L12 18L22 7.80293L20.2286 6Z\"\n                  fill=\"currentColor\"\n                  stroke=\"\"\n                />\n              </g>\n            </svg>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Pressable Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        style={\n          Object {\n            \"backgroundColor\": \"rgba(243,244,246,1.00)\",\n            \"borderBottomColor\": \"rgba(209,213,219,1.00)\",\n            \"borderBottomLeftRadius\": \"8px\",\n            \"borderBottomRightRadius\": \"8px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(209,213,219,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(209,213,219,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(209,213,219,1.00)\",\n            \"borderTopLeftRadius\": \"8px\",\n            \"borderTopRightRadius\": \"8px\",\n            \"borderTopWidth\": \"1px\",\n            \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n            \"cursor\": \"pointer\",\n            \"maxWidth\": \"384px\",\n            \"msTouchAction\": \"manipulation\",\n            \"overflowX\": \"hidden\",\n            \"overflowY\": \"hidden\",\n            \"paddingBottom\": \"20px\",\n            \"paddingLeft\": \"20px\",\n            \"paddingRight\": \"20px\",\n            \"paddingTop\": \"20px\",\n            \"touchAction\": \"manipulation\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(0,93,180,1.00)\",\n                  \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"paddingBottom\": \"2px\",\n                  \"paddingLeft\": \"8px\",\n                  \"paddingRight\": \"8px\",\n                  \"paddingTop\": \"2px\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(255,255,255,1.00)\",\n                      \"fontSize\": \"12px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"500\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Business\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxFlex\": 1,\n                  \"WebkitFlexGrow\": 1,\n                  \"flexGrow\": 1,\n                  \"msFlexPositive\": 1,\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(31,41,55,1.00)\",\n                  \"fontSize\": \"10px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              1 month ago\n            </div>\n          </div>\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(31,41,55,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginTop\": \"12px\",\n              }\n            }\n          >\n            Marketing License\n          </div>\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(55,65,81,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginTop\": \"8px\",\n              }\n            }\n          >\n            Unlock powerfull time-saving tools for creating email delivery and collecting marketing data\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"vertical\",\n                \"WebkitFlexDirection\": \"column\",\n                \"display\": \"flex\",\n                \"flexDirection\": \"column\",\n                \"msFlexDirection\": \"column\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(0,93,180,1.00)\",\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"500\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginTop\": \"8px\",\n                }\n              }\n            >\n              Read More\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Pressable Events 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        style={\n          Object {\n            \"cursor\": \"pointer\",\n            \"maxWidth\": \"384px\",\n            \"msTouchAction\": \"manipulation\",\n            \"touchAction\": \"manipulation\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitTransform\": \"scale(1)\",\n              \"backgroundColor\": \"rgba(243,244,246,1.00)\",\n              \"borderBottomColor\": \"rgba(209,213,219,1.00)\",\n              \"borderBottomLeftRadius\": \"8px\",\n              \"borderBottomRightRadius\": \"8px\",\n              \"borderBottomWidth\": \"1px\",\n              \"borderLeftColor\": \"rgba(209,213,219,1.00)\",\n              \"borderLeftWidth\": \"1px\",\n              \"borderRightColor\": \"rgba(209,213,219,1.00)\",\n              \"borderRightWidth\": \"1px\",\n              \"borderTopColor\": \"rgba(209,213,219,1.00)\",\n              \"borderTopLeftRadius\": \"8px\",\n              \"borderTopRightRadius\": \"8px\",\n              \"borderTopWidth\": \"1px\",\n              \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n              \"paddingBottom\": \"20px\",\n              \"paddingLeft\": \"20px\",\n              \"paddingRight\": \"20px\",\n              \"paddingTop\": \"20px\",\n              \"transform\": \"scale(1)\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(0,93,180,1.00)\",\n                  \"borderBottomColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"paddingBottom\": \"2px\",\n                  \"paddingLeft\": \"8px\",\n                  \"paddingRight\": \"8px\",\n                  \"paddingTop\": \"2px\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(255,255,255,1.00)\",\n                      \"fontSize\": \"12px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"500\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Business\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxFlex\": 1,\n                  \"WebkitFlexGrow\": 1,\n                  \"flexGrow\": 1,\n                  \"msFlexPositive\": 1,\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(31,41,55,1.00)\",\n                  \"fontSize\": \"10px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              1 month ago\n            </div>\n          </div>\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(31,41,55,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginTop\": \"12px\",\n              }\n            }\n          >\n            Marketing License\n          </div>\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(55,65,81,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginTop\": \"8px\",\n              }\n            }\n          >\n            Unlock powerfull time-saving tools for creating email delivery and collecting marketing data\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"vertical\",\n                \"WebkitFlexDirection\": \"column\",\n                \"display\": \"flex\",\n                \"flexDirection\": \"column\",\n                \"msFlexDirection\": \"column\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(0,93,180,1.00)\",\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"500\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginTop\": \"8px\",\n                }\n              }\n            >\n              Read More\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Progress ColorSchemes 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"maxWidth\": \"400px\",\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"marginLeft\": \"16px\",\n                \"marginRight\": \"16px\",\n              }\n            }\n          >\n            <div\n              aria-valuemax={100}\n              aria-valuemin={0}\n              aria-valuenow={35}\n              className=\"css-view-1dbjc4n\"\n              role=\"progressbar\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"8px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"boxShadow\": \"0px 1px 1px rgba(0,0,0,0.18)\",\n                    \"display\": \"flex\",\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"35%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"16px\",\n                }\n              }\n            />\n            <div\n              aria-valuemax={100}\n              aria-valuemin={0}\n              aria-valuenow={45}\n              className=\"css-view-1dbjc4n\"\n              role=\"progressbar\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"8px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(219,39,119,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"boxShadow\": \"0px 1px 1px rgba(0,0,0,0.18)\",\n                    \"display\": \"flex\",\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"45%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"16px\",\n                }\n              }\n            />\n            <div\n              aria-valuemax={100}\n              aria-valuemin={0}\n              aria-valuenow={55.00000000000001}\n              className=\"css-view-1dbjc4n\"\n              role=\"progressbar\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"8px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(5,150,105,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"boxShadow\": \"0px 1px 1px rgba(0,0,0,0.18)\",\n                    \"display\": \"flex\",\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"55.00000000000001%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"16px\",\n                }\n              }\n            />\n            <div\n              aria-valuemax={100}\n              aria-valuemin={0}\n              aria-valuenow={65}\n              className=\"css-view-1dbjc4n\"\n              role=\"progressbar\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"8px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(234,88,12,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"boxShadow\": \"0px 1px 1px rgba(0,0,0,0.18)\",\n                    \"display\": \"flex\",\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"65%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"16px\",\n                }\n              }\n            />\n            <div\n              aria-valuemax={100}\n              aria-valuemin={0}\n              aria-valuenow={75}\n              className=\"css-view-1dbjc4n\"\n              role=\"progressbar\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"8px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(87,83,78,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"boxShadow\": \"0px 1px 1px rgba(0,0,0,0.18)\",\n                    \"display\": \"flex\",\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"75%\",\n                  }\n                }\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Progress Composition 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"width\": \"90%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"display\": \"flex\",\n            \"justifyContent\": \"center\",\n            \"marginBottom\": \"40px\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"20px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.25em\",\n            }\n          }\n        >\n          Progress Composition\n        </div>\n      </div>\n      <div\n        aria-valuemax={100}\n        aria-valuemin={0}\n        aria-valuenow={45}\n        className=\"css-view-1dbjc4n\"\n        role=\"progressbar\"\n        style={\n          Object {\n            \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"height\": \"20px\",\n            \"marginBottom\": \"16px\",\n            \"overflowX\": \"hidden\",\n            \"overflowY\": \"hidden\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"boxShadow\": \"0px 1px 1px rgba(0,0,0,0.18)\",\n              \"display\": \"flex\",\n              \"height\": \"100%\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"width\": \"45%\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(255,255,255,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            45%\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"display\": \"flex\",\n            \"flexDirection\": \"row\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          aria-valuemax={100}\n          aria-valuemin={0}\n          aria-valuenow={75}\n          className=\"css-view-1dbjc4n\"\n          role=\"progressbar\"\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"flex\": 1,\n              \"height\": \"20px\",\n              \"marginBottom\": \"16px\",\n              \"msFlex\": \"1 1 0%\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"boxShadow\": \"0px 1px 1px rgba(0,0,0,0.18)\",\n                \"display\": \"flex\",\n                \"height\": \"100%\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"width\": \"75%\",\n              }\n            }\n          />\n        </div>\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"700\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n              \"marginLeft\": \"8px\",\n            }\n          }\n        >\n          75%\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Progress CustomBgColor 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"maxWidth\": \"400px\",\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <div\n          aria-valuemax={100}\n          aria-valuemin={0}\n          aria-valuenow={75}\n          className=\"css-view-1dbjc4n\"\n          role=\"progressbar\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(243,244,246,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"height\": \"8px\",\n              \"marginLeft\": \"16px\",\n              \"marginRight\": \"16px\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(132,204,22,1.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"boxShadow\": \"0px 1px 1px rgba(0,0,0,0.18)\",\n                \"display\": \"flex\",\n                \"height\": \"100%\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"width\": \"75%\",\n              }\n            }\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Progress Default Progress Bar 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"maxWidth\": \"400px\",\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <div\n          aria-valuemax={100}\n          aria-valuemin={0}\n          aria-valuenow={45}\n          className=\"css-view-1dbjc4n\"\n          role=\"progressbar\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"height\": \"8px\",\n              \"marginLeft\": \"16px\",\n              \"marginRight\": \"16px\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"boxShadow\": \"0px 1px 1px rgba(0,0,0,0.18)\",\n                \"display\": \"flex\",\n                \"height\": \"100%\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"width\": \"45%\",\n              }\n            }\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Progress Flat 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"maxWidth\": \"400px\",\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <div\n          aria-valuemax={100}\n          aria-valuemin={0}\n          aria-valuenow={65}\n          className=\"css-view-1dbjc4n\"\n          role=\"progressbar\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n              \"borderBottomLeftRadius\": \"0px\",\n              \"borderBottomRightRadius\": \"0px\",\n              \"borderTopLeftRadius\": \"0px\",\n              \"borderTopRightRadius\": \"0px\",\n              \"height\": \"8px\",\n              \"marginLeft\": \"16px\",\n              \"marginRight\": \"16px\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"boxShadow\": \"0px 1px 1px rgba(0,0,0,0.18)\",\n                \"display\": \"flex\",\n                \"height\": \"100%\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"width\": \"65%\",\n              }\n            }\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Progress Sizes 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"maxWidth\": \"400px\",\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"marginLeft\": \"16px\",\n                \"marginRight\": \"16px\",\n              }\n            }\n          >\n            <div\n              aria-valuemax={100}\n              aria-valuemin={0}\n              aria-valuenow={25}\n              className=\"css-view-1dbjc4n\"\n              role=\"progressbar\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"4px\",\n                  \"marginBottom\": \"16px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"boxShadow\": \"0px 1px 1px rgba(0,0,0,0.18)\",\n                    \"display\": \"flex\",\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"25%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"16px\",\n                }\n              }\n            />\n            <div\n              aria-valuemax={100}\n              aria-valuemin={0}\n              aria-valuenow={35}\n              className=\"css-view-1dbjc4n\"\n              role=\"progressbar\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"8px\",\n                  \"marginBottom\": \"16px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"boxShadow\": \"0px 1px 1px rgba(0,0,0,0.18)\",\n                    \"display\": \"flex\",\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"35%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"16px\",\n                }\n              }\n            />\n            <div\n              aria-valuemax={100}\n              aria-valuemin={0}\n              aria-valuenow={45}\n              className=\"css-view-1dbjc4n\"\n              role=\"progressbar\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"12px\",\n                  \"marginBottom\": \"16px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"boxShadow\": \"0px 1px 1px rgba(0,0,0,0.18)\",\n                    \"display\": \"flex\",\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"45%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"16px\",\n                }\n              }\n            />\n            <div\n              aria-valuemax={100}\n              aria-valuemin={0}\n              aria-valuenow={55.00000000000001}\n              className=\"css-view-1dbjc4n\"\n              role=\"progressbar\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"16px\",\n                  \"marginBottom\": \"16px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"boxShadow\": \"0px 1px 1px rgba(0,0,0,0.18)\",\n                    \"display\": \"flex\",\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"55.00000000000001%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"16px\",\n                }\n              }\n            />\n            <div\n              aria-valuemax={100}\n              aria-valuemin={0}\n              aria-valuenow={65}\n              className=\"css-view-1dbjc4n\"\n              role=\"progressbar\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"20px\",\n                  \"marginBottom\": \"16px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"boxShadow\": \"0px 1px 1px rgba(0,0,0,0.18)\",\n                    \"display\": \"flex\",\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"65%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"16px\",\n                }\n              }\n            />\n            <div\n              aria-valuemax={100}\n              aria-valuemin={0}\n              aria-valuenow={75}\n              className=\"css-view-1dbjc4n\"\n              role=\"progressbar\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"24px\",\n                  \"marginBottom\": \"16px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"boxShadow\": \"0px 1px 1px rgba(0,0,0,0.18)\",\n                    \"display\": \"flex\",\n                    \"height\": \"100%\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"width\": \"75%\",\n                  }\n                }\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Radio Controlled Radio 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      aria-label=\"favorite number\"\n      aria-orientation=\"vertical\"\n      className=\"css-view-1dbjc4n\"\n      id=\"react-aria-0-1\"\n      onBlur={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"radiogroup\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"flex-start\",\n          \"WebkitBoxAlign\": \"start\",\n          \"alignItems\": \"flex-start\",\n          \"msFlexAlign\": \"start\",\n        }\n      }\n    >\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          onMouseDown={[Function]}\n          onMouseUp={[Function]}\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              checked={true}\n              name=\"myRadioGroup\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              tabIndex={0}\n              type=\"radio\"\n              value=\"one\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                    \"borderBottomColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"paddingBottom\": \"4px\",\n                    \"paddingLeft\": \"4px\",\n                    \"paddingRight\": \"4px\",\n                    \"paddingTop\": \"4px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(8,145,178,1.00)\",\n                      \"height\": \"12px\",\n                      \"opacity\": 1,\n                      \"width\": \"12px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              One\n            </div>\n          </div>\n        </div>\n      </label>\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          onMouseDown={[Function]}\n          onMouseUp={[Function]}\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              checked={false}\n              name=\"myRadioGroup\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              tabIndex={0}\n              type=\"radio\"\n              value=\"two\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                    \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"paddingBottom\": \"4px\",\n                    \"paddingLeft\": \"4px\",\n                    \"paddingRight\": \"4px\",\n                    \"paddingTop\": \"4px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(115,115,115,1.00)\",\n                      \"height\": \"12px\",\n                      \"opacity\": 0,\n                      \"width\": \"12px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Two\n            </div>\n          </div>\n        </div>\n      </label>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Radio Custom Color 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      aria-label=\"favorite colorscheme\"\n      aria-orientation=\"vertical\"\n      className=\"css-view-1dbjc4n\"\n      id=\"react-aria-0-1\"\n      onBlur={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"radiogroup\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"flex-start\",\n          \"WebkitBoxAlign\": \"start\",\n          \"alignItems\": \"flex-start\",\n          \"msFlexAlign\": \"start\",\n        }\n      }\n    >\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          onMouseDown={[Function]}\n          onMouseUp={[Function]}\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              checked={true}\n              name=\"exampleGroup\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              tabIndex={0}\n              type=\"radio\"\n              value=\"1\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                    \"borderBottomColor\": \"rgba(5,150,105,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(5,150,105,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(5,150,105,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(5,150,105,1.00)\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"paddingBottom\": \"4px\",\n                    \"paddingLeft\": \"4px\",\n                    \"paddingRight\": \"4px\",\n                    \"paddingTop\": \"4px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(5,150,105,1.00)\",\n                      \"height\": \"12px\",\n                      \"opacity\": 1,\n                      \"width\": \"12px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              emerald\n            </div>\n          </div>\n        </div>\n      </label>\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          onMouseDown={[Function]}\n          onMouseUp={[Function]}\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              checked={false}\n              name=\"exampleGroup\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              tabIndex={0}\n              type=\"radio\"\n              value=\"2\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                    \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"paddingBottom\": \"4px\",\n                    \"paddingLeft\": \"4px\",\n                    \"paddingRight\": \"4px\",\n                    \"paddingTop\": \"4px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(115,115,115,1.00)\",\n                      \"height\": \"12px\",\n                      \"opacity\": 0,\n                      \"width\": \"12px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              secondary\n            </div>\n          </div>\n        </div>\n      </label>\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          onMouseDown={[Function]}\n          onMouseUp={[Function]}\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              checked={false}\n              name=\"exampleGroup\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              tabIndex={0}\n              type=\"radio\"\n              value=\"3\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                    \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"paddingBottom\": \"4px\",\n                    \"paddingLeft\": \"4px\",\n                    \"paddingRight\": \"4px\",\n                    \"paddingTop\": \"4px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(115,115,115,1.00)\",\n                      \"height\": \"12px\",\n                      \"opacity\": 0,\n                      \"width\": \"12px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              warning\n            </div>\n          </div>\n        </div>\n      </label>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Radio Custom Icon 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      aria-label=\"pick a choice\"\n      aria-orientation=\"vertical\"\n      className=\"css-view-1dbjc4n\"\n      id=\"react-aria-0-1\"\n      onBlur={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"radiogroup\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"flex-start\",\n          \"WebkitBoxAlign\": \"start\",\n          \"alignItems\": \"flex-start\",\n          \"msFlexAlign\": \"start\",\n        }\n      }\n    >\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          onMouseDown={[Function]}\n          onMouseUp={[Function]}\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              checked={true}\n              name=\"exampleGroup\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              tabIndex={0}\n              type=\"radio\"\n              value=\"1\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                    \"borderBottomColor\": \"rgba(22,163,74,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(22,163,74,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(22,163,74,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(22,163,74,1.00)\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"paddingBottom\": \"4px\",\n                    \"paddingLeft\": \"4px\",\n                    \"paddingRight\": \"4px\",\n                    \"paddingTop\": \"4px\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                />\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"18px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginLeft\": \"8px\",\n                  \"marginRight\": \"8px\",\n                }\n              }\n            >\n              Alien\n            </div>\n          </div>\n        </div>\n      </label>\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          onMouseDown={[Function]}\n          onMouseUp={[Function]}\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              checked={false}\n              name=\"exampleGroup\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              tabIndex={0}\n              type=\"radio\"\n              value=\"2\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                    \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"paddingBottom\": \"4px\",\n                    \"paddingLeft\": \"4px\",\n                    \"paddingRight\": \"4px\",\n                    \"paddingTop\": \"4px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(115,115,115,1.00)\",\n                      \"height\": \"16px\",\n                      \"opacity\": 0,\n                      \"width\": \"16px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"18px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginLeft\": \"8px\",\n                  \"marginRight\": \"8px\",\n                }\n              }\n            >\n              Fire\n            </div>\n          </div>\n        </div>\n      </label>\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          onMouseDown={[Function]}\n          onMouseUp={[Function]}\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              checked={false}\n              name=\"exampleGroup\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              tabIndex={0}\n              type=\"radio\"\n              value=\"3\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                    \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"paddingBottom\": \"4px\",\n                    \"paddingLeft\": \"4px\",\n                    \"paddingRight\": \"4px\",\n                    \"paddingTop\": \"4px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(115,115,115,1.00)\",\n                      \"height\": \"16px\",\n                      \"opacity\": 0,\n                      \"width\": \"16px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"18px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                  \"marginLeft\": \"8px\",\n                  \"marginRight\": \"8px\",\n                }\n              }\n            >\n              Warning\n            </div>\n          </div>\n        </div>\n      </label>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Radio Disabled 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      aria-label=\"select prize\"\n      aria-orientation=\"vertical\"\n      className=\"css-view-1dbjc4n\"\n      id=\"react-aria-0-1\"\n      onBlur={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"radiogroup\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"flex-start\",\n          \"WebkitBoxAlign\": \"start\",\n          \"alignItems\": \"flex-start\",\n          \"msFlexAlign\": \"start\",\n        }\n      }\n    >\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          onMouseDown={[Function]}\n          onMouseUp={[Function]}\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              checked={false}\n              disabled={true}\n              name=\"exampleGroup\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              type=\"radio\"\n              value=\"1\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"not-allowed\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"opacity\": 0.6,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                    \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"opacity\": 0.6,\n                    \"paddingBottom\": \"4px\",\n                    \"paddingLeft\": \"4px\",\n                    \"paddingRight\": \"4px\",\n                    \"paddingTop\": \"4px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                      \"color\": \"rgba(115,115,115,1.00)\",\n                      \"height\": \"12px\",\n                      \"opacity\": 0,\n                      \"width\": \"12px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              First\n            </div>\n          </div>\n        </div>\n      </label>\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          onMouseDown={[Function]}\n          onMouseUp={[Function]}\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              checked={true}\n              name=\"exampleGroup\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              tabIndex={0}\n              type=\"radio\"\n              value=\"2\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                    \"borderBottomColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"paddingBottom\": \"4px\",\n                    \"paddingLeft\": \"4px\",\n                    \"paddingRight\": \"4px\",\n                    \"paddingTop\": \"4px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(8,145,178,1.00)\",\n                      \"height\": \"12px\",\n                      \"opacity\": 1,\n                      \"width\": \"12px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Second\n            </div>\n          </div>\n        </div>\n      </label>\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          onMouseDown={[Function]}\n          onMouseUp={[Function]}\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              checked={false}\n              name=\"exampleGroup\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              tabIndex={0}\n              type=\"radio\"\n              value=\"3\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                    \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"paddingBottom\": \"4px\",\n                    \"paddingLeft\": \"4px\",\n                    \"paddingRight\": \"4px\",\n                    \"paddingTop\": \"4px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(115,115,115,1.00)\",\n                      \"height\": \"12px\",\n                      \"opacity\": 0,\n                      \"width\": \"12px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Third\n            </div>\n          </div>\n        </div>\n      </label>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Radio Form Controlled 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"flex-start\",\n          \"WebkitBoxAlign\": \"start\",\n          \"alignItems\": \"flex-start\",\n          \"maxWidth\": \"80%\",\n          \"msFlexAlign\": \"start\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <label\n          className=\"css-view-1dbjc4n\"\n          id=\"field-175-label\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"start\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"flex-start\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"marginBottom\": \"4px\",\n              \"marginTop\": \"4px\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"start\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(115,115,115,1.00)\",\n                \"fontSize\": \"18px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            Select Prize\n          </div>\n        </label>\n        <div\n          aria-label=\"select prize\"\n          aria-orientation=\"vertical\"\n          className=\"css-view-1dbjc4n\"\n          id=\"react-aria-0-1\"\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"radiogroup\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"flex-start\",\n              \"WebkitBoxAlign\": \"start\",\n              \"alignItems\": \"flex-start\",\n              \"msFlexAlign\": \"start\",\n            }\n          }\n        >\n          <label\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              onMouseDown={[Function]}\n              onMouseUp={[Function]}\n            >\n              <div\n                style={\n                  Object {\n                    \"border\": 0,\n                    \"clip\": \"rect(0 0 0 0)\",\n                    \"clipPath\": \"inset(50%)\",\n                    \"height\": 1,\n                    \"margin\": \"0 -1px -1px 0\",\n                    \"overflow\": \"hidden\",\n                    \"padding\": 0,\n                    \"position\": \"absolute\",\n                    \"whiteSpace\": \"nowrap\",\n                    \"width\": 1,\n                  }\n                }\n              >\n                <input\n                  checked={true}\n                  disabled={false}\n                  name=\"exampleGroup\"\n                  onBlur={[Function]}\n                  onChange={[Function]}\n                  onClick={[Function]}\n                  onFocus={[Function]}\n                  onKeyDown={[Function]}\n                  onKeyUp={[Function]}\n                  onMouseDown={[Function]}\n                  onMouseEnter={[Function]}\n                  onMouseLeave={[Function]}\n                  onMouseUp={[Function]}\n                  onTouchCancel={[Function]}\n                  onTouchEnd={[Function]}\n                  onTouchMove={[Function]}\n                  onTouchStart={[Function]}\n                  readOnly={false}\n                  required={false}\n                  tabIndex={0}\n                  type=\"radio\"\n                  value=\"1\"\n                />\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"cursor\": \"pointer\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                  />\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    id=\"field-175\"\n                    style={\n                      Object {\n                        \"WebkitAlignItems\": \"center\",\n                        \"WebkitBoxAlign\": \"center\",\n                        \"WebkitBoxPack\": \"center\",\n                        \"WebkitJustifyContent\": \"center\",\n                        \"alignItems\": \"center\",\n                        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                        \"borderBottomColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderBottomLeftRadius\": \"9999px\",\n                        \"borderBottomRightRadius\": \"9999px\",\n                        \"borderBottomWidth\": \"2px\",\n                        \"borderLeftColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderLeftWidth\": \"2px\",\n                        \"borderRightColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderRightWidth\": \"2px\",\n                        \"borderTopColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderTopLeftRadius\": \"9999px\",\n                        \"borderTopRightRadius\": \"9999px\",\n                        \"borderTopWidth\": \"2px\",\n                        \"display\": \"flex\",\n                        \"justifyContent\": \"center\",\n                        \"marginBottom\": \"4px\",\n                        \"marginTop\": \"4px\",\n                        \"msFlexAlign\": \"center\",\n                        \"msFlexPack\": \"center\",\n                        \"paddingBottom\": \"4px\",\n                        \"paddingLeft\": \"4px\",\n                        \"paddingRight\": \"4px\",\n                        \"paddingTop\": \"4px\",\n                      }\n                    }\n                  >\n                    <svg\n                      role=\"img\"\n                      stroke=\"\"\n                      style={\n                        Object {\n                          \"color\": \"rgba(8,145,178,1.00)\",\n                          \"height\": \"12px\",\n                          \"opacity\": 1,\n                          \"width\": \"12px\",\n                        }\n                      }\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <g>\n                        <path\n                          d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                          fill=\"currentColor\"\n                          stroke=\"\"\n                        />\n                      </g>\n                    </svg>\n                  </div>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"16px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  First\n                </div>\n              </div>\n            </div>\n          </label>\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <label\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              onMouseDown={[Function]}\n              onMouseUp={[Function]}\n            >\n              <div\n                style={\n                  Object {\n                    \"border\": 0,\n                    \"clip\": \"rect(0 0 0 0)\",\n                    \"clipPath\": \"inset(50%)\",\n                    \"height\": 1,\n                    \"margin\": \"0 -1px -1px 0\",\n                    \"overflow\": \"hidden\",\n                    \"padding\": 0,\n                    \"position\": \"absolute\",\n                    \"whiteSpace\": \"nowrap\",\n                    \"width\": 1,\n                  }\n                }\n              >\n                <input\n                  checked={false}\n                  disabled={false}\n                  name=\"exampleGroup\"\n                  onBlur={[Function]}\n                  onChange={[Function]}\n                  onClick={[Function]}\n                  onFocus={[Function]}\n                  onKeyDown={[Function]}\n                  onKeyUp={[Function]}\n                  onMouseDown={[Function]}\n                  onMouseEnter={[Function]}\n                  onMouseLeave={[Function]}\n                  onMouseUp={[Function]}\n                  onTouchCancel={[Function]}\n                  onTouchEnd={[Function]}\n                  onTouchMove={[Function]}\n                  onTouchStart={[Function]}\n                  readOnly={false}\n                  required={false}\n                  tabIndex={0}\n                  type=\"radio\"\n                  value=\"2\"\n                />\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"cursor\": \"pointer\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                  />\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    id=\"field-175\"\n                    style={\n                      Object {\n                        \"WebkitAlignItems\": \"center\",\n                        \"WebkitBoxAlign\": \"center\",\n                        \"WebkitBoxPack\": \"center\",\n                        \"WebkitJustifyContent\": \"center\",\n                        \"alignItems\": \"center\",\n                        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                        \"borderBottomColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderBottomLeftRadius\": \"9999px\",\n                        \"borderBottomRightRadius\": \"9999px\",\n                        \"borderBottomWidth\": \"2px\",\n                        \"borderLeftColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderLeftWidth\": \"2px\",\n                        \"borderRightColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderRightWidth\": \"2px\",\n                        \"borderTopColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderTopLeftRadius\": \"9999px\",\n                        \"borderTopRightRadius\": \"9999px\",\n                        \"borderTopWidth\": \"2px\",\n                        \"display\": \"flex\",\n                        \"justifyContent\": \"center\",\n                        \"marginBottom\": \"4px\",\n                        \"marginTop\": \"4px\",\n                        \"msFlexAlign\": \"center\",\n                        \"msFlexPack\": \"center\",\n                        \"paddingBottom\": \"4px\",\n                        \"paddingLeft\": \"4px\",\n                        \"paddingRight\": \"4px\",\n                        \"paddingTop\": \"4px\",\n                      }\n                    }\n                  >\n                    <svg\n                      role=\"img\"\n                      stroke=\"\"\n                      style={\n                        Object {\n                          \"color\": \"rgba(115,115,115,1.00)\",\n                          \"height\": \"12px\",\n                          \"opacity\": 0,\n                          \"width\": \"12px\",\n                        }\n                      }\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <g>\n                        <path\n                          d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                          fill=\"currentColor\"\n                          stroke=\"\"\n                        />\n                      </g>\n                    </svg>\n                  </div>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"16px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Second\n                </div>\n              </div>\n            </div>\n          </label>\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <label\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              onMouseDown={[Function]}\n              onMouseUp={[Function]}\n            >\n              <div\n                style={\n                  Object {\n                    \"border\": 0,\n                    \"clip\": \"rect(0 0 0 0)\",\n                    \"clipPath\": \"inset(50%)\",\n                    \"height\": 1,\n                    \"margin\": \"0 -1px -1px 0\",\n                    \"overflow\": \"hidden\",\n                    \"padding\": 0,\n                    \"position\": \"absolute\",\n                    \"whiteSpace\": \"nowrap\",\n                    \"width\": 1,\n                  }\n                }\n              >\n                <input\n                  checked={false}\n                  disabled={false}\n                  name=\"exampleGroup\"\n                  onBlur={[Function]}\n                  onChange={[Function]}\n                  onClick={[Function]}\n                  onFocus={[Function]}\n                  onKeyDown={[Function]}\n                  onKeyUp={[Function]}\n                  onMouseDown={[Function]}\n                  onMouseEnter={[Function]}\n                  onMouseLeave={[Function]}\n                  onMouseUp={[Function]}\n                  onTouchCancel={[Function]}\n                  onTouchEnd={[Function]}\n                  onTouchMove={[Function]}\n                  onTouchStart={[Function]}\n                  readOnly={false}\n                  required={false}\n                  tabIndex={0}\n                  type=\"radio\"\n                  value=\"3\"\n                />\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"cursor\": \"pointer\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                  />\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    id=\"field-175\"\n                    style={\n                      Object {\n                        \"WebkitAlignItems\": \"center\",\n                        \"WebkitBoxAlign\": \"center\",\n                        \"WebkitBoxPack\": \"center\",\n                        \"WebkitJustifyContent\": \"center\",\n                        \"alignItems\": \"center\",\n                        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                        \"borderBottomColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderBottomLeftRadius\": \"9999px\",\n                        \"borderBottomRightRadius\": \"9999px\",\n                        \"borderBottomWidth\": \"2px\",\n                        \"borderLeftColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderLeftWidth\": \"2px\",\n                        \"borderRightColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderRightWidth\": \"2px\",\n                        \"borderTopColor\": \"rgba(220,38,38,1.00)\",\n                        \"borderTopLeftRadius\": \"9999px\",\n                        \"borderTopRightRadius\": \"9999px\",\n                        \"borderTopWidth\": \"2px\",\n                        \"display\": \"flex\",\n                        \"justifyContent\": \"center\",\n                        \"marginBottom\": \"4px\",\n                        \"marginTop\": \"4px\",\n                        \"msFlexAlign\": \"center\",\n                        \"msFlexPack\": \"center\",\n                        \"paddingBottom\": \"4px\",\n                        \"paddingLeft\": \"4px\",\n                        \"paddingRight\": \"4px\",\n                        \"paddingTop\": \"4px\",\n                      }\n                    }\n                  >\n                    <svg\n                      role=\"img\"\n                      stroke=\"\"\n                      style={\n                        Object {\n                          \"color\": \"rgba(115,115,115,1.00)\",\n                          \"height\": \"12px\",\n                          \"opacity\": 0,\n                          \"width\": \"12px\",\n                        }\n                      }\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <g>\n                        <path\n                          d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                          fill=\"currentColor\"\n                          stroke=\"\"\n                        />\n                      </g>\n                    </svg>\n                  </div>\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"fontSize\": \"16px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Third\n                </div>\n              </div>\n            </div>\n          </label>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          id=\"field-175\"\n          style={\n            Object {\n              \"marginTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <svg\n              role=\"img\"\n              stroke=\"\"\n              style={\n                Object {\n                  \"color\": \"rgba(220,38,38,1.00)\",\n                  \"fontSize\": \"12px\",\n                  \"height\": \"12px\",\n                  \"width\": \"12px\",\n                }\n              }\n              viewBox=\"0 0 16 16\"\n            >\n              <g>\n                <path\n                  d=\"M8 16C6.41775 16 4.87103 15.5308 3.55544 14.6518C2.23985 13.7727 1.21447 12.5233 0.608967 11.0615C0.00346627 9.59966 -0.15496 7.99113 0.153721 6.43928C0.462403 4.88743 1.22433 3.46197 2.34315 2.34315C3.46197 1.22433 4.88743 0.462403 6.43928 0.153721C7.99113 -0.15496 9.59966 0.00346627 11.0615 0.608967C12.5233 1.21447 13.7727 2.23985 14.6518 3.55544C15.5308 4.87103 16 6.41775 16 8C16 10.1217 15.1571 12.1566 13.6569 13.6569C12.1566 15.1571 10.1217 16 8 16ZM8 14.4C9.2658 14.4 10.5032 14.0246 11.5556 13.3214C12.6081 12.6182 13.4284 11.6186 13.9128 10.4492C14.3972 9.27973 14.524 7.9929 14.277 6.75142C14.0301 5.50995 13.4205 4.36958 12.5255 3.47452C11.6304 2.57946 10.4901 1.96992 9.24858 1.72298C8.0071 1.47603 6.72028 1.60277 5.55083 2.08717C4.38138 2.57158 3.38184 3.39188 2.6786 4.44435C1.97536 5.49683 1.6 6.7342 1.6 8C1.6 9.69739 2.27429 11.3253 3.47452 12.5255C4.67475 13.7257 6.30262 14.4 8 14.4ZM7.2 10.4H8.8V12H7.2V10.4ZM7.2 4H8.8V8.8H7.2V4Z\"\n                  fill=\"currentColor\"\n                  stroke=\"\"\n                />\n              </g>\n            </svg>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"4px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(220,38,38,1.00)\",\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              You must select a Prize.\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Radio Invalid 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      aria-label=\"select an option\"\n      aria-orientation=\"vertical\"\n      className=\"css-view-1dbjc4n\"\n      id=\"react-aria-0-1\"\n      onBlur={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"radiogroup\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"flex-start\",\n          \"WebkitBoxAlign\": \"start\",\n          \"alignItems\": \"flex-start\",\n          \"msFlexAlign\": \"start\",\n        }\n      }\n    >\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          onMouseDown={[Function]}\n          onMouseUp={[Function]}\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              checked={false}\n              name=\"exampleGroup\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              tabIndex={0}\n              type=\"radio\"\n              value=\"test\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                    \"borderBottomColor\": \"rgba(220,38,38,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(220,38,38,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(220,38,38,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(220,38,38,1.00)\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"paddingBottom\": \"4px\",\n                    \"paddingLeft\": \"4px\",\n                    \"paddingRight\": \"4px\",\n                    \"paddingTop\": \"4px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(115,115,115,1.00)\",\n                      \"height\": \"12px\",\n                      \"opacity\": 0,\n                      \"width\": \"12px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Others\n            </div>\n          </div>\n        </div>\n      </label>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Radio Playground 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"justify\",\n          \"WebkitJustifyContent\": \"space-between\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"space-between\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"justify\",\n        }\n      }\n    >\n      <div\n        aria-label=\"pick an option from below\"\n        aria-orientation=\"vertical\"\n        className=\"css-view-1dbjc4n\"\n        id=\"react-aria-0-1\"\n        onBlur={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"radiogroup\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"flex-start\",\n            \"WebkitBoxAlign\": \"start\",\n            \"alignItems\": \"flex-start\",\n            \"msFlexAlign\": \"start\",\n          }\n        }\n      >\n        <label\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            onMouseDown={[Function]}\n            onMouseUp={[Function]}\n          >\n            <div\n              style={\n                Object {\n                  \"border\": 0,\n                  \"clip\": \"rect(0 0 0 0)\",\n                  \"clipPath\": \"inset(50%)\",\n                  \"height\": 1,\n                  \"margin\": \"0 -1px -1px 0\",\n                  \"overflow\": \"hidden\",\n                  \"padding\": 0,\n                  \"position\": \"absolute\",\n                  \"whiteSpace\": \"nowrap\",\n                  \"width\": 1,\n                }\n              }\n            >\n              <input\n                checked={false}\n                disabled={false}\n                name=\"exampleGroup\"\n                onBlur={[Function]}\n                onChange={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onKeyUp={[Function]}\n                onMouseDown={[Function]}\n                onMouseEnter={[Function]}\n                onMouseLeave={[Function]}\n                onMouseUp={[Function]}\n                onTouchCancel={[Function]}\n                onTouchEnd={[Function]}\n                onTouchMove={[Function]}\n                onTouchStart={[Function]}\n                tabIndex={0}\n                type=\"radio\"\n                value=\"cool\"\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                      \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderBottomLeftRadius\": \"9999px\",\n                      \"borderBottomRightRadius\": \"9999px\",\n                      \"borderBottomWidth\": \"2px\",\n                      \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderLeftWidth\": \"2px\",\n                      \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderRightWidth\": \"2px\",\n                      \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderTopLeftRadius\": \"9999px\",\n                      \"borderTopRightRadius\": \"9999px\",\n                      \"borderTopWidth\": \"2px\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"marginBottom\": \"4px\",\n                      \"marginTop\": \"4px\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                      \"paddingBottom\": \"4px\",\n                      \"paddingLeft\": \"4px\",\n                      \"paddingRight\": \"4px\",\n                      \"paddingTop\": \"4px\",\n                    }\n                  }\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"12px\",\n                        \"opacity\": 0,\n                        \"width\": \"12px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"16px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                UX Research\n              </div>\n            </div>\n          </div>\n        </label>\n        <div\n          className=\"css-view-1dbjc4n\"\n        />\n        <label\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            onMouseDown={[Function]}\n            onMouseUp={[Function]}\n          >\n            <div\n              style={\n                Object {\n                  \"border\": 0,\n                  \"clip\": \"rect(0 0 0 0)\",\n                  \"clipPath\": \"inset(50%)\",\n                  \"height\": 1,\n                  \"margin\": \"0 -1px -1px 0\",\n                  \"overflow\": \"hidden\",\n                  \"padding\": 0,\n                  \"position\": \"absolute\",\n                  \"whiteSpace\": \"nowrap\",\n                  \"width\": 1,\n                }\n              }\n            >\n              <input\n                checked={false}\n                disabled={false}\n                name=\"exampleGroup\"\n                onBlur={[Function]}\n                onChange={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onKeyUp={[Function]}\n                onMouseDown={[Function]}\n                onMouseEnter={[Function]}\n                onMouseLeave={[Function]}\n                onMouseUp={[Function]}\n                onTouchCancel={[Function]}\n                onTouchEnd={[Function]}\n                onTouchMove={[Function]}\n                onTouchStart={[Function]}\n                tabIndex={0}\n                type=\"radio\"\n                value=\"awesome\"\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                      \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderBottomLeftRadius\": \"9999px\",\n                      \"borderBottomRightRadius\": \"9999px\",\n                      \"borderBottomWidth\": \"2px\",\n                      \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderLeftWidth\": \"2px\",\n                      \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderRightWidth\": \"2px\",\n                      \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderTopLeftRadius\": \"9999px\",\n                      \"borderTopRightRadius\": \"9999px\",\n                      \"borderTopWidth\": \"2px\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"marginBottom\": \"4px\",\n                      \"marginTop\": \"4px\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                      \"paddingBottom\": \"4px\",\n                      \"paddingLeft\": \"4px\",\n                      \"paddingRight\": \"4px\",\n                      \"paddingTop\": \"4px\",\n                    }\n                  }\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"12px\",\n                        \"opacity\": 0,\n                        \"width\": \"12px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"16px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Software Development\n              </div>\n            </div>\n          </div>\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Radio Size 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      aria-label=\"pick a size\"\n      aria-orientation=\"vertical\"\n      className=\"css-view-1dbjc4n\"\n      id=\"react-aria-0-1\"\n      onBlur={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"radiogroup\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"flex-start\",\n          \"WebkitBoxAlign\": \"start\",\n          \"alignItems\": \"flex-start\",\n          \"msFlexAlign\": \"start\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"flex-start\",\n            \"WebkitBoxAlign\": \"start\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"vertical\",\n            \"WebkitFlexDirection\": \"column\",\n            \"alignItems\": \"flex-start\",\n            \"flexDirection\": \"column\",\n            \"maxWidth\": \"300px\",\n            \"msFlexAlign\": \"start\",\n            \"msFlexDirection\": \"column\",\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <label\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            onMouseDown={[Function]}\n            onMouseUp={[Function]}\n          >\n            <div\n              style={\n                Object {\n                  \"border\": 0,\n                  \"clip\": \"rect(0 0 0 0)\",\n                  \"clipPath\": \"inset(50%)\",\n                  \"height\": 1,\n                  \"margin\": \"0 -1px -1px 0\",\n                  \"overflow\": \"hidden\",\n                  \"padding\": 0,\n                  \"position\": \"absolute\",\n                  \"whiteSpace\": \"nowrap\",\n                  \"width\": 1,\n                }\n              }\n            >\n              <input\n                checked={true}\n                name=\"exampleGroup\"\n                onBlur={[Function]}\n                onChange={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onKeyUp={[Function]}\n                onMouseDown={[Function]}\n                onMouseEnter={[Function]}\n                onMouseLeave={[Function]}\n                onMouseUp={[Function]}\n                onTouchCancel={[Function]}\n                onTouchEnd={[Function]}\n                onTouchMove={[Function]}\n                onTouchStart={[Function]}\n                tabIndex={0}\n                type=\"radio\"\n                value=\"1\"\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                      \"borderBottomColor\": \"rgba(220,38,38,1.00)\",\n                      \"borderBottomLeftRadius\": \"9999px\",\n                      \"borderBottomRightRadius\": \"9999px\",\n                      \"borderBottomWidth\": \"2px\",\n                      \"borderLeftColor\": \"rgba(220,38,38,1.00)\",\n                      \"borderLeftWidth\": \"2px\",\n                      \"borderRightColor\": \"rgba(220,38,38,1.00)\",\n                      \"borderRightWidth\": \"2px\",\n                      \"borderTopColor\": \"rgba(220,38,38,1.00)\",\n                      \"borderTopLeftRadius\": \"9999px\",\n                      \"borderTopRightRadius\": \"9999px\",\n                      \"borderTopWidth\": \"2px\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"marginBottom\": \"4px\",\n                      \"marginTop\": \"4px\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                      \"paddingBottom\": \"4px\",\n                      \"paddingLeft\": \"4px\",\n                      \"paddingRight\": \"4px\",\n                      \"paddingTop\": \"4px\",\n                    }\n                  }\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(220,38,38,1.00)\",\n                        \"height\": \"8px\",\n                        \"opacity\": 1,\n                        \"width\": \"8px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Small\n              </div>\n            </div>\n          </div>\n        </label>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <label\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            onMouseDown={[Function]}\n            onMouseUp={[Function]}\n          >\n            <div\n              style={\n                Object {\n                  \"border\": 0,\n                  \"clip\": \"rect(0 0 0 0)\",\n                  \"clipPath\": \"inset(50%)\",\n                  \"height\": 1,\n                  \"margin\": \"0 -1px -1px 0\",\n                  \"overflow\": \"hidden\",\n                  \"padding\": 0,\n                  \"position\": \"absolute\",\n                  \"whiteSpace\": \"nowrap\",\n                  \"width\": 1,\n                }\n              }\n            >\n              <input\n                checked={false}\n                name=\"exampleGroup\"\n                onBlur={[Function]}\n                onChange={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onKeyUp={[Function]}\n                onMouseDown={[Function]}\n                onMouseEnter={[Function]}\n                onMouseLeave={[Function]}\n                onMouseUp={[Function]}\n                onTouchCancel={[Function]}\n                onTouchEnd={[Function]}\n                onTouchMove={[Function]}\n                onTouchStart={[Function]}\n                tabIndex={0}\n                type=\"radio\"\n                value=\"2\"\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                      \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderBottomLeftRadius\": \"9999px\",\n                      \"borderBottomRightRadius\": \"9999px\",\n                      \"borderBottomWidth\": \"2px\",\n                      \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderLeftWidth\": \"2px\",\n                      \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderRightWidth\": \"2px\",\n                      \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderTopLeftRadius\": \"9999px\",\n                      \"borderTopRightRadius\": \"9999px\",\n                      \"borderTopWidth\": \"2px\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"marginBottom\": \"4px\",\n                      \"marginTop\": \"4px\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                      \"paddingBottom\": \"4px\",\n                      \"paddingLeft\": \"4px\",\n                      \"paddingRight\": \"4px\",\n                      \"paddingTop\": \"4px\",\n                    }\n                  }\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"12px\",\n                        \"opacity\": 0,\n                        \"width\": \"12px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"16px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Medium\n              </div>\n            </div>\n          </div>\n        </label>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <label\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            onMouseDown={[Function]}\n            onMouseUp={[Function]}\n          >\n            <div\n              style={\n                Object {\n                  \"border\": 0,\n                  \"clip\": \"rect(0 0 0 0)\",\n                  \"clipPath\": \"inset(50%)\",\n                  \"height\": 1,\n                  \"margin\": \"0 -1px -1px 0\",\n                  \"overflow\": \"hidden\",\n                  \"padding\": 0,\n                  \"position\": \"absolute\",\n                  \"whiteSpace\": \"nowrap\",\n                  \"width\": 1,\n                }\n              }\n            >\n              <input\n                checked={false}\n                name=\"exampleGroup\"\n                onBlur={[Function]}\n                onChange={[Function]}\n                onClick={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onKeyUp={[Function]}\n                onMouseDown={[Function]}\n                onMouseEnter={[Function]}\n                onMouseLeave={[Function]}\n                onMouseUp={[Function]}\n                onTouchCancel={[Function]}\n                onTouchEnd={[Function]}\n                onTouchMove={[Function]}\n                onTouchStart={[Function]}\n                tabIndex={0}\n                type=\"radio\"\n                value=\"3\"\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                      \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderBottomLeftRadius\": \"9999px\",\n                      \"borderBottomRightRadius\": \"9999px\",\n                      \"borderBottomWidth\": \"2px\",\n                      \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderLeftWidth\": \"2px\",\n                      \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderRightWidth\": \"2px\",\n                      \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                      \"borderTopLeftRadius\": \"9999px\",\n                      \"borderTopRightRadius\": \"9999px\",\n                      \"borderTopWidth\": \"2px\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"marginBottom\": \"4px\",\n                      \"marginTop\": \"4px\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                      \"paddingBottom\": \"4px\",\n                      \"paddingLeft\": \"4px\",\n                      \"paddingRight\": \"4px\",\n                      \"paddingTop\": \"4px\",\n                    }\n                  }\n                >\n                  <svg\n                    role=\"img\"\n                    stroke=\"\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(115,115,115,1.00)\",\n                        \"height\": \"16px\",\n                        \"opacity\": 0,\n                        \"width\": \"16px\",\n                      }\n                    }\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <g>\n                      <path\n                        d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                        fill=\"currentColor\"\n                        stroke=\"\"\n                      />\n                    </g>\n                  </svg>\n                </div>\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"18px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Large\n              </div>\n            </div>\n          </div>\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Radio Uncontrolled Radio 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      aria-label=\"Pick your favorite number\"\n      aria-orientation=\"vertical\"\n      className=\"css-view-1dbjc4n\"\n      id=\"react-aria-0-1\"\n      onBlur={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"radiogroup\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"flex-start\",\n          \"WebkitBoxAlign\": \"start\",\n          \"alignItems\": \"flex-start\",\n          \"msFlexAlign\": \"start\",\n        }\n      }\n    >\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          onMouseDown={[Function]}\n          onMouseUp={[Function]}\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              checked={true}\n              name=\"myRadioGroup\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              tabIndex={0}\n              type=\"radio\"\n              value=\"1\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                    \"borderBottomColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"paddingBottom\": \"4px\",\n                    \"paddingLeft\": \"4px\",\n                    \"paddingRight\": \"4px\",\n                    \"paddingTop\": \"4px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(8,145,178,1.00)\",\n                      \"height\": \"12px\",\n                      \"opacity\": 1,\n                      \"width\": \"12px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              First\n            </div>\n          </div>\n        </div>\n      </label>\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          onMouseDown={[Function]}\n          onMouseUp={[Function]}\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              checked={false}\n              name=\"myRadioGroup\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              tabIndex={0}\n              type=\"radio\"\n              value=\"2\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                    \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"paddingBottom\": \"4px\",\n                    \"paddingLeft\": \"4px\",\n                    \"paddingRight\": \"4px\",\n                    \"paddingTop\": \"4px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(115,115,115,1.00)\",\n                      \"height\": \"12px\",\n                      \"opacity\": 0,\n                      \"width\": \"12px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Second\n            </div>\n          </div>\n        </div>\n      </label>\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          onMouseDown={[Function]}\n          onMouseUp={[Function]}\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              checked={false}\n              name=\"myRadioGroup\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              tabIndex={0}\n              type=\"radio\"\n              value=\"3\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                    \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"paddingBottom\": \"4px\",\n                    \"paddingLeft\": \"4px\",\n                    \"paddingRight\": \"4px\",\n                    \"paddingTop\": \"4px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(115,115,115,1.00)\",\n                      \"height\": \"12px\",\n                      \"opacity\": 0,\n                      \"width\": \"12px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Third\n            </div>\n          </div>\n        </div>\n      </label>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Radio With Ref 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      aria-label=\"pick an option\"\n      aria-orientation=\"vertical\"\n      className=\"css-view-1dbjc4n\"\n      id=\"react-aria-0-1\"\n      onBlur={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"radiogroup\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"flex-start\",\n          \"WebkitBoxAlign\": \"start\",\n          \"alignItems\": \"flex-start\",\n          \"msFlexAlign\": \"start\",\n        }\n      }\n    >\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          onMouseDown={[Function]}\n          onMouseUp={[Function]}\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              checked={false}\n              name=\"exampleGroup\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              tabIndex={0}\n              type=\"radio\"\n              value=\"1\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                    \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"paddingBottom\": \"4px\",\n                    \"paddingLeft\": \"4px\",\n                    \"paddingRight\": \"4px\",\n                    \"paddingTop\": \"4px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(115,115,115,1.00)\",\n                      \"height\": \"12px\",\n                      \"opacity\": 0,\n                      \"width\": \"12px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Wrong\n            </div>\n          </div>\n        </div>\n      </label>\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n      <label\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          onMouseDown={[Function]}\n          onMouseUp={[Function]}\n        >\n          <div\n            style={\n              Object {\n                \"border\": 0,\n                \"clip\": \"rect(0 0 0 0)\",\n                \"clipPath\": \"inset(50%)\",\n                \"height\": 1,\n                \"margin\": \"0 -1px -1px 0\",\n                \"overflow\": \"hidden\",\n                \"padding\": 0,\n                \"position\": \"absolute\",\n                \"whiteSpace\": \"nowrap\",\n                \"width\": 1,\n              }\n            }\n          >\n            <input\n              checked={false}\n              name=\"exampleGroup\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onClick={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onKeyUp={[Function]}\n              onMouseDown={[Function]}\n              onMouseEnter={[Function]}\n              onMouseLeave={[Function]}\n              onMouseUp={[Function]}\n              onTouchCancel={[Function]}\n              onTouchEnd={[Function]}\n              onTouchMove={[Function]}\n              onTouchStart={[Function]}\n              tabIndex={0}\n              type=\"radio\"\n              value=\"2\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                    \"borderBottomColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderBottomWidth\": \"2px\",\n                    \"borderLeftColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderLeftWidth\": \"2px\",\n                    \"borderRightColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderRightWidth\": \"2px\",\n                    \"borderTopColor\": \"rgba(163,163,163,1.00)\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"borderTopWidth\": \"2px\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"marginBottom\": \"4px\",\n                    \"marginTop\": \"4px\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                    \"paddingBottom\": \"4px\",\n                    \"paddingLeft\": \"4px\",\n                    \"paddingRight\": \"4px\",\n                    \"paddingTop\": \"4px\",\n                  }\n                }\n              >\n                <svg\n                  role=\"img\"\n                  stroke=\"\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(115,115,115,1.00)\",\n                      \"height\": \"12px\",\n                      \"opacity\": 0,\n                      \"width\": \"12px\",\n                    }\n                  }\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g>\n                    <path\n                      d=\"M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z\"\n                      fill=\"currentColor\"\n                      stroke=\"\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"16px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Right\n            </div>\n          </div>\n        </div>\n      </label>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Responsive Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"backgroundColor\": \"rgba(254,202,202,1.00)\",\n          \"width\": \"100px\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        This is a box\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Responsive Demo 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"vertical\",\n          \"WebkitFlexDirection\": \"column\",\n          \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n          \"borderBottomColor\": \"rgba(229,231,235,1.00)\",\n          \"borderBottomLeftRadius\": \"8px\",\n          \"borderBottomRightRadius\": \"8px\",\n          \"borderBottomWidth\": \"0px\",\n          \"borderLeftColor\": \"rgba(229,231,235,1.00)\",\n          \"borderLeftWidth\": \"0px\",\n          \"borderRightColor\": \"rgba(229,231,235,1.00)\",\n          \"borderRightWidth\": \"0px\",\n          \"borderTopColor\": \"rgba(229,231,235,1.00)\",\n          \"borderTopLeftRadius\": \"8px\",\n          \"borderTopRightRadius\": \"8px\",\n          \"borderTopWidth\": \"0px\",\n          \"boxShadow\": \"0px 1px 2.22px rgba(0,0,0,0.22)\",\n          \"flexDirection\": \"column\",\n          \"msFlexDirection\": \"column\",\n          \"overflowX\": \"hidden\",\n          \"overflowY\": \"hidden\",\n          \"width\": \"288px\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          aria-label=\"image\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"160px\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(139,92,246,1.00)\",\n              \"bottom\": \"0px\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"paddingBottom\": \"6px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"6px\",\n              \"position\": \"absolute\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(255,255,255,1.00)\",\n                \"fontSize\": \"12px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            PHOTOS\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"paddingBottom\": \"16px\",\n            \"paddingLeft\": \"16px\",\n            \"paddingRight\": \"16px\",\n            \"paddingTop\": \"16px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n                \"marginLeft\": \"-4px\",\n              }\n            }\n          >\n            The Garden City\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(139,92,246,1.00)\",\n                \"fontSize\": \"12px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginLeft\": \"-2px\",\n                \"marginTop\": \"-4px\",\n              }\n            }\n          >\n            The Silicon Valley of India.\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"12px\",\n            }\n          }\n        />\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          Bengaluru (also called Bangalore) is the center of India's high-tech industry. The city is also known for its parks and nightlife.\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"12px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"justify\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"space-between\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"space-between\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"justify\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(75,85,99,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              6 mins ago\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Responsive Direction 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"vertical\",\n          \"WebkitBoxPack\": \"justify\",\n          \"WebkitFlexDirection\": \"column\",\n          \"WebkitJustifyContent\": \"space-between\",\n          \"alignItems\": \"center\",\n          \"flexDirection\": \"column\",\n          \"justifyContent\": \"space-between\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"column\",\n          \"msFlexPack\": \"justify\",\n          \"paddingBottom\": \"16px\",\n          \"paddingLeft\": \"16px\",\n          \"paddingRight\": \"16px\",\n          \"paddingTop\": \"16px\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n            \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"borderTopWidth\": \"1px\",\n            \"height\": \"96px\",\n            \"justifyContent\": \"center\",\n            \"marginBottom\": \"8px\",\n            \"marginLeft\": \"8px\",\n            \"marginRight\": \"8px\",\n            \"marginTop\": \"8px\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"position\": \"relative\",\n            \"width\": \"96px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"--\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"100%\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n            \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"borderTopWidth\": \"1px\",\n            \"height\": \"96px\",\n            \"justifyContent\": \"center\",\n            \"marginBottom\": \"8px\",\n            \"marginLeft\": \"8px\",\n            \"marginRight\": \"8px\",\n            \"marginTop\": \"8px\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"position\": \"relative\",\n            \"width\": \"96px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"--\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"100%\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n            \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"borderTopWidth\": \"1px\",\n            \"height\": \"96px\",\n            \"justifyContent\": \"center\",\n            \"marginBottom\": \"8px\",\n            \"marginLeft\": \"8px\",\n            \"marginRight\": \"8px\",\n            \"marginTop\": \"8px\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"position\": \"relative\",\n            \"width\": \"96px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"--\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"100%\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n            \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"borderTopWidth\": \"1px\",\n            \"height\": \"96px\",\n            \"justifyContent\": \"center\",\n            \"marginBottom\": \"8px\",\n            \"marginLeft\": \"8px\",\n            \"marginRight\": \"8px\",\n            \"marginTop\": \"8px\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"position\": \"relative\",\n            \"width\": \"96px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"--\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"100%\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n            \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"borderTopWidth\": \"1px\",\n            \"height\": \"96px\",\n            \"justifyContent\": \"center\",\n            \"marginBottom\": \"8px\",\n            \"marginLeft\": \"8px\",\n            \"marginRight\": \"8px\",\n            \"marginTop\": \"8px\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"position\": \"relative\",\n            \"width\": \"96px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"--\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"100%\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(161,161,170,1.00)\",\n            \"borderBottomColor\": \"rgba(39,39,42,1.00)\",\n            \"borderBottomLeftRadius\": \"9999px\",\n            \"borderBottomRightRadius\": \"9999px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(39,39,42,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(39,39,42,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(39,39,42,1.00)\",\n            \"borderTopLeftRadius\": \"9999px\",\n            \"borderTopRightRadius\": \"9999px\",\n            \"borderTopWidth\": \"1px\",\n            \"height\": \"96px\",\n            \"justifyContent\": \"center\",\n            \"marginBottom\": \"8px\",\n            \"marginLeft\": \"8px\",\n            \"marginRight\": \"8px\",\n            \"marginTop\": \"8px\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"position\": \"relative\",\n            \"width\": \"96px\",\n          }\n        }\n      >\n        <div\n          aria-label=\"--\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlexBasis\": \"auto\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"flexBasis\": \"auto\",\n              \"height\": \"100%\",\n              \"maxWidth\": \"100%\",\n              \"msFlexPreferredSize\": \"auto\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n              \"zIndex\": 0,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"backgroundPosition\": \"center\",\n                \"backgroundRepeat\": \"no-repeat\",\n                \"backgroundSize\": \"cover\",\n                \"bottom\": \"0px\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n                \"zIndex\": -1,\n              }\n            }\n            suppressHydrationWarning={true}\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Responsive FontSize 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-text-901oao\"\n      dir=\"auto\"\n      style={\n        Object {\n          \"color\": \"rgba(23,23,23,1.00)\",\n          \"fontSize\": \"24px\",\n          \"fontStyle\": \"normal\",\n          \"fontWeight\": \"400\",\n          \"letterSpacing\": \"0px\",\n          \"lineHeight\": \"1.5em\",\n        }\n      }\n    >\n      This is responsive text\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Responsive More 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"backgroundColor\": \"rgba(45,212,191,1.00)\",\n          \"height\": \"75%\",\n          \"width\": \"75%\",\n        }\n      }\n    />\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"fontSize\": \"14px\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        Font Size\n      </div>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"backgroundColor\": \"rgba(74,222,128,1.00)\",\n          \"height\": \"24px\",\n          \"marginTop\": \"8px\",\n          \"width\": \"100%\",\n        }\n      }\n    />\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"backgroundColor\": \"rgba(254,202,202,1.00)\",\n          \"paddingBottom\": \"8px\",\n          \"paddingLeft\": \"8px\",\n          \"paddingRight\": \"8px\",\n          \"paddingTop\": \"8px\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        Padding\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Row Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitFlexDirection\": \"row\",\n          \"flexDirection\": \"row\",\n          \"msFlexDirection\": \"row\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(34,211,238,1.00)\",\n            \"borderBottomLeftRadius\": \"6px\",\n            \"borderBottomRightRadius\": \"6px\",\n            \"borderTopLeftRadius\": \"6px\",\n            \"borderTopRightRadius\": \"6px\",\n            \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n            \"display\": \"flex\",\n            \"height\": \"64px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"64px\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(255,255,255,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          Box 1\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(244,114,182,1.00)\",\n            \"borderBottomLeftRadius\": \"6px\",\n            \"borderBottomRightRadius\": \"6px\",\n            \"borderTopLeftRadius\": \"6px\",\n            \"borderTopRightRadius\": \"6px\",\n            \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n            \"display\": \"flex\",\n            \"height\": \"64px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"64px\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(255,255,255,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          Box 2\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(52,211,153,1.00)\",\n            \"borderBottomLeftRadius\": \"6px\",\n            \"borderBottomRightRadius\": \"6px\",\n            \"borderTopLeftRadius\": \"6px\",\n            \"borderTopRightRadius\": \"6px\",\n            \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n            \"display\": \"flex\",\n            \"height\": \"64px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"64px\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(255,255,255,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          Box 3\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots ScrollView Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      onScroll={[Function]}\n      onTouchEnd={[Function]}\n      onTouchMove={[Function]}\n      onTouchStart={[Function]}\n      onWheel={[Function]}\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxFlex\": 1,\n          \"WebkitBoxOrient\": \"vertical\",\n          \"WebkitFlexDirection\": \"column\",\n          \"WebkitFlexGrow\": 1,\n          \"WebkitFlexShrink\": 1,\n          \"WebkitOverflowScrolling\": \"touch\",\n          \"WebkitTransform\": \"translateZ(0px)\",\n          \"flexDirection\": \"column\",\n          \"flexGrow\": 1,\n          \"flexShrink\": 1,\n          \"height\": \"320px\",\n          \"msFlexDirection\": \"column\",\n          \"msFlexNegative\": 1,\n          \"msFlexPositive\": 1,\n          \"overflowX\": \"hidden\",\n          \"overflowY\": \"auto\",\n          \"transform\": \"translateZ(0px)\",\n          \"width\": \"200px\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"dataSet\": Object {},\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n              \"marginBottom\": \"16px\",\n              \"marginTop\": \"12px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Cyan\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"flex\": 1,\n              \"msFlex\": \"1 1 0%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(207,250,254,1.00)\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"paddingBottom\": \"16px\",\n                \"paddingTop\": \"16px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              100\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(165,243,252,1.00)\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"paddingBottom\": \"16px\",\n                \"paddingTop\": \"16px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              200\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(103,232,249,1.00)\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"paddingBottom\": \"16px\",\n                \"paddingTop\": \"16px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              300\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(34,211,238,1.00)\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"paddingBottom\": \"16px\",\n                \"paddingTop\": \"16px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              400\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(6,182,212,1.00)\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"paddingBottom\": \"16px\",\n                \"paddingTop\": \"16px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              500\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n              \"marginBottom\": \"16px\",\n              \"marginTop\": \"32px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Yellow\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"flex\": 1,\n              \"msFlex\": \"1 1 0%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(254,249,195,1.00)\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"paddingBottom\": \"16px\",\n                \"paddingTop\": \"16px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              100\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(254,240,138,1.00)\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"paddingBottom\": \"16px\",\n                \"paddingTop\": \"16px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              200\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(253,224,71,1.00)\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"paddingBottom\": \"16px\",\n                \"paddingTop\": \"16px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              300\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(250,204,21,1.00)\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"paddingBottom\": \"16px\",\n                \"paddingTop\": \"16px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              400\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(234,179,8,1.00)\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"paddingBottom\": \"16px\",\n                \"paddingTop\": \"16px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              500\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n              \"marginBottom\": \"16px\",\n              \"marginTop\": \"32px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n             Violet\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"flex\": 1,\n              \"msFlex\": \"1 1 0%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(237,233,254,1.00)\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"paddingBottom\": \"16px\",\n                \"paddingTop\": \"16px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              100\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(221,214,254,1.00)\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"paddingBottom\": \"16px\",\n                \"paddingTop\": \"16px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              200\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(196,181,253,1.00)\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"paddingBottom\": \"16px\",\n                \"paddingTop\": \"16px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              300\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(167,139,250,1.00)\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"paddingBottom\": \"16px\",\n                \"paddingTop\": \"16px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              400\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(139,92,246,1.00)\",\n                \"display\": \"flex\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"paddingBottom\": \"16px\",\n                \"paddingTop\": \"16px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              500\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots SectionList Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"height\": \"320px\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        onScroll={[Function]}\n        onTouchEnd={[Function]}\n        onTouchMove={[Function]}\n        onTouchStart={[Function]}\n        onWheel={[Function]}\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxFlex\": 1,\n            \"WebkitBoxOrient\": \"vertical\",\n            \"WebkitFlexDirection\": \"column\",\n            \"WebkitFlexGrow\": 1,\n            \"WebkitFlexShrink\": 1,\n            \"WebkitOverflowScrolling\": \"touch\",\n            \"WebkitTransform\": \"translateZ(0px)\",\n            \"flexDirection\": \"column\",\n            \"flexGrow\": 1,\n            \"flexShrink\": 1,\n            \"marginBottom\": \"16px\",\n            \"maxWidth\": \"300px\",\n            \"msFlexDirection\": \"column\",\n            \"msFlexNegative\": 1,\n            \"msFlexPositive\": 1,\n            \"overflowX\": \"hidden\",\n            \"overflowY\": \"auto\",\n            \"transform\": \"translateZ(0px)\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"20px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.25em\",\n                    \"marginTop\": \"32px\",\n                    \"paddingBottom\": \"16px\",\n                  }\n                }\n              >\n                Cyan\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(207,250,254,1.00)\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"paddingBottom\": \"16px\",\n                  \"paddingTop\": \"16px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                100\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(165,243,252,1.00)\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"paddingBottom\": \"16px\",\n                  \"paddingTop\": \"16px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                200\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(103,232,249,1.00)\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"paddingBottom\": \"16px\",\n                  \"paddingTop\": \"16px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                300\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(34,211,238,1.00)\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"paddingBottom\": \"16px\",\n                  \"paddingTop\": \"16px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                400\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(6,182,212,1.00)\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"paddingBottom\": \"16px\",\n                  \"paddingTop\": \"16px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                500\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"20px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.25em\",\n                    \"marginTop\": \"32px\",\n                    \"paddingBottom\": \"16px\",\n                  }\n                }\n              >\n                Yellow\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(254,249,195,1.00)\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"paddingBottom\": \"16px\",\n                  \"paddingTop\": \"16px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                100\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(254,240,138,1.00)\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"paddingBottom\": \"16px\",\n                  \"paddingTop\": \"16px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                200\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"0px\",\n              }\n            }\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Select Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"maxWidth\": \"300px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"marginTop\": \"4px\",\n            }\n          }\n        >\n          <select\n            aria-label=\"Choose Service\"\n            onBlur={[Function]}\n            onChange={[Function]}\n            onFocus={[Function]}\n            onMouseEnter={[Function]}\n            onMouseLeave={[Function]}\n            onTouchStart={[Function]}\n            style={\n              Object {\n                \"MozAppearance\": \"none\",\n                \"WebkitAppearance\": \"none\",\n                \"appearance\": \"none\",\n                \"height\": \"100%\",\n                \"opacity\": 0,\n                \"position\": \"absolute\",\n                \"width\": \"100%\",\n                \"zIndex\": 1,\n              }\n            }\n            value=\"__NativebasePlaceholder__\"\n          >\n            <option\n              disabled={true}\n              value=\"__NativebasePlaceholder__\"\n            >\n              Choose Service\n            </option>\n            <option\n              value=\"ux\"\n            >\n              UX Research\n            </option>\n            <option\n              value=\"web\"\n            >\n              Web Development\n            </option>\n            <option\n              value=\"cross\"\n            >\n              Cross Platform Development\n            </option>\n            <option\n              value=\"ui\"\n            >\n              UI Designing\n            </option>\n            <option\n              value=\"backend\"\n            >\n              Backend Development\n            </option>\n          </select>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"minWidth\": \"200px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"overflowX\": \"auto\",\n                \"overflowY\": \"auto\",\n              }\n            }\n          >\n            <input\n              aria-hidden={true}\n              autoCapitalize=\"sentences\"\n              autoComplete=\"on\"\n              autoCorrect=\"on\"\n              className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y r-pointerEvents-633pao\"\n              dir=\"auto\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onSelect={[Function]}\n              placeholder=\"Choose Service\"\n              readOnly={true}\n              spellCheck={true}\n              style={\n                Object {\n                  \"WebkitFlex\": 1,\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"cursor\": \"auto\",\n                  \"flex\": 1,\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"100%\",\n                  \"lineHeight\": \"1.5em\",\n                  \"msFlex\": \"1 1 0%\",\n                  \"outline\": \"none\",\n                  \"outlineWidth\": \"0px\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"width\": \"100%\",\n                }\n              }\n              tabIndex=\"-1\"\n              type=\"text\"\n              value=\"\"\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <svg\n              role=\"img\"\n              stroke=\"\"\n              style={\n                Object {\n                  \"color\": \"rgba(115,115,115,1.00)\",\n                  \"height\": \"24px\",\n                  \"marginRight\": \"12px\",\n                  \"paddingBottom\": \"4px\",\n                  \"paddingLeft\": \"4px\",\n                  \"paddingRight\": \"4px\",\n                  \"paddingTop\": \"4px\",\n                  \"width\": \"24px\",\n                }\n              }\n              viewBox=\"0 0 24 24\"\n            >\n              <g>\n                <path\n                  d=\"M20.2286 6L11.9973 14.3785L3.76862 6.00268L2 7.80293L12 18L22 7.80293L20.2286 6Z\"\n                  fill=\"currentColor\"\n                  stroke=\"\"\n                />\n              </g>\n            </svg>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Select FormControlled 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"maxWidth\": \"300px\",\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <label\n          className=\"css-view-1dbjc4n\"\n          id=\"field-180-label\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"start\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"flex-start\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"marginBottom\": \"4px\",\n              \"marginTop\": \"4px\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"start\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(115,115,115,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            Choose service\n          </div>\n          <div\n            aria-hidden={true}\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            role=\"presentation\"\n            style={\n              Object {\n                \"color\": \"rgba(220,38,38,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            *\n          </div>\n        </label>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"marginTop\": \"4px\",\n            }\n          }\n        >\n          <select\n            aria-label=\"Choose Service\"\n            aria-readonly={false}\n            disabled={false}\n            onBlur={[Function]}\n            onChange={[Function]}\n            onFocus={[Function]}\n            onMouseEnter={[Function]}\n            onMouseLeave={[Function]}\n            onTouchStart={[Function]}\n            required={true}\n            style={\n              Object {\n                \"MozAppearance\": \"none\",\n                \"WebkitAppearance\": \"none\",\n                \"appearance\": \"none\",\n                \"height\": \"100%\",\n                \"opacity\": 0,\n                \"position\": \"absolute\",\n                \"width\": \"100%\",\n                \"zIndex\": 1,\n              }\n            }\n            value=\"__NativebasePlaceholder__\"\n          >\n            <option\n              disabled={true}\n              value=\"__NativebasePlaceholder__\"\n            >\n              Choose Service\n            </option>\n            <option\n              value=\"ux\"\n            >\n              UX Research\n            </option>\n            <option\n              value=\"web\"\n            >\n              Web Development\n            </option>\n            <option\n              value=\"cross\"\n            >\n              Cross Platform Development\n            </option>\n            <option\n              value=\"ui\"\n            >\n              UI Designing\n            </option>\n            <option\n              value=\"backend\"\n            >\n              Backend Development\n            </option>\n          </select>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"minWidth\": \"200px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"overflowX\": \"auto\",\n                \"overflowY\": \"auto\",\n              }\n            }\n          >\n            <input\n              aria-hidden={true}\n              aria-invalid={true}\n              aria-required={true}\n              autoCapitalize=\"sentences\"\n              autoComplete=\"on\"\n              autoCorrect=\"on\"\n              className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y r-pointerEvents-633pao\"\n              dir=\"auto\"\n              disabled={false}\n              id=\"field-180-input\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onSelect={[Function]}\n              placeholder=\"Choose Service\"\n              readOnly={true}\n              required={true}\n              spellCheck={true}\n              style={\n                Object {\n                  \"WebkitFlex\": 1,\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"cursor\": \"auto\",\n                  \"flex\": 1,\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"100%\",\n                  \"lineHeight\": \"1.5em\",\n                  \"msFlex\": \"1 1 0%\",\n                  \"outline\": \"none\",\n                  \"outlineWidth\": \"0px\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"width\": \"100%\",\n                }\n              }\n              tabIndex=\"-1\"\n              type=\"text\"\n              value=\"\"\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <svg\n              role=\"img\"\n              stroke=\"\"\n              style={\n                Object {\n                  \"color\": \"rgba(115,115,115,1.00)\",\n                  \"height\": \"24px\",\n                  \"marginRight\": \"12px\",\n                  \"paddingBottom\": \"4px\",\n                  \"paddingLeft\": \"4px\",\n                  \"paddingRight\": \"4px\",\n                  \"paddingTop\": \"4px\",\n                  \"width\": \"24px\",\n                }\n              }\n              viewBox=\"0 0 24 24\"\n            >\n              <g>\n                <path\n                  d=\"M20.2286 6L11.9973 14.3785L3.76862 6.00268L2 7.80293L12 18L22 7.80293L20.2286 6Z\"\n                  fill=\"currentColor\"\n                  stroke=\"\"\n                />\n              </g>\n            </svg>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          id=\"field-180\"\n          style={\n            Object {\n              \"marginTop\": \"8px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <svg\n              role=\"img\"\n              stroke=\"\"\n              style={\n                Object {\n                  \"color\": \"rgba(220,38,38,1.00)\",\n                  \"fontSize\": \"12px\",\n                  \"height\": \"12px\",\n                  \"width\": \"12px\",\n                }\n              }\n              viewBox=\"0 0 16 16\"\n            >\n              <g>\n                <path\n                  d=\"M8 16C6.41775 16 4.87103 15.5308 3.55544 14.6518C2.23985 13.7727 1.21447 12.5233 0.608967 11.0615C0.00346627 9.59966 -0.15496 7.99113 0.153721 6.43928C0.462403 4.88743 1.22433 3.46197 2.34315 2.34315C3.46197 1.22433 4.88743 0.462403 6.43928 0.153721C7.99113 -0.15496 9.59966 0.00346627 11.0615 0.608967C12.5233 1.21447 13.7727 2.23985 14.6518 3.55544C15.5308 4.87103 16 6.41775 16 8C16 10.1217 15.1571 12.1566 13.6569 13.6569C12.1566 15.1571 10.1217 16 8 16ZM8 14.4C9.2658 14.4 10.5032 14.0246 11.5556 13.3214C12.6081 12.6182 13.4284 11.6186 13.9128 10.4492C14.3972 9.27973 14.524 7.9929 14.277 6.75142C14.0301 5.50995 13.4205 4.36958 12.5255 3.47452C11.6304 2.57946 10.4901 1.96992 9.24858 1.72298C8.0071 1.47603 6.72028 1.60277 5.55083 2.08717C4.38138 2.57158 3.38184 3.39188 2.6786 4.44435C1.97536 5.49683 1.6 6.7342 1.6 8C1.6 9.69739 2.27429 11.3253 3.47452 12.5255C4.67475 13.7257 6.30262 14.4 8 14.4ZM7.2 10.4H8.8V12H7.2V10.4ZM7.2 4H8.8V8.8H7.2V4Z\"\n                  fill=\"currentColor\"\n                  stroke=\"\"\n                />\n              </g>\n            </svg>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"4px\",\n                }\n              }\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(220,38,38,1.00)\",\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Please make a selection!\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Select Select Long list 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"flex-start\",\n          \"WebkitBoxAlign\": \"start\",\n          \"alignItems\": \"flex-start\",\n          \"maxWidth\": \"80%\",\n          \"msFlexAlign\": \"start\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <label\n          className=\"css-view-1dbjc4n\"\n          id=\"field-182-label\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"start\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"flex-start\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"flex-start\",\n              \"marginBottom\": \"4px\",\n              \"marginTop\": \"4px\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"start\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(115,115,115,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"500\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            Select Color\n          </div>\n        </label>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"marginTop\": \"4px\",\n            }\n          }\n        >\n          <select\n            aria-label=\"Select a Color\"\n            aria-readonly={false}\n            disabled={false}\n            onBlur={[Function]}\n            onChange={[Function]}\n            onFocus={[Function]}\n            onMouseEnter={[Function]}\n            onMouseLeave={[Function]}\n            onTouchStart={[Function]}\n            required={false}\n            style={\n              Object {\n                \"MozAppearance\": \"none\",\n                \"WebkitAppearance\": \"none\",\n                \"appearance\": \"none\",\n                \"height\": \"100%\",\n                \"opacity\": 0,\n                \"position\": \"absolute\",\n                \"width\": \"100%\",\n                \"zIndex\": 1,\n              }\n            }\n            value=\"__NativebasePlaceholder__\"\n          >\n            <option\n              disabled={true}\n              value=\"__NativebasePlaceholder__\"\n            >\n              Select a Color\n            </option>\n            <option\n              value=\"0\"\n            >\n              Pink\n            </option>\n            <option\n              value=\"1\"\n            >\n              Crimson\n            </option>\n            <option\n              value=\"2\"\n            >\n              Red\n            </option>\n            <option\n              value=\"3\"\n            >\n              Maroon\n            </option>\n            <option\n              value=\"4\"\n            >\n              Brown\n            </option>\n            <option\n              value=\"5\"\n            >\n              Misty-Rose\n            </option>\n            <option\n              value=\"6\"\n            >\n              Salmon\n            </option>\n            <option\n              value=\"7\"\n            >\n              Coral\n            </option>\n            <option\n              value=\"8\"\n            >\n              Orange-Red\n            </option>\n            <option\n              value=\"9\"\n            >\n              Chocolate\n            </option>\n            <option\n              value=\"10\"\n            >\n              Orange\n            </option>\n            <option\n              value=\"11\"\n            >\n              Gold\n            </option>\n            <option\n              value=\"12\"\n            >\n              Ivory\n            </option>\n            <option\n              value=\"13\"\n            >\n              Yellow\n            </option>\n            <option\n              value=\"14\"\n            >\n              Olive\n            </option>\n            <option\n              value=\"15\"\n            >\n              Yellow-Green\n            </option>\n            <option\n              value=\"16\"\n            >\n              Lawngreen\n            </option>\n            <option\n              value=\"17\"\n            >\n              Chartreuse\n            </option>\n            <option\n              value=\"18\"\n            >\n              Lime\n            </option>\n            <option\n              value=\"19\"\n            >\n              Green\n            </option>\n            <option\n              value=\"20\"\n            >\n              Spring-green\n            </option>\n            <option\n              value=\"21\"\n            >\n              Aquamarine\n            </option>\n            <option\n              value=\"22\"\n            >\n              Turquoise\n            </option>\n            <option\n              value=\"23\"\n            >\n              Azure\n            </option>\n            <option\n              value=\"24\"\n            >\n              Aqua/Cyan\n            </option>\n            <option\n              value=\"25\"\n            >\n              Teal\n            </option>\n            <option\n              value=\"26\"\n            >\n              Lavender\n            </option>\n            <option\n              value=\"27\"\n            >\n              Blue\n            </option>\n            <option\n              value=\"28\"\n            >\n              Navy\n            </option>\n            <option\n              value=\"29\"\n            >\n              Blue-Violet\n            </option>\n            <option\n              value=\"30\"\n            >\n              Indigo\n            </option>\n            <option\n              value=\"31\"\n            >\n              Dark-Violet\n            </option>\n            <option\n              value=\"32\"\n            >\n              Plum\n            </option>\n            <option\n              value=\"33\"\n            >\n              Magenta\n            </option>\n            <option\n              value=\"34\"\n            >\n              Purple\n            </option>\n            <option\n              value=\"35\"\n            >\n              Red-Violet\n            </option>\n            <option\n              value=\"36\"\n            >\n              Tan\n            </option>\n            <option\n              value=\"37\"\n            >\n              Beige\n            </option>\n            <option\n              value=\"38\"\n            >\n              Slate-gray\n            </option>\n            <option\n              value=\"39\"\n            >\n              White\n            </option>\n            <option\n              value=\"40\"\n            >\n              White-Smoke\n            </option>\n            <option\n              value=\"41\"\n            >\n              Light-Gray\n            </option>\n            <option\n              value=\"42\"\n            >\n              Silver\n            </option>\n            <option\n              value=\"43\"\n            >\n              Dark-Gray\n            </option>\n            <option\n              value=\"44\"\n            >\n              Gray\n            </option>\n            <option\n              value=\"45\"\n            >\n              Dim-Gray\n            </option>\n            <option\n              value=\"46\"\n            >\n              Black\n            </option>\n          </select>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"minWidth\": \"100px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"overflowX\": \"auto\",\n                \"overflowY\": \"auto\",\n              }\n            }\n          >\n            <input\n              aria-hidden={true}\n              autoCapitalize=\"sentences\"\n              autoComplete=\"on\"\n              autoCorrect=\"on\"\n              className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y r-pointerEvents-633pao\"\n              dir=\"auto\"\n              disabled={false}\n              id=\"field-182-input\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onSelect={[Function]}\n              placeholder=\"Select a Color\"\n              readOnly={true}\n              spellCheck={true}\n              style={\n                Object {\n                  \"WebkitFlex\": 1,\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"cursor\": \"auto\",\n                  \"flex\": 1,\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"100%\",\n                  \"lineHeight\": \"1.5em\",\n                  \"msFlex\": \"1 1 0%\",\n                  \"outline\": \"none\",\n                  \"outlineWidth\": \"0px\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"width\": \"100%\",\n                }\n              }\n              tabIndex=\"-1\"\n              type=\"text\"\n              value=\"\"\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <svg\n              role=\"img\"\n              stroke=\"\"\n              style={\n                Object {\n                  \"color\": \"rgba(115,115,115,1.00)\",\n                  \"height\": \"24px\",\n                  \"marginRight\": \"12px\",\n                  \"paddingBottom\": \"4px\",\n                  \"paddingLeft\": \"4px\",\n                  \"paddingRight\": \"4px\",\n                  \"paddingTop\": \"4px\",\n                  \"width\": \"24px\",\n                }\n              }\n              viewBox=\"0 0 24 24\"\n            >\n              <g>\n                <path\n                  d=\"M20.2286 6L11.9973 14.3785L3.76862 6.00268L2 7.80293L12 18L22 7.80293L20.2286 6Z\"\n                  fill=\"currentColor\"\n                  stroke=\"\"\n                />\n              </g>\n            </svg>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Skeleton Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"borderBottomColor\": \"rgba(229,231,235,1.00)\",\n            \"borderBottomLeftRadius\": \"6px\",\n            \"borderBottomRightRadius\": \"6px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(229,231,235,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(229,231,235,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(229,231,235,1.00)\",\n            \"borderTopLeftRadius\": \"6px\",\n            \"borderTopRightRadius\": \"6px\",\n            \"borderTopWidth\": \"1px\",\n            \"maxWidth\": \"400px\",\n            \"overflowX\": \"hidden\",\n            \"overflowY\": \"hidden\",\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"height\": \"160px\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            id=\"animatedComponent\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                \"height\": \"100%\",\n                \"opacity\": 0,\n                \"width\": \"100%\",\n              }\n            }\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"32px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"vertical\",\n              \"WebkitFlexDirection\": \"column\",\n              \"flexDirection\": \"column\",\n              \"msFlexDirection\": \"column\",\n              \"paddingLeft\": \"16px\",\n              \"paddingRight\": \"16px\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"height\": \"12px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              id=\"animatedComponent\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"height\": \"12px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              id=\"animatedComponent\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"height\": \"12px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"75%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              id=\"animatedComponent\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"32px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"borderBottomLeftRadius\": \"6px\",\n              \"borderBottomRightRadius\": \"6px\",\n              \"borderTopLeftRadius\": \"6px\",\n              \"borderTopRightRadius\": \"6px\",\n              \"height\": \"40px\",\n              \"marginBottom\": \"16px\",\n              \"marginTop\": \"16px\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"paddingLeft\": \"16px\",\n              \"paddingRight\": \"16px\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            id=\"animatedComponent\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(207,250,254,1.00)\",\n                \"height\": \"100%\",\n                \"opacity\": 0,\n                \"width\": \"100%\",\n              }\n            }\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Skeleton Color 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"borderBottomColor\": \"rgba(229,231,235,1.00)\",\n            \"borderBottomLeftRadius\": \"6px\",\n            \"borderBottomRightRadius\": \"6px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(229,231,235,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(229,231,235,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(229,231,235,1.00)\",\n            \"borderTopLeftRadius\": \"6px\",\n            \"borderTopRightRadius\": \"6px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"maxWidth\": \"400px\",\n            \"msFlexDirection\": \"row\",\n            \"paddingBottom\": \"16px\",\n            \"paddingLeft\": \"16px\",\n            \"paddingRight\": \"16px\",\n            \"paddingTop\": \"16px\",\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"borderBottomLeftRadius\": \"6px\",\n              \"borderBottomRightRadius\": \"6px\",\n              \"borderTopLeftRadius\": \"6px\",\n              \"borderTopRightRadius\": \"6px\",\n              \"flex\": 1,\n              \"height\": \"150px\",\n              \"msFlex\": \"1 1 0%\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            id=\"animatedComponent\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(243,244,246,1.00)\",\n                \"height\": \"100%\",\n                \"opacity\": 0,\n                \"width\": \"100%\",\n              }\n            }\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"width\": \"32px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlex\": 3,\n              \"flex\": 3,\n              \"msFlex\": \"3 1 0%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"height\": \"40px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              id=\"animatedComponent\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(252,211,77,1.00)\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"vertical\",\n                \"WebkitFlexDirection\": \"column\",\n                \"flexDirection\": \"column\",\n                \"msFlexDirection\": \"column\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"12px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"12px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"12px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"75%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"20px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"20px\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitFlex\": 2,\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"flex\": 2,\n                  \"height\": \"12px\",\n                  \"msFlex\": \"2 1 0%\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitFlex\": 1,\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"flex\": 1,\n                  \"height\": \"12px\",\n                  \"msFlex\": \"1 1 0%\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(165,180,252,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Skeleton Composition 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(229,231,235,1.00)\",\n            \"borderBottomLeftRadius\": \"6px\",\n            \"borderBottomRightRadius\": \"6px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(229,231,235,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(229,231,235,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(229,231,235,1.00)\",\n            \"borderTopLeftRadius\": \"6px\",\n            \"borderTopRightRadius\": \"6px\",\n            \"borderTopWidth\": \"1px\",\n            \"maxWidth\": \"400px\",\n            \"msFlexAlign\": \"center\",\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"height\": \"160px\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            id=\"animatedComponent\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                \"height\": \"100%\",\n                \"opacity\": 0,\n                \"width\": \"100%\",\n              }\n            }\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"24px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(250,250,249,1.00)\",\n              \"borderBottomColor\": \"rgba(229,231,235,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderBottomWidth\": \"1px\",\n              \"borderLeftColor\": \"rgba(229,231,235,1.00)\",\n              \"borderLeftWidth\": \"1px\",\n              \"borderRightColor\": \"rgba(229,231,235,1.00)\",\n              \"borderRightWidth\": \"1px\",\n              \"borderTopColor\": \"rgba(229,231,235,1.00)\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"borderTopWidth\": \"1px\",\n              \"height\": \"80px\",\n              \"marginTop\": \"-70px\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"80px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            id=\"animatedComponent\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                \"height\": \"100%\",\n                \"opacity\": 0,\n                \"width\": \"100%\",\n              }\n            }\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"24px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"flexDirection\": \"row\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"height\": \"20px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"20px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              id=\"animatedComponent\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"height\": \"20px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"20px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              id=\"animatedComponent\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"height\": \"20px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"20px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              id=\"animatedComponent\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"height\": \"20px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"20px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              id=\"animatedComponent\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"8px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"height\": \"20px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"20px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              id=\"animatedComponent\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"24px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"vertical\",\n              \"WebkitFlexDirection\": \"column\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"column\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"column\",\n              \"paddingLeft\": \"48px\",\n              \"paddingRight\": \"48px\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"height\": \"12px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              id=\"animatedComponent\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"height\": \"12px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              id=\"animatedComponent\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"height\": \"12px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"75%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              id=\"animatedComponent\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"24px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"borderBottomLeftRadius\": \"20px\",\n              \"borderBottomRightRadius\": \"20px\",\n              \"borderTopLeftRadius\": \"20px\",\n              \"borderTopRightRadius\": \"20px\",\n              \"height\": \"40px\",\n              \"marginBottom\": \"12px\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"160px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            id=\"animatedComponent\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                \"height\": \"100%\",\n                \"opacity\": 0,\n                \"width\": \"100%\",\n              }\n            }\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Skeleton FadeDuration 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"width\": \"50%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"backgroundColor\": \"rgba(34,197,94,1.00)\",\n            \"height\": \"80px\",\n            \"overflowX\": \"hidden\",\n            \"overflowY\": \"hidden\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          id=\"animatedComponent\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(219,39,119,1.00)\",\n              \"height\": \"100%\",\n              \"opacity\": 0,\n              \"width\": \"100%\",\n            }\n          }\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Skeleton isLoaded 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"maxWidth\": \"400px\",\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"borderBottomColor\": \"rgba(229,231,235,1.00)\",\n              \"borderBottomLeftRadius\": \"6px\",\n              \"borderBottomRightRadius\": \"6px\",\n              \"borderBottomWidth\": \"1px\",\n              \"borderLeftColor\": \"rgba(229,231,235,1.00)\",\n              \"borderLeftWidth\": \"1px\",\n              \"borderRightColor\": \"rgba(229,231,235,1.00)\",\n              \"borderRightWidth\": \"1px\",\n              \"borderTopColor\": \"rgba(229,231,235,1.00)\",\n              \"borderTopLeftRadius\": \"6px\",\n              \"borderTopRightRadius\": \"6px\",\n              \"borderTopWidth\": \"1px\",\n              \"maxWidth\": \"400px\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"height\": \"160px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              id=\"animatedComponent\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"32px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"vertical\",\n                \"WebkitFlexDirection\": \"column\",\n                \"flexDirection\": \"column\",\n                \"msFlexDirection\": \"column\",\n                \"paddingLeft\": \"16px\",\n                \"paddingRight\": \"16px\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"12px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"12px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"12px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"12px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"75%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"32px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"borderBottomLeftRadius\": \"6px\",\n                \"borderBottomRightRadius\": \"6px\",\n                \"borderTopLeftRadius\": \"6px\",\n                \"borderTopRightRadius\": \"6px\",\n                \"height\": \"40px\",\n                \"marginBottom\": \"16px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"paddingLeft\": \"16px\",\n                \"paddingRight\": \"16px\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              id=\"animatedComponent\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(207,250,254,1.00)\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Slider Color 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"maxWidth\": \"300px\",\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <div\n          aria-label=\"Slider\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onMouseDown={[Function]}\n            onTouchStart={[Function]}\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"height\": \"16px\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"paddingBottom\": \"12px\",\n                \"paddingTop\": \"12px\",\n                \"touchAction\": \"manipulation\",\n                \"width\": \"100%\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"borderBottomLeftRadius\": \"8px\",\n                  \"borderBottomRightRadius\": \"8px\",\n                  \"borderTopLeftRadius\": \"8px\",\n                  \"borderTopRightRadius\": \"8px\",\n                  \"height\": \"4px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(234,88,12,1.00)\",\n                    \"height\": \"4px\",\n                    \"left\": \"0px\",\n                    \"position\": \"absolute\",\n                    \"width\": \"70%\",\n                  }\n                }\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onMouseDown={[Function]}\n            onTouchStart={[Function]}\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitTransform\": \"translateX(-8px) scale(1)\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(234,88,12,1.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"cursor\": \"pointer\",\n                \"height\": \"16px\",\n                \"justifyContent\": \"center\",\n                \"left\": \"70%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"position\": \"absolute\",\n                \"transform\": \"translateX(-8px) scale(1)\",\n                \"width\": \"16px\",\n                \"zIndex\": 999,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"8px\",\n                    \"paddingRight\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"position\": \"absolute\",\n                    \"zIndex\": -1,\n                  }\n                }\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(234,88,12,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"cursor\": \"pointer\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                  }\n                }\n              >\n                <div\n                  style={\n                    Object {\n                      \"border\": 0,\n                      \"clip\": \"rect(0 0 0 0)\",\n                      \"clipPath\": \"inset(50%)\",\n                      \"height\": 1,\n                      \"margin\": \"0 -1px -1px 0\",\n                      \"overflow\": \"hidden\",\n                      \"padding\": 0,\n                      \"position\": \"absolute\",\n                      \"whiteSpace\": \"nowrap\",\n                      \"width\": 1,\n                    }\n                  }\n                >\n                  <input\n                    aria-labelledby=\"react-aria-0-1\"\n                    aria-valuetext={70}\n                    id=\"react-aria-0-1-0\"\n                    max={100}\n                    min={0}\n                    onBlur={[Function]}\n                    onChange={[Function]}\n                    onFocus={[Function]}\n                    step={1}\n                    tabIndex={0}\n                    type=\"range\"\n                    value={70}\n                  />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          aria-label=\"Slider\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onMouseDown={[Function]}\n            onTouchStart={[Function]}\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"height\": \"16px\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"paddingBottom\": \"12px\",\n                \"paddingTop\": \"12px\",\n                \"touchAction\": \"manipulation\",\n                \"width\": \"100%\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"borderBottomLeftRadius\": \"8px\",\n                  \"borderBottomRightRadius\": \"8px\",\n                  \"borderTopLeftRadius\": \"8px\",\n                  \"borderTopRightRadius\": \"8px\",\n                  \"height\": \"4px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(5,150,105,1.00)\",\n                    \"height\": \"4px\",\n                    \"left\": \"0px\",\n                    \"position\": \"absolute\",\n                    \"width\": \"70%\",\n                  }\n                }\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onMouseDown={[Function]}\n            onTouchStart={[Function]}\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitTransform\": \"translateX(-8px) scale(1)\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(5,150,105,1.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"cursor\": \"pointer\",\n                \"height\": \"16px\",\n                \"justifyContent\": \"center\",\n                \"left\": \"70%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"position\": \"absolute\",\n                \"transform\": \"translateX(-8px) scale(1)\",\n                \"width\": \"16px\",\n                \"zIndex\": 999,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"8px\",\n                    \"paddingRight\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"position\": \"absolute\",\n                    \"zIndex\": -1,\n                  }\n                }\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(5,150,105,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"cursor\": \"pointer\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                  }\n                }\n              >\n                <div\n                  style={\n                    Object {\n                      \"border\": 0,\n                      \"clip\": \"rect(0 0 0 0)\",\n                      \"clipPath\": \"inset(50%)\",\n                      \"height\": 1,\n                      \"margin\": \"0 -1px -1px 0\",\n                      \"overflow\": \"hidden\",\n                      \"padding\": 0,\n                      \"position\": \"absolute\",\n                      \"whiteSpace\": \"nowrap\",\n                      \"width\": 1,\n                    }\n                  }\n                >\n                  <input\n                    aria-labelledby=\"react-aria-0-4\"\n                    aria-valuetext={70}\n                    id=\"react-aria-0-4-0\"\n                    max={100}\n                    min={0}\n                    onBlur={[Function]}\n                    onChange={[Function]}\n                    onFocus={[Function]}\n                    step={1}\n                    tabIndex={0}\n                    type=\"range\"\n                    value={70}\n                  />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          aria-label=\"Slider\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onMouseDown={[Function]}\n            onTouchStart={[Function]}\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"height\": \"16px\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"paddingBottom\": \"12px\",\n                \"paddingTop\": \"12px\",\n                \"touchAction\": \"manipulation\",\n                \"width\": \"100%\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"borderBottomLeftRadius\": \"8px\",\n                  \"borderBottomRightRadius\": \"8px\",\n                  \"borderTopLeftRadius\": \"8px\",\n                  \"borderTopRightRadius\": \"8px\",\n                  \"height\": \"4px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(79,70,229,1.00)\",\n                    \"height\": \"4px\",\n                    \"left\": \"0px\",\n                    \"position\": \"absolute\",\n                    \"width\": \"70%\",\n                  }\n                }\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onMouseDown={[Function]}\n            onTouchStart={[Function]}\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitTransform\": \"translateX(-8px) scale(1)\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(79,70,229,1.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"cursor\": \"pointer\",\n                \"height\": \"16px\",\n                \"justifyContent\": \"center\",\n                \"left\": \"70%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"position\": \"absolute\",\n                \"transform\": \"translateX(-8px) scale(1)\",\n                \"width\": \"16px\",\n                \"zIndex\": 999,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"8px\",\n                    \"paddingRight\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"position\": \"absolute\",\n                    \"zIndex\": -1,\n                  }\n                }\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(79,70,229,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"cursor\": \"pointer\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                  }\n                }\n              >\n                <div\n                  style={\n                    Object {\n                      \"border\": 0,\n                      \"clip\": \"rect(0 0 0 0)\",\n                      \"clipPath\": \"inset(50%)\",\n                      \"height\": 1,\n                      \"margin\": \"0 -1px -1px 0\",\n                      \"overflow\": \"hidden\",\n                      \"padding\": 0,\n                      \"position\": \"absolute\",\n                      \"whiteSpace\": \"nowrap\",\n                      \"width\": 1,\n                    }\n                  }\n                >\n                  <input\n                    aria-labelledby=\"react-aria-0-7\"\n                    aria-valuetext={70}\n                    id=\"react-aria-0-7-0\"\n                    max={100}\n                    min={0}\n                    onBlur={[Function]}\n                    onChange={[Function]}\n                    onFocus={[Function]}\n                    step={1}\n                    tabIndex={0}\n                    type=\"range\"\n                    value={70}\n                  />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Slider Customized 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        aria-label=\"Slider\"\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"justifyContent\": \"center\",\n            \"maxWidth\": \"300px\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onTouchStart={[Function]}\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"cursor\": \"pointer\",\n              \"height\": \"16px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"paddingBottom\": \"12px\",\n              \"paddingTop\": \"12px\",\n              \"touchAction\": \"manipulation\",\n              \"width\": \"100%\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(220,252,231,1.00)\",\n                \"borderBottomLeftRadius\": \"8px\",\n                \"borderBottomRightRadius\": \"8px\",\n                \"borderTopLeftRadius\": \"8px\",\n                \"borderTopRightRadius\": \"8px\",\n                \"height\": \"4px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(22,163,74,1.00)\",\n                  \"height\": \"4px\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"width\": \"70%\",\n                }\n              }\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onTouchStart={[Function]}\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitTransform\": \"translateX(-8px) scale(1)\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderBottomWidth\": \"0px\",\n              \"borderLeftWidth\": \"0px\",\n              \"borderRightWidth\": \"0px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"borderTopWidth\": \"0px\",\n              \"cursor\": \"pointer\",\n              \"height\": \"16px\",\n              \"justifyContent\": \"center\",\n              \"left\": \"70%\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"position\": \"absolute\",\n              \"transform\": \"translateX(-8px) scale(1)\",\n              \"width\": \"16px\",\n              \"zIndex\": 999,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"8px\",\n                  \"paddingRight\": \"8px\",\n                  \"paddingTop\": \"8px\",\n                  \"position\": \"absolute\",\n                  \"zIndex\": -1,\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderBottomWidth\": \"0px\",\n                  \"borderLeftWidth\": \"0px\",\n                  \"borderRightWidth\": \"0px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"borderTopWidth\": \"0px\",\n                  \"cursor\": \"pointer\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n              />\n              <div\n                style={\n                  Object {\n                    \"border\": 0,\n                    \"clip\": \"rect(0 0 0 0)\",\n                    \"clipPath\": \"inset(50%)\",\n                    \"height\": 1,\n                    \"margin\": \"0 -1px -1px 0\",\n                    \"overflow\": \"hidden\",\n                    \"padding\": 0,\n                    \"position\": \"absolute\",\n                    \"whiteSpace\": \"nowrap\",\n                    \"width\": 1,\n                  }\n                }\n              >\n                <input\n                  aria-labelledby=\"react-aria-0-1\"\n                  aria-valuetext={70}\n                  id=\"react-aria-0-1-0\"\n                  max={100}\n                  min={0}\n                  onBlur={[Function]}\n                  onChange={[Function]}\n                  onFocus={[Function]}\n                  step={1}\n                  tabIndex={0}\n                  type=\"range\"\n                  value={70}\n                />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Slider Disabled 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"marginLeft\": \"20px\",\n          \"marginRight\": \"20px\",\n          \"width\": \"80%\",\n        }\n      }\n    >\n      <div\n        aria-label=\"Slider\"\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"cursor\": \"not-allowed\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"opacity\": 0.6,\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onTouchStart={[Function]}\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"cursor\": \"pointer\",\n              \"height\": \"16px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"paddingBottom\": \"12px\",\n              \"paddingTop\": \"12px\",\n              \"touchAction\": \"manipulation\",\n              \"width\": \"100%\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                \"borderBottomLeftRadius\": \"8px\",\n                \"borderBottomRightRadius\": \"8px\",\n                \"borderTopLeftRadius\": \"8px\",\n                \"borderTopRightRadius\": \"8px\",\n                \"height\": \"4px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(79,70,229,1.00)\",\n                  \"height\": \"4px\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"width\": \"50%\",\n                }\n              }\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onTouchStart={[Function]}\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitTransform\": \"translateX(-8px) scale(1)\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(79,70,229,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"cursor\": \"pointer\",\n              \"height\": \"16px\",\n              \"justifyContent\": \"center\",\n              \"left\": \"50%\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"position\": \"absolute\",\n              \"transform\": \"translateX(-8px) scale(1)\",\n              \"width\": \"16px\",\n              \"zIndex\": 999,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"8px\",\n                  \"paddingRight\": \"8px\",\n                  \"paddingTop\": \"8px\",\n                  \"position\": \"absolute\",\n                  \"zIndex\": -1,\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(79,70,229,1.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"cursor\": \"pointer\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                style={\n                  Object {\n                    \"border\": 0,\n                    \"clip\": \"rect(0 0 0 0)\",\n                    \"clipPath\": \"inset(50%)\",\n                    \"height\": 1,\n                    \"margin\": \"0 -1px -1px 0\",\n                    \"overflow\": \"hidden\",\n                    \"padding\": 0,\n                    \"position\": \"absolute\",\n                    \"whiteSpace\": \"nowrap\",\n                    \"width\": 1,\n                  }\n                }\n              >\n                <input\n                  aria-labelledby=\"react-aria-0-1\"\n                  aria-valuetext={50}\n                  id=\"react-aria-0-1-0\"\n                  max={100}\n                  min={0}\n                  onBlur={[Function]}\n                  onChange={[Function]}\n                  onFocus={[Function]}\n                  step={1}\n                  tabIndex={0}\n                  type=\"range\"\n                  value={50}\n                />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Slider Form Controlled 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"maxWidth\": \"300px\",\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <label\n            className=\"css-view-1dbjc4n\"\n            id=\"field-198-label\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"start\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"flex-start\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"flex-start\",\n                \"marginBottom\": \"4px\",\n                \"marginTop\": \"4px\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"start\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(115,115,115,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"500\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Set your budget\n            </div>\n          </label>\n          <div\n            aria-label=\"Slider\"\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onMouseDown={[Function]}\n              onTouchStart={[Function]}\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"cursor\": \"pointer\",\n                  \"height\": \"16px\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"paddingBottom\": \"12px\",\n                  \"paddingTop\": \"12px\",\n                  \"touchAction\": \"manipulation\",\n                  \"width\": \"100%\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"borderBottomLeftRadius\": \"8px\",\n                    \"borderBottomRightRadius\": \"8px\",\n                    \"borderTopLeftRadius\": \"8px\",\n                    \"borderTopRightRadius\": \"8px\",\n                    \"height\": \"4px\",\n                    \"overflowX\": \"hidden\",\n                    \"overflowY\": \"hidden\",\n                    \"width\": \"100%\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                      \"height\": \"4px\",\n                      \"left\": \"0px\",\n                      \"position\": \"absolute\",\n                      \"width\": \"50%\",\n                    }\n                  }\n                />\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onMouseDown={[Function]}\n              onTouchStart={[Function]}\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitTransform\": \"translateX(-8px) scale(1)\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"cursor\": \"pointer\",\n                  \"height\": \"16px\",\n                  \"justifyContent\": \"center\",\n                  \"left\": \"50%\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"position\": \"absolute\",\n                  \"transform\": \"translateX(-8px) scale(1)\",\n                  \"width\": \"16px\",\n                  \"zIndex\": 999,\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexPack\": \"center\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"borderBottomLeftRadius\": \"9999px\",\n                      \"borderBottomRightRadius\": \"9999px\",\n                      \"borderTopLeftRadius\": \"9999px\",\n                      \"borderTopRightRadius\": \"9999px\",\n                      \"paddingBottom\": \"8px\",\n                      \"paddingLeft\": \"8px\",\n                      \"paddingRight\": \"8px\",\n                      \"paddingTop\": \"8px\",\n                      \"position\": \"absolute\",\n                      \"zIndex\": -1,\n                    }\n                  }\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"8px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"alignItems\": \"center\",\n                      \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                      \"borderBottomLeftRadius\": \"9999px\",\n                      \"borderBottomRightRadius\": \"9999px\",\n                      \"borderTopLeftRadius\": \"9999px\",\n                      \"borderTopRightRadius\": \"9999px\",\n                      \"cursor\": \"pointer\",\n                      \"display\": \"flex\",\n                      \"justifyContent\": \"center\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexPack\": \"center\",\n                    }\n                  }\n                >\n                  <div\n                    style={\n                      Object {\n                        \"border\": 0,\n                        \"clip\": \"rect(0 0 0 0)\",\n                        \"clipPath\": \"inset(50%)\",\n                        \"height\": 1,\n                        \"margin\": \"0 -1px -1px 0\",\n                        \"overflow\": \"hidden\",\n                        \"padding\": 0,\n                        \"position\": \"absolute\",\n                        \"whiteSpace\": \"nowrap\",\n                        \"width\": 1,\n                      }\n                    }\n                  >\n                    <input\n                      aria-labelledby=\"react-aria-0-1\"\n                      aria-valuetext={50}\n                      id=\"react-aria-0-1-0\"\n                      max={100}\n                      min={0}\n                      onBlur={[Function]}\n                      onChange={[Function]}\n                      onFocus={[Function]}\n                      step={1}\n                      tabIndex={0}\n                      type=\"range\"\n                      value={50}\n                    />\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            id=\"field-198\"\n            style={\n              Object {\n                \"marginTop\": \"8px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <svg\n                role=\"img\"\n                stroke=\"\"\n                style={\n                  Object {\n                    \"color\": \"rgba(220,38,38,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"height\": \"12px\",\n                    \"width\": \"12px\",\n                  }\n                }\n                viewBox=\"0 0 16 16\"\n              >\n                <g>\n                  <path\n                    d=\"M8 16C6.41775 16 4.87103 15.5308 3.55544 14.6518C2.23985 13.7727 1.21447 12.5233 0.608967 11.0615C0.00346627 9.59966 -0.15496 7.99113 0.153721 6.43928C0.462403 4.88743 1.22433 3.46197 2.34315 2.34315C3.46197 1.22433 4.88743 0.462403 6.43928 0.153721C7.99113 -0.15496 9.59966 0.00346627 11.0615 0.608967C12.5233 1.21447 13.7727 2.23985 14.6518 3.55544C15.5308 4.87103 16 6.41775 16 8C16 10.1217 15.1571 12.1566 13.6569 13.6569C12.1566 15.1571 10.1217 16 8 16ZM8 14.4C9.2658 14.4 10.5032 14.0246 11.5556 13.3214C12.6081 12.6182 13.4284 11.6186 13.9128 10.4492C14.3972 9.27973 14.524 7.9929 14.277 6.75142C14.0301 5.50995 13.4205 4.36958 12.5255 3.47452C11.6304 2.57946 10.4901 1.96992 9.24858 1.72298C8.0071 1.47603 6.72028 1.60277 5.55083 2.08717C4.38138 2.57158 3.38184 3.39188 2.6786 4.44435C1.97536 5.49683 1.6 6.7342 1.6 8C1.6 9.69739 2.27429 11.3253 3.47452 12.5255C4.67475 13.7257 6.30262 14.4 8 14.4ZM7.2 10.4H8.8V12H7.2V10.4ZM7.2 4H8.8V8.8H7.2V4Z\"\n                    fill=\"currentColor\"\n                    stroke=\"\"\n                  />\n                </g>\n              </svg>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"4px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(220,38,38,1.00)\",\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Something is wrong.\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Slider Playground 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"marginLeft\": \"20px\",\n          \"marginRight\": \"20px\",\n          \"width\": \"80%\",\n        }\n      }\n    >\n      <div\n        aria-label=\"Slider\"\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onTouchStart={[Function]}\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"cursor\": \"pointer\",\n              \"height\": \"16px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"paddingBottom\": \"12px\",\n              \"paddingTop\": \"12px\",\n              \"touchAction\": \"manipulation\",\n              \"width\": \"100%\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                \"borderBottomLeftRadius\": \"8px\",\n                \"borderBottomRightRadius\": \"8px\",\n                \"borderTopLeftRadius\": \"8px\",\n                \"borderTopRightRadius\": \"8px\",\n                \"height\": \"4px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                  \"height\": \"4px\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"width\": \"50%\",\n                }\n              }\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onTouchStart={[Function]}\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitTransform\": \"translateX(-8px) scale(1)\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"cursor\": \"pointer\",\n              \"height\": \"16px\",\n              \"justifyContent\": \"center\",\n              \"left\": \"50%\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"position\": \"absolute\",\n              \"transform\": \"translateX(-8px) scale(1)\",\n              \"width\": \"16px\",\n              \"zIndex\": 999,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"8px\",\n                  \"paddingRight\": \"8px\",\n                  \"paddingTop\": \"8px\",\n                  \"position\": \"absolute\",\n                  \"zIndex\": -1,\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"cursor\": \"pointer\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                style={\n                  Object {\n                    \"border\": 0,\n                    \"clip\": \"rect(0 0 0 0)\",\n                    \"clipPath\": \"inset(50%)\",\n                    \"height\": 1,\n                    \"margin\": \"0 -1px -1px 0\",\n                    \"overflow\": \"hidden\",\n                    \"padding\": 0,\n                    \"position\": \"absolute\",\n                    \"whiteSpace\": \"nowrap\",\n                    \"width\": 1,\n                  }\n                }\n              >\n                <input\n                  aria-labelledby=\"react-aria-0-1\"\n                  aria-valuetext={50}\n                  id=\"react-aria-0-1-0\"\n                  max={100}\n                  min={0}\n                  onBlur={[Function]}\n                  onChange={[Function]}\n                  onFocus={[Function]}\n                  step={1}\n                  tabIndex={0}\n                  type=\"range\"\n                  value={50}\n                />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Slider ReadOnly 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"marginLeft\": \"20px\",\n          \"marginRight\": \"20px\",\n          \"width\": \"80%\",\n        }\n      }\n    >\n      <div\n        aria-label=\"Slider\"\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onTouchStart={[Function]}\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"cursor\": \"pointer\",\n              \"height\": \"16px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"paddingBottom\": \"12px\",\n              \"paddingTop\": \"12px\",\n              \"touchAction\": \"manipulation\",\n              \"width\": \"100%\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(224,231,255,1.00)\",\n                \"borderBottomLeftRadius\": \"8px\",\n                \"borderBottomRightRadius\": \"8px\",\n                \"borderTopLeftRadius\": \"8px\",\n                \"borderTopRightRadius\": \"8px\",\n                \"height\": \"4px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(79,70,229,1.00)\",\n                  \"height\": \"4px\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"width\": \"50%\",\n                }\n              }\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onTouchStart={[Function]}\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitTransform\": \"translateX(-8px) scale(1)\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(79,70,229,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"cursor\": \"pointer\",\n              \"height\": \"16px\",\n              \"justifyContent\": \"center\",\n              \"left\": \"50%\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"position\": \"absolute\",\n              \"transform\": \"translateX(-8px) scale(1)\",\n              \"width\": \"16px\",\n              \"zIndex\": 999,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"8px\",\n                  \"paddingRight\": \"8px\",\n                  \"paddingTop\": \"8px\",\n                  \"position\": \"absolute\",\n                  \"zIndex\": -1,\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(79,70,229,1.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"cursor\": \"pointer\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                style={\n                  Object {\n                    \"border\": 0,\n                    \"clip\": \"rect(0 0 0 0)\",\n                    \"clipPath\": \"inset(50%)\",\n                    \"height\": 1,\n                    \"margin\": \"0 -1px -1px 0\",\n                    \"overflow\": \"hidden\",\n                    \"padding\": 0,\n                    \"position\": \"absolute\",\n                    \"whiteSpace\": \"nowrap\",\n                    \"width\": 1,\n                  }\n                }\n              >\n                <input\n                  aria-labelledby=\"react-aria-0-1\"\n                  aria-valuetext={50}\n                  id=\"react-aria-0-1-0\"\n                  max={100}\n                  min={0}\n                  onBlur={[Function]}\n                  onChange={[Function]}\n                  onFocus={[Function]}\n                  step={1}\n                  tabIndex={0}\n                  type=\"range\"\n                  value={50}\n                />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Slider Size 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"maxWidth\": \"300px\",\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <div\n          aria-label=\"Slider\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onMouseDown={[Function]}\n            onTouchStart={[Function]}\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"height\": \"16px\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"paddingBottom\": \"12px\",\n                \"paddingTop\": \"12px\",\n                \"touchAction\": \"manipulation\",\n                \"width\": \"100%\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"borderBottomLeftRadius\": \"8px\",\n                  \"borderBottomRightRadius\": \"8px\",\n                  \"borderTopLeftRadius\": \"8px\",\n                  \"borderTopRightRadius\": \"8px\",\n                  \"height\": \"4px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                    \"height\": \"4px\",\n                    \"left\": \"0px\",\n                    \"position\": \"absolute\",\n                    \"width\": \"40%\",\n                  }\n                }\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onMouseDown={[Function]}\n            onTouchStart={[Function]}\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitTransform\": \"translateX(-8px) scale(1)\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"cursor\": \"pointer\",\n                \"height\": \"16px\",\n                \"justifyContent\": \"center\",\n                \"left\": \"40%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"position\": \"absolute\",\n                \"transform\": \"translateX(-8px) scale(1)\",\n                \"width\": \"16px\",\n                \"zIndex\": 999,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"8px\",\n                    \"paddingRight\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"position\": \"absolute\",\n                    \"zIndex\": -1,\n                  }\n                }\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"cursor\": \"pointer\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                  }\n                }\n              >\n                <div\n                  style={\n                    Object {\n                      \"border\": 0,\n                      \"clip\": \"rect(0 0 0 0)\",\n                      \"clipPath\": \"inset(50%)\",\n                      \"height\": 1,\n                      \"margin\": \"0 -1px -1px 0\",\n                      \"overflow\": \"hidden\",\n                      \"padding\": 0,\n                      \"position\": \"absolute\",\n                      \"whiteSpace\": \"nowrap\",\n                      \"width\": 1,\n                    }\n                  }\n                >\n                  <input\n                    aria-labelledby=\"react-aria-0-1\"\n                    aria-valuetext={40}\n                    id=\"react-aria-0-1-0\"\n                    max={100}\n                    min={0}\n                    onBlur={[Function]}\n                    onChange={[Function]}\n                    onFocus={[Function]}\n                    step={1}\n                    tabIndex={0}\n                    type=\"range\"\n                    value={40}\n                  />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          aria-label=\"Slider\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onMouseDown={[Function]}\n            onTouchStart={[Function]}\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"height\": \"20px\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"paddingBottom\": \"12px\",\n                \"paddingTop\": \"12px\",\n                \"touchAction\": \"manipulation\",\n                \"width\": \"100%\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"borderBottomLeftRadius\": \"8px\",\n                  \"borderBottomRightRadius\": \"8px\",\n                  \"borderTopLeftRadius\": \"8px\",\n                  \"borderTopRightRadius\": \"8px\",\n                  \"height\": \"5px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                    \"height\": \"5px\",\n                    \"left\": \"0px\",\n                    \"position\": \"absolute\",\n                    \"width\": \"60%\",\n                  }\n                }\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onMouseDown={[Function]}\n            onTouchStart={[Function]}\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitTransform\": \"translateX(-10px) scale(1)\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"cursor\": \"pointer\",\n                \"height\": \"20px\",\n                \"justifyContent\": \"center\",\n                \"left\": \"60%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"position\": \"absolute\",\n                \"transform\": \"translateX(-10px) scale(1)\",\n                \"width\": \"20px\",\n                \"zIndex\": 999,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"paddingBottom\": \"10px\",\n                    \"paddingLeft\": \"10px\",\n                    \"paddingRight\": \"10px\",\n                    \"paddingTop\": \"10px\",\n                    \"position\": \"absolute\",\n                    \"zIndex\": -1,\n                  }\n                }\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"cursor\": \"pointer\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                  }\n                }\n              >\n                <div\n                  style={\n                    Object {\n                      \"border\": 0,\n                      \"clip\": \"rect(0 0 0 0)\",\n                      \"clipPath\": \"inset(50%)\",\n                      \"height\": 1,\n                      \"margin\": \"0 -1px -1px 0\",\n                      \"overflow\": \"hidden\",\n                      \"padding\": 0,\n                      \"position\": \"absolute\",\n                      \"whiteSpace\": \"nowrap\",\n                      \"width\": 1,\n                    }\n                  }\n                >\n                  <input\n                    aria-labelledby=\"react-aria-0-4\"\n                    aria-valuetext={60}\n                    id=\"react-aria-0-4-0\"\n                    max={100}\n                    min={0}\n                    onBlur={[Function]}\n                    onChange={[Function]}\n                    onFocus={[Function]}\n                    step={1}\n                    tabIndex={0}\n                    type=\"range\"\n                    value={60}\n                  />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          aria-label=\"Slider\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onMouseDown={[Function]}\n            onTouchStart={[Function]}\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"height\": \"24px\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"paddingBottom\": \"12px\",\n                \"paddingTop\": \"12px\",\n                \"touchAction\": \"manipulation\",\n                \"width\": \"100%\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"borderBottomLeftRadius\": \"8px\",\n                  \"borderBottomRightRadius\": \"8px\",\n                  \"borderTopLeftRadius\": \"8px\",\n                  \"borderTopRightRadius\": \"8px\",\n                  \"height\": \"6px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                    \"height\": \"6px\",\n                    \"left\": \"0px\",\n                    \"position\": \"absolute\",\n                    \"width\": \"80%\",\n                  }\n                }\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onMouseDown={[Function]}\n            onTouchStart={[Function]}\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitTransform\": \"translateX(-12px) scale(1)\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"cursor\": \"pointer\",\n                \"height\": \"24px\",\n                \"justifyContent\": \"center\",\n                \"left\": \"80%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"position\": \"absolute\",\n                \"transform\": \"translateX(-12px) scale(1)\",\n                \"width\": \"24px\",\n                \"zIndex\": 999,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"paddingBottom\": \"12px\",\n                    \"paddingLeft\": \"12px\",\n                    \"paddingRight\": \"12px\",\n                    \"paddingTop\": \"12px\",\n                    \"position\": \"absolute\",\n                    \"zIndex\": -1,\n                  }\n                }\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"cursor\": \"pointer\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                  }\n                }\n              >\n                <div\n                  style={\n                    Object {\n                      \"border\": 0,\n                      \"clip\": \"rect(0 0 0 0)\",\n                      \"clipPath\": \"inset(50%)\",\n                      \"height\": 1,\n                      \"margin\": \"0 -1px -1px 0\",\n                      \"overflow\": \"hidden\",\n                      \"padding\": 0,\n                      \"position\": \"absolute\",\n                      \"whiteSpace\": \"nowrap\",\n                      \"width\": 1,\n                    }\n                  }\n                >\n                  <input\n                    aria-labelledby=\"react-aria-0-7\"\n                    aria-valuetext={80}\n                    id=\"react-aria-0-7-0\"\n                    max={100}\n                    min={0}\n                    onBlur={[Function]}\n                    onChange={[Function]}\n                    onFocus={[Function]}\n                    step={1}\n                    tabIndex={0}\n                    type=\"range\"\n                    value={80}\n                  />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Slider Usage 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        aria-label=\"hello world\"\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"justifyContent\": \"center\",\n            \"maxWidth\": \"300px\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onTouchStart={[Function]}\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"cursor\": \"pointer\",\n              \"height\": \"16px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"paddingBottom\": \"12px\",\n              \"paddingTop\": \"12px\",\n              \"touchAction\": \"manipulation\",\n              \"width\": \"100%\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                \"borderBottomLeftRadius\": \"8px\",\n                \"borderBottomRightRadius\": \"8px\",\n                \"borderTopLeftRadius\": \"8px\",\n                \"borderTopRightRadius\": \"8px\",\n                \"height\": \"4px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                  \"height\": \"4px\",\n                  \"left\": \"0px\",\n                  \"position\": \"absolute\",\n                  \"width\": \"70%\",\n                }\n              }\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onTouchStart={[Function]}\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitTransform\": \"translateX(-8px) scale(1)\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"cursor\": \"pointer\",\n              \"height\": \"16px\",\n              \"justifyContent\": \"center\",\n              \"left\": \"70%\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"position\": \"absolute\",\n              \"transform\": \"translateX(-8px) scale(1)\",\n              \"width\": \"16px\",\n              \"zIndex\": 999,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"8px\",\n                  \"paddingRight\": \"8px\",\n                  \"paddingTop\": \"8px\",\n                  \"position\": \"absolute\",\n                  \"zIndex\": -1,\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"cursor\": \"pointer\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                style={\n                  Object {\n                    \"border\": 0,\n                    \"clip\": \"rect(0 0 0 0)\",\n                    \"clipPath\": \"inset(50%)\",\n                    \"height\": 1,\n                    \"margin\": \"0 -1px -1px 0\",\n                    \"overflow\": \"hidden\",\n                    \"padding\": 0,\n                    \"position\": \"absolute\",\n                    \"whiteSpace\": \"nowrap\",\n                    \"width\": 1,\n                  }\n                }\n              >\n                <input\n                  aria-labelledby=\"react-aria-0-1\"\n                  aria-valuetext={70}\n                  id=\"react-aria-0-1-0\"\n                  max={100}\n                  min={0}\n                  onBlur={[Function]}\n                  onChange={[Function]}\n                  onFocus={[Function]}\n                  step={10}\n                  tabIndex={0}\n                  type=\"range\"\n                  value={70}\n                />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Slider Value 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"alignItems\": \"center\",\n            \"maxWidth\": \"300px\",\n            \"msFlexAlign\": \"center\",\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n              \"textAlign\": \"center\",\n            }\n          }\n        >\n          onChangeValue - \n          70\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n              \"textAlign\": \"center\",\n            }\n          }\n        >\n          onChangeEndValue - \n          70\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          aria-label=\"Slider\"\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onMouseDown={[Function]}\n            onTouchStart={[Function]}\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"cursor\": \"pointer\",\n                \"height\": \"16px\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"paddingBottom\": \"12px\",\n                \"paddingTop\": \"12px\",\n                \"touchAction\": \"manipulation\",\n                \"width\": \"100%\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"borderBottomLeftRadius\": \"8px\",\n                  \"borderBottomRightRadius\": \"8px\",\n                  \"borderTopLeftRadius\": \"8px\",\n                  \"borderTopRightRadius\": \"8px\",\n                  \"height\": \"4px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                    \"height\": \"4px\",\n                    \"left\": \"0px\",\n                    \"position\": \"absolute\",\n                    \"width\": \"70%\",\n                  }\n                }\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onMouseDown={[Function]}\n            onTouchStart={[Function]}\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitTransform\": \"translateX(-8px) scale(1)\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"cursor\": \"pointer\",\n                \"height\": \"16px\",\n                \"justifyContent\": \"center\",\n                \"left\": \"70%\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexPack\": \"center\",\n                \"position\": \"absolute\",\n                \"transform\": \"translateX(-8px) scale(1)\",\n                \"width\": \"16px\",\n                \"zIndex\": 999,\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"8px\",\n                    \"paddingRight\": \"8px\",\n                    \"paddingTop\": \"8px\",\n                    \"position\": \"absolute\",\n                    \"zIndex\": -1,\n                  }\n                }\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"alignItems\": \"center\",\n                    \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                    \"borderBottomLeftRadius\": \"9999px\",\n                    \"borderBottomRightRadius\": \"9999px\",\n                    \"borderTopLeftRadius\": \"9999px\",\n                    \"borderTopRightRadius\": \"9999px\",\n                    \"cursor\": \"pointer\",\n                    \"display\": \"flex\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexPack\": \"center\",\n                  }\n                }\n              >\n                <div\n                  style={\n                    Object {\n                      \"border\": 0,\n                      \"clip\": \"rect(0 0 0 0)\",\n                      \"clipPath\": \"inset(50%)\",\n                      \"height\": 1,\n                      \"margin\": \"0 -1px -1px 0\",\n                      \"overflow\": \"hidden\",\n                      \"padding\": 0,\n                      \"position\": \"absolute\",\n                      \"whiteSpace\": \"nowrap\",\n                      \"width\": 1,\n                    }\n                  }\n                >\n                  <input\n                    aria-labelledby=\"react-aria-0-1\"\n                    aria-valuetext={70}\n                    id=\"react-aria-0-1-0\"\n                    max={100}\n                    min={0}\n                    onBlur={[Function]}\n                    onChange={[Function]}\n                    onFocus={[Function]}\n                    step={1}\n                    tabIndex={0}\n                    type=\"range\"\n                    value={70}\n                  />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Slider Vertical 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"marginLeft\": \"20px\",\n          \"marginRight\": \"20px\",\n          \"width\": \"80%\",\n        }\n      }\n    >\n      <div\n        aria-label=\"Slider\"\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"height\": \"192px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onTouchStart={[Function]}\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"cursor\": \"pointer\",\n              \"height\": \"100%\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"touchAction\": \"manipulation\",\n              \"width\": \"16px\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                \"borderBottomLeftRadius\": \"8px\",\n                \"borderBottomRightRadius\": \"8px\",\n                \"borderTopLeftRadius\": \"8px\",\n                \"borderTopRightRadius\": \"8px\",\n                \"height\": \"100%\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"4px\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(13,148,136,1.00)\",\n                  \"bottom\": \"0px\",\n                  \"height\": \"70%\",\n                  \"position\": \"absolute\",\n                  \"width\": \"4px\",\n                }\n              }\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onTouchStart={[Function]}\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitTransform\": \"translateY(8px) scale(1)\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(13,148,136,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"bottom\": \"70%\",\n              \"cursor\": \"pointer\",\n              \"height\": \"16px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"position\": \"absolute\",\n              \"transform\": \"translateY(8px) scale(1)\",\n              \"width\": \"16px\",\n              \"zIndex\": 999,\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"8px\",\n                  \"paddingRight\": \"8px\",\n                  \"paddingTop\": \"8px\",\n                  \"position\": \"absolute\",\n                  \"zIndex\": -1,\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(13,148,136,1.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"cursor\": \"pointer\",\n                  \"display\": \"flex\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                }\n              }\n            >\n              <div\n                style={\n                  Object {\n                    \"border\": 0,\n                    \"clip\": \"rect(0 0 0 0)\",\n                    \"clipPath\": \"inset(50%)\",\n                    \"height\": 1,\n                    \"margin\": \"0 -1px -1px 0\",\n                    \"overflow\": \"hidden\",\n                    \"padding\": 0,\n                    \"position\": \"absolute\",\n                    \"whiteSpace\": \"nowrap\",\n                    \"width\": 1,\n                  }\n                }\n              >\n                <input\n                  aria-labelledby=\"react-aria-0-1\"\n                  aria-orientation=\"vertical\"\n                  aria-valuetext={70}\n                  id=\"react-aria-0-1-0\"\n                  max={100}\n                  min={0}\n                  onBlur={[Function]}\n                  onChange={[Function]}\n                  onFocus={[Function]}\n                  step={1}\n                  tabIndex={0}\n                  type=\"range\"\n                  value={70}\n                />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Spinner Color 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        aria-label=\"loading\"\n        aria-valuemax={1}\n        aria-valuemin={0}\n        className=\"css-view-1dbjc4n\"\n        role=\"progressbar\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"dataSet\": Object {},\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n r-animationKeyframes-127358a\"\n          style={\n            Object {\n              \"WebkitAnimationDuration\": \"0.75s\",\n              \"WebkitAnimationIterationCount\": \"infinite\",\n              \"WebkitAnimationTimingFunction\": \"linear\",\n              \"animationDuration\": \"0.75s\",\n              \"animationIterationCount\": \"infinite\",\n              \"animationTimingFunction\": \"linear\",\n              \"height\": \"20px\",\n              \"width\": \"20px\",\n            }\n          }\n        >\n          <svg\n            height=\"100%\"\n            viewBox=\"0 0 32 32\"\n            width=\"100%\"\n          >\n            <circle\n              cx=\"16\"\n              cy=\"16\"\n              fill=\"none\"\n              r=\"14\"\n              strokeWidth=\"4\"\n              style={\n                Object {\n                  \"opacity\": 0.2,\n                  \"stroke\": \"#10b981\",\n                }\n              }\n            />\n            <circle\n              cx=\"16\"\n              cy=\"16\"\n              fill=\"none\"\n              r=\"14\"\n              strokeWidth=\"4\"\n              style={\n                Object {\n                  \"stroke\": \"#10b981\",\n                  \"strokeDasharray\": 80,\n                  \"strokeDashoffset\": 60,\n                }\n              }\n            />\n          </svg>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"32px\",\n          }\n        }\n      />\n      <div\n        aria-label=\"loading\"\n        aria-valuemax={1}\n        aria-valuemin={0}\n        className=\"css-view-1dbjc4n\"\n        role=\"progressbar\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"dataSet\": Object {},\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n r-animationKeyframes-127358a\"\n          style={\n            Object {\n              \"WebkitAnimationDuration\": \"0.75s\",\n              \"WebkitAnimationIterationCount\": \"infinite\",\n              \"WebkitAnimationTimingFunction\": \"linear\",\n              \"animationDuration\": \"0.75s\",\n              \"animationIterationCount\": \"infinite\",\n              \"animationTimingFunction\": \"linear\",\n              \"height\": \"20px\",\n              \"width\": \"20px\",\n            }\n          }\n        >\n          <svg\n            height=\"100%\"\n            viewBox=\"0 0 32 32\"\n            width=\"100%\"\n          >\n            <circle\n              cx=\"16\"\n              cy=\"16\"\n              fill=\"none\"\n              r=\"14\"\n              strokeWidth=\"4\"\n              style={\n                Object {\n                  \"opacity\": 0.2,\n                  \"stroke\": \"#f97316\",\n                }\n              }\n            />\n            <circle\n              cx=\"16\"\n              cy=\"16\"\n              fill=\"none\"\n              r=\"14\"\n              strokeWidth=\"4\"\n              style={\n                Object {\n                  \"stroke\": \"#f97316\",\n                  \"strokeDasharray\": 80,\n                  \"strokeDashoffset\": 60,\n                }\n              }\n            />\n          </svg>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"32px\",\n          }\n        }\n      />\n      <div\n        aria-label=\"loading\"\n        aria-valuemax={1}\n        aria-valuemin={0}\n        className=\"css-view-1dbjc4n\"\n        role=\"progressbar\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"dataSet\": Object {},\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n r-animationKeyframes-127358a\"\n          style={\n            Object {\n              \"WebkitAnimationDuration\": \"0.75s\",\n              \"WebkitAnimationIterationCount\": \"infinite\",\n              \"WebkitAnimationTimingFunction\": \"linear\",\n              \"animationDuration\": \"0.75s\",\n              \"animationIterationCount\": \"infinite\",\n              \"animationTimingFunction\": \"linear\",\n              \"height\": \"20px\",\n              \"width\": \"20px\",\n            }\n          }\n        >\n          <svg\n            height=\"100%\"\n            viewBox=\"0 0 32 32\"\n            width=\"100%\"\n          >\n            <circle\n              cx=\"16\"\n              cy=\"16\"\n              fill=\"none\"\n              r=\"14\"\n              strokeWidth=\"4\"\n              style={\n                Object {\n                  \"opacity\": 0.2,\n                  \"stroke\": \"#6366f1\",\n                }\n              }\n            />\n            <circle\n              cx=\"16\"\n              cy=\"16\"\n              fill=\"none\"\n              r=\"14\"\n              strokeWidth=\"4\"\n              style={\n                Object {\n                  \"stroke\": \"#6366f1\",\n                  \"strokeDasharray\": 80,\n                  \"strokeDashoffset\": 60,\n                }\n              }\n            />\n          </svg>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"32px\",\n          }\n        }\n      />\n      <div\n        aria-label=\"loading\"\n        aria-valuemax={1}\n        aria-valuemin={0}\n        className=\"css-view-1dbjc4n\"\n        role=\"progressbar\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"dataSet\": Object {},\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n r-animationKeyframes-127358a\"\n          style={\n            Object {\n              \"WebkitAnimationDuration\": \"0.75s\",\n              \"WebkitAnimationIterationCount\": \"infinite\",\n              \"WebkitAnimationTimingFunction\": \"linear\",\n              \"animationDuration\": \"0.75s\",\n              \"animationIterationCount\": \"infinite\",\n              \"animationTimingFunction\": \"linear\",\n              \"height\": \"20px\",\n              \"width\": \"20px\",\n            }\n          }\n        >\n          <svg\n            height=\"100%\"\n            viewBox=\"0 0 32 32\"\n            width=\"100%\"\n          >\n            <circle\n              cx=\"16\"\n              cy=\"16\"\n              fill=\"none\"\n              r=\"14\"\n              strokeWidth=\"4\"\n              style={\n                Object {\n                  \"opacity\": 0.2,\n                  \"stroke\": \"#06b6d4\",\n                }\n              }\n            />\n            <circle\n              cx=\"16\"\n              cy=\"16\"\n              fill=\"none\"\n              r=\"14\"\n              strokeWidth=\"4\"\n              style={\n                Object {\n                  \"stroke\": \"#06b6d4\",\n                  \"strokeDasharray\": 80,\n                  \"strokeDashoffset\": 60,\n                }\n              }\n            />\n          </svg>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Spinner Playground 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"justify\",\n          \"WebkitJustifyContent\": \"space-between\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"space-between\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"justify\",\n        }\n      }\n    >\n      <div\n        aria-label=\"loading\"\n        aria-valuemax={1}\n        aria-valuemin={0}\n        className=\"css-view-1dbjc4n\"\n        role=\"progressbar\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"dataSet\": Object {},\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n r-animationKeyframes-127358a\"\n          style={\n            Object {\n              \"WebkitAnimationDuration\": \"0.75s\",\n              \"WebkitAnimationIterationCount\": \"infinite\",\n              \"WebkitAnimationTimingFunction\": \"linear\",\n              \"animationDuration\": \"0.75s\",\n              \"animationIterationCount\": \"infinite\",\n              \"animationTimingFunction\": \"linear\",\n              \"height\": \"36px\",\n              \"width\": \"36px\",\n            }\n          }\n        >\n          <svg\n            height=\"100%\"\n            viewBox=\"0 0 32 32\"\n            width=\"100%\"\n          >\n            <circle\n              cx=\"16\"\n              cy=\"16\"\n              fill=\"none\"\n              r=\"14\"\n              strokeWidth=\"4\"\n              style={\n                Object {\n                  \"opacity\": 0.2,\n                  \"stroke\": \"#67e8f9\",\n                }\n              }\n            />\n            <circle\n              cx=\"16\"\n              cy=\"16\"\n              fill=\"none\"\n              r=\"14\"\n              strokeWidth=\"4\"\n              style={\n                Object {\n                  \"stroke\": \"#67e8f9\",\n                  \"strokeDasharray\": 80,\n                  \"strokeDashoffset\": 60,\n                }\n              }\n            />\n          </svg>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Spinner Size 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        aria-label=\"loading\"\n        aria-valuemax={1}\n        aria-valuemin={0}\n        className=\"css-view-1dbjc4n\"\n        role=\"progressbar\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"dataSet\": Object {},\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n r-animationKeyframes-127358a\"\n          style={\n            Object {\n              \"WebkitAnimationDuration\": \"0.75s\",\n              \"WebkitAnimationIterationCount\": \"infinite\",\n              \"WebkitAnimationTimingFunction\": \"linear\",\n              \"animationDuration\": \"0.75s\",\n              \"animationIterationCount\": \"infinite\",\n              \"animationTimingFunction\": \"linear\",\n              \"height\": \"20px\",\n              \"width\": \"20px\",\n            }\n          }\n        >\n          <svg\n            height=\"100%\"\n            viewBox=\"0 0 32 32\"\n            width=\"100%\"\n          >\n            <circle\n              cx=\"16\"\n              cy=\"16\"\n              fill=\"none\"\n              r=\"14\"\n              strokeWidth=\"4\"\n              style={\n                Object {\n                  \"opacity\": 0.2,\n                  \"stroke\": \"#0891b2\",\n                }\n              }\n            />\n            <circle\n              cx=\"16\"\n              cy=\"16\"\n              fill=\"none\"\n              r=\"14\"\n              strokeWidth=\"4\"\n              style={\n                Object {\n                  \"stroke\": \"#0891b2\",\n                  \"strokeDasharray\": 80,\n                  \"strokeDashoffset\": 60,\n                }\n              }\n            />\n          </svg>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"32px\",\n          }\n        }\n      />\n      <div\n        aria-label=\"loading\"\n        aria-valuemax={1}\n        aria-valuemin={0}\n        className=\"css-view-1dbjc4n\"\n        role=\"progressbar\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"dataSet\": Object {},\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n r-animationKeyframes-127358a\"\n          style={\n            Object {\n              \"WebkitAnimationDuration\": \"0.75s\",\n              \"WebkitAnimationIterationCount\": \"infinite\",\n              \"WebkitAnimationTimingFunction\": \"linear\",\n              \"animationDuration\": \"0.75s\",\n              \"animationIterationCount\": \"infinite\",\n              \"animationTimingFunction\": \"linear\",\n              \"height\": \"36px\",\n              \"width\": \"36px\",\n            }\n          }\n        >\n          <svg\n            height=\"100%\"\n            viewBox=\"0 0 32 32\"\n            width=\"100%\"\n          >\n            <circle\n              cx=\"16\"\n              cy=\"16\"\n              fill=\"none\"\n              r=\"14\"\n              strokeWidth=\"4\"\n              style={\n                Object {\n                  \"opacity\": 0.2,\n                  \"stroke\": \"#0891b2\",\n                }\n              }\n            />\n            <circle\n              cx=\"16\"\n              cy=\"16\"\n              fill=\"none\"\n              r=\"14\"\n              strokeWidth=\"4\"\n              style={\n                Object {\n                  \"stroke\": \"#0891b2\",\n                  \"strokeDasharray\": 80,\n                  \"strokeDashoffset\": 60,\n                }\n              }\n            />\n          </svg>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Spinner Usage 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        aria-label=\"loading\"\n        aria-valuemax={1}\n        aria-valuemin={0}\n        className=\"css-view-1dbjc4n\"\n        role=\"progressbar\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"accessibilityLabel\": \"Loading posts\",\n            \"alignItems\": \"center\",\n            \"dataSet\": Object {},\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n r-animationKeyframes-127358a\"\n          style={\n            Object {\n              \"WebkitAnimationDuration\": \"0.75s\",\n              \"WebkitAnimationIterationCount\": \"infinite\",\n              \"WebkitAnimationTimingFunction\": \"linear\",\n              \"animationDuration\": \"0.75s\",\n              \"animationIterationCount\": \"infinite\",\n              \"animationTimingFunction\": \"linear\",\n              \"height\": \"20px\",\n              \"width\": \"20px\",\n            }\n          }\n        >\n          <svg\n            height=\"100%\"\n            viewBox=\"0 0 32 32\"\n            width=\"100%\"\n          >\n            <circle\n              cx=\"16\"\n              cy=\"16\"\n              fill=\"none\"\n              r=\"14\"\n              strokeWidth=\"4\"\n              style={\n                Object {\n                  \"opacity\": 0.2,\n                  \"stroke\": \"#0891b2\",\n                }\n              }\n            />\n            <circle\n              cx=\"16\"\n              cy=\"16\"\n              fill=\"none\"\n              r=\"14\"\n              strokeWidth=\"4\"\n              style={\n                Object {\n                  \"stroke\": \"#0891b2\",\n                  \"strokeDasharray\": 80,\n                  \"strokeDashoffset\": 60,\n                }\n              }\n            />\n          </svg>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(6,182,212,1.00)\",\n            \"fontSize\": \"16px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n          }\n        }\n      >\n        Loading\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Stack Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      onScroll={[Function]}\n      onTouchEnd={[Function]}\n      onTouchMove={[Function]}\n      onTouchStart={[Function]}\n      onWheel={[Function]}\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxFlex\": 1,\n          \"WebkitBoxOrient\": \"vertical\",\n          \"WebkitFlexDirection\": \"column\",\n          \"WebkitFlexGrow\": 1,\n          \"WebkitFlexShrink\": 1,\n          \"WebkitOverflowScrolling\": \"touch\",\n          \"WebkitTransform\": \"translateZ(0px)\",\n          \"flexDirection\": \"column\",\n          \"flexGrow\": 1,\n          \"flexShrink\": 1,\n          \"msFlexDirection\": \"column\",\n          \"msFlexNegative\": 1,\n          \"msFlexPositive\": 1,\n          \"overflowX\": \"hidden\",\n          \"overflowY\": \"auto\",\n          \"transform\": \"translateZ(0px)\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"dataSet\": Object {},\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"marginTop\": \"16px\",\n              \"paddingLeft\": \"32px\",\n              \"paddingRight\": \"32px\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            row\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"marginBottom\": \"10px\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(34,211,238,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n                  \"display\": \"flex\",\n                  \"height\": \"64px\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"width\": \"64px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,249,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Box 1\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(6,182,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n                  \"display\": \"flex\",\n                  \"height\": \"64px\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"width\": \"64px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,249,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Box 2\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(14,116,144,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n                  \"display\": \"flex\",\n                  \"height\": \"64px\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"width\": \"64px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,249,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Box 3\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            column\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"vertical\",\n                \"WebkitFlexDirection\": \"column\",\n                \"flexDirection\": \"column\",\n                \"marginBottom\": \"10px\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"column\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(34,211,238,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n                  \"display\": \"flex\",\n                  \"height\": \"64px\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"width\": \"64px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,249,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Box 1\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(6,182,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n                  \"display\": \"flex\",\n                  \"height\": \"64px\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"width\": \"64px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,249,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Box 2\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(14,116,144,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n                  \"display\": \"flex\",\n                  \"height\": \"64px\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"width\": \"64px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,249,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Box 3\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            row-reverse\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"flexDirection\": \"row\",\n                \"marginBottom\": \"10px\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(14,116,144,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n                  \"display\": \"flex\",\n                  \"height\": \"64px\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"width\": \"64px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,249,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Box 3\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(6,182,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n                  \"display\": \"flex\",\n                  \"height\": \"64px\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"width\": \"64px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,249,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Box 2\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(34,211,238,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n                  \"display\": \"flex\",\n                  \"height\": \"64px\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"width\": \"64px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,249,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Box 1\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"20px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            column-reverse\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"reverse\",\n                \"WebkitBoxOrient\": \"vertical\",\n                \"WebkitFlexDirection\": \"column-reverse\",\n                \"flexDirection\": \"column-reverse\",\n                \"marginBottom\": \"10px\",\n                \"marginTop\": \"6px\",\n                \"msFlexDirection\": \"column-reverse\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(34,211,238,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n                  \"display\": \"flex\",\n                  \"height\": \"64px\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"width\": \"64px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,249,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Box 1\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(6,182,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n                  \"display\": \"flex\",\n                  \"height\": \"64px\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"width\": \"64px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,249,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Box 2\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(14,116,144,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n                  \"display\": \"flex\",\n                  \"height\": \"64px\",\n                  \"justifyContent\": \"center\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"width\": \"64px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,249,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Box 3\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"10px\",\n              }\n            }\n          />\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Stack Divider 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"marginBottom\": \"12px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Simple\n            </div>\n          </div>\n          <div\n            aria-orientation=\"vertical\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(229,231,235,1.00)\",\n                \"height\": \"100%\",\n                \"marginLeft\": \"8px\",\n                \"marginRight\": \"8px\",\n                \"width\": \"2px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Easy\n            </div>\n          </div>\n          <div\n            aria-orientation=\"vertical\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(229,231,235,1.00)\",\n                \"height\": \"100%\",\n                \"marginLeft\": \"8px\",\n                \"marginRight\": \"8px\",\n                \"width\": \"2px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Beautiful\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots StatusBar Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlex\": 1,\n          \"WebkitJustifyContent\": \"center\",\n          \"flex\": 1,\n          \"justifyContent\": \"center\",\n          \"msFlex\": \"1 1 0%\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n            \"marginBottom\": \"12px\",\n            \"textAlign\": \"center\",\n          }\n        }\n      >\n        StatusBar Visibility:\n        \n\n        Visible\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"paddingBottom\": \"40px\",\n            \"paddingLeft\": \"40px\",\n            \"paddingRight\": \"40px\",\n            \"paddingTop\": \"40px\",\n          }\n        }\n      >\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Toggle StatusBar\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Switch Accessibility 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitFlexDirection\": \"row\",\n          \"alignItems\": \"center\",\n          \"flexDirection\": \"row\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"18px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        Accessibility\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"32px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitUserSelect\": \"none\",\n            \"cursor\": \"pointer\",\n            \"height\": \"20px\",\n            \"msUserSelect\": \"none\",\n            \"userSelect\": \"none\",\n            \"width\": \"40px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n              \"borderBottomLeftRadius\": \"10px\",\n              \"borderBottomRightRadius\": \"10px\",\n              \"borderTopLeftRadius\": \"10px\",\n              \"borderTopRightRadius\": \"10px\",\n              \"bottom\": \"0px\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"70%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"auto\",\n              \"marginLeft\": \"auto\",\n              \"marginRight\": \"auto\",\n              \"marginTop\": \"auto\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"100%\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignSelf\": \"flex-start\",\n              \"WebkitTransform\": \"translateZ(0px)\",\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"alignSelf\": \"flex-start\",\n              \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"100%\",\n              \"borderBottomRightRadius\": \"100%\",\n              \"borderTopLeftRadius\": \"100%\",\n              \"borderTopRightRadius\": \"100%\",\n              \"boxShadow\": \"0px 1px 3px rgba(0,0,0,0.5)\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"20px\",\n              \"left\": \"0%\",\n              \"marginLeft\": \"0px\",\n              \"msFlexItemAlign\": \"start\",\n              \"transform\": \"translateZ(0px)\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"20px\",\n            }\n          }\n        />\n        <input\n          aria-label=\"switch-accessible\"\n          checked={false}\n          disabled={false}\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          role=\"switch\"\n          style={\n            Object {\n              \"bottom\": \"0px\",\n              \"cursor\": \"inherit\",\n              \"height\": \"100%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"0px\",\n              \"marginLeft\": \"0px\",\n              \"marginRight\": \"0px\",\n              \"marginTop\": \"0px\",\n              \"opacity\": 0,\n              \"paddingBottom\": \"0px\",\n              \"paddingLeft\": \"0px\",\n              \"paddingRight\": \"0px\",\n              \"paddingTop\": \"0px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"checkbox\"\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Switch Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitFlexDirection\": \"row\",\n          \"alignItems\": \"center\",\n          \"flexDirection\": \"row\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        Bluetooth\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitTransform\": \"scale(0.75)\",\n            \"WebkitUserSelect\": \"none\",\n            \"cursor\": \"pointer\",\n            \"height\": \"20px\",\n            \"msUserSelect\": \"none\",\n            \"transform\": \"scale(0.75)\",\n            \"userSelect\": \"none\",\n            \"width\": \"40px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n              \"borderBottomLeftRadius\": \"10px\",\n              \"borderBottomRightRadius\": \"10px\",\n              \"borderTopLeftRadius\": \"10px\",\n              \"borderTopRightRadius\": \"10px\",\n              \"bottom\": \"0px\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"70%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"auto\",\n              \"marginLeft\": \"auto\",\n              \"marginRight\": \"auto\",\n              \"marginTop\": \"auto\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"100%\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignSelf\": \"flex-start\",\n              \"WebkitTransform\": \"translateZ(0px)\",\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"alignSelf\": \"flex-start\",\n              \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"100%\",\n              \"borderBottomRightRadius\": \"100%\",\n              \"borderTopLeftRadius\": \"100%\",\n              \"borderTopRightRadius\": \"100%\",\n              \"boxShadow\": \"0px 1px 3px rgba(0,0,0,0.5)\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"20px\",\n              \"left\": \"0%\",\n              \"marginLeft\": \"0px\",\n              \"msFlexItemAlign\": \"start\",\n              \"transform\": \"translateZ(0px)\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"20px\",\n            }\n          }\n        />\n        <input\n          checked={false}\n          disabled={false}\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          role=\"switch\"\n          style={\n            Object {\n              \"bottom\": \"0px\",\n              \"cursor\": \"inherit\",\n              \"height\": \"100%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"0px\",\n              \"marginLeft\": \"0px\",\n              \"marginRight\": \"0px\",\n              \"marginTop\": \"0px\",\n              \"opacity\": 0,\n              \"paddingBottom\": \"0px\",\n              \"paddingLeft\": \"0px\",\n              \"paddingRight\": \"0px\",\n              \"paddingTop\": \"0px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"checkbox\"\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Switch ColorSchemes 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitUserSelect\": \"none\",\n            \"cursor\": \"pointer\",\n            \"height\": \"20px\",\n            \"msUserSelect\": \"none\",\n            \"userSelect\": \"none\",\n            \"width\": \"40px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"10px\",\n              \"borderBottomRightRadius\": \"10px\",\n              \"borderTopLeftRadius\": \"10px\",\n              \"borderTopRightRadius\": \"10px\",\n              \"bottom\": \"0px\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"70%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"auto\",\n              \"marginLeft\": \"auto\",\n              \"marginRight\": \"auto\",\n              \"marginTop\": \"auto\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"100%\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignSelf\": \"flex-start\",\n              \"WebkitTransform\": \"translateZ(0px)\",\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"alignSelf\": \"flex-start\",\n              \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"100%\",\n              \"borderBottomRightRadius\": \"100%\",\n              \"borderTopLeftRadius\": \"100%\",\n              \"borderTopRightRadius\": \"100%\",\n              \"boxShadow\": \"0px 1px 3px rgba(0,0,0,0.5)\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"20px\",\n              \"left\": \"100%\",\n              \"marginLeft\": \"-20px\",\n              \"msFlexItemAlign\": \"start\",\n              \"transform\": \"translateZ(0px)\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"20px\",\n            }\n          }\n        />\n        <input\n          checked={true}\n          disabled={false}\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          role=\"switch\"\n          style={\n            Object {\n              \"bottom\": \"0px\",\n              \"cursor\": \"inherit\",\n              \"height\": \"100%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"0px\",\n              \"marginLeft\": \"0px\",\n              \"marginRight\": \"0px\",\n              \"marginTop\": \"0px\",\n              \"opacity\": 0,\n              \"paddingBottom\": \"0px\",\n              \"paddingLeft\": \"0px\",\n              \"paddingRight\": \"0px\",\n              \"paddingTop\": \"0px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"checkbox\"\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitUserSelect\": \"none\",\n            \"cursor\": \"pointer\",\n            \"height\": \"20px\",\n            \"msUserSelect\": \"none\",\n            \"userSelect\": \"none\",\n            \"width\": \"40px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"backgroundColor\": \"rgba(219,39,119,1.00)\",\n              \"borderBottomLeftRadius\": \"10px\",\n              \"borderBottomRightRadius\": \"10px\",\n              \"borderTopLeftRadius\": \"10px\",\n              \"borderTopRightRadius\": \"10px\",\n              \"bottom\": \"0px\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"70%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"auto\",\n              \"marginLeft\": \"auto\",\n              \"marginRight\": \"auto\",\n              \"marginTop\": \"auto\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"100%\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignSelf\": \"flex-start\",\n              \"WebkitTransform\": \"translateZ(0px)\",\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"alignSelf\": \"flex-start\",\n              \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"100%\",\n              \"borderBottomRightRadius\": \"100%\",\n              \"borderTopLeftRadius\": \"100%\",\n              \"borderTopRightRadius\": \"100%\",\n              \"boxShadow\": \"0px 1px 3px rgba(0,0,0,0.5)\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"20px\",\n              \"left\": \"100%\",\n              \"marginLeft\": \"-20px\",\n              \"msFlexItemAlign\": \"start\",\n              \"transform\": \"translateZ(0px)\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"20px\",\n            }\n          }\n        />\n        <input\n          checked={true}\n          disabled={false}\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          role=\"switch\"\n          style={\n            Object {\n              \"bottom\": \"0px\",\n              \"cursor\": \"inherit\",\n              \"height\": \"100%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"0px\",\n              \"marginLeft\": \"0px\",\n              \"marginRight\": \"0px\",\n              \"marginTop\": \"0px\",\n              \"opacity\": 0,\n              \"paddingBottom\": \"0px\",\n              \"paddingLeft\": \"0px\",\n              \"paddingRight\": \"0px\",\n              \"paddingTop\": \"0px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"checkbox\"\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitUserSelect\": \"none\",\n            \"cursor\": \"pointer\",\n            \"height\": \"20px\",\n            \"msUserSelect\": \"none\",\n            \"userSelect\": \"none\",\n            \"width\": \"40px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"backgroundColor\": \"rgba(5,150,105,1.00)\",\n              \"borderBottomLeftRadius\": \"10px\",\n              \"borderBottomRightRadius\": \"10px\",\n              \"borderTopLeftRadius\": \"10px\",\n              \"borderTopRightRadius\": \"10px\",\n              \"bottom\": \"0px\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"70%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"auto\",\n              \"marginLeft\": \"auto\",\n              \"marginRight\": \"auto\",\n              \"marginTop\": \"auto\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"100%\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignSelf\": \"flex-start\",\n              \"WebkitTransform\": \"translateZ(0px)\",\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"alignSelf\": \"flex-start\",\n              \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"100%\",\n              \"borderBottomRightRadius\": \"100%\",\n              \"borderTopLeftRadius\": \"100%\",\n              \"borderTopRightRadius\": \"100%\",\n              \"boxShadow\": \"0px 1px 3px rgba(0,0,0,0.5)\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"20px\",\n              \"left\": \"100%\",\n              \"marginLeft\": \"-20px\",\n              \"msFlexItemAlign\": \"start\",\n              \"transform\": \"translateZ(0px)\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"20px\",\n            }\n          }\n        />\n        <input\n          checked={true}\n          disabled={false}\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          role=\"switch\"\n          style={\n            Object {\n              \"bottom\": \"0px\",\n              \"cursor\": \"inherit\",\n              \"height\": \"100%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"0px\",\n              \"marginLeft\": \"0px\",\n              \"marginRight\": \"0px\",\n              \"marginTop\": \"0px\",\n              \"opacity\": 0,\n              \"paddingBottom\": \"0px\",\n              \"paddingLeft\": \"0px\",\n              \"paddingRight\": \"0px\",\n              \"paddingTop\": \"0px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"checkbox\"\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Switch Sizes 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitTransform\": \"scale(0.75)\",\n            \"WebkitUserSelect\": \"none\",\n            \"cursor\": \"pointer\",\n            \"height\": \"20px\",\n            \"msUserSelect\": \"none\",\n            \"transform\": \"scale(0.75)\",\n            \"userSelect\": \"none\",\n            \"width\": \"40px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n              \"borderBottomLeftRadius\": \"10px\",\n              \"borderBottomRightRadius\": \"10px\",\n              \"borderTopLeftRadius\": \"10px\",\n              \"borderTopRightRadius\": \"10px\",\n              \"bottom\": \"0px\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"70%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"auto\",\n              \"marginLeft\": \"auto\",\n              \"marginRight\": \"auto\",\n              \"marginTop\": \"auto\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"100%\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignSelf\": \"flex-start\",\n              \"WebkitTransform\": \"translateZ(0px)\",\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"alignSelf\": \"flex-start\",\n              \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"100%\",\n              \"borderBottomRightRadius\": \"100%\",\n              \"borderTopLeftRadius\": \"100%\",\n              \"borderTopRightRadius\": \"100%\",\n              \"boxShadow\": \"0px 1px 3px rgba(0,0,0,0.5)\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"20px\",\n              \"left\": \"0%\",\n              \"marginLeft\": \"0px\",\n              \"msFlexItemAlign\": \"start\",\n              \"transform\": \"translateZ(0px)\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"20px\",\n            }\n          }\n        />\n        <input\n          checked={false}\n          disabled={false}\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          role=\"switch\"\n          style={\n            Object {\n              \"bottom\": \"0px\",\n              \"cursor\": \"inherit\",\n              \"height\": \"100%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"0px\",\n              \"marginLeft\": \"0px\",\n              \"marginRight\": \"0px\",\n              \"marginTop\": \"0px\",\n              \"opacity\": 0,\n              \"paddingBottom\": \"0px\",\n              \"paddingLeft\": \"0px\",\n              \"paddingRight\": \"0px\",\n              \"paddingTop\": \"0px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"checkbox\"\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitUserSelect\": \"none\",\n            \"cursor\": \"pointer\",\n            \"height\": \"20px\",\n            \"msUserSelect\": \"none\",\n            \"userSelect\": \"none\",\n            \"width\": \"40px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n              \"borderBottomLeftRadius\": \"10px\",\n              \"borderBottomRightRadius\": \"10px\",\n              \"borderTopLeftRadius\": \"10px\",\n              \"borderTopRightRadius\": \"10px\",\n              \"bottom\": \"0px\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"70%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"auto\",\n              \"marginLeft\": \"auto\",\n              \"marginRight\": \"auto\",\n              \"marginTop\": \"auto\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"100%\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignSelf\": \"flex-start\",\n              \"WebkitTransform\": \"translateZ(0px)\",\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"alignSelf\": \"flex-start\",\n              \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"100%\",\n              \"borderBottomRightRadius\": \"100%\",\n              \"borderTopLeftRadius\": \"100%\",\n              \"borderTopRightRadius\": \"100%\",\n              \"boxShadow\": \"0px 1px 3px rgba(0,0,0,0.5)\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"20px\",\n              \"left\": \"0%\",\n              \"marginLeft\": \"0px\",\n              \"msFlexItemAlign\": \"start\",\n              \"transform\": \"translateZ(0px)\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"20px\",\n            }\n          }\n        />\n        <input\n          checked={false}\n          disabled={false}\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          role=\"switch\"\n          style={\n            Object {\n              \"bottom\": \"0px\",\n              \"cursor\": \"inherit\",\n              \"height\": \"100%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"0px\",\n              \"marginLeft\": \"0px\",\n              \"marginRight\": \"0px\",\n              \"marginTop\": \"0px\",\n              \"opacity\": 0,\n              \"paddingBottom\": \"0px\",\n              \"paddingLeft\": \"0px\",\n              \"paddingRight\": \"0px\",\n              \"paddingTop\": \"0px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"checkbox\"\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitTransform\": \"scale(1.25)\",\n            \"WebkitUserSelect\": \"none\",\n            \"cursor\": \"pointer\",\n            \"height\": \"20px\",\n            \"marginBottom\": \"4px\",\n            \"marginLeft\": \"4px\",\n            \"marginRight\": \"4px\",\n            \"marginTop\": \"4px\",\n            \"msUserSelect\": \"none\",\n            \"transform\": \"scale(1.25)\",\n            \"userSelect\": \"none\",\n            \"width\": \"40px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n              \"borderBottomLeftRadius\": \"10px\",\n              \"borderBottomRightRadius\": \"10px\",\n              \"borderTopLeftRadius\": \"10px\",\n              \"borderTopRightRadius\": \"10px\",\n              \"bottom\": \"0px\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"70%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"auto\",\n              \"marginLeft\": \"auto\",\n              \"marginRight\": \"auto\",\n              \"marginTop\": \"auto\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"100%\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignSelf\": \"flex-start\",\n              \"WebkitTransform\": \"translateZ(0px)\",\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"alignSelf\": \"flex-start\",\n              \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"100%\",\n              \"borderBottomRightRadius\": \"100%\",\n              \"borderTopLeftRadius\": \"100%\",\n              \"borderTopRightRadius\": \"100%\",\n              \"boxShadow\": \"0px 1px 3px rgba(0,0,0,0.5)\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"20px\",\n              \"left\": \"0%\",\n              \"marginLeft\": \"0px\",\n              \"msFlexItemAlign\": \"start\",\n              \"transform\": \"translateZ(0px)\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"20px\",\n            }\n          }\n        />\n        <input\n          checked={false}\n          disabled={false}\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          role=\"switch\"\n          style={\n            Object {\n              \"bottom\": \"0px\",\n              \"cursor\": \"inherit\",\n              \"height\": \"100%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"0px\",\n              \"marginLeft\": \"0px\",\n              \"marginRight\": \"0px\",\n              \"marginTop\": \"0px\",\n              \"opacity\": 0,\n              \"paddingBottom\": \"0px\",\n              \"paddingLeft\": \"0px\",\n              \"paddingRight\": \"0px\",\n              \"paddingTop\": \"0px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"checkbox\"\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Switch Switch bgColor 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitUserSelect\": \"none\",\n            \"cursor\": \"pointer\",\n            \"height\": \"20px\",\n            \"msUserSelect\": \"none\",\n            \"userSelect\": \"none\",\n            \"width\": \"40px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n              \"borderBottomLeftRadius\": \"10px\",\n              \"borderBottomRightRadius\": \"10px\",\n              \"borderTopLeftRadius\": \"10px\",\n              \"borderTopRightRadius\": \"10px\",\n              \"bottom\": \"0px\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"70%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"auto\",\n              \"marginLeft\": \"auto\",\n              \"marginRight\": \"auto\",\n              \"marginTop\": \"auto\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"100%\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignSelf\": \"flex-start\",\n              \"WebkitTransform\": \"translateZ(0px)\",\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"alignSelf\": \"flex-start\",\n              \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"100%\",\n              \"borderBottomRightRadius\": \"100%\",\n              \"borderTopLeftRadius\": \"100%\",\n              \"borderTopRightRadius\": \"100%\",\n              \"boxShadow\": \"0px 1px 3px rgba(0,0,0,0.5)\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"20px\",\n              \"left\": \"0%\",\n              \"marginLeft\": \"0px\",\n              \"msFlexItemAlign\": \"start\",\n              \"transform\": \"translateZ(0px)\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"20px\",\n            }\n          }\n        />\n        <input\n          checked={false}\n          disabled={false}\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          role=\"switch\"\n          style={\n            Object {\n              \"bottom\": \"0px\",\n              \"cursor\": \"inherit\",\n              \"height\": \"100%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"0px\",\n              \"marginLeft\": \"0px\",\n              \"marginRight\": \"0px\",\n              \"marginTop\": \"0px\",\n              \"opacity\": 0,\n              \"paddingBottom\": \"0px\",\n              \"paddingLeft\": \"0px\",\n              \"paddingRight\": \"0px\",\n              \"paddingTop\": \"0px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"checkbox\"\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitUserSelect\": \"none\",\n            \"cursor\": \"pointer\",\n            \"height\": \"20px\",\n            \"msUserSelect\": \"none\",\n            \"userSelect\": \"none\",\n            \"width\": \"40px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"backgroundColor\": \"rgba(255,237,213,1.00)\",\n              \"borderBottomLeftRadius\": \"10px\",\n              \"borderBottomRightRadius\": \"10px\",\n              \"borderTopLeftRadius\": \"10px\",\n              \"borderTopRightRadius\": \"10px\",\n              \"bottom\": \"0px\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"70%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"auto\",\n              \"marginLeft\": \"auto\",\n              \"marginRight\": \"auto\",\n              \"marginTop\": \"auto\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"100%\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignSelf\": \"flex-start\",\n              \"WebkitTransform\": \"translateZ(0px)\",\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"alignSelf\": \"flex-start\",\n              \"backgroundColor\": \"rgba(255,247,237,1.00)\",\n              \"borderBottomLeftRadius\": \"100%\",\n              \"borderBottomRightRadius\": \"100%\",\n              \"borderTopLeftRadius\": \"100%\",\n              \"borderTopRightRadius\": \"100%\",\n              \"boxShadow\": \"0px 1px 3px rgba(0,0,0,0.5)\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"20px\",\n              \"left\": \"0%\",\n              \"marginLeft\": \"0px\",\n              \"msFlexItemAlign\": \"start\",\n              \"transform\": \"translateZ(0px)\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"20px\",\n            }\n          }\n        />\n        <input\n          checked={false}\n          disabled={false}\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          role=\"switch\"\n          style={\n            Object {\n              \"bottom\": \"0px\",\n              \"cursor\": \"inherit\",\n              \"height\": \"100%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"0px\",\n              \"marginLeft\": \"0px\",\n              \"marginRight\": \"0px\",\n              \"marginTop\": \"0px\",\n              \"opacity\": 0,\n              \"paddingBottom\": \"0px\",\n              \"paddingLeft\": \"0px\",\n              \"paddingRight\": \"0px\",\n              \"paddingTop\": \"0px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"checkbox\"\n        />\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitUserSelect\": \"none\",\n            \"cursor\": \"pointer\",\n            \"height\": \"20px\",\n            \"msUserSelect\": \"none\",\n            \"userSelect\": \"none\",\n            \"width\": \"40px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"backgroundColor\": \"rgba(224,231,255,1.00)\",\n              \"borderBottomLeftRadius\": \"10px\",\n              \"borderBottomRightRadius\": \"10px\",\n              \"borderTopLeftRadius\": \"10px\",\n              \"borderTopRightRadius\": \"10px\",\n              \"bottom\": \"0px\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"70%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"auto\",\n              \"marginLeft\": \"auto\",\n              \"marginRight\": \"auto\",\n              \"marginTop\": \"auto\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"100%\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignSelf\": \"flex-start\",\n              \"WebkitTransform\": \"translateZ(0px)\",\n              \"WebkitTransitionDuration\": \"0.1s\",\n              \"alignSelf\": \"flex-start\",\n              \"backgroundColor\": \"rgba(238,242,255,1.00)\",\n              \"borderBottomLeftRadius\": \"100%\",\n              \"borderBottomRightRadius\": \"100%\",\n              \"borderTopLeftRadius\": \"100%\",\n              \"borderTopRightRadius\": \"100%\",\n              \"boxShadow\": \"0px 1px 3px rgba(0,0,0,0.5)\",\n              \"forcedColorAdjust\": \"none\",\n              \"height\": \"20px\",\n              \"left\": \"0%\",\n              \"marginLeft\": \"0px\",\n              \"msFlexItemAlign\": \"start\",\n              \"transform\": \"translateZ(0px)\",\n              \"transitionDuration\": \"0.1s\",\n              \"width\": \"20px\",\n            }\n          }\n        />\n        <input\n          checked={false}\n          disabled={false}\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          role=\"switch\"\n          style={\n            Object {\n              \"bottom\": \"0px\",\n              \"cursor\": \"inherit\",\n              \"height\": \"100%\",\n              \"left\": \"0px\",\n              \"marginBottom\": \"0px\",\n              \"marginLeft\": \"0px\",\n              \"marginRight\": \"0px\",\n              \"marginTop\": \"0px\",\n              \"opacity\": 0,\n              \"paddingBottom\": \"0px\",\n              \"paddingLeft\": \"0px\",\n              \"paddingRight\": \"0px\",\n              \"paddingTop\": \"0px\",\n              \"position\": \"absolute\",\n              \"right\": \"0px\",\n              \"top\": \"0px\",\n              \"width\": \"100%\",\n            }\n          }\n          type=\"checkbox\"\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Text Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-text-901oao\"\n      dir=\"auto\"\n      style={\n        Object {\n          \"color\": \"rgba(23,23,23,1.00)\",\n          \"fontSize\": \"14px\",\n          \"fontStyle\": \"normal\",\n          \"fontWeight\": \"400\",\n          \"letterSpacing\": \"0px\",\n          \"lineHeight\": \"1.5em\",\n        }\n      }\n    >\n      This is Text.\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Text Changing Font Size 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"12px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        xs\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"4px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        sm\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"4px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"16px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        md\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"4px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"18px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        lg\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"4px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"20px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        xl\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"4px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"24px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        2xl\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"4px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"30px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        3xl\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"4px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"36px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        4xl\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"4px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"48px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        5xl\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"4px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"60px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        6xl\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Text Nested 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-text-901oao\"\n      dir=\"auto\"\n      style={\n        Object {\n          \"color\": \"rgba(23,23,23,1.00)\",\n          \"fontSize\": \"14px\",\n          \"fontStyle\": \"italic\",\n          \"fontWeight\": \"400\",\n          \"letterSpacing\": \"0px\",\n          \"lineHeight\": \"1.5em\",\n        }\n      }\n    >\n      <span\n        className=\"css-text-901oao css-textHasAncestor-16my406\"\n        style={\n          Object {\n            \"fontWeight\": \"700\",\n          }\n        }\n      >\n        Taj Mahal\n      </span>\n       is in Agra.\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Text Overriden 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        Bold\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"italic\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        Italic\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n            \"textDecoration\": \"underline\",\n          }\n        }\n      >\n        Underline\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"backgroundColor\": \"rgba(253,186,116,1.00)\",\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        Highlighted\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        H\n        <span\n          className=\"css-text-901oao css-textHasAncestor-16my406\"\n          style={\n            Object {\n              \"fontSize\": \"10px\",\n            }\n          }\n        >\n          2\n        </span>\n        O\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n            \"textDecoration\": \"underline\",\n          }\n        }\n      >\n        Underline\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n            \"textDecoration\": \"line-through\",\n          }\n        }\n      >\n        StrikeThrough\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"italic\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n            \"textDecoration\": \"underline\",\n          }\n        }\n      >\n        Bold, Italic & Underline\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Text Truncated 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-text-901oao css-textOneLine-vcwn7f\"\n      dir=\"auto\"\n      style={\n        Object {\n          \"color\": \"rgba(23,23,23,1.00)\",\n          \"fontSize\": \"14px\",\n          \"fontStyle\": \"normal\",\n          \"fontWeight\": \"400\",\n          \"letterSpacing\": \"0px\",\n          \"lineHeight\": \"1.5em\",\n          \"maxWidth\": \"300px\",\n          \"width\": \"80%\",\n        }\n      }\n    >\n      NativeBase gives you a contrasting color based on your theme. You can also customise it using the useAccessibleColors hook.\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots TextArea Default 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"height\": \"80px\",\n            \"maxWidth\": \"300px\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"overflowX\": \"auto\",\n            \"overflowY\": \"auto\",\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <textarea\n          autoCapitalize=\"sentences\"\n          autoComplete=\"on\"\n          autoCorrect=\"on\"\n          className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n          dir=\"auto\"\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onSelect={[Function]}\n          placeholder=\"Text Area Placeholder\"\n          readOnly={false}\n          rows={1}\n          spellCheck={true}\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"cursor\": \"auto\",\n              \"flex\": 1,\n              \"fontSize\": \"12px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"lineHeight\": \"1.5em\",\n              \"msFlex\": \"1 1 0%\",\n              \"outline\": \"none\",\n              \"outlineWidth\": \"0px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots TextArea InValid and Disabled 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"maxWidth\": \"300px\",\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"18px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginBottom\": \"16px\",\n              }\n            }\n          >\n            Invalid TextArea\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"height\": \"80px\",\n                \"marginBottom\": \"20px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"overflowX\": \"auto\",\n                \"overflowY\": \"auto\",\n              }\n            }\n          >\n            <textarea\n              aria-invalid={true}\n              aria-label=\"t1\"\n              autoCapitalize=\"sentences\"\n              autoComplete=\"on\"\n              autoCorrect=\"on\"\n              className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n              dir=\"auto\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onSelect={[Function]}\n              placeholder=\"Invalid TextArea\"\n              readOnly={false}\n              rows={1}\n              spellCheck={true}\n              style={\n                Object {\n                  \"WebkitFlex\": 1,\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"cursor\": \"auto\",\n                  \"flex\": 1,\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"100%\",\n                  \"lineHeight\": \"1.5em\",\n                  \"msFlex\": \"1 1 0%\",\n                  \"outline\": \"none\",\n                  \"outlineWidth\": \"0px\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n          <div\n            aria-orientation=\"horizontal\"\n            className=\"css-view-1dbjc4n\"\n            role=\"separator\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"height\": \"1px\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"10px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"18px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n                \"marginBottom\": \"16px\",\n              }\n            }\n          >\n            Disabled TextArea\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"height\": \"80px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"opacity\": 0.4,\n                \"overflowX\": \"auto\",\n                \"overflowY\": \"auto\",\n              }\n            }\n          >\n            <textarea\n              aria-label=\"t1Disabled\"\n              autoCapitalize=\"sentences\"\n              autoComplete=\"on\"\n              autoCorrect=\"on\"\n              className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n              dir=\"auto\"\n              disabled={true}\n              onBlur={[Function]}\n              onChange={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onSelect={[Function]}\n              placeholder=\"Disabled TextArea\"\n              readOnly={true}\n              rows={1}\n              spellCheck={true}\n              style={\n                Object {\n                  \"WebkitFlex\": 1,\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"cursor\": \"not-allowed\",\n                  \"flex\": 1,\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"100%\",\n                  \"lineHeight\": \"1.5em\",\n                  \"msFlex\": \"1 1 0%\",\n                  \"outline\": \"none\",\n                  \"outlineWidth\": \"0px\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots TextArea Sizes 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      onScroll={[Function]}\n      onTouchEnd={[Function]}\n      onTouchMove={[Function]}\n      onTouchStart={[Function]}\n      onWheel={[Function]}\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxFlex\": 1,\n          \"WebkitBoxOrient\": \"vertical\",\n          \"WebkitFlexDirection\": \"column\",\n          \"WebkitFlexGrow\": 1,\n          \"WebkitFlexShrink\": 1,\n          \"WebkitOverflowScrolling\": \"touch\",\n          \"WebkitTransform\": \"translateZ(0px)\",\n          \"flexDirection\": \"column\",\n          \"flexGrow\": 1,\n          \"flexShrink\": 1,\n          \"msFlexDirection\": \"column\",\n          \"msFlexNegative\": 1,\n          \"msFlexPositive\": 1,\n          \"overflowX\": \"hidden\",\n          \"overflowY\": \"auto\",\n          \"transform\": \"translateZ(0px)\",\n          \"width\": \"70%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"dataSet\": Object {},\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n              \"marginTop\": \"16px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"24px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n                \"marginBottom\": \"40px\",\n                \"textAlign\": \"center\",\n              }\n            }\n          >\n            Sizes\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"90%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"flexDirection\": \"row\",\n                  \"height\": \"80px\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"overflowX\": \"auto\",\n                  \"overflowY\": \"auto\",\n                }\n              }\n            >\n              <textarea\n                aria-label=\"t2\"\n                autoCapitalize=\"sentences\"\n                autoComplete=\"on\"\n                autoCorrect=\"on\"\n                className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n                dir=\"auto\"\n                onBlur={[Function]}\n                onChange={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onSelect={[Function]}\n                placeholder=\"xs\"\n                readOnly={false}\n                rows={1}\n                spellCheck={true}\n                style={\n                  Object {\n                    \"WebkitFlex\": 1,\n                    \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"cursor\": \"auto\",\n                    \"flex\": 1,\n                    \"fontSize\": \"10px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"lineHeight\": \"1.5em\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"outline\": \"none\",\n                    \"outlineWidth\": \"0px\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"12px\",\n                    \"paddingRight\": \"12px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"16px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"flexDirection\": \"row\",\n                  \"height\": \"80px\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"overflowX\": \"auto\",\n                  \"overflowY\": \"auto\",\n                }\n              }\n            >\n              <textarea\n                aria-label=\"t2\"\n                autoCapitalize=\"sentences\"\n                autoComplete=\"on\"\n                autoCorrect=\"on\"\n                className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n                dir=\"auto\"\n                onBlur={[Function]}\n                onChange={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onSelect={[Function]}\n                placeholder=\"sm\"\n                readOnly={false}\n                rows={1}\n                spellCheck={true}\n                style={\n                  Object {\n                    \"WebkitFlex\": 1,\n                    \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"cursor\": \"auto\",\n                    \"flex\": 1,\n                    \"fontSize\": \"12px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"lineHeight\": \"1.5em\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"outline\": \"none\",\n                    \"outlineWidth\": \"0px\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"12px\",\n                    \"paddingRight\": \"12px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"16px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"flexDirection\": \"row\",\n                  \"height\": \"80px\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"overflowX\": \"auto\",\n                  \"overflowY\": \"auto\",\n                }\n              }\n            >\n              <textarea\n                aria-label=\"t2\"\n                autoCapitalize=\"sentences\"\n                autoComplete=\"on\"\n                autoCorrect=\"on\"\n                className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n                dir=\"auto\"\n                onBlur={[Function]}\n                onChange={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onSelect={[Function]}\n                placeholder=\"md\"\n                readOnly={false}\n                rows={1}\n                spellCheck={true}\n                style={\n                  Object {\n                    \"WebkitFlex\": 1,\n                    \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"cursor\": \"auto\",\n                    \"flex\": 1,\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"lineHeight\": \"1.5em\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"outline\": \"none\",\n                    \"outlineWidth\": \"0px\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"12px\",\n                    \"paddingRight\": \"12px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"16px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"flexDirection\": \"row\",\n                  \"height\": \"80px\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"overflowX\": \"auto\",\n                  \"overflowY\": \"auto\",\n                }\n              }\n            >\n              <textarea\n                aria-label=\"t2\"\n                autoCapitalize=\"sentences\"\n                autoComplete=\"on\"\n                autoCorrect=\"on\"\n                className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n                dir=\"auto\"\n                onBlur={[Function]}\n                onChange={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onSelect={[Function]}\n                placeholder=\"lg\"\n                readOnly={false}\n                rows={1}\n                spellCheck={true}\n                style={\n                  Object {\n                    \"WebkitFlex\": 1,\n                    \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"cursor\": \"auto\",\n                    \"flex\": 1,\n                    \"fontSize\": \"16px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"lineHeight\": \"1.5em\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"outline\": \"none\",\n                    \"outlineWidth\": \"0px\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"12px\",\n                    \"paddingRight\": \"12px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"16px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"flexDirection\": \"row\",\n                  \"height\": \"80px\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"overflowX\": \"auto\",\n                  \"overflowY\": \"auto\",\n                }\n              }\n            >\n              <textarea\n                aria-label=\"t2\"\n                autoCapitalize=\"sentences\"\n                autoComplete=\"on\"\n                autoCorrect=\"on\"\n                className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n                dir=\"auto\"\n                onBlur={[Function]}\n                onChange={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onSelect={[Function]}\n                placeholder=\"xl\"\n                readOnly={false}\n                rows={1}\n                spellCheck={true}\n                style={\n                  Object {\n                    \"WebkitFlex\": 1,\n                    \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"cursor\": \"auto\",\n                    \"flex\": 1,\n                    \"fontSize\": \"18px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"lineHeight\": \"1.5em\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"outline\": \"none\",\n                    \"outlineWidth\": \"0px\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"12px\",\n                    \"paddingRight\": \"12px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"16px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderBottomWidth\": \"1px\",\n                  \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderLeftWidth\": \"1px\",\n                  \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderRightWidth\": \"1px\",\n                  \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"borderTopWidth\": \"1px\",\n                  \"flexDirection\": \"row\",\n                  \"height\": \"80px\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"overflowX\": \"auto\",\n                  \"overflowY\": \"auto\",\n                }\n              }\n            >\n              <textarea\n                aria-label=\"t2\"\n                autoCapitalize=\"sentences\"\n                autoComplete=\"on\"\n                autoCorrect=\"on\"\n                className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n                dir=\"auto\"\n                onBlur={[Function]}\n                onChange={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                onSelect={[Function]}\n                placeholder=\"2xl\"\n                readOnly={false}\n                rows={1}\n                spellCheck={true}\n                style={\n                  Object {\n                    \"WebkitFlex\": 1,\n                    \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"cursor\": \"auto\",\n                    \"flex\": 1,\n                    \"fontSize\": \"20px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"height\": \"100%\",\n                    \"lineHeight\": \"1.5em\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"outline\": \"none\",\n                    \"outlineWidth\": \"0px\",\n                    \"paddingBottom\": \"8px\",\n                    \"paddingLeft\": \"12px\",\n                    \"paddingRight\": \"12px\",\n                    \"paddingTop\": \"8px\",\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots TextArea Value Controlled 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"height\": \"80px\",\n            \"maxWidth\": \"300px\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"overflowX\": \"auto\",\n            \"overflowY\": \"auto\",\n            \"width\": \"75%\",\n          }\n        }\n      >\n        <textarea\n          autoCapitalize=\"sentences\"\n          autoComplete=\"on\"\n          autoCorrect=\"on\"\n          className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n          dir=\"auto\"\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          onSelect={[Function]}\n          readOnly={false}\n          rows={1}\n          spellCheck={true}\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"cursor\": \"auto\",\n              \"flex\": 1,\n              \"fontSize\": \"12px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"height\": \"100%\",\n              \"lineHeight\": \"1.5em\",\n              \"msFlex\": \"1 1 0%\",\n              \"outline\": \"none\",\n              \"outlineWidth\": \"0px\",\n              \"paddingBottom\": \"8px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"8px\",\n              \"width\": \"100%\",\n            }\n          }\n          value=\"Value Controlled\"\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Toast Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Show Toast\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Toast CloseToast 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"vertical\",\n          \"WebkitFlexDirection\": \"column\",\n          \"flexDirection\": \"column\",\n          \"msFlexDirection\": \"column\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Toast\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"1px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(8,145,178,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Close last toast\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"8px\",\n          }\n        }\n      />\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"borderTopWidth\": \"1px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(8,145,178,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Close all toasts\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Toast Custom Component 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Custom Toast\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Toast Custom Component with custom Id 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"10px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"10px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(250,250,250,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            Custom Toast\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Toast Prevent Duplicate 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Click me!\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Toast Status Recipies 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(22,163,74,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                success\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(220,38,38,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                error\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(2,132,199,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                info\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(234,88,12,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                warning\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Toast Toast Positions 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Bottom\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Top\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Top left\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Top right\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Bottom left\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Bottom right\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Toast Toast Ref 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Show Toast\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Toast Variants Recipies 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                solid\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                subtle\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                left-accent\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                top-accent\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                outline\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Tooltip Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onMouseEnter={[Function]}\n        onMouseLeave={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              More\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Tooltip Customizing 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onMouseEnter={[Function]}\n        onMouseLeave={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              More\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Tooltip Tooltip Positions 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignSelf\": \"flex-start\",\n          \"alignSelf\": \"flex-start\",\n          \"msFlexItemAlign\": \"start\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onMouseEnter={[Function]}\n        onMouseLeave={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitAlignSelf\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"alignSelf\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexItemAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"msGridRowAlign\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              ToolTip\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"24px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"marginLeft\": \"0px\",\n            \"marginRight\": \"0px\",\n          }\n        }\n      >\n        <select\n          onBlur={[Function]}\n          onChange={[Function]}\n          onFocus={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          onTouchStart={[Function]}\n          style={\n            Object {\n              \"MozAppearance\": \"none\",\n              \"WebkitAppearance\": \"none\",\n              \"appearance\": \"none\",\n              \"height\": \"100%\",\n              \"opacity\": 0,\n              \"position\": \"absolute\",\n              \"width\": \"100%\",\n              \"zIndex\": 1,\n            }\n          }\n          value=\"top left\"\n        >\n          <option\n            disabled={true}\n            value=\"__NativebasePlaceholder__\"\n          />\n          <option\n            value=\"top left\"\n          >\n            Top Left\n          </option>\n          <option\n            value=\"top\"\n          >\n            Top\n          </option>\n          <option\n            value=\"top right\"\n          >\n            Top Right\n          </option>\n          <option\n            value=\"right top\"\n          >\n            Right Top\n          </option>\n          <option\n            value=\"right\"\n          >\n            Right\n          </option>\n          <option\n            value=\"right bottom\"\n          >\n            Right Bottom\n          </option>\n          <option\n            value=\"bottom left\"\n          >\n            Bottom Left\n          </option>\n          <option\n            value=\"bottom\"\n          >\n            Bottom\n          </option>\n          <option\n            value=\"bottom right\"\n          >\n            Bottom Right\n          </option>\n          <option\n            value=\"left top\"\n          >\n            Left Top\n          </option>\n          <option\n            value=\"left\"\n          >\n            Left\n          </option>\n          <option\n            value=\"left bottom\"\n          >\n            Left Bottom\n          </option>\n        </select>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderBottomWidth\": \"1px\",\n              \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n              \"borderLeftWidth\": \"1px\",\n              \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n              \"borderRightWidth\": \"1px\",\n              \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"borderTopWidth\": \"1px\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"overflowX\": \"auto\",\n              \"overflowY\": \"auto\",\n            }\n          }\n        >\n          <input\n            aria-hidden={true}\n            autoCapitalize=\"sentences\"\n            autoComplete=\"on\"\n            autoCorrect=\"on\"\n            className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y r-pointerEvents-633pao\"\n            dir=\"auto\"\n            onBlur={[Function]}\n            onChange={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            onSelect={[Function]}\n            readOnly={true}\n            spellCheck={true}\n            style={\n              Object {\n                \"WebkitFlex\": 1,\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"cursor\": \"auto\",\n                \"flex\": 1,\n                \"fontSize\": \"12px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"height\": \"100%\",\n                \"lineHeight\": \"1.5em\",\n                \"msFlex\": \"1 1 0%\",\n                \"outline\": \"none\",\n                \"outlineWidth\": \"0px\",\n                \"paddingBottom\": \"8px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"8px\",\n                \"width\": \"100%\",\n              }\n            }\n            tabIndex=\"-1\"\n            type=\"text\"\n            value=\"Top Left\"\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n          />\n          <svg\n            role=\"img\"\n            stroke=\"\"\n            style={\n              Object {\n                \"color\": \"rgba(115,115,115,1.00)\",\n                \"height\": \"24px\",\n                \"marginRight\": \"12px\",\n                \"paddingBottom\": \"4px\",\n                \"paddingLeft\": \"4px\",\n                \"paddingRight\": \"4px\",\n                \"paddingTop\": \"4px\",\n                \"width\": \"24px\",\n              }\n            }\n            viewBox=\"0 0 24 24\"\n          >\n            <g>\n              <path\n                d=\"M20.2286 6L11.9973 14.3785L3.76862 6.00268L2 7.80293L12 18L22 7.80293L20.2286 6Z\"\n                fill=\"currentColor\"\n                stroke=\"\"\n              />\n            </g>\n          </svg>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Transitions Fade 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Show\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n r-pointerEvents-633pao\"\n        id=\"animatedComponent\"\n        style={\n          Object {\n            \"WebkitTransform\": \"translateY(0px) translateX(0px) scale(1) scaleX(1) scaleY(1) rotate(0deg)\",\n            \"opacity\": 0,\n            \"transform\": \"translateY(0px) translateX(0px) scale(1) scaleX(1) scaleY(1) rotate(0deg)\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(20,184,166,1.00)\",\n              \"borderBottomLeftRadius\": \"6px\",\n              \"borderBottomRightRadius\": \"6px\",\n              \"borderTopLeftRadius\": \"6px\",\n              \"borderTopRightRadius\": \"6px\",\n              \"display\": \"flex\",\n              \"height\": \"100px\",\n              \"justifyContent\": \"center\",\n              \"marginTop\": \"28px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"width\": \"200px\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(255,255,255,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            Fade\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Transitions ScaleFade 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Show\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n r-pointerEvents-633pao\"\n        id=\"animatedComponent\"\n        style={\n          Object {\n            \"WebkitTransform\": \"translateY(0px) translateX(0px) scale(0) scaleX(1) scaleY(1) rotate(0deg)\",\n            \"opacity\": 0,\n            \"transform\": \"translateY(0px) translateX(0px) scale(0) scaleX(1) scaleY(1) rotate(0deg)\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(20,184,166,1.00)\",\n              \"borderBottomLeftRadius\": \"6px\",\n              \"borderBottomRightRadius\": \"6px\",\n              \"borderTopLeftRadius\": \"6px\",\n              \"borderTopRightRadius\": \"6px\",\n              \"display\": \"flex\",\n              \"height\": \"100px\",\n              \"justifyContent\": \"center\",\n              \"marginTop\": \"28px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"width\": \"200px\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            ScaleFade\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Transitions Slide 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"height\": \"128px\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(55,65,81,0.30)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(0,0,0,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Check Internet Connection\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Transitions Slide wrapped inside parent 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"justifyContent\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"250px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"flex-end\",\n                \"WebkitBoxAlign\": \"end\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"flex-end\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"end\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"24px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.25em\",\n                }\n              }\n            >\n              Order\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"justify\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"space-between\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"space-between\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"justify\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"500\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Sub Total\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(148,163,184,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              $298.77\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"justify\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"space-between\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"space-between\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"justify\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"500\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Tax\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(148,163,184,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              $38.84\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"justify\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"space-between\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"space-between\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"justify\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"500\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Total Amount\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n            />\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(5,150,105,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              $337.61\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"marginTop\": \"8px\",\n              }\n            }\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"700\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Promo Code\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlex\": 1,\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderBottomWidth\": \"1px\",\n                    \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                    \"borderLeftWidth\": \"1px\",\n                    \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                    \"borderRightWidth\": \"1px\",\n                    \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"borderTopWidth\": \"1px\",\n                    \"flex\": 1,\n                    \"flexDirection\": \"row\",\n                    \"msFlex\": \"1 1 0%\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"overflowX\": \"auto\",\n                    \"overflowY\": \"auto\",\n                  }\n                }\n              >\n                <input\n                  autoCapitalize=\"sentences\"\n                  autoComplete=\"on\"\n                  autoCorrect=\"on\"\n                  className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n                  dir=\"auto\"\n                  onBlur={[Function]}\n                  onChange={[Function]}\n                  onFocus={[Function]}\n                  onKeyDown={[Function]}\n                  onSelect={[Function]}\n                  readOnly={false}\n                  spellCheck={true}\n                  style={\n                    Object {\n                      \"WebkitFlex\": 1,\n                      \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                      \"color\": \"rgba(23,23,23,1.00)\",\n                      \"cursor\": \"auto\",\n                      \"flex\": 1,\n                      \"fontSize\": \"12px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"height\": \"100%\",\n                      \"lineHeight\": \"1.5em\",\n                      \"msFlex\": \"1 1 0%\",\n                      \"outline\": \"none\",\n                      \"outlineWidth\": \"0px\",\n                      \"paddingBottom\": \"8px\",\n                      \"paddingLeft\": \"12px\",\n                      \"paddingRight\": \"12px\",\n                      \"paddingTop\": \"8px\",\n                      \"width\": \"100%\",\n                    }\n                  }\n                  type=\"text\"\n                />\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"width\": \"12px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n                onBlur={[Function]}\n                onClick={[Function]}\n                onContextMenu={[Function]}\n                onFocus={[Function]}\n                onKeyDown={[Function]}\n                role=\"button\"\n                style={\n                  Object {\n                    \"MozUserSelect\": \"none\",\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitBoxPack\": \"center\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"WebkitJustifyContent\": \"center\",\n                    \"WebkitUserSelect\": \"none\",\n                    \"alignItems\": \"center\",\n                    \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                    \"borderBottomLeftRadius\": \"4px\",\n                    \"borderBottomRightRadius\": \"4px\",\n                    \"borderBottomWidth\": \"1px\",\n                    \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                    \"borderLeftWidth\": \"1px\",\n                    \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                    \"borderRightWidth\": \"1px\",\n                    \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                    \"borderTopLeftRadius\": \"4px\",\n                    \"borderTopRightRadius\": \"4px\",\n                    \"borderTopWidth\": \"1px\",\n                    \"cursor\": \"pointer\",\n                    \"flexDirection\": \"row\",\n                    \"justifyContent\": \"center\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                    \"msFlexPack\": \"center\",\n                    \"msTouchAction\": \"manipulation\",\n                    \"msUserSelect\": \"none\",\n                    \"paddingBottom\": \"10px\",\n                    \"paddingLeft\": \"12px\",\n                    \"paddingRight\": \"12px\",\n                    \"paddingTop\": \"10px\",\n                    \"touchAction\": \"manipulation\",\n                    \"userSelect\": \"none\",\n                  }\n                }\n                tabIndex=\"0\"\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxDirection\": \"normal\",\n                      \"WebkitBoxOrient\": \"horizontal\",\n                      \"WebkitFlexDirection\": \"row\",\n                      \"alignItems\": \"center\",\n                      \"flexDirection\": \"row\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexDirection\": \"row\",\n                    }\n                  }\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                  >\n                    <div\n                      className=\"css-text-901oao\"\n                      dir=\"auto\"\n                      style={\n                        Object {\n                          \"color\": \"rgba(8,145,178,1.00)\",\n                          \"fontSize\": \"14px\",\n                          \"fontStyle\": \"normal\",\n                          \"fontWeight\": \"400\",\n                          \"letterSpacing\": \"0px\",\n                          \"lineHeight\": \"1.5em\",\n                        }\n                      }\n                    >\n                      Apply\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": \"8px\",\n                \"marginTop\": \"8px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Place Order\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Transitions SlideComposition 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"width\": \"250px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"flex-start\",\n              \"WebkitBoxAlign\": \"start\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"flex-start\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"start\",\n              \"msFlexPack\": \"center\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"flex-end\",\n                  \"WebkitBoxAlign\": \"end\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"flex-end\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"end\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"24px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.25em\",\n                  }\n                }\n              >\n                Order\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitBoxFlex\": 1,\n                    \"WebkitFlexGrow\": 1,\n                    \"flexGrow\": 1,\n                    \"msFlexPositive\": 1,\n                  }\n                }\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <svg\n                role=\"img\"\n                stroke=\"\"\n                style={\n                  Object {\n                    \"color\": \"rgba(234,88,12,1.00)\",\n                    \"height\": \"12px\",\n                    \"marginBottom\": \"6px\",\n                    \"width\": \"12px\",\n                  }\n                }\n                viewBox=\"0 0 24 24\"\n              >\n                <g>\n                  <path\n                    d=\"M11.9836 0.00267822C8.77744 0.0551662 5.72075 1.36728 3.47427 3.65538C2.35024 4.77447 1.46338 6.10869 0.866705 7.57831C0.270027 9.04793 -0.0242179 10.6228 0.00155827 12.2087C-0.000286057 13.7583 0.303697 15.2931 0.896087 16.7251C1.48848 18.1571 2.35763 19.458 3.45373 20.5535C4.54983 21.6489 5.85133 22.5173 7.28365 23.1089C8.71596 23.7004 10.2509 24.0035 11.8006 24.0007H12.0146C15.2217 23.9677 18.2847 22.6638 20.5316 20.3751C22.7785 18.0864 24.0257 14.9999 23.9996 11.7927C24.0033 10.2243 23.6933 8.6709 23.0879 7.22398C22.4825 5.77706 21.5939 4.4658 20.4744 3.36731C19.3548 2.26882 18.0269 1.40527 16.5688 0.827453C15.1106 0.249636 13.5517 -0.0307856 11.9836 0.00267822ZM10.5007 16.5433C10.4935 16.3473 10.5254 16.1517 10.5947 15.9682C10.6639 15.7846 10.7691 15.6167 10.904 15.4742C11.0389 15.3318 11.2009 15.2177 11.3804 15.1386C11.5599 15.0594 11.7534 15.0169 11.9496 15.0135H11.9766C12.3712 15.0142 12.7501 15.1677 13.034 15.4417C13.3179 15.7157 13.4847 16.089 13.4995 16.4833C13.5068 16.6794 13.4749 16.875 13.4057 17.0586C13.3365 17.2423 13.2314 17.4102 13.0965 17.5527C12.9615 17.6952 12.7995 17.8093 12.6199 17.8884C12.4403 17.9674 12.2468 18.0099 12.0506 18.0132H12.0236C11.6291 18.0119 11.2505 17.8583 10.9667 17.5844C10.6829 17.3105 10.5159 16.9375 10.5007 16.5433ZM11.0007 12.5017V6.50215C11.0007 6.23695 11.106 5.98262 11.2935 5.7951C11.481 5.60758 11.7354 5.50223 12.0006 5.50223C12.2658 5.50223 12.5201 5.60758 12.7076 5.7951C12.8951 5.98262 13.0005 6.23695 13.0005 6.50215V12.5017C13.0005 12.7669 12.8951 13.0212 12.7076 13.2087C12.5201 13.3962 12.2658 13.5016 12.0006 13.5016C11.7354 13.5016 11.481 13.3962 11.2935 13.2087C11.106 13.0212 11.0007 12.7669 11.0007 12.5017Z\"\n                    fill=\"currentColor\"\n                    stroke=\"\"\n                  />\n                </g>\n              </svg>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"justify\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"space-between\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"space-between\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"justify\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Sub Total\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(148,163,184,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                $298.77\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"justify\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"space-between\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"space-between\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"justify\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Tax\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(148,163,184,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                $38.84\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"justify\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"space-between\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"space-between\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"justify\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"500\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Total Amount\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(34,197,94,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                $337.61\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"marginTop\": \"8px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"700\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Promo Code\n              </div>\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"height\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxDirection\": \"normal\",\n                      \"WebkitBoxOrient\": \"horizontal\",\n                      \"WebkitFlex\": 1,\n                      \"WebkitFlexDirection\": \"row\",\n                      \"alignItems\": \"center\",\n                      \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                      \"borderBottomLeftRadius\": \"4px\",\n                      \"borderBottomRightRadius\": \"4px\",\n                      \"borderBottomWidth\": \"1px\",\n                      \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                      \"borderLeftWidth\": \"1px\",\n                      \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                      \"borderRightWidth\": \"1px\",\n                      \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                      \"borderTopLeftRadius\": \"4px\",\n                      \"borderTopRightRadius\": \"4px\",\n                      \"borderTopWidth\": \"1px\",\n                      \"flex\": 1,\n                      \"flexDirection\": \"row\",\n                      \"msFlex\": \"1 1 0%\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexDirection\": \"row\",\n                      \"overflowX\": \"auto\",\n                      \"overflowY\": \"auto\",\n                    }\n                  }\n                >\n                  <input\n                    autoCapitalize=\"sentences\"\n                    autoComplete=\"on\"\n                    autoCorrect=\"on\"\n                    className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n                    dir=\"auto\"\n                    onBlur={[Function]}\n                    onChange={[Function]}\n                    onFocus={[Function]}\n                    onKeyDown={[Function]}\n                    onSelect={[Function]}\n                    readOnly={false}\n                    spellCheck={true}\n                    style={\n                      Object {\n                        \"WebkitFlex\": 1,\n                        \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                        \"color\": \"rgba(23,23,23,1.00)\",\n                        \"cursor\": \"auto\",\n                        \"flex\": 1,\n                        \"fontSize\": \"12px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"height\": \"100%\",\n                        \"lineHeight\": \"1.5em\",\n                        \"msFlex\": \"1 1 0%\",\n                        \"outline\": \"none\",\n                        \"outlineWidth\": \"0px\",\n                        \"paddingBottom\": \"8px\",\n                        \"paddingLeft\": \"12px\",\n                        \"paddingRight\": \"12px\",\n                        \"paddingTop\": \"8px\",\n                        \"width\": \"100%\",\n                      }\n                    }\n                    type=\"text\"\n                  />\n                </div>\n                <div\n                  className=\"css-view-1dbjc4n\"\n                  style={\n                    Object {\n                      \"width\": \"12px\",\n                    }\n                  }\n                />\n                <div\n                  className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n                  onBlur={[Function]}\n                  onClick={[Function]}\n                  onContextMenu={[Function]}\n                  onFocus={[Function]}\n                  onKeyDown={[Function]}\n                  role=\"button\"\n                  style={\n                    Object {\n                      \"MozUserSelect\": \"none\",\n                      \"WebkitAlignItems\": \"center\",\n                      \"WebkitBoxAlign\": \"center\",\n                      \"WebkitBoxDirection\": \"normal\",\n                      \"WebkitBoxOrient\": \"horizontal\",\n                      \"WebkitBoxPack\": \"center\",\n                      \"WebkitFlexDirection\": \"row\",\n                      \"WebkitJustifyContent\": \"center\",\n                      \"WebkitUserSelect\": \"none\",\n                      \"alignItems\": \"center\",\n                      \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                      \"borderBottomLeftRadius\": \"4px\",\n                      \"borderBottomRightRadius\": \"4px\",\n                      \"borderBottomWidth\": \"1px\",\n                      \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                      \"borderLeftWidth\": \"1px\",\n                      \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                      \"borderRightWidth\": \"1px\",\n                      \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                      \"borderTopLeftRadius\": \"4px\",\n                      \"borderTopRightRadius\": \"4px\",\n                      \"borderTopWidth\": \"1px\",\n                      \"cursor\": \"pointer\",\n                      \"flexDirection\": \"row\",\n                      \"justifyContent\": \"center\",\n                      \"msFlexAlign\": \"center\",\n                      \"msFlexDirection\": \"row\",\n                      \"msFlexPack\": \"center\",\n                      \"msTouchAction\": \"manipulation\",\n                      \"msUserSelect\": \"none\",\n                      \"paddingBottom\": \"10px\",\n                      \"paddingLeft\": \"12px\",\n                      \"paddingRight\": \"12px\",\n                      \"paddingTop\": \"10px\",\n                      \"touchAction\": \"manipulation\",\n                      \"userSelect\": \"none\",\n                    }\n                  }\n                  tabIndex=\"0\"\n                >\n                  <div\n                    className=\"css-view-1dbjc4n\"\n                    style={\n                      Object {\n                        \"WebkitAlignItems\": \"center\",\n                        \"WebkitBoxAlign\": \"center\",\n                        \"WebkitBoxDirection\": \"normal\",\n                        \"WebkitBoxOrient\": \"horizontal\",\n                        \"WebkitFlexDirection\": \"row\",\n                        \"alignItems\": \"center\",\n                        \"flexDirection\": \"row\",\n                        \"msFlexAlign\": \"center\",\n                        \"msFlexDirection\": \"row\",\n                      }\n                    }\n                  >\n                    <div\n                      className=\"css-view-1dbjc4n\"\n                    >\n                      <div\n                        className=\"css-text-901oao\"\n                        dir=\"auto\"\n                        style={\n                          Object {\n                            \"color\": \"rgba(8,145,178,1.00)\",\n                            \"fontSize\": \"14px\",\n                            \"fontStyle\": \"normal\",\n                            \"fontWeight\": \"400\",\n                            \"letterSpacing\": \"0px\",\n                            \"lineHeight\": \"1.5em\",\n                          }\n                        }\n                      >\n                        Apply\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n              onBlur={[Function]}\n              onClick={[Function]}\n              onContextMenu={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              role=\"button\"\n              style={\n                Object {\n                  \"MozUserSelect\": \"none\",\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"WebkitUserSelect\": \"none\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                  \"borderBottomLeftRadius\": \"4px\",\n                  \"borderBottomRightRadius\": \"4px\",\n                  \"borderTopLeftRadius\": \"4px\",\n                  \"borderTopRightRadius\": \"4px\",\n                  \"cursor\": \"pointer\",\n                  \"flexDirection\": \"row\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": \"8px\",\n                  \"marginTop\": \"8px\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                  \"msFlexPack\": \"center\",\n                  \"msTouchAction\": \"manipulation\",\n                  \"msUserSelect\": \"none\",\n                  \"paddingBottom\": \"10px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"10px\",\n                  \"touchAction\": \"manipulation\",\n                  \"userSelect\": \"none\",\n                }\n              }\n              tabIndex=\"0\"\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"WebkitAlignItems\": \"center\",\n                    \"WebkitBoxAlign\": \"center\",\n                    \"WebkitBoxDirection\": \"normal\",\n                    \"WebkitBoxOrient\": \"horizontal\",\n                    \"WebkitFlexDirection\": \"row\",\n                    \"alignItems\": \"center\",\n                    \"flexDirection\": \"row\",\n                    \"msFlexAlign\": \"center\",\n                    \"msFlexDirection\": \"row\",\n                  }\n                }\n              >\n                <div\n                  className=\"css-view-1dbjc4n\"\n                >\n                  <div\n                    className=\"css-text-901oao\"\n                    dir=\"auto\"\n                    style={\n                      Object {\n                        \"color\": \"rgba(250,250,250,1.00)\",\n                        \"fontSize\": \"14px\",\n                        \"fontStyle\": \"normal\",\n                        \"fontWeight\": \"400\",\n                        \"letterSpacing\": \"0px\",\n                        \"lineHeight\": \"1.5em\",\n                      }\n                    }\n                  >\n                    Place Order\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Transitions SlideFade 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Show\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n r-pointerEvents-633pao\"\n        id=\"animatedComponent\"\n        style={\n          Object {\n            \"WebkitTransform\": \"translateY(0px) translateX(-200px) scale(1) scaleX(1) scaleY(1) rotate(0deg)\",\n            \"opacity\": 0,\n            \"transform\": \"translateY(0px) translateX(-200px) scale(1) scaleX(1) scaleY(1) rotate(0deg)\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(20,184,166,1.00)\",\n              \"borderBottomLeftRadius\": \"6px\",\n              \"borderBottomRightRadius\": \"6px\",\n              \"borderTopLeftRadius\": \"6px\",\n              \"borderTopRightRadius\": \"6px\",\n              \"display\": \"flex\",\n              \"height\": \"100px\",\n              \"justifyContent\": \"center\",\n              \"marginTop\": \"16px\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"position\": \"absolute\",\n              \"top\": \"16px\",\n              \"width\": \"200px\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(255,255,255,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            SlideFade\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots Transitions Stagger 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"alignItems\": \"center\",\n            \"minHeight\": \"220px\",\n            \"msFlexAlign\": \"center\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n r-pointerEvents-633pao\"\n          id=\"animatedComponent\"\n          style={\n            Object {\n              \"WebkitTransform\": \"translateY(34px) translateX(0px) scale(0) scaleX(1) scaleY(1) rotate(0deg)\",\n              \"opacity\": 0,\n              \"transform\": \"translateY(34px) translateX(0px) scale(0) scaleX(1) scaleY(1) rotate(0deg)\",\n            }\n          }\n        >\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(99,102,241,1.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": \"16px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"10px\",\n                \"paddingRight\": \"10px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n r-pointerEvents-633pao\"\n          id=\"animatedComponent\"\n          style={\n            Object {\n              \"WebkitTransform\": \"translateY(34px) translateX(0px) scale(0) scaleX(1) scaleY(1) rotate(0deg)\",\n              \"opacity\": 0,\n              \"transform\": \"translateY(34px) translateX(0px) scale(0) scaleX(1) scaleY(1) rotate(0deg)\",\n            }\n          }\n        >\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(250,204,21,1.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": \"16px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"10px\",\n                \"paddingRight\": \"10px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n r-pointerEvents-633pao\"\n          id=\"animatedComponent\"\n          style={\n            Object {\n              \"WebkitTransform\": \"translateY(34px) translateX(0px) scale(0) scaleX(1) scaleY(1) rotate(0deg)\",\n              \"opacity\": 0,\n              \"transform\": \"translateY(34px) translateX(0px) scale(0) scaleX(1) scaleY(1) rotate(0deg)\",\n            }\n          }\n        >\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(45,212,191,1.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": \"16px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"10px\",\n                \"paddingRight\": \"10px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n            />\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n r-pointerEvents-633pao\"\n          id=\"animatedComponent\"\n          style={\n            Object {\n              \"WebkitTransform\": \"translateY(34px) translateX(0px) scale(0) scaleX(1) scaleY(1) rotate(0deg)\",\n              \"opacity\": 0,\n              \"transform\": \"translateY(34px) translateX(0px) scale(0) scaleX(1) scaleY(1) rotate(0deg)\",\n            }\n          }\n        >\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(239,68,68,1.00)\",\n                \"borderBottomLeftRadius\": \"9999px\",\n                \"borderBottomRightRadius\": \"9999px\",\n                \"borderTopLeftRadius\": \"9999px\",\n                \"borderTopRightRadius\": \"9999px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": \"16px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"10px\",\n                \"paddingRight\": \"10px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n            />\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(34,211,238,1.00)\",\n              \"borderBottomLeftRadius\": \"9999px\",\n              \"borderBottomRightRadius\": \"9999px\",\n              \"borderTopLeftRadius\": \"9999px\",\n              \"borderTopRightRadius\": \"9999px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"12px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"12px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots VStack Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"alignItems\": \"center\",\n          \"msFlexAlign\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(165,180,252,1.00)\",\n            \"borderBottomLeftRadius\": \"6px\",\n            \"borderBottomRightRadius\": \"6px\",\n            \"borderTopLeftRadius\": \"6px\",\n            \"borderTopRightRadius\": \"6px\",\n            \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n            \"display\": \"flex\",\n            \"height\": \"80px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"256px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(99,102,241,1.00)\",\n            \"borderBottomLeftRadius\": \"6px\",\n            \"borderBottomRightRadius\": \"6px\",\n            \"borderTopLeftRadius\": \"6px\",\n            \"borderTopRightRadius\": \"6px\",\n            \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n            \"display\": \"flex\",\n            \"height\": \"80px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"256px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"height\": \"16px\",\n          }\n        }\n      />\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(67,56,202,1.00)\",\n            \"borderBottomLeftRadius\": \"6px\",\n            \"borderBottomRightRadius\": \"6px\",\n            \"borderTopLeftRadius\": \"6px\",\n            \"borderTopRightRadius\": \"6px\",\n            \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n            \"display\": \"flex\",\n            \"height\": \"80px\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n            \"width\": \"256px\",\n          }\n        }\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots View Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"24px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"700\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.25em\",\n          }\n        }\n      >\n        A component library for the\n        <span\n          className=\"css-text-901oao css-textHasAncestor-16my406\"\n          style={\n            Object {\n              \"color\": \"rgba(16,185,129,1.00)\",\n              \"fontSize\": \"24px\",\n              \"fontWeight\": \"700\",\n              \"lineHeight\": \"1.25em\",\n            }\n          }\n        >\n           React Ecosystem\n        </span>\n      </div>\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"500\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n            \"marginTop\": \"12px\",\n          }\n        }\n      >\n        NativeBase is a simple, modular and accessible component library that gives you building blocks to build you React applications.\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots ZStack Basic ZStack 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"height\": \"160px\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"marginTop\": \"-128px\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"marginLeft\": \"-50px\",\n              \"marginTop\": \"12px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(14,116,144,1.00)\",\n                \"borderBottomLeftRadius\": \"8px\",\n                \"borderBottomRightRadius\": \"8px\",\n                \"borderTopLeftRadius\": \"8px\",\n                \"borderTopRightRadius\": \"8px\",\n                \"boxShadow\": \"0px 2px 2.62px rgba(0,0,0,0.23)\",\n                \"height\": \"80px\",\n                \"position\": \"absolute\",\n                \"width\": \"80px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(6,182,212,1.00)\",\n                \"borderBottomLeftRadius\": \"8px\",\n                \"borderBottomRightRadius\": \"8px\",\n                \"borderTopLeftRadius\": \"8px\",\n                \"borderTopRightRadius\": \"8px\",\n                \"boxShadow\": \"0px 3px 4.65px rgba(0,0,0,0.27)\",\n                \"height\": \"80px\",\n                \"marginLeft\": \"20px\",\n                \"marginTop\": \"20px\",\n                \"position\": \"absolute\",\n                \"width\": \"80px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(103,232,249,1.00)\",\n                \"borderBottomLeftRadius\": \"8px\",\n                \"borderBottomRightRadius\": \"8px\",\n                \"borderTopLeftRadius\": \"8px\",\n                \"borderTopRightRadius\": \"8px\",\n                \"boxShadow\": \"0px 4px 4.65px rgba(0,0,0,0.30)\",\n                \"height\": \"80px\",\n                \"marginLeft\": \"40px\",\n                \"marginTop\": \"40px\",\n                \"position\": \"absolute\",\n                \"width\": \"80px\",\n              }\n            }\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots ZStack ZStack items centered 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"height\": \"384px\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitJustifyContent\": \"center\",\n            \"alignItems\": \"center\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexPack\": \"center\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(67,56,202,1.00)\",\n              \"borderBottomLeftRadius\": \"8px\",\n              \"borderBottomRightRadius\": \"8px\",\n              \"borderTopLeftRadius\": \"8px\",\n              \"borderTopRightRadius\": \"8px\",\n              \"height\": \"256px\",\n              \"position\": \"absolute\",\n              \"width\": \"256px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(99,102,241,1.00)\",\n              \"borderBottomLeftRadius\": \"8px\",\n              \"borderBottomRightRadius\": \"8px\",\n              \"borderTopLeftRadius\": \"8px\",\n              \"borderTopRightRadius\": \"8px\",\n              \"boxShadow\": \"0px 4px 5.46px rgba(0,0,0,0.32)\",\n              \"height\": \"192px\",\n              \"position\": \"absolute\",\n              \"width\": \"192px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"backgroundColor\": \"rgba(165,180,252,1.00)\",\n              \"borderBottomLeftRadius\": \"8px\",\n              \"borderBottomRightRadius\": \"8px\",\n              \"borderTopLeftRadius\": \"8px\",\n              \"borderTopRightRadius\": \"8px\",\n              \"boxShadow\": \"0px 4px 5.46px rgba(0,0,0,0.32)\",\n              \"height\": \"128px\",\n              \"position\": \"absolute\",\n              \"width\": \"128px\",\n            }\n          }\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots useAccessibleColors Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"vertical\",\n            \"WebkitFlexDirection\": \"column\",\n            \"flexDirection\": \"column\",\n            \"msFlexDirection\": \"column\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n            }\n          }\n        >\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(110,231,183,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": \"4px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(255,255,255,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Save\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"12px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n            }\n          }\n        >\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(52,211,153,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": \"4px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(255,255,255,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Save\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"12px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n            }\n          }\n        >\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(16,185,129,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": \"4px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(255,255,255,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Save\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"12px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n            }\n          }\n        >\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(5,150,105,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": \"4px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(255,255,255,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Save\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"12px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n            }\n          }\n        >\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(4,120,87,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": \"4px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(255,255,255,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Save\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"12px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"display\": \"flex\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n            }\n          }\n        >\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(6,95,70,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"marginBottom\": \"4px\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(255,255,255,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Save\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"flexDirection\": \"row\",\n            \"marginTop\": \"24px\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"fontSize\": \"14px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n            }\n          }\n        >\n          Toggle Accessible Colors\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"width\": \"12px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitUserSelect\": \"none\",\n              \"cursor\": \"pointer\",\n              \"height\": \"20px\",\n              \"msUserSelect\": \"none\",\n              \"userSelect\": \"none\",\n              \"width\": \"40px\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitTransitionDuration\": \"0.1s\",\n                \"backgroundColor\": \"rgba(212,212,212,1.00)\",\n                \"borderBottomLeftRadius\": \"10px\",\n                \"borderBottomRightRadius\": \"10px\",\n                \"borderTopLeftRadius\": \"10px\",\n                \"borderTopRightRadius\": \"10px\",\n                \"bottom\": \"0px\",\n                \"forcedColorAdjust\": \"none\",\n                \"height\": \"70%\",\n                \"left\": \"0px\",\n                \"marginBottom\": \"auto\",\n                \"marginLeft\": \"auto\",\n                \"marginRight\": \"auto\",\n                \"marginTop\": \"auto\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"transitionDuration\": \"0.1s\",\n                \"width\": \"100%\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignSelf\": \"flex-start\",\n                \"WebkitTransform\": \"translateZ(0px)\",\n                \"WebkitTransitionDuration\": \"0.1s\",\n                \"alignSelf\": \"flex-start\",\n                \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n                \"borderBottomLeftRadius\": \"100%\",\n                \"borderBottomRightRadius\": \"100%\",\n                \"borderTopLeftRadius\": \"100%\",\n                \"borderTopRightRadius\": \"100%\",\n                \"boxShadow\": \"0px 1px 3px rgba(0,0,0,0.5)\",\n                \"forcedColorAdjust\": \"none\",\n                \"height\": \"20px\",\n                \"left\": \"0%\",\n                \"marginLeft\": \"0px\",\n                \"msFlexItemAlign\": \"start\",\n                \"transform\": \"translateZ(0px)\",\n                \"transitionDuration\": \"0.1s\",\n                \"width\": \"20px\",\n              }\n            }\n          />\n          <input\n            checked={false}\n            disabled={false}\n            onBlur={[Function]}\n            onChange={[Function]}\n            onFocus={[Function]}\n            role=\"switch\"\n            style={\n              Object {\n                \"bottom\": \"0px\",\n                \"cursor\": \"inherit\",\n                \"height\": \"100%\",\n                \"left\": \"0px\",\n                \"marginBottom\": \"0px\",\n                \"marginLeft\": \"0px\",\n                \"marginRight\": \"0px\",\n                \"marginTop\": \"0px\",\n                \"opacity\": 0,\n                \"paddingBottom\": \"0px\",\n                \"paddingLeft\": \"0px\",\n                \"paddingRight\": \"0px\",\n                \"paddingTop\": \"0px\",\n                \"position\": \"absolute\",\n                \"right\": \"0px\",\n                \"top\": \"0px\",\n                \"width\": \"100%\",\n              }\n            }\n            type=\"checkbox\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots useBreakpointValue Usage 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n r-scrollbarWidth-2eszeu\"\n      onScroll={[Function]}\n      onTouchEnd={[Function]}\n      onTouchMove={[Function]}\n      onTouchStart={[Function]}\n      onWheel={[Function]}\n      style={\n        Object {\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxFlex\": 1,\n          \"WebkitBoxOrient\": \"vertical\",\n          \"WebkitFlexDirection\": \"column\",\n          \"WebkitFlexGrow\": 1,\n          \"WebkitFlexShrink\": 1,\n          \"WebkitOverflowScrolling\": \"touch\",\n          \"WebkitTransform\": \"translateZ(0px)\",\n          \"flexDirection\": \"column\",\n          \"flexGrow\": 1,\n          \"flexShrink\": 1,\n          \"msFlexDirection\": \"column\",\n          \"msFlexNegative\": 1,\n          \"msFlexPositive\": 1,\n          \"overflowX\": \"hidden\",\n          \"overflowY\": \"auto\",\n          \"transform\": \"translateZ(0px)\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"dataSet\": Object {},\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitJustifyContent\": \"center\",\n              \"alignItems\": \"center\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexPack\": \"center\",\n              \"paddingBottom\": \"32px\",\n              \"paddingTop\": \"32px\",\n            }\n          }\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(23,23,23,1.00)\",\n                \"fontSize\": \"24px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"700\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.25em\",\n              }\n            }\n          >\n            Why us?\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"32px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"vertical\",\n                \"WebkitFlexDirection\": \"column\",\n                \"flexDirection\": \"column\",\n                \"msFlexDirection\": \"column\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(165,243,252,1.00)\",\n                  \"borderBottomLeftRadius\": \"12px\",\n                  \"borderBottomRightRadius\": \"12px\",\n                  \"borderTopLeftRadius\": \"12px\",\n                  \"borderTopRightRadius\": \"12px\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": \"12px\",\n                  \"marginLeft\": \"12px\",\n                  \"marginRight\": \"12px\",\n                  \"marginTop\": \"12px\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"paddingBottom\": \"12px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"12px\",\n                  \"width\": \"140px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"height\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"18px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                    \"textAlign\": \"center\",\n                  }\n                }\n              >\n                Secure Checkout\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(165,243,252,1.00)\",\n                  \"borderBottomLeftRadius\": \"12px\",\n                  \"borderBottomRightRadius\": \"12px\",\n                  \"borderTopLeftRadius\": \"12px\",\n                  \"borderTopRightRadius\": \"12px\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": \"12px\",\n                  \"marginLeft\": \"12px\",\n                  \"marginRight\": \"12px\",\n                  \"marginTop\": \"12px\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"paddingBottom\": \"12px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"12px\",\n                  \"width\": \"140px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"height\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"18px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                    \"textAlign\": \"center\",\n                  }\n                }\n              >\n                Secure Checkout\n              </div>\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxPack\": \"center\",\n                  \"WebkitJustifyContent\": \"center\",\n                  \"alignItems\": \"center\",\n                  \"backgroundColor\": \"rgba(165,243,252,1.00)\",\n                  \"borderBottomLeftRadius\": \"12px\",\n                  \"borderBottomRightRadius\": \"12px\",\n                  \"borderTopLeftRadius\": \"12px\",\n                  \"borderTopRightRadius\": \"12px\",\n                  \"justifyContent\": \"center\",\n                  \"marginBottom\": \"12px\",\n                  \"marginLeft\": \"12px\",\n                  \"marginRight\": \"12px\",\n                  \"marginTop\": \"12px\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexPack\": \"center\",\n                  \"paddingBottom\": \"12px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"12px\",\n                  \"width\": \"140px\",\n                }\n              }\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n              />\n              <div\n                className=\"css-view-1dbjc4n\"\n                style={\n                  Object {\n                    \"height\": \"8px\",\n                  }\n                }\n              />\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(23,23,23,1.00)\",\n                    \"fontSize\": \"18px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                    \"textAlign\": \"center\",\n                  }\n                }\n              >\n                Fast Turn Around\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots useClipboard Usage 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"maxWidth\": \"300px\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"flexDirection\": \"row\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"overflowX\": \"auto\",\n                \"overflowY\": \"auto\",\n              }\n            }\n          >\n            <input\n              autoCapitalize=\"sentences\"\n              autoComplete=\"on\"\n              autoCorrect=\"on\"\n              className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n              dir=\"auto\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onSelect={[Function]}\n              placeholder=\"Copy From\"\n              readOnly={false}\n              spellCheck={true}\n              style={\n                Object {\n                  \"WebkitFlex\": 1,\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"cursor\": \"auto\",\n                  \"flex\": 1,\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"100%\",\n                  \"lineHeight\": \"1.5em\",\n                  \"msFlex\": \"1 1 0%\",\n                  \"outline\": \"none\",\n                  \"outlineWidth\": \"0px\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"width\": \"100%\",\n                }\n              }\n              type=\"text\"\n              value=\"Hello\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Copy\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"8px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"flexDirection\": \"row\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"borderBottomColor\": \"rgba(212,212,212,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderBottomWidth\": \"1px\",\n                \"borderLeftColor\": \"rgba(212,212,212,1.00)\",\n                \"borderLeftWidth\": \"1px\",\n                \"borderRightColor\": \"rgba(212,212,212,1.00)\",\n                \"borderRightWidth\": \"1px\",\n                \"borderTopColor\": \"rgba(212,212,212,1.00)\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"borderTopWidth\": \"1px\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"overflowX\": \"auto\",\n                \"overflowY\": \"auto\",\n              }\n            }\n          >\n            <input\n              autoCapitalize=\"sentences\"\n              autoComplete=\"on\"\n              autoCorrect=\"on\"\n              className=\"css-textinput-11aywtz r-placeholderTextColor-uek9y\"\n              dir=\"auto\"\n              onBlur={[Function]}\n              onChange={[Function]}\n              onFocus={[Function]}\n              onKeyDown={[Function]}\n              onSelect={[Function]}\n              placeholder=\"Paste Here\"\n              readOnly={false}\n              spellCheck={true}\n              style={\n                Object {\n                  \"WebkitFlex\": 1,\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"color\": \"rgba(23,23,23,1.00)\",\n                  \"cursor\": \"auto\",\n                  \"flex\": 1,\n                  \"fontSize\": \"12px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"height\": \"100%\",\n                  \"lineHeight\": \"1.5em\",\n                  \"msFlex\": \"1 1 0%\",\n                  \"outline\": \"none\",\n                  \"outlineWidth\": \"0px\",\n                  \"paddingBottom\": \"8px\",\n                  \"paddingLeft\": \"12px\",\n                  \"paddingRight\": \"12px\",\n                  \"paddingTop\": \"8px\",\n                  \"width\": \"100%\",\n                }\n              }\n              type=\"text\"\n              value=\"\"\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"width\": \"12px\",\n              }\n            }\n          />\n          <div\n            className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n            onBlur={[Function]}\n            onClick={[Function]}\n            onContextMenu={[Function]}\n            onFocus={[Function]}\n            onKeyDown={[Function]}\n            role=\"button\"\n            style={\n              Object {\n                \"MozUserSelect\": \"none\",\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitBoxPack\": \"center\",\n                \"WebkitFlexDirection\": \"row\",\n                \"WebkitJustifyContent\": \"center\",\n                \"WebkitUserSelect\": \"none\",\n                \"alignItems\": \"center\",\n                \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n                \"borderBottomLeftRadius\": \"4px\",\n                \"borderBottomRightRadius\": \"4px\",\n                \"borderTopLeftRadius\": \"4px\",\n                \"borderTopRightRadius\": \"4px\",\n                \"cursor\": \"pointer\",\n                \"flexDirection\": \"row\",\n                \"justifyContent\": \"center\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n                \"msFlexPack\": \"center\",\n                \"msTouchAction\": \"manipulation\",\n                \"msUserSelect\": \"none\",\n                \"paddingBottom\": \"10px\",\n                \"paddingLeft\": \"12px\",\n                \"paddingRight\": \"12px\",\n                \"paddingTop\": \"10px\",\n                \"touchAction\": \"manipulation\",\n                \"userSelect\": \"none\",\n              }\n            }\n            tabIndex=\"0\"\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitAlignItems\": \"center\",\n                  \"WebkitBoxAlign\": \"center\",\n                  \"WebkitBoxDirection\": \"normal\",\n                  \"WebkitBoxOrient\": \"horizontal\",\n                  \"WebkitFlexDirection\": \"row\",\n                  \"alignItems\": \"center\",\n                  \"flexDirection\": \"row\",\n                  \"msFlexAlign\": \"center\",\n                  \"msFlexDirection\": \"row\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n              >\n                <div\n                  className=\"css-text-901oao\"\n                  dir=\"auto\"\n                  style={\n                    Object {\n                      \"color\": \"rgba(250,250,250,1.00)\",\n                      \"fontSize\": \"14px\",\n                      \"fontStyle\": \"normal\",\n                      \"fontWeight\": \"400\",\n                      \"letterSpacing\": \"0px\",\n                      \"lineHeight\": \"1.5em\",\n                    }\n                  }\n                >\n                  Paste\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots useColorMode Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitFlex\": 1,\n        \"flex\": 1,\n        \"msFlex\": \"1 1 0%\",\n      }\n    }\n  >\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitFlex\": 1,\n            \"backgroundColor\": \"rgba(250,250,249,1.00)\",\n            \"flex\": 1,\n            \"marginTop\": \"40px\",\n            \"maxWidth\": \"300px\",\n            \"msFlex\": \"1 1 0%\",\n            \"paddingBottom\": \"16px\",\n            \"paddingLeft\": \"16px\",\n            \"paddingRight\": \"16px\",\n            \"paddingTop\": \"16px\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"display\": \"flex\",\n              \"fontSize\": \"18px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n              \"marginBottom\": \"80px\",\n            }\n          }\n        >\n          The active color mode is\n           \n          <span\n            className=\"css-text-901oao css-textHasAncestor-16my406\"\n            style={\n              Object {\n                \"fontSize\": \"18px\",\n                \"fontWeight\": \"700\",\n              }\n            }\n          >\n            light\n          </span>\n        </div>\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"height\": \"40px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Toggle\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots useColorModeValue Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitFlex\": 1,\n        \"flex\": 1,\n        \"msFlex\": \"1 1 0%\",\n      }\n    }\n  >\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitFlex\": 1,\n            \"backgroundColor\": \"rgba(250,250,249,1.00)\",\n            \"flex\": 1,\n            \"marginTop\": \"40px\",\n            \"maxWidth\": \"300px\",\n            \"msFlex\": \"1 1 0%\",\n            \"paddingBottom\": \"16px\",\n            \"paddingLeft\": \"16px\",\n            \"paddingRight\": \"16px\",\n            \"paddingTop\": \"16px\",\n            \"width\": \"100%\",\n          }\n        }\n      >\n        <div\n          className=\"css-text-901oao\"\n          dir=\"auto\"\n          style={\n            Object {\n              \"color\": \"rgba(23,23,23,1.00)\",\n              \"display\": \"flex\",\n              \"fontSize\": \"18px\",\n              \"fontStyle\": \"normal\",\n              \"fontWeight\": \"400\",\n              \"letterSpacing\": \"0px\",\n              \"lineHeight\": \"1.5em\",\n              \"marginBottom\": \"80px\",\n            }\n          }\n        >\n          The active color mode is\n           \n          <span\n            className=\"css-text-901oao css-textHasAncestor-16my406\"\n            style={\n              Object {\n                \"fontSize\": \"18px\",\n                \"fontWeight\": \"700\",\n              }\n            }\n          >\n            Light\n          </span>\n        </div>\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"height\": \"40px\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(250,250,250,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                Toggle\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots useContrastText Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n      >\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(24,24,27,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(255,255,255,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                NativeBase\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"height\": \"16px\",\n            }\n          }\n        />\n        <div\n          className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onContextMenu={[Function]}\n          onFocus={[Function]}\n          onKeyDown={[Function]}\n          role=\"button\"\n          style={\n            Object {\n              \"MozUserSelect\": \"none\",\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitBoxPack\": \"center\",\n              \"WebkitFlexDirection\": \"row\",\n              \"WebkitJustifyContent\": \"center\",\n              \"WebkitUserSelect\": \"none\",\n              \"alignItems\": \"center\",\n              \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n              \"borderBottomLeftRadius\": \"4px\",\n              \"borderBottomRightRadius\": \"4px\",\n              \"borderTopLeftRadius\": \"4px\",\n              \"borderTopRightRadius\": \"4px\",\n              \"cursor\": \"pointer\",\n              \"flexDirection\": \"row\",\n              \"justifyContent\": \"center\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n              \"msFlexPack\": \"center\",\n              \"msTouchAction\": \"manipulation\",\n              \"msUserSelect\": \"none\",\n              \"paddingBottom\": \"10px\",\n              \"paddingLeft\": \"12px\",\n              \"paddingRight\": \"12px\",\n              \"paddingTop\": \"10px\",\n              \"touchAction\": \"manipulation\",\n              \"userSelect\": \"none\",\n            }\n          }\n          tabIndex=\"0\"\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n            >\n              <div\n                className=\"css-text-901oao\"\n                dir=\"auto\"\n                style={\n                  Object {\n                    \"color\": \"rgba(0,0,0,1.00)\",\n                    \"fontSize\": \"14px\",\n                    \"fontStyle\": \"normal\",\n                    \"fontWeight\": \"400\",\n                    \"letterSpacing\": \"0px\",\n                    \"lineHeight\": \"1.5em\",\n                  }\n                }\n              >\n                NativeBase\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots useContrastText Variations 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"rgba(236,254,255,1.00)\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginBottom\": \"4px\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"10px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"10px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(0,0,0,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            NativeBase\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"rgba(207,250,254,1.00)\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginBottom\": \"4px\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"10px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"10px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(0,0,0,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            NativeBase\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"rgba(165,243,252,1.00)\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginBottom\": \"4px\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"10px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"10px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(0,0,0,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            NativeBase\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"rgba(103,232,249,1.00)\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginBottom\": \"4px\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"10px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"10px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(255,255,255,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            NativeBase\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"rgba(34,211,238,1.00)\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginBottom\": \"4px\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"10px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"10px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(255,255,255,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            NativeBase\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"rgba(6,182,212,1.00)\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginBottom\": \"4px\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"10px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"10px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(255,255,255,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            NativeBase\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginBottom\": \"4px\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"10px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"10px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(255,255,255,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            NativeBase\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"rgba(14,116,144,1.00)\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginBottom\": \"4px\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"10px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"10px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(255,255,255,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            NativeBase\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"rgba(21,94,117,1.00)\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginBottom\": \"4px\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"10px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"10px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(255,255,255,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            NativeBase\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"rgba(22,78,99,1.00)\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginBottom\": \"4px\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"10px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"10px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(255,255,255,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            NativeBase\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"rgba(79,70,229,1.00)\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"marginTop\": \"8px\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"10px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"10px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n        >\n          <div\n            className=\"css-text-901oao\"\n            dir=\"auto\"\n            style={\n              Object {\n                \"color\": \"rgba(250,250,250,1.00)\",\n                \"fontSize\": \"14px\",\n                \"fontStyle\": \"normal\",\n                \"fontWeight\": \"400\",\n                \"letterSpacing\": \"0px\",\n                \"lineHeight\": \"1.5em\",\n              }\n            }\n          >\n            Toggle Accessible Colors\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots useDisclose Usage 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n        }\n      }\n    >\n      <div\n        className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        role=\"button\"\n        style={\n          Object {\n            \"MozUserSelect\": \"none\",\n            \"WebkitAlignItems\": \"center\",\n            \"WebkitBoxAlign\": \"center\",\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitBoxPack\": \"center\",\n            \"WebkitFlexDirection\": \"row\",\n            \"WebkitJustifyContent\": \"center\",\n            \"WebkitUserSelect\": \"none\",\n            \"alignItems\": \"center\",\n            \"backgroundColor\": \"rgba(8,145,178,1.00)\",\n            \"borderBottomLeftRadius\": \"4px\",\n            \"borderBottomRightRadius\": \"4px\",\n            \"borderTopLeftRadius\": \"4px\",\n            \"borderTopRightRadius\": \"4px\",\n            \"cursor\": \"pointer\",\n            \"flexDirection\": \"row\",\n            \"justifyContent\": \"center\",\n            \"msFlexAlign\": \"center\",\n            \"msFlexDirection\": \"row\",\n            \"msFlexPack\": \"center\",\n            \"msTouchAction\": \"manipulation\",\n            \"msUserSelect\": \"none\",\n            \"paddingBottom\": \"10px\",\n            \"paddingLeft\": \"12px\",\n            \"paddingRight\": \"12px\",\n            \"paddingTop\": \"10px\",\n            \"touchAction\": \"manipulation\",\n            \"userSelect\": \"none\",\n          }\n        }\n        tabIndex=\"0\"\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitAlignItems\": \"center\",\n              \"WebkitBoxAlign\": \"center\",\n              \"WebkitBoxDirection\": \"normal\",\n              \"WebkitBoxOrient\": \"horizontal\",\n              \"WebkitFlexDirection\": \"row\",\n              \"alignItems\": \"center\",\n              \"flexDirection\": \"row\",\n              \"msFlexAlign\": \"center\",\n              \"msFlexDirection\": \"row\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n          >\n            <div\n              className=\"css-text-901oao\"\n              dir=\"auto\"\n              style={\n                Object {\n                  \"color\": \"rgba(250,250,250,1.00)\",\n                  \"fontSize\": \"14px\",\n                  \"fontStyle\": \"normal\",\n                  \"fontWeight\": \"400\",\n                  \"letterSpacing\": \"0px\",\n                  \"lineHeight\": \"1.5em\",\n                }\n              }\n            >\n              Open Modal\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots useMediaQuery MaxHeight 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"borderBottomColor\": \"rgba(156,163,175,1.00)\",\n            \"borderBottomLeftRadius\": \"6px\",\n            \"borderBottomRightRadius\": \"6px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(156,163,175,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(156,163,175,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(156,163,175,1.00)\",\n            \"borderTopLeftRadius\": \"6px\",\n            \"borderTopRightRadius\": \"6px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"maxWidth\": \"400px\",\n            \"msFlexDirection\": \"row\",\n            \"paddingBottom\": \"16px\",\n            \"paddingLeft\": \"16px\",\n            \"paddingRight\": \"16px\",\n            \"paddingTop\": \"16px\",\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"borderBottomLeftRadius\": \"6px\",\n              \"borderBottomRightRadius\": \"6px\",\n              \"borderTopLeftRadius\": \"6px\",\n              \"borderTopRightRadius\": \"6px\",\n              \"flex\": 1,\n              \"height\": \"150px\",\n              \"msFlex\": \"1 1 0%\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            id=\"animatedComponent\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                \"height\": \"100%\",\n                \"opacity\": 0,\n                \"width\": \"100%\",\n              }\n            }\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"width\": \"32px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlex\": 3,\n              \"flex\": 3,\n              \"msFlex\": \"3 1 0%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"height\": \"40px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              id=\"animatedComponent\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"vertical\",\n                \"WebkitFlexDirection\": \"column\",\n                \"flexDirection\": \"column\",\n                \"msFlexDirection\": \"column\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"12px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"12px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"12px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"75%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"20px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"20px\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitFlex\": 2,\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"flex\": 2,\n                  \"height\": \"12px\",\n                  \"msFlex\": \"2 1 0%\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitFlex\": 1,\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"flex\": 1,\n                  \"height\": \"12px\",\n                  \"msFlex\": \"1 1 0%\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots useMediaQuery MinWidth 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"borderBottomColor\": \"rgba(156,163,175,1.00)\",\n            \"borderBottomLeftRadius\": \"6px\",\n            \"borderBottomRightRadius\": \"6px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(156,163,175,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(156,163,175,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(156,163,175,1.00)\",\n            \"borderTopLeftRadius\": \"6px\",\n            \"borderTopRightRadius\": \"6px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"maxWidth\": \"400px\",\n            \"msFlexDirection\": \"row\",\n            \"paddingBottom\": \"16px\",\n            \"paddingLeft\": \"16px\",\n            \"paddingRight\": \"16px\",\n            \"paddingTop\": \"16px\",\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlex\": 1,\n              \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n              \"borderBottomLeftRadius\": \"6px\",\n              \"borderBottomRightRadius\": \"6px\",\n              \"borderTopLeftRadius\": \"6px\",\n              \"borderTopRightRadius\": \"6px\",\n              \"flex\": 1,\n              \"height\": \"150px\",\n              \"msFlex\": \"1 1 0%\",\n              \"overflowX\": \"hidden\",\n              \"overflowY\": \"hidden\",\n              \"width\": \"100%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            id=\"animatedComponent\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                \"height\": \"100%\",\n                \"opacity\": 0,\n                \"width\": \"100%\",\n              }\n            }\n          />\n        </div>\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"width\": \"32px\",\n            }\n          }\n        />\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlex\": 3,\n              \"flex\": 3,\n              \"msFlex\": \"3 1 0%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"height\": \"40px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              id=\"animatedComponent\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"vertical\",\n                \"WebkitFlexDirection\": \"column\",\n                \"flexDirection\": \"column\",\n                \"msFlexDirection\": \"column\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"12px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"12px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"12px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"75%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"20px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"20px\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitFlex\": 2,\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"flex\": 2,\n                  \"height\": \"12px\",\n                  \"msFlex\": \"2 1 0%\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitFlex\": 1,\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"flex\": 1,\n                  \"height\": \"12px\",\n                  \"msFlex\": \"1 1 0%\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots useMediaQuery Orientation 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"display\": \"flex\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"width\": \"100%\",\n        }\n      }\n    >\n      <div\n        className=\"css-view-1dbjc4n\"\n        style={\n          Object {\n            \"WebkitBoxDirection\": \"normal\",\n            \"WebkitBoxOrient\": \"horizontal\",\n            \"WebkitFlexDirection\": \"row\",\n            \"borderBottomColor\": \"rgba(156,163,175,1.00)\",\n            \"borderBottomLeftRadius\": \"6px\",\n            \"borderBottomRightRadius\": \"6px\",\n            \"borderBottomWidth\": \"1px\",\n            \"borderLeftColor\": \"rgba(156,163,175,1.00)\",\n            \"borderLeftWidth\": \"1px\",\n            \"borderRightColor\": \"rgba(156,163,175,1.00)\",\n            \"borderRightWidth\": \"1px\",\n            \"borderTopColor\": \"rgba(156,163,175,1.00)\",\n            \"borderTopLeftRadius\": \"6px\",\n            \"borderTopRightRadius\": \"6px\",\n            \"borderTopWidth\": \"1px\",\n            \"flexDirection\": \"row\",\n            \"maxWidth\": \"400px\",\n            \"msFlexDirection\": \"row\",\n            \"paddingBottom\": \"16px\",\n            \"paddingLeft\": \"16px\",\n            \"paddingRight\": \"16px\",\n            \"paddingTop\": \"16px\",\n            \"width\": \"90%\",\n          }\n        }\n      >\n        <div\n          className=\"css-view-1dbjc4n\"\n          style={\n            Object {\n              \"WebkitFlex\": 3,\n              \"flex\": 3,\n              \"msFlex\": \"3 1 0%\",\n            }\n          }\n        >\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                \"height\": \"40px\",\n                \"overflowX\": \"hidden\",\n                \"overflowY\": \"hidden\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              id=\"animatedComponent\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                  \"height\": \"100%\",\n                  \"opacity\": 0,\n                  \"width\": \"100%\",\n                }\n              }\n            />\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"vertical\",\n                \"WebkitFlexDirection\": \"column\",\n                \"flexDirection\": \"column\",\n                \"msFlexDirection\": \"column\",\n                \"width\": \"100%\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"12px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"12px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"height\": \"12px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"12px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"75%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n          </div>\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"height\": \"16px\",\n              }\n            }\n          />\n          <div\n            className=\"css-view-1dbjc4n\"\n            style={\n              Object {\n                \"WebkitAlignItems\": \"center\",\n                \"WebkitBoxAlign\": \"center\",\n                \"WebkitBoxDirection\": \"normal\",\n                \"WebkitBoxOrient\": \"horizontal\",\n                \"WebkitFlexDirection\": \"row\",\n                \"alignItems\": \"center\",\n                \"flexDirection\": \"row\",\n                \"msFlexAlign\": \"center\",\n                \"msFlexDirection\": \"row\",\n              }\n            }\n          >\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"height\": \"20px\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"20px\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitFlex\": 2,\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"flex\": 2,\n                  \"height\": \"12px\",\n                  \"msFlex\": \"2 1 0%\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"width\": \"8px\",\n                }\n              }\n            />\n            <div\n              className=\"css-view-1dbjc4n\"\n              style={\n                Object {\n                  \"WebkitFlex\": 1,\n                  \"backgroundColor\": \"rgba(0,0,0,0.00)\",\n                  \"borderBottomLeftRadius\": \"9999px\",\n                  \"borderBottomRightRadius\": \"9999px\",\n                  \"borderTopLeftRadius\": \"9999px\",\n                  \"borderTopRightRadius\": \"9999px\",\n                  \"flex\": 1,\n                  \"height\": \"12px\",\n                  \"msFlex\": \"1 1 0%\",\n                  \"overflowX\": \"hidden\",\n                  \"overflowY\": \"hidden\",\n                  \"width\": \"100%\",\n                }\n              }\n            >\n              <div\n                className=\"css-view-1dbjc4n\"\n                id=\"animatedComponent\"\n                style={\n                  Object {\n                    \"backgroundColor\": \"rgba(229,229,229,1.00)\",\n                    \"height\": \"100%\",\n                    \"opacity\": 0,\n                    \"width\": \"100%\",\n                  }\n                }\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots useSafeArea Fixed 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitFlex\": 1,\n        \"flex\": 1,\n        \"msFlex\": \"1 1 0%\",\n      }\n    }\n  >\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"backgroundColor\": \"rgba(45,212,191,1.00)\",\n          \"height\": \"200px\",\n          \"paddingTop\": \"32px\",\n          \"width\": \"200px\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        NativeBase\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots useSafeArea Flexible 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitFlex\": 1,\n        \"flex\": 1,\n        \"msFlex\": \"1 1 0%\",\n      }\n    }\n  >\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"backgroundColor\": \"rgba(45,212,191,1.00)\",\n          \"height\": \"200px\",\n          \"width\": \"200px\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        NativeBase\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots useSafeArea Hook 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitFlex\": 1,\n        \"flex\": 1,\n        \"msFlex\": \"1 1 0%\",\n      }\n    }\n  >\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"backgroundColor\": \"rgba(45,212,191,1.00)\",\n          \"height\": \"200px\",\n          \"paddingTop\": \"8px\",\n          \"width\": \"200px\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(23,23,23,1.00)\",\n            \"fontSize\": \"14px\",\n            \"fontStyle\": \"normal\",\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": \"0px\",\n            \"lineHeight\": \"1.5em\",\n          }\n        }\n      >\n        NativeBase\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Storyshots useSx Basic 1`] = `\n<div\n  className=\"css-view-1dbjc4n\"\n  style={\n    Object {\n      \"WebkitFlex\": 1,\n      \"flex\": 1,\n      \"msFlex\": \"1 1 0%\",\n    }\n  }\n>\n  <div\n    className=\"css-view-1dbjc4n\"\n    style={\n      Object {\n        \"WebkitAlignItems\": \"center\",\n        \"WebkitBoxAlign\": \"center\",\n        \"WebkitBoxPack\": \"center\",\n        \"WebkitFlex\": 1,\n        \"WebkitJustifyContent\": \"center\",\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"rgba(250,250,250,1.00)\",\n        \"flex\": 1,\n        \"justifyContent\": \"center\",\n        \"msFlex\": \"1 1 0%\",\n        \"msFlexAlign\": \"center\",\n        \"msFlexPack\": \"center\",\n        \"paddingLeft\": \"12px\",\n        \"paddingRight\": \"12px\",\n      }\n    }\n  >\n    <div\n      className=\"css-cursor-18t94o4 css-view-1dbjc4n\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      style={\n        Object {\n          \"MozUserSelect\": \"none\",\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxDirection\": \"normal\",\n          \"WebkitBoxOrient\": \"horizontal\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitFlexDirection\": \"row\",\n          \"WebkitJustifyContent\": \"center\",\n          \"WebkitUserSelect\": \"none\",\n          \"alignItems\": \"center\",\n          \"borderBottomLeftRadius\": \"4px\",\n          \"borderBottomRightRadius\": \"4px\",\n          \"borderTopLeftRadius\": \"4px\",\n          \"borderTopRightRadius\": \"4px\",\n          \"cursor\": \"pointer\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexDirection\": \"row\",\n          \"msFlexPack\": \"center\",\n          \"msTouchAction\": \"manipulation\",\n          \"msUserSelect\": \"none\",\n          \"paddingBottom\": \"12px\",\n          \"paddingLeft\": \"12px\",\n          \"paddingRight\": \"12px\",\n          \"paddingTop\": \"12px\",\n          \"position\": \"absolute\",\n          \"right\": \"32px\",\n          \"top\": \"48px\",\n          \"touchAction\": \"manipulation\",\n          \"userSelect\": \"none\",\n          \"zIndex\": 4,\n        }\n      }\n      tabIndex=\"0\"\n    >\n      <svg\n        role=\"img\"\n        stroke=\"\"\n        style={\n          Object {\n            \"color\": \"rgba(8,145,178,1.00)\",\n            \"height\": \"24px\",\n            \"width\": \"24px\",\n          }\n        }\n        viewBox=\"0 0 24 24\"\n      >\n        <g>\n          <path\n            d=\"M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z\"\n            fill=\"currentColor\"\n            stroke=\"\"\n          />\n        </g>\n      </svg>\n    </div>\n    <div\n      className=\"css-view-1dbjc4n\"\n      style={\n        Object {\n          \"WebkitAlignItems\": \"center\",\n          \"WebkitBoxAlign\": \"center\",\n          \"WebkitBoxPack\": \"center\",\n          \"WebkitJustifyContent\": \"center\",\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"rgba(147,197,253,1.00)\",\n          \"height\": \"192px\",\n          \"justifyContent\": \"center\",\n          \"msFlexAlign\": \"center\",\n          \"msFlexPack\": \"center\",\n          \"paddingBottom\": \"8px\",\n          \"paddingLeft\": \"8px\",\n          \"paddingRight\": \"8px\",\n          \"paddingTop\": \"8px\",\n          \"width\": \"192px\",\n        }\n      }\n    >\n      <div\n        className=\"css-text-901oao\"\n        dir=\"auto\"\n        style={\n          Object {\n            \"color\": \"rgba(124,45,18,1.00)\",\n            \"height\": \"48px\",\n            \"textAlign\": \"center\",\n            \"width\": \"48px\",\n          }\n        }\n      >\n        New Feat useSx in NativeBase\n      </div>\n    </div>\n  </div>\n</div>\n`;\n"
  },
  {
    "path": "example/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"native-base\": [\n        \"../src/index\"\n      ]\n    },\n    \"allowSyntheticDefaultImports\": true,\n    \"jsx\": \"react-native\",\n    \"lib\": [\n      \"dom\",\n      \"esnext\"\n    ],\n    \"moduleResolution\": \"node\",\n    \"noEmit\": true,\n    \"skipLibCheck\": true,\n    \"resolveJsonModule\": true,\n    \"strict\": true\n  },\n  \"extends\": \"expo/tsconfig.base\"\n}\n"
  },
  {
    "path": "example/web-build/register-service-worker.js",
    "content": "/* eslint-env browser */\n\nif ('serviceWorker' in navigator) {\n  window.addEventListener('load', function () {\n    navigator.serviceWorker\n      .register('/expo-service-worker.js', { scope: '/' })\n      .then(function (info) {\n        // console.info('Registered service-worker', info);\n      })\n      .catch(function (error) {\n        console.info('Failed to register service-worker', error);\n      });\n  });\n}\n"
  },
  {
    "path": "example/webpack.config.js",
    "content": "const path = require('path');\nconst createExpoWebpackConfigAsync = require('@expo/webpack-config');\nconst { resolver } = require('./metro.config');\n\nconst root = path.resolve(__dirname, '..');\nconst node_modules = path.join(__dirname, 'node_modules');\n\nmodule.exports = async function (env, argv) {\n  const config = await createExpoWebpackConfigAsync(env, argv);\n\n  config.module.rules.push({\n    test: /\\.(js|ts|tsx)$/,\n    include: path.resolve(root, 'src'),\n    use: 'babel-loader',\n  });\n\n  // We need to make sure that only one version is loaded for peerDependencies\n  // So we alias them to the versions in example's node_modules\n  Object.assign(config.resolve.alias, {\n    ...resolver.extraNodeModules,\n    'react-native-web': path.join(node_modules, 'react-native-web'),\n  });\n\n  // Maybe you want to turn off compression in dev mode.\n  if (config.mode === 'development') {\n    config.devServer.compress = false;\n  }\n  // Or prevent minimizing the bundle when you build.\n  if (config.mode === 'production') {\n    config.optimization.minimize = false;\n  }\n\n  return config;\n};\n"
  },
  {
    "path": "expo-example/App.tsx",
    "content": "import React, { useState } from 'react';\nimport { StyleSheet, Text, View, Switch } from 'react-native';\nimport { CustomButtonScreen } from './custompressablescreen';\nimport { NativeBaseScreen } from './nativebase';\nimport { RNButtonScreen } from './reactnativescreen';\nimport { NativeBaseProvider, extendTheme } from 'native-base';\nimport { DripsyProvider, makeTheme } from 'dripsy';\n\nimport { LogBox } from 'react-native';\nLogBox.ignoreLogs(['Warning: ...']); // Ignore log notification by message\nLogBox.ignoreAllLogs(); //Ignore all log notifications\n\n// console.currentKey = {};\n// const theme = makeTheme({});\n\n// console.startTimeKey = function (key) {\n//   console.currentKey[key] = Date.now();\n// };\n\n// console.endTimeKey = function (key, msg) {\n//   console.log(msg, key, Date.now() - console.currentKey[key]);\n\n//   // if (console.currentKey[key]) {\n//   //   delete console.currentKey[key];\n//   // }\n// };\n\nexport default function App() {\n  const [nativeBaseIsOn, setNativeBaseIsOn] = useState(false);\n  const [customIsOn, setCustomIsOn] = useState(false);\n  const [rnButtonIsOn, setRNButtonIsOn] = useState(true);\n  return (\n    <>\n      {/* <Switch\n        value={rnButtonIsOn}\n        onChange={() => setRNButtonIsOn(!rnButtonIsOn)}\n      />\n      <Text>RN Button</Text>\n      <Switch value={customIsOn} onChange={() => setCustomIsOn(!customIsOn)} />\n      <Text>Custom Button</Text>\n      <Switch\n        value={nativeBaseIsOn}\n        onChange={() => setNativeBaseIsOn(!nativeBaseIsOn)}\n      />\n      <Text>Nativebase Button</Text> */}\n      <View style={{ flex: 1 }}>\n        {/* {rnButtonIsOn && <RNButtonScreen />}\n        {customIsOn && <CustomButtonScreen />}\n        {nativeBaseIsOn && <NativeBaseScreen />} */}\n        <NativeBaseProvider\n          isSSR\n          // theme={extendTheme({\n          //   // config: { initialColorMode: 'dark' },\n          //   components: {\n          //     Pressable: {\n          //       bg: 'blue.400',\n          //       _hover: 'red.500',\n          //     },\n          //   },\n          // })}\n        >\n          {/* <DripsyProvider theme={theme}> */}\n          <NativeBaseScreen />\n          {/* </DripsyProvider> */}\n        </NativeBaseProvider>\n      </View>\n    </>\n  );\n}\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#fff',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n});\n"
  },
  {
    "path": "expo-example/app.json",
    "content": "{\n  \"name\": \"NativeBaseExpoExample\",\n  \"displayName\": \"NativeBase Expo Example\",\n  \"packagerOpts\": {\n    \"config\": \"metro.config.js\"\n  },\n  \"expo\": {\n    \"name\": \"NativeBase Expo Example\",\n    \"slug\": \"native-base-expo-example\",\n    \"description\": \"Example app for Nativebase\",\n    \"privacy\": \"public\",\n    \"version\": \"1.0.0\",\n    \"platforms\": [\"ios\", \"android\", \"web\"],\n    \"ios\": {\n      \"supportsTablet\": true\n    },\n    \"assetBundlePatterns\": [\"**/*\"]\n  }\n}\n"
  },
  {
    "path": "expo-example/babel.config.js",
    "content": "const path = require('path');\nconst pak = require('../package.json');\n\nmodule.exports = function (api) {\n  api.cache(true);\n  return {\n    presets: [['babel-preset-expo', { jsxRuntime: 'classic' }]],\n    plugins: [\n      [\n        'module-resolver',\n        {\n          alias: {\n            // For development, we want to alias the library to the source\n            [pak.name]: path.join(__dirname, '..', pak.source),\n          },\n        },\n      ],\n    ],\n  };\n};\n"
  },
  {
    "path": "expo-example/components/button.tsx",
    "content": "import { Pressable, Text, View, Platform } from \"react-native\";\nimport { useEffect, useState } from \"react\";\n\nexport const Button = ({ children, onPress }: any) => {\n  const [pressed, setPressed] = useState(false);\n  return (\n    <Pressable\n      onPress={() => {\n        setPressed(true);\n        onPress();\n      }}\n      onPressOut={() => {\n        setPressed(false);\n      }}\n      style={{\n        backgroundColor: pressed ? \"red\" : \"green\",\n        padding: 10,\n        borderRadius: 5,\n        margin: 5,\n      }}\n    >\n      <Text style={{ color: pressed ? \"#000\" : \"#fff\" }}>{children}</Text>\n    </Pressable>\n  );\n};\n"
  },
  {
    "path": "expo-example/components/index.ts",
    "content": "export * from \"./button\";\n"
  },
  {
    "path": "expo-example/custompressablescreen.tsx",
    "content": "import { useEffect, useState } from \"react\";\nimport { Text, View, StyleSheet } from \"react-native\";\nimport { Button } from \"./components/button\";\nexport const CustomButtonScreen = () => {\n  let start = 0,\n    end = 0;\n  start = Date.now();\n  const [pressed, setPressed] = useState(false);\n  useEffect(() => {\n    end = Date.now();\n    console.log(\"Custom Button Diff\", end - start);\n  }, [pressed]);\n  return (\n    <View style={styles.container}>\n      <Text>Custom Pressable</Text>\n      <Button onPress={() => setPressed(!pressed)}>Hello</Button>\n    </View>\n  );\n};\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: \"#fff\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n});\n"
  },
  {
    "path": "expo-example/metro.config.js",
    "content": "const path = require('path');\nconst blacklist = require('metro-config/src/defaults/exclusionList');\nconst escape = require('escape-string-regexp');\nconst pak = require('../package.json');\n\nconst root = path.resolve(__dirname, '..');\n\nconst modules = Object.keys({\n  ...pak.peerDependencies,\n});\n\nmodule.exports = {\n  projectRoot: __dirname,\n  watchFolders: [root],\n\n  // We need to make sure that only one version is loaded for peerDependencies\n  // So we blacklist them at the root, and alias them to the versions in example's node_modules\n  resolver: {\n    blacklistRE: blacklist(\n      modules.map(\n        (m) =>\n          new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\\\/.*$`)\n      )\n    ),\n    extraNodeModules: modules.reduce((acc, name) => {\n      acc[name] = path.join(__dirname, 'node_modules', name);\n      return acc;\n    }, {}),\n  },\n\n  transformer: {\n    getTransformOptions: async () => ({\n      transform: {\n        experimentalImportSupport: false,\n        inlineRequires: false,\n      },\n    }),\n  },\n};\n"
  },
  {
    "path": "expo-example/nativebase.tsx",
    "content": "import {\n  NativeBaseProvider,\n  Button,\n  Text,\n  Box,\n  Checkbox,\n  Center,\n  Badge,\n  Modal,\n  FormControl,\n  Input,\n  Pressable,\n  useToast,\n} from 'native-base';\nimport React, {\n  forwardRef,\n  useEffect,\n  useState,\n  memo,\n  useCallback,\n} from 'react';\nimport {\n  View,\n  Button as RNButton,\n  Modal as RNModal,\n  TextInput,\n  StyleSheet,\n} from 'react-native';\nimport { View as DripsyView } from 'dripsy';\nimport { Pressable as DripsyButton } from 'dripsy';\nimport { Text as DripsyText } from 'dripsy';\n\nconst styles = StyleSheet.create({\n  centeredView: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    marginTop: 22,\n  },\n  modalView: {\n    margin: 20,\n    backgroundColor: 'white',\n    borderRadius: 20,\n    padding: 35,\n    alignItems: 'center',\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 2,\n    },\n    shadowOpacity: 0.25,\n    shadowRadius: 4,\n    elevation: 5,\n  },\n  button: {\n    borderRadius: 20,\n    padding: 10,\n    elevation: 2,\n  },\n  buttonOpen: {\n    backgroundColor: '#F194FF',\n  },\n  buttonClose: {\n    backgroundColor: '#2196F3',\n  },\n  textStyle: {\n    color: 'white',\n    fontWeight: 'bold',\n    textAlign: 'center',\n  },\n  modalText: {\n    marginBottom: 15,\n    textAlign: 'center',\n  },\n});\n\nconst Example = () => {\n  const [showModal, setShowModal] = useState(false);\n  // React.useEffect(() => {\n  //   console.endTimeKey('mountmodal', '>>>>>>>>>>>>>>>>>> modal');\n  // });\n\n  // const toast = useToast();\n  return (\n    <View>\n      <Box\n        alignSelf=\"center\"\n        // bg=\"primary.500\"\n        _text={{\n          fontSize: 'md',\n          fontWeight: 'medium',\n          color: 'warmGray.50',\n          letterSpacing: 'lg',\n        }}\n        bg={['red.400', 'blue.400']}\n        shadow={[8, 1]}\n      >\n        This is a Box\n      </Box>\n    </View>\n  );\n\n  return (\n    <View>\n      <Box mt={100}>Box</Box>\n      <Button\n        onPress={() => {\n          // console.startTimeKey('mountmodal');\n          setShowModal(true);\n        }}\n      >\n        Button www\n      </Button>\n\n      {/* <RNModal\n        animationType=\"slide\"\n        transparent={true}\n        visible={showModal}\n        onRequestClose={() => {\n          // Alert.alert(\"Modal has been closed.\");\n          setShowModal(!showModal);\n        }}\n      >\n        <View style={styles.centeredView}>\n          <View style={styles.modalView}>\n            <Text style={styles.modalText}>Hello World!</Text>\n            <Pressable\n              style={[styles.button, styles.buttonClose]}\n              onPress={() => setShowModal(!showModal)}\n            >\n              <Text style={styles.textStyle}>Hide Modal</Text>\n            </Pressable>\n            <FormControl>\n              <FormControl.Label>Name</FormControl.Label>\n              <Input />\n            </FormControl>\n            <FormControl>\n              <FormControl.Label>Name</FormControl.Label>\n              <Input />\n            </FormControl>\n          </View>\n        </View>\n      </RNModal> */}\n\n      <Modal\n        isOpen={showModal}\n        onClose={() => setShowModal(false)}\n        animationPreset=\"fade\"\n      >\n        <Modal.Content maxWidth=\"400px\">\n          <Modal.Body>\n            <View style={styles.centeredView}>\n              <View style={styles.modalView}>\n                <Text style={styles.modalText}>Hello World!</Text>\n                <Pressable\n                  style={[styles.button, styles.buttonClose]}\n                  onPress={() => setShowModal(!showModal)}\n                >\n                  <Text style={styles.textStyle}>Hide Modal</Text>\n                </Pressable>\n\n                <FormControl>\n                  <FormControl.Label>Name</FormControl.Label>\n                  <Input />\n                </FormControl>\n                <FormControl>\n                  <FormControl.Label>Name</FormControl.Label>\n                  <Input />\n                </FormControl>\n\n                <FormControl>\n                  <FormControl.Label>Name</FormControl.Label>\n                  <Input />\n                </FormControl>\n                <FormControl>\n                  <FormControl.Label>Name</FormControl.Label>\n                  <Input />\n                </FormControl>\n                <FormControl>\n                  <FormControl.Label>Name</FormControl.Label>\n                  <Input />\n                </FormControl>\n              </View>\n            </View>\n          </Modal.Body>\n        </Modal.Content>\n      </Modal>\n    </View>\n  );\n};\n\n// const MyButton = memo(\n//   forwardRef((props: any, ref: any) => {\n//     return (\n//       <View\n//         style={{\n//           backgroundColor: props.color.slice(0, -4),\n//           width: 100,\n//           height: 100,\n//         }}\n//       ></View>\n//     );\n//     return (\n//       <RNButton\n//         color={props.color.slice(0, -4)}\n//         style={{ backgroundColor: 'red', width: 100, height: 100 }}\n//         title=\"Button\"\n//       ></RNButton>\n//     );\n//   })\n// );\nexport const NativeBaseScreen = () => {\n  // const [groupValues, setGroupValues] = React.useState([]);\n  // console.log('NativeBaseScreen', groupValues);\n  // console.startTimeKey('Mounted');\n  // const [state, setState] = useState(false);\n  // useEffect(() => {\n  //   // setTimeout(() => {\n  //   console.endTimeKey('Mounted', 'Mounted');\n\n  //   // setTimeout(() => {\n  //   //   setState(true);\n  //   // }, 3000);\n  //   // });\n  // }, []);\n\n  // return <MyButton color={state} />;\n  // return (\n  //   <RNButton\n  //     color={state}\n  //     style={{ backgroundColor: \"red\", width: 100, height: 100 }}\n  //     title=\"Button\"\n  //   ></RNButton>\n  // );\n\n  // return <Example />;\n\n  // return (\n  //   <Box backgroundColor={\"red.200\"} width=\"100\" height=\"100\">\n  //     <Box backgroundColor={\"red.200\"} width=\"100\" height=\"100\">\n  //       <Box backgroundColor={\"red.200\"} width=\"100\" height=\"100\">\n  //         <Box backgroundColor={\"red.200\"} width=\"100\" height=\"100\">\n  //           <Box backgroundColor={\"red.200\"} width=\"100\" height=\"100\">\n  //             <Box backgroundColor={\"red.200\"} width=\"100\" height=\"100\">\n  //               <Box backgroundColor={state} width=\"100\" height=\"100\">\n  //                 hello\n  //               </Box>\n  //             </Box>\n  //           </Box>\n  //         </Box>\n  //       </Box>\n  //     </Box>\n  //   </Box>\n  // );\n\n  // return <Example />;\n\n  // const handlePress = useCallback(() => {\n  //   setTimeout(() => {\n  //     console.log('set');\n  //     setState(!state);\n  //   }, 0);\n  // }, [state]);\n\n  // return (\n  //   <DripsyView\n  //     sx={{\n  //       height: [100],\n  //       width: [100],\n  //       backgroundColor: \"red\",\n  //       marginX: 10,\n  //     }}\n  //   />\n  // );\n\n  // return <Button>hello</Button>;\n  return <Example />;\n  // return (\n  //   <>\n  //     {/* <Box></Box> */}\n  //     {/* <DripsyView style={{ backgroundColor: \"red\", width: 100, height: 100 }} /> */}\n  //     <RNButton\n  //       onPress={handlePress}\n  //       style={{\n  //         marginTop: 10,\n  //         backgroundColor: 'red',\n  //         width: 100,\n  //         height: 100,\n  //       }}\n  //       title=\"My Button\"\n  //     >\n  //       Hello\n  //     </RNButton>\n\n  //     {/* {state && <Box background={\"red.200\"} w=\"100\" h=\"100\" />} */}\n  //     {state && (\n  //       <>\n  //         {/* <View style={{ backgroundColor: 'red', width: 100, height: 100 }} /> */}\n  //         {/* <Pressable/> */}\n  //         <View>\n  //           {new Array(1).fill('100').map((_, index) => (\n  //             <Badge size=\"sm\">NEW FEATURE</Badge> // <Checkbox\n  //             //   value=\"test\"\n  //             //   accessibilityLabel=\"This is a dummy checkbox\"\n  //             // />\n  //             // <Button\n  //             // // _hover={{\n  //             // //   height: 20,\n  //             // // }}\n  //             // // variant={'outline'}\n  //             // // _text={{\n  //             // //   color: 'red.500',\n  //             // // }}\n  //             // // bg=\"amber.400\"\n  //             // // _hover={{ bg: 'red.700' }}\n  //             // // bg=\"blue.400\"\n  //             // // safeAreaX\n  //             // // _hover={{\n  //             // //   bg: 'green.500',\n  //             // // }}\n  //             // // p={2}\n  //             // // mt={2}\n  //             // // borderWidth={1}\n  //             // // borderRadius={1}\n  //             // // pt={1}\n  //             // // pb={1}\n  //             // // pr={1}\n  //             // // pl={1}\n  //             // // borderBottomColor=\"emerald.100\"\n  //             // // bg=\"red.200\"\n  //             // // p={index}\n  //             // // style={{ width: 100, height: 100 }}\n  //             // // _text={{\n  //             // //   bg: 'blue.200',\n  //             // // }}\n  //             // // _dark={{\n  //             // //   bg: 'red.100',\n  //             // // }}\n  //             // // variant=\"default\"\n  //             // // style={{ width: 100, height: 100 }}\n  //             // >\n  //             //   Hello\n  //             // </Button>\n  //           ))}\n  //         </View>\n\n  //         <View>\n  //           {/* {new Array(100).fill(' ').map((_, index) => (\n  //             <DripsyButton\n  //               sx={{ bg: '$primary', p: index }}\n  //               style={{ backgroundColor: 'red', width: 100, height: 100 }}\n  //             >\n  //               <DripsyText>hello dripsy</DripsyText>\n  //             </DripsyButton>\n  //           ))} */}\n  //         </View>\n  //         {/* <DripsyView\n  //           sx={{\n  //             height: [100],\n  //             width: [100],\n  //             backgroundColor: \"red\",\n  //             marginX: 10,\n  //           }}\n  //         /> */}\n  //       </>\n  //     )}\n  //   </>\n  // );\n};\n"
  },
  {
    "path": "expo-example/package.json",
    "content": "{\n  \"main\": \"node_modules/expo/AppEntry.js\",\n  \"scripts\": {\n    \"start\": \"expo start\",\n    \"android\": \"expo start --android\",\n    \"ios\": \"expo start --ios\",\n    \"web\": \"expo start --web\",\n    \"eject\": \"expo eject\"\n  },\n  \"dependencies\": {\n    \"@react-stately/checkbox\": \"^3.0.6\",\n    \"@react-stately/toggle\": \"^3.2.6\",\n    \"babel-preset-expo\": \"~9.2.0\",\n    \"dripsy\": \"^3.6.0\",\n    \"expo\": \"^46.0.0\",\n    \"expo-status-bar\": \"~1.4.0\",\n    \"native-base-old\": \"npm:native-base@3.4.6\",\n    \"react\": \"18.0.0\",\n    \"react-dom\": \"18.0.0\",\n    \"react-native\": \"0.69.5\",\n    \"react-native-safe-area-context\": \"4.3.1\",\n    \"react-native-svg\": \"12.3.0\",\n    \"react-native-web\": \"~0.18.7\"\n  },\n  \"devDependencies\": {\n    \"@babel/core\": \"^7.18.6\",\n    \"@expo/webpack-config\": \"^0.17.0\",\n    \"@types/react\": \"~18.0.0\",\n    \"@types/react-native\": \"~0.69.1\",\n    \"babel-loader\": \"^8.2.5\",\n    \"typescript\": \"^4.6.3\"\n  },\n  \"private\": true\n}\n"
  },
  {
    "path": "expo-example/reactnativescreen.tsx",
    "content": "import { Text, View, StyleSheet, Button } from \"react-native\";\nexport const RNButtonScreen = () => {\n  return (\n    <View style={styles.container}>\n      <Text>React Native Button</Text>\n      <Button onPress={() => console.log(\"Pressed\")} title=\"Hello World\" />\n    </View>\n  );\n};\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: \"#fff\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n});\n"
  },
  {
    "path": "expo-example/test-babel 11.40.04 AM.js",
    "content": "const t = require('@babel/types');\nconst p = require('@babel/parser');\n\nmodule.exports = function ({ types: t }) {\n  return {\n    visitor: {\n      Program(path) {\n        const filePath = this.file.opts.filename;\n\n        console.log(filePath, 'file path here');\n        // if (\n        //   filePath.includes('/node_modules/native-base/lib/module/index.js')\n        // ) {\n        //   path.traverse({\n        //     ImportDeclaration(importPath) {\n        //       importPath.insertBefore([\n        //         t.importDeclaration(\n        //           [\n        //             t.importSpecifier(\n        //               t.identifier('init'),\n        //               t.identifier('init')\n        //             ),\n        //           ],\n        //           t.stringLiteral('./core/ResolvedStyleMap')\n        //         ),\n        //         t.expressionStatement(\n        //           t.callExpression(t.identifier('init'), [\n        //             astify(bundle.resolvedStyledMap),\n        //           ])\n        //         ),\n        //       ]);\n        //       importPath.stop();\n        //     },\n        //   });\n        // } else {\n        //   path.traverse({\n        //     ImportDeclaration(importPath) {\n        //       if (importPath.node.source.value === 'native-base') {\n        //         if (importPath.node.specifiers) {\n        //           importPath.node.specifiers.map((specifier) => {\n        //             if (specifier.imported) {\n        //               componentsList[specifier.imported.name] = true;\n        //             } else {\n        //               componentsList['allImport'] = true;\n        //             }\n        //           });\n        //         }\n        //       }\n        //     },\n        //   });\n        //   path.traverse({\n        //     JSXOpeningElement(jsxOpeningElementPath) {\n        //       if (\n        //         Object.keys(componentsList).includes(\n        //           jsxOpeningElementPath.node.name.name\n        //         )\n        //       ) {\n        //         if (\n        //           jsxOpeningElementPath.node.name.name === 'NativeBaseProvider'\n        //         ) {\n        //           if (jsxOpeningElementPath.node.attributes) {\n        //             jsxOpeningElementPath.node.attributes.push(\n        //               createJSXAttributeNode(\n        //                 'providerId',\n        //                 uniqueId('nbBootTime-')\n        //               )\n        //             );\n        //           } else {\n        //             jsxOpeningElementPath.node.attributes = [\n        //               createJSXAttributeNode(\n        //                 'providerId',\n        //                 uniqueId('nbBootTime-')\n        //               ),\n        //             ];\n        //           }\n        //         } else {\n        //           const attrs = jsxOpeningElementPath.node.attributes;\n        //           const componentAttrs = {};\n        //           attrs.map((attr) => {\n        //             if (\n        //               ['colorScheme', 'variant', 'size'].includes(\n        //                 attr.name.name\n        //               )\n        //             ) {\n        //               componentAttrs[attr.name.name] = attr.value.value;\n        //             }\n        //           });\n        //           if (!isEmptyObj(componentAttrs)) {\n        //             updateComponentMap(\n        //               jsxOpeningElementPath.node.name.name,\n        //               componentAttrs\n        //             );\n        //           }\n        //         }\n        //       }\n        //     },\n        //   });\n        // }\n        // bundle.generateBuildTimeMap('web', componentsMap);\n      },\n    },\n  };\n};\n"
  },
  {
    "path": "expo-example/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"native-base\": [\"../src/index\"]\n    },\n    \"allowSyntheticDefaultImports\": true,\n    \"jsx\": \"react-native\",\n    \"lib\": [\"dom\", \"esnext\"],\n    \"moduleResolution\": \"node\",\n    \"noEmit\": true,\n    \"skipLibCheck\": true,\n    \"resolveJsonModule\": true,\n    \"strict\": true\n  },\n  \"extends\": \"expo/tsconfig.base\"\n}\n"
  },
  {
    "path": "expo-example/webpack.config.js",
    "content": "const path = require('path');\nconst createExpoWebpackConfigAsync = require('@expo/webpack-config');\nconst { resolver } = require('./metro.config');\n\nconst root = path.resolve(__dirname, '..');\nconst node_modules = path.join(__dirname, 'node_modules');\n\nmodule.exports = async function (env, argv) {\n  // const config = await createExpoWebpackConfigAsync(env, argv);\n\n  const config = await createExpoWebpackConfigAsync(\n    {\n      ...env,\n      babel: {\n        dangerouslyAddModulePathsToTranspile: ['dripsy', '@dripsy'],\n      },\n    },\n    argv\n  );\n\n  config.module.rules.push({\n    test: /\\.(js|ts|tsx)$/,\n    include: path.resolve(root, 'src'),\n    use: 'babel-loader',\n  });\n\n  // We need to make sure that only one version is loaded for peerDependencies\n  // So we alias them to the versions in example's node_modules\n  Object.assign(config.resolve.alias, {\n    ...resolver.extraNodeModules,\n    'react-native-web': path.join(node_modules, 'react-native-web'),\n  });\n\n  return config;\n};\n"
  },
  {
    "path": "next-example/.eslintrc.json",
    "content": "{\n  \"extends\": \"next/core-web-vitals\"\n}\n"
  },
  {
    "path": "next-example/.gitignore",
    "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# local env files\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\n# vercel\n.vercel\n\n# @generated: @expo/next-adapter@3.1.3\n/.expo/*\n# Expo Web\n/web-build/*\n# Expo Native\n*.jks\n*.p8\n*.p12\n*.key\n*.mobileprovision\n*.orig.*\n# Next.js\n/.next/*\n/out/\n# Next.js production\n/build/\n# Next.js dependencies\n/.pnp\n.pnp.js\n# @end @expo/next-adapter\n"
  },
  {
    "path": "next-example/README.md",
    "content": "This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.\n\n[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.\n\nThe `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.\n\n## Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!\n\n## Deploy on Vercel\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\n"
  },
  {
    "path": "next-example/babel.config.js",
    "content": "// @generated: @expo/next-adapter@3.1.3\n// Learn more: https://github.com/expo/expo/blob/master/docs/pages/versions/unversioned/guides/using-nextjs.md#shared-steps\n\nmodule.exports = { presets: ['@expo/next-adapter/babel'] };\n"
  },
  {
    "path": "next-example/next-env.d.ts",
    "content": "/// <reference types=\"next\" />\n/// <reference types=\"next/types/global\" />\n/// <reference types=\"next/image-types/global\" />\n\n// NOTE: This file should not be edited\n// see https://nextjs.org/docs/basic-features/typescript for more information.\n"
  },
  {
    "path": "next-example/next.config.js",
    "content": "/** @type {import('next').NextConfig} */\nconst { withExpo } = require('@expo/next-adapter');\nconst withPlugins = require('next-compose-plugins');\nconst path = require('path');\nconst withTM = require('next-transpile-modules')(['react-native-web']);\n\nconst nextConfig = {\n  reactStrictMode: true,\n  experimental: {\n    externalDir: true,\n  },\n  webpack: (config) => {\n    config.resolve.alias = {\n      ...(config.resolve.alias || {}),\n      // Transform all direct `react-native` imports to `react-native-web`\n      'react-native$': path.resolve(\n        __dirname,\n        'node_modules',\n        'react-native-web'\n      ),\n      'native-base': path.resolve(__dirname, '..', 'src'),\n      'react': path.resolve(__dirname, 'node_modules', 'react'),\n      'react-dom': path.resolve(__dirname, 'node_modules', 'react-dom'),\n      'react-native-web': path.resolve(\n        __dirname,\n        'node_modules',\n        'react-native-web'\n      ),\n    };\n    config.resolve.extensions = [\n      '.web.js',\n      '.web.jsx',\n      '.web.ts',\n      '.web.tsx',\n      ...config.resolve.extensions,\n    ];\n    return config;\n  },\n};\n\nmodule.exports = withPlugins(\n  [withTM, [withExpo, { projectRoot: __dirname }]],\n  nextConfig\n);\n"
  },
  {
    "path": "next-example/package.json",
    "content": "{\n  \"name\": \"next-example\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"dev\": \"next dev\",\n    \"build\": \"next build\",\n    \"start\": \"next start\",\n    \"lint\": \"next lint\"\n  },\n  \"dependencies\": {\n    \"next\": \"11.1.2\",\n    \"react\": \"17.0.2\",\n    \"react-dom\": \"17.0.2\",\n    \"react-native-aria\": \"^0.2.3\",\n    \"react-native-safe-area-context\": \"^3.3.2\",\n    \"react-native-svg\": \"^12.1.1\",\n    \"styled-components\": \"^5.3.3\",\n    \"styled-system\": \"^5.1.5\",\n    \"use-subscription\": \"^1.8.0\"\n  },\n  \"devDependencies\": {\n    \"@expo/next-adapter\": \"^3.1.3\",\n    \"@types/react\": \"17.0.30\",\n    \"eslint\": \"7.32.0\",\n    \"eslint-config-next\": \"11.1.2\",\n    \"next-compose-plugins\": \"^2.2.1\",\n    \"next-transpile-modules\": \"^8.0.0\",\n    \"react-native-web\": \"^0.18.9\",\n    \"typescript\": \"4.4.4\"\n  }\n}\n"
  },
  {
    "path": "next-example/pages/_app.tsx",
    "content": "import React from 'react';\nimport type { AppProps } from 'next/app';\nimport { NativeBaseProvider } from 'native-base';\n\nfunction MyApp({ Component, pageProps }: AppProps) {\n  return (\n    <NativeBaseProvider isSSR>\n      <Component {...pageProps} />\n    </NativeBaseProvider>\n  );\n}\nexport default MyApp;\n"
  },
  {
    "path": "next-example/pages/_document.js",
    "content": "// @generated: @expo/next-adapter@3.1.3\nexport { default } from '@expo/next-adapter/document';\n"
  },
  {
    "path": "next-example/pages/api/hello.ts",
    "content": "// Next.js API route support: https://nextjs.org/docs/api-routes/introduction\nimport type { NextApiRequest, NextApiResponse } from 'next'\n\ntype Data = {\n  name: string\n}\n\nexport default function handler(\n  req: NextApiRequest,\n  res: NextApiResponse<Data>\n) {\n  res.status(200).json({ name: 'John Doe' })\n}\n"
  },
  {
    "path": "next-example/pages/index.tsx",
    "content": "import React from 'react';\nimport type { NextPage } from 'next';\nimport { Text } from 'react-native';\nimport { Box, Stack, Button } from 'native-base';\n\nconst Home: NextPage = () => {\n  return (\n    <Stack\n      // space={[10, 20, 32]}\n      space={[10, 20, 24]}\n      // space={'10'}\n      direction={['row', 'column', 'row']}\n      // direction={'column'}\n      // flexWrap={'wrap'}\n    >\n      {/* <Text>hi</Text> */}\n      <Text>Hello</Text>\n      <Text>Hello</Text>\n      <Text>Hello</Text>\n      <Text>Hello</Text>\n      <Text>Hello</Text>\n      <Text>Hello</Text>\n      <Text>Hello</Text>\n      <Text>Hello</Text>\n      <Text>Hello</Text>\n      <Text>Hello</Text>\n\n      {/* <Button\n        w=\"16\"\n        bg={['red.900', 'light.200', 'lightBlue.100']}\n        // _text={{ color: ['white', 'black', 'red.900'] }}\n      >\n        Text\n      </Button> */}\n      {/* <Button\n        w=\"16\"\n        bg={['red.900', 'light.200', 'lightBlue.100']}\n        // _text={{ color: ['white', 'black', 'red.900'] }}\n      >\n        Text\n      </Button>\n      <Button\n        w=\"16\"\n        bg={['red.900', 'light.200', 'lightBlue.100']}\n        // _text={{ color: ['white', 'black', 'red.900'] }}\n      >\n        Text\n      </Button>\n      <Button\n        w=\"16\"\n        bg={['red.900', 'light.200', 'lightBlue.100']}\n        // _text={{ color: ['white', 'black', 'red.900'] }}\n      >\n        Text\n      </Button>\n      <Button\n        w=\"16\"\n        bg={['red.900', 'light.200', 'lightBlue.100']}\n        // _text={{ color: ['white', 'black', 'red.900'] }}\n      >\n        Text\n      </Button>\n      <Button\n        w=\"16\"\n        bg={['red.900', 'light.200', 'lightBlue.100']}\n        // _text={{ color: ['white', 'black', 'red.900'] }}\n      >\n        Text\n      </Button>\n      <Button\n        w=\"16\"\n        bg={['red.900', 'light.200', 'lightBlue.100']}\n        // _text={{ color: ['white', 'black', 'red.900'] }}\n      >\n        Text\n      </Button>\n      <Button\n        w=\"16\"\n        bg={['red.900', 'light.200', 'lightBlue.100']}\n        // _text={{ color: ['white', 'black', 'red.900'] }}\n      >\n        Text\n      </Button>\n      <Button\n        w=\"16\"\n        bg={['red.900', 'light.200', 'lightBlue.100']}\n        // _text={{ color: ['white', 'black', 'red.900'] }}\n      >\n        Text\n      </Button>\n\n      <Button\n        w=\"16\"\n        bg={['red.900', 'light.200', 'lightBlue.100']}\n        // _text={{ color: ['white', 'black', 'red.900'] }}\n      >\n        Text\n      </Button>\n\n      <Button\n        w=\"16\"\n        bg={['red.900', 'light.200', 'lightBlue.100']}\n        // _text={{ color: ['white', 'black', 'red.900'] }}\n      >\n        Text\n      </Button> */}\n      {/* \n <Button\n        w=\"16\"\n        bg={['red.900', 'light.200', 'lightBlue.100']}\n        // _text={{ color: ['white', 'black', 'red.900'] }}\n      >\n        Text\n      </Button> */}\n      {/* <Box boxSize=\"20\" bg=\"red.100\"></Box> */}\n    </Stack>\n  );\n};\n\nexport default Home;\n"
  },
  {
    "path": "next-example/styles/Home.module.css",
    "content": ".container {\n  min-height: 100vh;\n  padding: 0 0.5rem;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  height: 100vh;\n}\n\n.main {\n  padding: 5rem 0;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\n.footer {\n  width: 100%;\n  height: 100px;\n  border-top: 1px solid #eaeaea;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.footer a {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-grow: 1;\n}\n\n.title a {\n  color: #0070f3;\n  text-decoration: none;\n}\n\n.title a:hover,\n.title a:focus,\n.title a:active {\n  text-decoration: underline;\n}\n\n.title {\n  margin: 0;\n  line-height: 1.15;\n  font-size: 4rem;\n}\n\n.title,\n.description {\n  text-align: center;\n}\n\n.description {\n  line-height: 1.5;\n  font-size: 1.5rem;\n}\n\n.code {\n  background: #fafafa;\n  border-radius: 5px;\n  padding: 0.75rem;\n  font-size: 1.1rem;\n  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,\n    Bitstream Vera Sans Mono, Courier New, monospace;\n}\n\n.grid {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-wrap: wrap;\n  max-width: 800px;\n  margin-top: 3rem;\n}\n\n.card {\n  margin: 1rem;\n  padding: 1.5rem;\n  text-align: left;\n  color: inherit;\n  text-decoration: none;\n  border: 1px solid #eaeaea;\n  border-radius: 10px;\n  transition: color 0.15s ease, border-color 0.15s ease;\n  width: 45%;\n}\n\n.card:hover,\n.card:focus,\n.card:active {\n  color: #0070f3;\n  border-color: #0070f3;\n}\n\n.card h2 {\n  margin: 0 0 1rem 0;\n  font-size: 1.5rem;\n}\n\n.card p {\n  margin: 0;\n  font-size: 1.25rem;\n  line-height: 1.5;\n}\n\n.logo {\n  height: 1em;\n  margin-left: 0.5rem;\n}\n\n@media (max-width: 600px) {\n  .grid {\n    width: 100%;\n    flex-direction: column;\n  }\n}\n"
  },
  {
    "path": "next-example/styles/globals.css",
    "content": "html,\nbody {\n  padding: 0;\n  margin: 0;\n  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,\n    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;\n}\n\na {\n  color: inherit;\n  text-decoration: none;\n}\n\n* {\n  box-sizing: border-box;\n}\n"
  },
  {
    "path": "next-example/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"paths\": {\n      \"native-base\": [\"../src\"]\n    },\n    \"target\": \"es5\",\n    \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"strict\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"noEmit\": true,\n    \"esModuleInterop\": true,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"node\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"jsx\": \"preserve\"\n  },\n  \"include\": [\"next-env.d.ts\", \"**/*.ts\", \"**/*.tsx\"],\n  \"exclude\": [\"node_modules\"]\n}\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"native-base\",\n  \"description\": \"Essential cross-platform UI components for React Native\",\n  \"sideEffects\": false,\n  \"keywords\": [\n    \"android\",\n    \"ios\",\n    \"react\",\n    \"native\",\n    \"react-native\",\n    \"native-modules\",\n    \"react-component\",\n    \"navbar\",\n    \"packager\"\n  ],\n  \"scripts\": {\n    \"test\": \"node_modules/.bin/jest\",\n    \"typescript\": \"tsc --noEmit\",\n    \"prepare\": \"bob build\",\n    \"release\": \"release-it\",\n    \"example\": \"yarn --cwd example\",\n    \"pods\": \"cd example && pod-install --quiet\",\n    \"bootstrap\": \"yarn example && yarn && yarn pods\",\n    \"build:web\": \"rollup --config\",\n    \"bundle:analysis\": \"visualize-bundle\",\n    \"commit-test\": \"yarn prepare && cd example && yarn test && cd ..\"\n  },\n  \"lint-staged\": {\n    \"src/**/*.{js,ts,tsx}\": [\n      \"eslint\"\n    ],\n    \"example/**/*.{js,ts,tsx}\": [\n      \"eslint\"\n    ],\n    \"*.{json,md,html}\": [\n      \"prettier --write\"\n    ]\n  },\n  \"version\": \"3.4.28\",\n  \"license\": \"MIT\",\n  \"private\": false,\n  \"main\": \"lib/commonjs/index\",\n  \"module\": \"lib/module/index\",\n  \"types\": \"lib/typescript/src/index.d.ts\",\n  \"react-native\": \"src/index\",\n  \"source\": \"src/index\",\n  \"typings\": \"lib/typescript/index.d.ts\",\n  \"devDependencies\": {\n    \"@commitlint/config-conventional\": \"^8.3.4\",\n    \"@react-native-community/bob\": \"^0.16.2\",\n    \"@react-native-community/eslint-config\": \"^2.0.0\",\n    \"@release-it/conventional-changelog\": \"^1.1.4\",\n    \"@testing-library/react-hooks\": \"^5.0.3\",\n    \"@testing-library/react-native\": \"^7.1.0\",\n    \"@types/jest\": \"^26.0.0\",\n    \"@types/lodash.clonedeep\": \"^4.5.6\",\n    \"@types/lodash.get\": \"^4.4.6\",\n    \"@types/lodash.has\": \"^4.5.6\",\n    \"@types/lodash.isempty\": \"^4.4.6\",\n    \"@types/lodash.isequal\": \"^4.5.5\",\n    \"@types/lodash.isnil\": \"^4.0.6\",\n    \"@types/lodash.merge\": \"^4.6.6\",\n    \"@types/lodash.mergewith\": \"^4.6.6\",\n    \"@types/lodash.omit\": \"^4.5.6\",\n    \"@types/lodash.omitby\": \"^4.6.6\",\n    \"@types/lodash.pick\": \"^4.4.6\",\n    \"@types/lodash.uniqueid\": \"^4.0.7\",\n    \"@types/react\": \"^16.9.19\",\n    \"@types/react-native\": \"~0.63.2\",\n    \"@types/tinycolor2\": \"^1.4.2\",\n    \"@types/use-sync-external-store\": \"^0.0.3\",\n    \"babel-plugin-transform-remove-console\": \"^6.9.4\",\n    \"commitlint\": \"^8.3.5\",\n    \"eslint\": \"^7.10.0\",\n    \"eslint-config-prettier\": \"^6.11.0\",\n    \"eslint-plugin-prettier\": \"^3.1.3\",\n    \"husky\": \"^4.2.5\",\n    \"jest\": \"^26.0.1\",\n    \"jest-expo\": \"^40.0.1\",\n    \"lint-staged\": \"^11.1.1\",\n    \"metro-react-native-babel-preset\": \"^0.64.0\",\n    \"pod-install\": \"^0.1.0\",\n    \"postinstall-postinstall\": \"^2.1.0\",\n    \"prettier\": \"^2.0.5\",\n    \"react\": \"17.0.1\",\n    \"react-dom\": \"17.0.1\",\n    \"react-native\": \"0.63.2\",\n    \"react-native-safe-area-context\": \"^3.1.9\",\n    \"react-native-svg\": \"^12.1.0\",\n    \"react-native-web\": \"^0.17.7\",\n    \"react-test-renderer\": \"^16.9.0\",\n    \"release-it\": \"^13.5.8\",\n    \"rollup\": \"^2.34.1\",\n    \"rollup-plugin-flow\": \"^1.1.1\",\n    \"typescript\": \"4.6\",\n    \"visualize-bundle\": \"^1.4.0\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-native\": \"*\",\n    \"react\": \"*\",\n    \"react-dom\": \"*\",\n    \"react-native\": \"*\",\n    \"react-native-safe-area-context\": \"*\",\n    \"react-native-svg\": \"*\"\n  },\n  \"jest\": {\n    \"preset\": \"jest-expo\",\n    \"transform\": {\n      \"^.+\\\\.js$\": \"<rootDir>/node_modules/react-native/jest/preprocessor.js\"\n    },\n    \"modulePathIgnorePatterns\": [\n      \"<rootDir>/example/*\",\n      \"<rootDir>/lib/\"\n    ],\n    \"transformIgnorePatterns\": [\n      \"node_modules/(?!(@react-native|react-native|expo-asset|expo-constants|@unimodules|react-native-unimodules|expo-font|react-native-svg|@expo/vector-icons|react-native-vector-icons|@react-native-aria/checkbox|@react-native-aria/interactions|@react-native-aria/button|@react-native-aria/switch|@react-native-aria/toggle|@react-native-aria/utils|@react-native-aria/*))\"\n    ],\n    \"setupFiles\": [\n      \"<rootDir>/src/jest/mock.ts\"\n    ]\n  },\n  \"husky\": {\n    \"hooks\": {\n      \"commit-msg\": \"commitlint -E HUSKY_GIT_PARAMS\",\n      \"pre-commit\": \"yarn lint-staged\"\n    }\n  },\n  \"commitlint\": {\n    \"extends\": [\n      \"@commitlint/config-conventional\"\n    ]\n  },\n  \"release-it\": {\n    \"git\": {\n      \"commitMessage\": \"chore: release ${version}\",\n      \"tagName\": \"v${version}\"\n    },\n    \"npm\": {\n      \"publish\": true\n    },\n    \"github\": {\n      \"release\": true\n    },\n    \"plugins\": {\n      \"@release-it/conventional-changelog\": {\n        \"preset\": \"angular\"\n      }\n    }\n  },\n  \"eslintIgnore\": [\n    \"node_modules/\",\n    \"lib/\",\n    \"cli.js\",\n    \"example/webpack.config.js\",\n    \"example/babel.config.js\",\n    \"example/metro.config.js\"\n  ],\n  \"prettier\": {\n    \"quoteProps\": \"consistent\",\n    \"singleQuote\": true,\n    \"tabWidth\": 2,\n    \"trailingComma\": \"es5\",\n    \"useTabs\": false\n  },\n  \"@react-native-community/bob\": {\n    \"source\": \"src\",\n    \"output\": \"lib\",\n    \"targets\": [\n      [\n        \"commonjs\"\n      ],\n      [\n        \"module\"\n      ],\n      \"typescript\"\n    ]\n  },\n  \"dependencies\": {\n    \"@react-aria/visually-hidden\": \"^3.2.1\",\n    \"@react-native-aria/button\": \"^0.2.4\",\n    \"@react-native-aria/checkbox\": \"^0.2.3\",\n    \"@react-native-aria/combobox\": \"^0.2.4-alpha.0\",\n    \"@react-native-aria/focus\": \"^0.2.6\",\n    \"@react-native-aria/interactions\": \"^0.2.2\",\n    \"@react-native-aria/listbox\": \"^0.2.4-alpha.3\",\n    \"@react-native-aria/overlays\": \"^0.3.3\",\n    \"@react-native-aria/radio\": \"^0.2.4\",\n    \"@react-native-aria/slider\": \"^0.2.5-alpha.1\",\n    \"@react-native-aria/tabs\": \"^0.2.7\",\n    \"@react-native-aria/utils\": \"^0.2.8\",\n    \"@react-stately/checkbox\": \"3.0.3\",\n    \"@react-stately/collections\": \"3.3.0\",\n    \"@react-stately/combobox\": \"3.0.0-alpha.1\",\n    \"@react-stately/radio\": \"3.2.1\",\n    \"@react-stately/slider\": \"3.0.1\",\n    \"@react-stately/tabs\": \"3.0.0-alpha.1\",\n    \"@react-stately/toggle\": \"3.2.1\",\n    \"inline-style-prefixer\": \"^6.0.1\",\n    \"lodash.clonedeep\": \"^4.5.0\",\n    \"lodash.get\": \"^4.4.2\",\n    \"lodash.has\": \"^4.5.2\",\n    \"lodash.isempty\": \"^4.4.0\",\n    \"lodash.isequal\": \"^4.5.0\",\n    \"lodash.isnil\": \"^4.0.0\",\n    \"lodash.merge\": \"^4.6.2\",\n    \"lodash.mergewith\": \"^4.6.2\",\n    \"lodash.omit\": \"^4.5.0\",\n    \"lodash.omitby\": \"^4.6.0\",\n    \"lodash.pick\": \"^4.4.0\",\n    \"lodash.uniqueid\": \"^4.0.1\",\n    \"stable-hash\": \"^0.0.2\",\n    \"tinycolor2\": \"^1.4.2\",\n    \"use-sync-external-store\": \"^1.2.0\"\n  },\n  \"directories\": {\n    \"example\": \"example\",\n    \"lib\": \"lib\"\n  },\n  \"gitHead\": \"5bbeacc403ba97622703699132c55d8359344004\",\n  \"homepage\": \"https://github.com/GeekyAnts/NativeBase#readme\",\n  \"readmeFilename\": \"README.md\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/GeekyAnts/NativeBase.git\"\n  },\n  \"collective\": {\n    \"type\": \"opencollective\",\n    \"url\": \"https://opencollective.com/NativeBase\"\n  },\n  \"files\": [\n    \"src\",\n    \"lib\",\n    \"cli.js\"\n  ]\n}\n"
  },
  {
    "path": "sonar-project.properties",
    "content": "sonar.projectKey=GeekyAnts_NativeBase_AYYLs_jd-qOzU22UD5wX\n"
  },
  {
    "path": "src/components/basic/FlatList/FlatList.tsx",
    "content": "import React, { forwardRef } from 'react';\nimport { FlatList as RNFlatList } from 'react-native';\nimport {\n  usePropsResolution,\n  useStyledSystemPropsResolver,\n} from '../../../hooks';\nimport { makeStyledComponent } from '../../../utils/styled';\nimport type { IFlatListProps } from './types';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst StyledFlatList: any = makeStyledComponent(RNFlatList);\n\nconst FlatListComponent = <ItemT extends any>(\n  props: IFlatListProps<ItemT>,\n  ref: any\n) => {\n  const {\n    _contentContainerStyle,\n    contentContainerStyle,\n    ...resolvedProps\n  } = usePropsResolution('FlatList', props);\n  const resolved_ContentContainerStyle = useStyledSystemPropsResolver(\n    _contentContainerStyle || {}\n  );\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <StyledFlatList\n      {...resolvedProps}\n      contentContainerStyle={\n        contentContainerStyle || resolved_ContentContainerStyle\n      }\n      ref={ref}\n    />\n  );\n};\n\nexport const FlatList = forwardRef(FlatListComponent) as <ItemT>(\n  props: IFlatListProps<ItemT>,\n  ref: any\n) => any;\n"
  },
  {
    "path": "src/components/basic/FlatList/index.tsx",
    "content": "export { FlatList } from './FlatList';\nexport type { IFlatListProps } from './types';\n"
  },
  {
    "path": "src/components/basic/FlatList/types.ts",
    "content": "import type { StyledProps } from '../../../theme/types';\nimport type { FlatListProps } from 'react-native';\nimport type { CustomProps, PlatformProps } from '../../types';\nimport type { MutableRefObject } from 'react';\n\nexport interface InterfaceFlatListProps<ItemT>\n  extends FlatListProps<ItemT>,\n    StyledProps,\n    PlatformProps<IFlatListProps<ItemT>> {\n  /**\n   * pass props to contentContainerStyle, and this also resolved NB tokens.\n   */\n  _contentContainerStyle?: Partial<IFlatListProps<ItemT>>;\n  ref?: MutableRefObject<any>;\n}\n\nexport type IFlatListProps<ItemT> = InterfaceFlatListProps<ItemT> &\n  CustomProps<'FlatList'>;\n"
  },
  {
    "path": "src/components/basic/KeyboardAvoidingView/KeyboardAvoidingView.tsx",
    "content": "import React, { forwardRef } from 'react';\nimport { KeyboardAvoidingView as RNKeyboardAvoidingView } from 'react-native';\nimport { usePropsResolution } from '../../../hooks';\nimport { makeStyledComponent } from '../../../utils/styled';\nimport type { IKeyboardAvoidingViewProps } from './types';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst StyledKeyboardAvoidingView: any = makeStyledComponent(\n  RNKeyboardAvoidingView\n);\n\nexport const KeyboardAvoidingView = forwardRef(\n  (props: IKeyboardAvoidingViewProps, ref: any) => {\n    const { ...resolvedProps } = usePropsResolution(\n      'KeyboardAvoidingView',\n      props,\n      {}\n    );\n    //TODO: refactor for responsive prop\n    if (useHasResponsiveProps(props)) {\n      return null;\n    }\n    return <StyledKeyboardAvoidingView {...resolvedProps} ref={ref} />;\n  }\n);\n"
  },
  {
    "path": "src/components/basic/KeyboardAvoidingView/index.tsx",
    "content": "export { KeyboardAvoidingView } from './KeyboardAvoidingView';\n"
  },
  {
    "path": "src/components/basic/KeyboardAvoidingView/types.ts",
    "content": "import type { KeyboardAvoidingViewProps } from 'react-native';\nimport type { StyledProps } from '../../../theme/types';\nimport type { CustomProps, PlatformProps } from '../../types';\n\nexport interface InterfaceKeyboardAvoidingViewProps\n  extends KeyboardAvoidingViewProps,\n    StyledProps,\n    PlatformProps<IKeyboardAvoidingViewProps> {\n  /**\n   * Renders components as Box children. Accepts a JSX.Element or an array of JSX.Element. */\n  children?: JSX.Element | JSX.Element[] | string | any;\n}\n\nexport type IKeyboardAvoidingViewProps = InterfaceKeyboardAvoidingViewProps &\n  CustomProps<'KeyboardAvoidingView'>;\n"
  },
  {
    "path": "src/components/basic/ScrollView/ScrollView.tsx",
    "content": "import React, { forwardRef } from 'react';\nimport { ScrollView as RNScrollView } from 'react-native';\nimport {\n  usePropsResolution,\n  useStyledSystemPropsResolver,\n} from '../../../hooks';\nimport { makeStyledComponent } from '../../../utils/styled';\nimport type { IScrollViewProps } from './types';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst StyledScrollView: any = makeStyledComponent(RNScrollView);\n\nexport const ScrollView = forwardRef((props: IScrollViewProps, ref: any) => {\n  const {\n    _contentContainerStyle,\n    contentContainerStyle,\n    ...resolvedProps\n  } = usePropsResolution('ScrollView', props, {});\n  const resolved_ContentContainerStyle = useStyledSystemPropsResolver(\n    _contentContainerStyle || {}\n  );\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <StyledScrollView\n      {...resolvedProps}\n      contentContainerStyle={\n        contentContainerStyle || resolved_ContentContainerStyle\n      }\n      ref={ref}\n    />\n  );\n});\n"
  },
  {
    "path": "src/components/basic/ScrollView/index.tsx",
    "content": "export { ScrollView } from './ScrollView';\nexport type { IScrollViewProps } from './types';\n"
  },
  {
    "path": "src/components/basic/ScrollView/types.ts",
    "content": "import type { ScrollViewProps } from 'react-native';\nimport type { StyledProps } from '../../../theme/types';\nimport type { CustomProps, PlatformProps } from '../../types';\n\nexport interface InterfaceScrollViewProps\n  extends ScrollViewProps,\n    StyledProps,\n    PlatformProps<IScrollViewProps> {\n  /**\n   * Renders components as Box children. Accepts a JSX.Element or an array of JSX.Element. */\n  children?: JSX.Element | JSX.Element[] | string | any;\n  /**\n   * Pass props to contentContainerStyle, and this also resolves NB tokens.\n   */\n  _contentContainerStyle?: Partial<IScrollViewProps>;\n}\n\nexport type IScrollViewProps = InterfaceScrollViewProps &\n  CustomProps<'ScrollView'>;\n"
  },
  {
    "path": "src/components/basic/SectionList/SectionList.tsx",
    "content": "import React, { forwardRef } from 'react';\nimport { SectionList as RNSectionList } from 'react-native';\nimport { usePropsResolution } from '../../../hooks';\nimport { makeStyledComponent } from '../../../utils/styled';\nimport type { ISectionListProps } from './types';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst StyledSectionList: any = makeStyledComponent(RNSectionList);\n\nconst SectionListComponent = <ItemT extends any, sectionT extends any>(\n  props: ISectionListProps<ItemT, sectionT>,\n  ref: any\n) => {\n  const { ...resolvedProps } = usePropsResolution('SectionList', props);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n\n  return <StyledSectionList {...resolvedProps} ref={ref} />;\n};\n\nexport const SectionList = forwardRef(SectionListComponent) as <\n  ItemT,\n  sectionT\n>(\n  props: ISectionListProps<ItemT, sectionT>,\n  ref: any\n) => any;\n"
  },
  {
    "path": "src/components/basic/SectionList/index.tsx",
    "content": "export { SectionList } from './SectionList';\n"
  },
  {
    "path": "src/components/basic/SectionList/types.ts",
    "content": "import type { StyledProps } from '../../../theme/types';\nimport type { SectionListProps } from 'react-native';\nimport type { CustomProps, PlatformProps } from '../../types';\nimport type { MutableRefObject } from 'react';\ntype DefaultSectionT = {\n  [key: string]: any;\n};\n// TODO: any need to fixed\nexport interface InterfaceSectionListProps<ItemT, sectionT = DefaultSectionT>\n  extends SectionListProps<ItemT, sectionT>,\n    StyledProps,\n    PlatformProps<ISectionListProps<ItemT, sectionT>> {\n  ref?: MutableRefObject<any>;\n}\n\nexport type ISectionListProps<\n  ItemT,\n  sectionT = DefaultSectionT\n> = InterfaceSectionListProps<ItemT, sectionT> & CustomProps<'SectionList'>;\n"
  },
  {
    "path": "src/components/basic/StatusBar/StatusBar.tsx",
    "content": "import React, { forwardRef } from 'react';\nimport { StatusBar as RNStatusBar, StatusBarProps } from 'react-native';\n// import type { IStatusBarProps } from './types';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nexport const StatusBar = forwardRef((props: StatusBarProps, ref: any) => {\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return <RNStatusBar {...props} ref={ref} />;\n});\n"
  },
  {
    "path": "src/components/basic/StatusBar/index.tsx",
    "content": "export { StatusBar } from './StatusBar';\n"
  },
  {
    "path": "src/components/basic/StatusBar/types.ts",
    "content": "import type { StatusBarProps } from 'react-native';\nimport type { CustomProps } from '../../../components/types';\n\nexport interface InterfaceStatusBarProps extends StatusBarProps {}\nexport type IStatusBarProps = InterfaceStatusBarProps &\n  CustomProps<'StatusBar'>;\n\nexport type IStatusBarComponentType = (props: IStatusBarProps) => JSX.Element;\n"
  },
  {
    "path": "src/components/basic/View/View.tsx",
    "content": "import React, { forwardRef } from 'react';\nimport { View as RNView } from 'react-native';\nimport { usePropsResolution } from '../../../hooks';\nimport { makeStyledComponent } from '../../../utils/styled';\nimport type { IViewProps } from './types';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst StyledView: any = makeStyledComponent(RNView);\n\nexport const View = forwardRef((props: IViewProps, ref: any) => {\n  const { ...resolvedProps } = usePropsResolution('View', props);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return <StyledView {...resolvedProps} ref={ref} />;\n});\n"
  },
  {
    "path": "src/components/basic/View/index.tsx",
    "content": "export { View } from './View';\n"
  },
  {
    "path": "src/components/basic/View/types.ts",
    "content": "import type { StyledProps } from '../../../theme/types';\nimport type { ViewProps } from 'react-native';\nimport type { CustomProps, PlatformProps } from '../../types';\n\nexport interface InterfaceViewProps\n  extends ViewProps,\n    StyledProps,\n    PlatformProps<IViewProps> {\n  /**\n   * Renders components as Box children. Accepts a JSX.Element or an array of JSX.Element. */\n  children?: JSX.Element | JSX.Element[] | string | any;\n}\n\nexport type IViewProps = InterfaceViewProps & CustomProps<'View'>;\n"
  },
  {
    "path": "src/components/basic/index.tsx",
    "content": "export { ScrollView } from './ScrollView';\nexport type { IScrollViewProps } from './ScrollView';\nexport { View } from './View';\nexport { StatusBar } from './StatusBar';\nexport { FlatList } from './FlatList';\nexport { SectionList } from './SectionList';\nexport { KeyboardAvoidingView } from './KeyboardAvoidingView';\n"
  },
  {
    "path": "src/components/composites/Accordion/Accordion.tsx",
    "content": "import React from 'react';\nimport Box from '../../primitives/Box';\nimport type { IAccordionProps } from './types';\nimport { useThemeProps } from '../../../hooks';\nimport getIndexedChildren from '../../../utils/getIndexedChildren';\nimport { AccordionContext } from './Context';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst Accordion = (\n  {\n    children,\n    index: pIndex,\n    defaultIndex,\n    allowMultiple,\n    allowToggle,\n    onChange,\n    ...props\n  }: IAccordionProps,\n  ref: any\n) => {\n  const {\n    endingHeight,\n    startingHeight,\n    duration,\n    isOpen,\n    onAnimationEnd,\n    onAnimationStart,\n    ...newProps\n  } = useThemeProps('Accordion', props);\n\n  const [index, setIndex] = React.useState(pIndex || defaultIndex || []);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  const changeHandler = (isOpening: boolean, activeIndex: number) => {\n    let indexCopy = index.map((i: number) => i);\n    if (allowToggle) {\n      if (isOpening) {\n        indexCopy.push(activeIndex);\n        allowMultiple ? setIndex(indexCopy) : setIndex([activeIndex]);\n      } else {\n        setIndex(index.splice(index.indexOf(activeIndex), 1));\n      }\n    } else {\n      if (isOpening) {\n        indexCopy.push(activeIndex);\n        allowMultiple ? setIndex(indexCopy) : setIndex([activeIndex]);\n      } else {\n        indexCopy = indexCopy.filter((n: any) => n !== activeIndex);\n        setIndex(indexCopy);\n      }\n    }\n    onChange && onChange(indexCopy);\n  };\n  return (\n    <AccordionContext.Provider\n      value={{\n        index: index,\n        changeHandler,\n        AnimationProps: {\n          endingHeight,\n          startingHeight,\n          duration,\n          isOpen,\n          onAnimationEnd,\n          onAnimationStart,\n        },\n      }}\n    >\n      <Box overflow=\"hidden\" {...newProps} ref={ref}>\n        {getIndexedChildren(children)}\n      </Box>\n    </AccordionContext.Provider>\n  );\n};\n\nexport default React.memo(React.forwardRef(Accordion));\n"
  },
  {
    "path": "src/components/composites/Accordion/AccordionDetails.tsx",
    "content": "import React from 'react';\nimport { AccordionContext, AccordionItemContext } from './Context';\nimport Collapse from '../Collapse';\nimport type {\n  IAccordionDetailsProps,\n  IAccordionContextProps,\n  IAccordionItemContextProps,\n} from './types';\nimport { useThemeProps } from '../../../hooks';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst AccordionDetails = (\n  { children, ...props }: IAccordionDetailsProps,\n  ref?: any\n) => {\n  const { ...newProps } = useThemeProps('AccordionDetails', props);\n  const { isOpen }: IAccordionItemContextProps = React.useContext(\n    AccordionItemContext\n  );\n  const { AnimationProps }: IAccordionContextProps = React.useContext(\n    AccordionContext\n  );\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <Collapse {...AnimationProps} {...newProps} isOpen={isOpen} ref={ref}>\n      {children}\n    </Collapse>\n  );\n};\n\nexport default React.memo(React.forwardRef(AccordionDetails));\n"
  },
  {
    "path": "src/components/composites/Accordion/AccordionIcon.tsx",
    "content": "import React from 'react';\nimport { ChevronDownIcon, ChevronUpIcon } from '../../primitives/Icon/Icons';\nimport type { IAccordionIconProps, IAccordionItemContextProps } from './types';\nimport { AccordionItemContext } from './Context';\nimport { useThemeProps } from '../../../hooks';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst AccordionIcon = ({ ...props }: IAccordionIconProps, ref?: any) => {\n  const { isOpen }: IAccordionItemContextProps = React.useContext(\n    AccordionItemContext\n  );\n  const { ...newProps } = useThemeProps('AccordionIcon', props);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return isOpen ? (\n    <ChevronUpIcon color=\"white\" {...newProps} ref={ref} />\n  ) : (\n    <ChevronDownIcon {...newProps} ref={ref} />\n  );\n};\n\nexport default React.memo(React.forwardRef(AccordionIcon));\n"
  },
  {
    "path": "src/components/composites/Accordion/AccordionItem.tsx",
    "content": "import React from 'react';\nimport Box from '../../primitives/Box';\nimport { AccordionContext, AccordionItemContext } from './Context';\nimport type { IAccordionItemProps, IAccordionContextProps } from './types';\nimport { useThemeProps } from '../../../hooks';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst AccordionItem = (\n  { children, index: pIndex = 0, isDisabled, ...props }: IAccordionItemProps,\n  ref?: any\n) => {\n  const {\n    index: cIndex,\n    changeHandler,\n  }: IAccordionContextProps = React.useContext(AccordionContext);\n  const { ...newProps } = useThemeProps('AccordionItem', props);\n\n  const isOpen = cIndex?.includes(pIndex);\n  const onClose = (cb?: () => void) => {\n    changeHandler && changeHandler(false, pIndex);\n    cb && cb();\n  };\n  const onOpen = (cb?: () => void) => {\n    changeHandler && changeHandler(true, pIndex);\n    cb && cb();\n  };\n  const childSetter = () => {\n    if (typeof children === 'function')\n      return children({ isExpanded: isOpen, isDisabled });\n    return children;\n  };\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <AccordionItemContext.Provider\n      value={{\n        index: pIndex,\n        isOpen,\n        isDisabled,\n        onClose,\n        onOpen,\n      }}\n    >\n      <Box {...newProps} ref={ref}>\n        {childSetter()}\n      </Box>\n    </AccordionItemContext.Provider>\n  );\n};\n\nexport default React.memo(React.forwardRef(AccordionItem));\n"
  },
  {
    "path": "src/components/composites/Accordion/AccordionSummary.tsx",
    "content": "import React from 'react';\nimport { TouchableOpacity, Platform } from 'react-native';\nimport Box from '../../primitives/Box';\nimport type {\n  IAccordionSummaryProps,\n  IAccordionItemContextProps,\n} from './types';\nimport { AccordionItemContext } from './Context';\nimport { useThemeProps } from '../../../hooks';\nimport { mergeRefs } from '../../../utils';\nimport { useHover } from '@react-native-aria/interactions';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst AccordionSummary = (\n  { children, ...props }: IAccordionSummaryProps,\n  ref: any\n) => {\n  const {\n    index,\n    isOpen,\n    isDisabled,\n    onOpen,\n    onClose,\n  }: IAccordionItemContextProps = React.useContext(AccordionItemContext);\n\n  const { _hover, _expanded, _disabled, ...themedProps } = useThemeProps(\n    'AccordionSummary',\n    props\n  );\n  const pressHandler = () => {\n    isOpen ? onClose && onClose() : onOpen && onOpen();\n  };\n\n  const _ref = React.useRef(null);\n  const { isHovered } = useHover({}, _ref);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <TouchableOpacity\n      activeOpacity={0.2}\n      disabled={isDisabled}\n      onPress={pressHandler}\n      accessible\n      accessibilityRole=\"checkbox\"\n      ref={mergeRefs([ref, _ref])}\n    >\n      <Box\n        display=\"flex\"\n        flexDirection=\"row\"\n        justifyContent=\"space-between\"\n        alignItems=\"center\"\n        {...themedProps}\n        {...(isHovered && _hover)}\n        {...(isOpen && _expanded)}\n        {...(isDisabled && _disabled)}\n        {...(!index && { borderTopColor: 'transparent' })}\n        {...(Platform.OS === 'web'\n          ? {\n              disabled: isDisabled,\n              cursor: isDisabled ? 'not-allowed' : 'auto',\n            }\n          : {})}\n      >\n        {children}\n      </Box>\n    </TouchableOpacity>\n  );\n};\n\nexport default React.memo(React.forwardRef(AccordionSummary));\n"
  },
  {
    "path": "src/components/composites/Accordion/Context.ts",
    "content": "import { createContext } from 'react';\n\nexport const AccordionContext = createContext({});\n\nexport const AccordionItemContext = createContext({});\n"
  },
  {
    "path": "src/components/composites/Accordion/index.tsx",
    "content": "import AccordionMain from './Accordion';\n\nimport { default as AccordionItem } from './AccordionItem';\nimport { default as AccordionSummary } from './AccordionSummary';\nimport { default as AccordionDetails } from './AccordionDetails';\nimport { default as AccordionIcon } from './AccordionIcon';\nimport type { IAccordionComponentType } from './types';\n\nconst AccordionTemp: any = AccordionMain;\nAccordionTemp.Item = AccordionItem;\nAccordionTemp.Summary = AccordionSummary;\nAccordionTemp.Details = AccordionDetails;\nAccordionTemp.Icon = AccordionIcon;\n\n// To add typings\nconst Accordion = AccordionTemp as IAccordionComponentType;\n\nexport { Accordion };\nexport { AccordionContext } from './Context';\nexport { AccordionItemContext } from './Context';\nexport type {\n  IAccordionProps,\n  IAccordionItemProps,\n  IAccordionSummaryProps,\n  IAccordionDetailsProps,\n  IAccordionIconProps,\n  IAccordionContextProps,\n  IAccordionItemContextProps,\n} from './types';\n"
  },
  {
    "path": "src/components/composites/Accordion/types.ts",
    "content": "import type { IIconProps } from '../../primitives';\nimport type { ICollapseProps } from '../../composites/Collapse';\nimport type { MutableRefObject } from 'react';\nimport type { InterfaceBoxProps } from '../../primitives/Box/types';\n\nexport type IAccordionProps = ICollapseProps & {\n  allowMultiple?: boolean;\n  allowToggle?: boolean;\n  index?: number[];\n  defaultIndex?: number[];\n  onChange?: (index?: number[]) => void;\n};\nexport type IAccordionItemProps = InterfaceBoxProps<IAccordionItemProps> & {\n  index?: number;\n  defaultIsOpen?: boolean;\n  isDisabled?: boolean;\n  id?: number;\n};\nexport type IAccordionSummaryProps = InterfaceBoxProps<IAccordionSummaryProps> & {\n  _expanded?: Omit<IAccordionSummaryProps, '_expanded'>;\n  _disabled?: Omit<IAccordionSummaryProps, '_disabled'>;\n  _hover?: Omit<IAccordionSummaryProps, '_hover'>;\n};\nexport type IAccordionDetailsProps = ICollapseProps & {};\nexport type IAccordionContextProps = {\n  index?: number[];\n  changeHandler?: (isOpening: boolean, id: number) => void;\n  AnimationProps?: any;\n};\nexport type IAccordionItemContextProps = {\n  index?: number;\n  isOpen?: boolean;\n  isDisabled?: boolean;\n  onClose?: () => void;\n  onOpen?: () => void;\n};\nexport type IAccordionIconProps = IIconProps;\n\nexport type IAccordionComponentType = ((\n  props: IAccordionProps & { ref?: MutableRefObject<any> }\n) => JSX.Element) & {\n  Item: React.MemoExoticComponent<\n    (\n      props: IAccordionItemProps & { ref?: MutableRefObject<any> }\n    ) => JSX.Element\n  >;\n  Summary: React.MemoExoticComponent<\n    (\n      props: IAccordionSummaryProps & { ref?: MutableRefObject<any> }\n    ) => JSX.Element\n  >;\n  Details: React.MemoExoticComponent<\n    (\n      props: IAccordionDetailsProps & { ref?: MutableRefObject<any> }\n    ) => JSX.Element\n  >;\n  Icon: React.MemoExoticComponent<\n    (\n      props: IAccordionIconProps & { ref?: MutableRefObject<any> }\n    ) => JSX.Element\n  >;\n};\n"
  },
  {
    "path": "src/components/composites/Actionsheet/ActionSheetContext.ts",
    "content": "import React from 'react';\n\nexport const ActionSheetContext = React.createContext({\n  hideDragIndicator: false,\n});\n"
  },
  {
    "path": "src/components/composites/Actionsheet/Actionsheet.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport { Modal } from '../../composites/Modal';\nimport type { IActionsheetProps } from './types';\nimport { usePropsResolution } from '../../../hooks';\nimport { ActionSheetContext } from './ActionSheetContext';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nimport { Platform } from 'react-native';\n\nconst Actionsheet = (\n  { children, hideDragIndicator = false, ...props }: IActionsheetProps,\n  ref: any\n) => {\n  const {\n    isOpen,\n    disableOverlay,\n    onClose,\n    ...resolvedProps\n  } = usePropsResolution('Actionsheet', props);\n\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  //Fixing overlay position for Web due to scrollView issue\n  let overlayStyle = Platform.OS === 'web' ? { position: 'fixed' } : {};\n\n  return (\n    <Modal\n      isOpen={isOpen}\n      onClose={onClose}\n      {...resolvedProps}\n      overlayVisible={disableOverlay ? false : true}\n      closeOnOverlayClick={disableOverlay ? false : true}\n      ref={ref}\n      _overlay={{ style: overlayStyle }}\n    >\n      <ActionSheetContext.Provider value={{ hideDragIndicator }}>\n        {children}\n      </ActionSheetContext.Provider>\n    </Modal>\n  );\n};\n\nexport default memo(forwardRef(Actionsheet));\n"
  },
  {
    "path": "src/components/composites/Actionsheet/ActionsheetContent.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport { Modal } from '../../composites/Modal';\nimport type { IActionsheetContentProps } from './types';\nimport { usePropsResolution } from '../../../hooks';\nimport { Animated, PanResponder } from 'react-native';\nimport { ModalContext } from '../Modal/Context';\nimport Box from '../../primitives/Box';\nimport { ActionSheetContext } from './ActionSheetContext';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst Content = memo(\n  forwardRef(\n    (\n      {\n        hideDragIndicator,\n        children,\n        handleClose,\n        pan,\n        sheetHeight,\n        ...props\n      }: any,\n      ref: any\n    ) => {\n      const {\n        _dragIndicator,\n        _dragIndicatorWrapperOffSet,\n        _dragIndicatorWrapper,\n        ...resolvedProps\n      } = usePropsResolution('ActionsheetContent', props);\n\n      const handleCloseRef = React.useRef(null);\n      const handleCloseCallback = React.useCallback(() => {\n        let handleCloseCurrent = handleCloseRef.current;\n        //@ts-ignore\n        return handleCloseCurrent();\n      }, []);\n      React.useEffect(() => {\n        handleCloseRef.current = handleClose;\n      }, [handleClose]);\n\n      const panResponder = React.useRef(\n        PanResponder.create({\n          onStartShouldSetPanResponder: () => true,\n          onMoveShouldSetPanResponder: (_evt, gestureState) => {\n            return gestureState.dy > 15;\n          },\n          onPanResponderMove: (e, gestureState) => {\n            if (gestureState.dy > 0) {\n              Animated.event([null, { dy: pan.y }], {\n                useNativeDriver: false,\n              })(e, gestureState);\n            }\n          },\n          onPanResponderRelease: (_e, gestureState) => {\n            // If sheet is dragged 1/4th of it's height, close it\n            if (sheetHeight.current / 4 - gestureState.dy < 0) {\n              Animated.timing(pan, {\n                toValue: { x: 0, y: sheetHeight.current },\n                duration: 150,\n                useNativeDriver: true,\n              }).start(handleCloseCallback);\n\n              setTimeout(() => {\n                Animated.timing(pan, {\n                  toValue: { x: 0, y: 0 },\n                  duration: 150,\n                  useNativeDriver: true,\n                }).start();\n              }, 300);\n            } else {\n              Animated.spring(pan, {\n                toValue: { x: 0, y: 0 },\n                overshootClamping: true,\n                useNativeDriver: true,\n              }).start();\n            }\n          },\n        })\n      ).current;\n\n      return (\n        <>\n          {!hideDragIndicator ? (\n            <>\n              {/* To increase the draggable area */}\n              <Box\n                {...panResponder.panHandlers}\n                {..._dragIndicatorWrapperOffSet}\n              />\n            </>\n          ) : null}\n\n          <Modal.Content {...resolvedProps} ref={ref} safeAreaBottom>\n            {!hideDragIndicator ? (\n              <>\n                {/* Hack. Fix later. Add -2 negative margin to remove the padding added by ActionSheetContent */}\n                <Box {...panResponder.panHandlers} {..._dragIndicatorWrapper}>\n                  <Box {..._dragIndicator} />\n                </Box>\n              </>\n            ) : null}\n\n            {children}\n          </Modal.Content>\n        </>\n      );\n    }\n  )\n);\nconst ActionsheetContent = (\n  { children, ...props }: IActionsheetContentProps,\n  ref?: any\n) => {\n  // return null;\n  const { handleClose } = React.useContext(ModalContext);\n  const { hideDragIndicator } = React.useContext(ActionSheetContext);\n  const pan = React.useRef(new Animated.ValueXY()).current;\n  const sheetHeight = React.useRef(0);\n\n  const handleCloseCallback = React.useCallback(handleClose, [\n    ModalContext,\n    handleClose,\n  ]);\n\n  // useEffect(() => {\n\n  // }, [])\n\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n\n  return (\n    <Animated.View\n      style={{\n        transform: [{ translateY: pan.y }],\n        width: '100%',\n      }}\n      onLayout={(event) => {\n        const { height } = event.nativeEvent.layout;\n        sheetHeight.current = height;\n      }}\n      pointerEvents=\"box-none\"\n    >\n      <Content\n        children={children}\n        sheetHeight={sheetHeight}\n        pan={pan}\n        hideDragIndicator={hideDragIndicator}\n        handleClose={handleCloseCallback}\n        ref={ref}\n        {...props}\n      />\n    </Animated.View>\n  );\n};\n\nexport default memo(forwardRef(ActionsheetContent));\n"
  },
  {
    "path": "src/components/composites/Actionsheet/ActionsheetFooter.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport { Modal } from '../../composites/Modal';\nimport type { IActionsheetFooterProps } from './types';\nimport { usePropsResolution } from '../../../hooks';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst ActionsheetFooter = (props: IActionsheetFooterProps, ref?: any) => {\n  const resolvedProps = usePropsResolution('ActionsheetFooter', props);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return <Modal.Content {...resolvedProps} ref={ref} />;\n};\n\nexport default memo(forwardRef(ActionsheetFooter));\n"
  },
  {
    "path": "src/components/composites/Actionsheet/ActionsheetHeader.tsx",
    "content": "import React, { forwardRef, memo } from 'react';\nimport Box from '../../primitives/Box';\nimport type { IActionsheetHeaderProps } from './types';\nimport { usePropsResolution } from '../../../hooks';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst ActionsheetHeader = (props: IActionsheetHeaderProps, ref?: any) => {\n  const resolvedProps = usePropsResolution('ActionsheetHeader', props);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <Box\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      {...resolvedProps}\n      ref={ref}\n    />\n  );\n};\n\nexport default memo(forwardRef(ActionsheetHeader));\n"
  },
  {
    "path": "src/components/composites/Actionsheet/ActionsheetItem.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport { Pressable } from '../../primitives/Pressable';\nimport Box from '../../primitives/Box';\nimport { HStack } from '../../primitives/Stack';\nimport Spinner from '../../primitives/Spinner';\nimport { usePropsResolution } from '../../../hooks';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nimport type { IActionsheetItemProps } from './types';\n\nconst ActionsheetItem = (\n  {\n    //@ts-ignore\n    children,\n    startIcon,\n    rightIcon,\n    leftIcon,\n    endIcon,\n    spinner,\n    isDisabled,\n    isLoading,\n    spinnerPlacement = 'start',\n    ...props\n  }: IActionsheetItemProps,\n  ref: any\n) => {\n  const {\n    _text,\n    _stack,\n    _icon,\n    _spinner,\n    isLoadingText,\n    ...resolvedProps\n  } = usePropsResolution('ActionsheetItem', props, undefined, {\n    cascadePseudoProps: true,\n  });\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n\n  if (leftIcon) {\n    startIcon = leftIcon;\n  }\n  if (rightIcon) {\n    endIcon = rightIcon;\n  }\n  if (endIcon && React.isValidElement(endIcon)) {\n    endIcon = React.Children.map(\n      endIcon,\n      (child: JSX.Element, index: number) => {\n        return React.cloneElement(child, {\n          key: `button-end-icon-${index}`,\n          ..._icon,\n          ...child.props,\n        });\n      }\n    );\n  }\n  if (startIcon && React.isValidElement(startIcon)) {\n    startIcon = React.Children.map(\n      startIcon,\n      (child: JSX.Element, index: number) => {\n        return React.cloneElement(child, {\n          key: `button-start-icon-${index}`,\n          ..._icon,\n          ...child.props,\n        });\n      }\n    );\n  }\n  const spinnerElement = spinner ? (\n    spinner\n  ) : (\n    <Spinner color={_text?.color} {..._spinner} />\n  );\n\n  const boxChildren = (child: any) => {\n    return child ? <Box _text={_text}>{child}</Box> : null;\n  };\n\n  return (\n    <Pressable disabled={isDisabled || isLoading} {...resolvedProps} ref={ref}>\n      <HStack {..._stack} test={true}>\n        {startIcon && !isLoading ? startIcon : null}\n        {isLoading && spinnerPlacement === 'start' ? spinnerElement : null}\n        {isLoading\n          ? isLoadingText\n            ? boxChildren(isLoadingText)\n            : null\n          : boxChildren(children)}\n\n        {endIcon && !isLoading ? endIcon : null}\n        {isLoading && spinnerPlacement === 'end' ? spinnerElement : null}\n      </HStack>\n    </Pressable>\n  );\n};\n\nexport default memo(forwardRef(ActionsheetItem));\n"
  },
  {
    "path": "src/components/composites/Actionsheet/index.tsx",
    "content": "import ActionsheetMain from './Actionsheet';\nimport ActionsheetItem from './ActionsheetItem';\n// import ActionsheetHeader from './ActionsheetHeader';\n// import ActionsheetFooter from './ActionsheetFooter';\nimport ActionsheetContent from './ActionsheetContent';\nimport type { IActionsheetComponentType } from './types';\n\nconst ActionsheetTemp: any = ActionsheetMain;\nActionsheetTemp.Content = ActionsheetContent;\nActionsheetTemp.Item = ActionsheetItem;\n// ActionsheetTemp.Header = ActionsheetHeader;\n// ActionsheetTemp.Footer = ActionsheetFooter;\n\n// To add typings\nconst Actionsheet = ActionsheetTemp as IActionsheetComponentType;\n\nexport { Actionsheet };\n\nexport type {\n  IActionsheetProps,\n  IActionsheetContentProps,\n  IActionsheetItemProps,\n} from './types';\n"
  },
  {
    "path": "src/components/composites/Actionsheet/types.tsx",
    "content": "import type { InterfaceButtonProps } from '../../primitives/Button/types';\nimport type { InterfaceBoxProps } from '../../primitives/Box';\nimport type { MutableRefObject } from 'react';\nimport type { CustomProps } from '../../../components/types';\n\nexport interface InterfaceActionsheetProps\n  extends InterfaceBoxProps<IActionsheetProps> {\n  /**\n   * If true, the ActionSheet will open. Useful for controllable state behavior.\n   */\n  isOpen?: boolean;\n  /**\n   * Callback invoked when the modal is closed.\n   */\n  onClose?: () => any;\n  /**\n   * If true, disables the overlay.\n   * @default false\n   */\n  disableOverlay?: boolean;\n  /**\n   * If true, hides the drag indicator.\n   * @default false\n   */\n  hideDragIndicator?: boolean;\n  /**\n   * Props applied on Overlay.\n   */\n  _backdrop?: any;\n  /* If true, renders react-native native modal\n   * @default false\n   */\n  useRNModal?: boolean;\n}\n\nexport interface IActionsheetContentProps\n  extends InterfaceBoxProps<IActionsheetContentProps> {\n  /**\n   * Props applied on area above actionsheet content.\n   */\n  _dragIndicatorWrapperOffSet?: InterfaceBoxProps<IActionsheetContentProps>;\n  /**\n   * Props applied on area around drag indicator.\n   */\n  _dragIndicatorWrapper?: InterfaceBoxProps<IActionsheetContentProps>;\n  /**\n   * Props applied on drag indicator.\n   */\n  _dragIndicator?: InterfaceBoxProps<IActionsheetContentProps>;\n}\nexport interface IActionsheetFooterProps\n  extends InterfaceBoxProps<IActionsheetFooterProps> {}\nexport interface IActionsheetHeaderProps\n  extends InterfaceBoxProps<IActionsheetHeaderProps> {}\nexport interface IActionsheetItemProps\n  extends Omit<InterfaceButtonProps, 'variant' | 'size' | 'colorScheme'> {}\n\nexport type IActionsheetComponentType = ((\n  props: IActionsheetProps & { ref?: MutableRefObject<any> }\n) => JSX.Element) & {\n  Content: React.MemoExoticComponent<\n    (\n      props: IActionsheetContentProps & { ref?: MutableRefObject<any> }\n    ) => JSX.Element\n  >;\n  Item: React.MemoExoticComponent<\n    (\n      props: IActionsheetItemProps & { ref?: MutableRefObject<any> }\n    ) => JSX.Element\n  >;\n  // Header: React.MemoExoticComponent<\n  //   (\n  //     props: IActionsheetHeaderProps & { ref?: MutableRefObject<any> }\n  //   ) => JSX.Element\n  // >;\n  // Footer: React.MemoExoticComponent<\n  //   (\n  //     props: IActionsheetFooterProps & { ref?: MutableRefObject<any> }\n  //   ) => JSX.Element\n  // >;\n};\n\nexport type IActionsheetProps = InterfaceActionsheetProps &\n  CustomProps<'Actionsheet'>;\n"
  },
  {
    "path": "src/components/composites/Alert/Alert.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport Box from '../../primitives/Box';\n// import { HStack } from '../../primitives/Stack';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport type { IAlertProps } from './types';\nimport { AlertContext } from './Context';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst Alert = ({ children, ...props }: IAlertProps, ref?: any) => {\n  const {\n    status,\n    variant,\n    _icon,\n    colorScheme,\n    ...newProps\n  } = usePropsResolution('Alert', props);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <AlertContext.Provider\n      value={{\n        status,\n        variant,\n        _icon,\n        colorScheme,\n      }}\n    >\n      <Box {...newProps} ref={ref}>\n        {children}\n      </Box>\n    </AlertContext.Provider>\n  );\n};\n\nexport default memo(forwardRef(Alert));\n"
  },
  {
    "path": "src/components/composites/Alert/AlertIcon.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport { Box } from '../../primitives';\nimport {\n  WarningIcon,\n  WarningTwoIcon,\n  InfoIcon,\n  CheckCircleIcon,\n} from '../../primitives/Icon/Icons';\nimport type { IAlertContext, IAlertIconProps } from './types';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport { AlertContext } from './Context';\nimport { omitUndefined } from '../../../theme/tools/utils';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst AlertIcon = ({ children, ...props }: IAlertIconProps, ref?: any) => {\n  let newProps = usePropsResolution('AlertIcon', props);\n  newProps = omitUndefined(newProps);\n  const { status, _icon }: IAlertContext = React.useContext(AlertContext);\n  const getIcon = () => {\n    switch (status) {\n      case 'error':\n        return <WarningTwoIcon {..._icon} {...newProps} ref={ref} />;\n      case 'warning':\n        return <WarningIcon {..._icon} {...newProps} ref={ref} />;\n      case 'success':\n        return <CheckCircleIcon {..._icon} {...newProps} ref={ref} />;\n      default:\n        return <InfoIcon {..._icon} {...newProps} ref={ref} />;\n    }\n  };\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return <Box>{children || getIcon()}</Box>;\n};\nexport default memo(forwardRef(AlertIcon));\n"
  },
  {
    "path": "src/components/composites/Alert/Context.ts",
    "content": "import { createContext } from 'react';\nexport const AlertContext = createContext({});\n"
  },
  {
    "path": "src/components/composites/Alert/index.tsx",
    "content": "import AlertIcon from './AlertIcon';\nimport AlertMain from './Alert';\n\nexport type { IAlertProps, IAlertContext } from './types';\nimport type { IAlertComponentType } from './types';\n\nconst AlertTemp: any = AlertMain;\nAlertTemp.Icon = AlertIcon;\n// To add typings\nconst Alert = AlertTemp as IAlertComponentType;\nexport { Alert };\n"
  },
  {
    "path": "src/components/composites/Alert/types.tsx",
    "content": "import type { MutableRefObject } from 'react';\nimport type { InterfaceBoxProps } from '../../../components/primitives/Box';\nimport type { IIconProps } from '../../primitives';\nimport type { ColorSchemeType, CustomProps, VariantType } from '../../types';\n\nexport interface InterfaceAlertProps extends InterfaceBoxProps<IAlertProps> {\n  /** The status of the alert\n   *  @default info\n   */\n  status?: 'info' | 'warning' | 'success' | 'error' | (string & {});\n  /** The variant of the alert style to use.\n   *  @default subtle\n   */\n  variant?: VariantType<'Alert'>;\n\n  /** The color scheme of the Alert.\n   */\n  colorScheme?: ColorSchemeType;\n}\nexport type IAlertContext = {\n  status?: string;\n  _icon?: IIconProps;\n  variant?: string;\n};\n\nexport interface IAlertIconProps extends IIconProps {}\n\nexport type IAlertComponentType = ((\n  props: IAlertProps & { ref?: MutableRefObject<any> }\n) => JSX.Element) & {\n  Icon: React.MemoExoticComponent<\n    (props: IAlertIconProps & { ref?: MutableRefObject<any> }) => JSX.Element\n  >;\n};\n\nexport type IAlertProps = InterfaceAlertProps & CustomProps<'Alert'>;\n"
  },
  {
    "path": "src/components/composites/AlertDialog/AlertDialog.tsx",
    "content": "import React, { forwardRef, memo } from 'react';\nimport { StyleSheet } from 'react-native';\nimport Backdrop from '../Backdrop';\nimport { Slide } from '../Transitions';\nimport { FocusScope } from '@react-native-aria/focus';\nimport { useControllableState, usePropsResolution } from '../../../hooks';\nimport { AlertDialogContext } from './Context';\nimport Box from '../../primitives/Box';\nimport type { IAlertDialogProps } from './types';\nimport { Fade } from '../Transitions';\nimport { useKeyboardBottomInset } from '../../../utils';\nimport { Overlay } from '../../primitives/Overlay';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst AlertDialog = (\n  {\n    children,\n    isOpen,\n    onClose,\n    defaultIsOpen,\n    initialFocusRef,\n    finalFocusRef,\n    avoidKeyboard,\n    closeOnOverlayClick = false,\n    isKeyboardDismissable = true,\n    overlayVisible = true,\n    backdropVisible = true,\n    animationPreset,\n    ...rest\n  }: IAlertDialogProps,\n  ref: any\n) => {\n  const bottomInset = useKeyboardBottomInset();\n  const {\n    contentSize,\n    _backdrop,\n    _backdropFade,\n    _fade,\n    _slide,\n    _overlay,\n    useRNModal,\n    ...restThemeProps\n  } = usePropsResolution('AlertDialog', rest);\n\n  const [visible, setVisible] = useControllableState({\n    value: isOpen,\n    defaultValue: defaultIsOpen,\n    onChange: (val) => {\n      if (!val) onClose && onClose();\n    },\n  });\n\n  const handleClose = () => setVisible(false);\n\n  const child = (\n    <Box\n      bottom={avoidKeyboard ? bottomInset + 'px' : undefined}\n      {...restThemeProps}\n      ref={ref}\n    >\n      {children}\n    </Box>\n  );\n\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(rest)) {\n    return null;\n  }\n\n  return (\n    <Overlay\n      isOpen={visible}\n      onRequestClose={handleClose}\n      isKeyboardDismissable={isKeyboardDismissable}\n      useRNModalOnAndroid\n      useRNModal={useRNModal}\n      {..._overlay}\n    >\n      <AlertDialogContext.Provider\n        value={{\n          handleClose,\n          contentSize,\n          initialFocusRef,\n          finalFocusRef,\n        }}\n      >\n        <Fade in={visible} style={StyleSheet.absoluteFill} {..._backdropFade}>\n          {overlayVisible && backdropVisible && (\n            <Backdrop\n              onPress={() => {\n                closeOnOverlayClick && handleClose();\n              }}\n              {..._backdrop}\n            />\n          )}\n        </Fade>\n        {animationPreset === 'slide' ? (\n          <Slide in={visible} {..._slide}>\n            <FocusScope\n              contain={visible}\n              autoFocus={visible && !initialFocusRef}\n              restoreFocus={visible && !finalFocusRef}\n            >\n              {child}\n            </FocusScope>\n          </Slide>\n        ) : (\n          <Fade in={visible} style={StyleSheet.absoluteFill} {..._fade}>\n            <FocusScope\n              contain={visible}\n              autoFocus={visible && !initialFocusRef}\n              restoreFocus={visible && !finalFocusRef}\n            >\n              {child}\n            </FocusScope>\n          </Fade>\n        )}\n      </AlertDialogContext.Provider>\n    </Overlay>\n  );\n};\n\nexport default memo(forwardRef(AlertDialog));\n"
  },
  {
    "path": "src/components/composites/AlertDialog/AlertDialogBody.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport Box, { IBoxProps } from '../../primitives/Box';\nimport { usePropsResolution } from '../../../hooks';\nimport { ScrollView, IScrollViewProps } from '../../basic/ScrollView';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst AlertDialogBody = (\n  { children, ...props }: IBoxProps & { _scrollview?: IScrollViewProps },\n  ref?: any\n) => {\n  const { _scrollview, ...resolvedProps } = usePropsResolution(\n    'AlertDialogBody',\n    props\n  );\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <ScrollView {..._scrollview}>\n      <Box {...resolvedProps} ref={ref}>\n        {children}\n      </Box>\n    </ScrollView>\n  );\n};\n\nexport default memo(forwardRef(AlertDialogBody));\n"
  },
  {
    "path": "src/components/composites/AlertDialog/AlertDialogCloseButton.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport { AlertDialogContext } from './Context';\nimport { usePropsResolution } from '../../../hooks';\nimport { Pressable } from '../../primitives/Pressable';\nimport { CloseIcon } from '../../primitives/Icon/Icons';\nimport type { IButtonProps } from '../../primitives/Button';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nimport {\n  useHover,\n  useFocus,\n  useIsPressed,\n} from '../../primitives/Pressable/Pressable';\nimport { composeEventHandlers } from '../../../utils';\nimport { useFocusRing } from '@react-native-aria/focus';\n\nconst AlertDialogCloseButton = (props: IButtonProps, ref?: any) => {\n  const { hoverProps, isHovered } = useHover();\n  const { pressableProps, isPressed } = useIsPressed();\n  const { focusProps, isFocused } = useFocus();\n  const { isFocusVisible, focusProps: focusRingProps }: any = useFocusRing();\n\n  const {\n    _icon,\n    onPressIn,\n    onPressOut,\n    onHoverIn,\n    onHoverOut,\n    onFocus,\n    onBlur,\n    ...rest\n  } = usePropsResolution('AlertDialogCloseButton', props, {\n    isHovered,\n    isPressed,\n    isFocused,\n    isFocusVisible,\n  });\n  const { handleClose } = React.useContext(AlertDialogContext);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <Pressable\n      accessibilityRole=\"button\"\n      ref={ref}\n      onPressIn={composeEventHandlers(onPressIn, pressableProps.onPressIn)}\n      onPressOut={composeEventHandlers(onPressOut, pressableProps.onPressOut)}\n      // @ts-ignore - web only\n      onHoverIn={composeEventHandlers(onHoverIn, hoverProps.onHoverIn)}\n      // @ts-ignore - web only\n      onHoverOut={composeEventHandlers(onHoverOut, hoverProps.onHoverOut)}\n      // @ts-ignore - web only\n      onFocus={composeEventHandlers(\n        composeEventHandlers(onFocus, focusProps.onFocus),\n        focusRingProps.onFocus\n      )}\n      // @ts-ignore - web only\n      onBlur={composeEventHandlers(\n        composeEventHandlers(onBlur, focusProps.onBlur),\n        focusRingProps.onBlur\n      )}\n      onPress={handleClose}\n      {...rest}\n    >\n      <CloseIcon {..._icon} />\n    </Pressable>\n  );\n};\n\nexport default memo(forwardRef(AlertDialogCloseButton));\n"
  },
  {
    "path": "src/components/composites/AlertDialog/AlertDialogContent.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport Box, { IBoxProps } from '../../primitives/Box';\nimport { usePropsResolution } from '../../../hooks';\nimport { AlertDialogContext } from './Context';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst AlertDialogContent = (props: IBoxProps, ref?: any) => {\n  const newProps = usePropsResolution('AlertDialogContent', props);\n  const {\n    contentSize,\n    initialFocusRef,\n    finalFocusRef,\n    handleClose,\n  } = React.useContext(AlertDialogContext);\n  React.useEffect(() => {\n    const finalRefVal = finalFocusRef ? finalFocusRef.current : null;\n    if (initialFocusRef && initialFocusRef.current) {\n      //@ts-ignore\n      initialFocusRef.current.focus();\n    }\n\n    return () => {\n      if (finalRefVal) {\n        //@ts-ignore\n        finalRefVal.focus();\n      }\n    };\n  }, [initialFocusRef, finalFocusRef]);\n\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <Box\n      {...contentSize}\n      {...newProps}\n      ref={ref}\n      onAccessibilityEscape={handleClose}\n      //@ts-ignore - web only\n      aria-modal=\"true\"\n      //@ts-ignore - web only\n      accessibilityRole=\"alert\"\n      accessibilityViewIsModal\n    />\n  );\n};\n\nexport default memo(forwardRef(AlertDialogContent));\n"
  },
  {
    "path": "src/components/composites/AlertDialog/AlertDialogFooter.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport Box, { IBoxProps } from '../../primitives/Box';\nimport { usePropsResolution } from '../../../hooks';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst AlertDialogFooter = (props: IBoxProps, ref?: any) => {\n  const newProps = usePropsResolution('AlertDialogFooter', props);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return <Box {...newProps} ref={ref} />;\n};\n\nexport default memo(forwardRef(AlertDialogFooter));\n"
  },
  {
    "path": "src/components/composites/AlertDialog/AlertDialogHeader.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport Box, { IBoxProps } from '../../primitives/Box';\nimport { usePropsResolution } from '../../../hooks';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst AlertDialogHeader = (props: IBoxProps, ref?: any) => {\n  const newProps = usePropsResolution('AlertDialogHeader', props);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return <Box {...newProps} ref={ref} />;\n};\n\nexport default memo(forwardRef(AlertDialogHeader));\n"
  },
  {
    "path": "src/components/composites/AlertDialog/Context.ts",
    "content": "import React from 'react';\nexport const AlertDialogContext = React.createContext({\n  handleClose: () => {},\n  contentSize: {},\n  initialFocusRef: { current: null },\n  finalFocusRef: { current: null },\n});\n"
  },
  {
    "path": "src/components/composites/AlertDialog/index.tsx",
    "content": "import AlertDialog from './AlertDialog';\nimport AlertDialogContent from './AlertDialogContent';\nimport AlertDialogBody from './AlertDialogBody';\nimport AlertDialogCloseButton from './AlertDialogCloseButton';\nimport AlertDialogFooter from './AlertDialogFooter';\nimport AlertDialogHeader from './AlertDialogHeader';\nimport type { IAlertDialogComponentType } from './types';\n\nconst AlertDialogTemp: any = AlertDialog;\n\nAlertDialogTemp.Content = AlertDialogContent;\nAlertDialogTemp.CloseButton = AlertDialogCloseButton;\nAlertDialogTemp.Header = AlertDialogHeader;\nAlertDialogTemp.Footer = AlertDialogFooter;\nAlertDialogTemp.Body = AlertDialogBody;\n\nconst AlertDialogMain = AlertDialogTemp as IAlertDialogComponentType;\n\nexport { AlertDialogMain as AlertDialog };\nexport type { IAlertDialogProps } from './types';\n"
  },
  {
    "path": "src/components/composites/AlertDialog/types.ts",
    "content": "import type { IBoxProps, InterfaceBoxProps } from '../../primitives/Box';\nimport type { IIconButtonProps } from '../IconButton';\nimport type { MutableRefObject } from 'react';\nimport type { IFadeProps, ISlideProps } from '../Transitions';\nimport type {\n  CustomProps,\n  ThemeComponentSizeType,\n} from '../../../components/types/utils';\n\nexport interface InterfaceAlertDialogProps\n  extends InterfaceBoxProps<IAlertDialogProps> {\n  /**\n   * If true, the AlertDialog will open. Useful for controllable state behaviour\n   */\n  isOpen?: boolean;\n  /**\n   * Callback invoked when the AlertDialog is closed\n   */\n  onClose?: () => any;\n  /**\n   * If true, the AlertDialog will be opened by default\n   */\n  defaultIsOpen?: boolean;\n  /**\n   * The size of the AlertDialog\n   */\n  size?: ThemeComponentSizeType<'AlertDialog'>; //'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | number | string;\n  /**\n   * The ref of element that is least destructive child of the AlertDialog.\n   */\n  leastDestructiveRef: React.RefObject<any>;\n  /**\n   * The ref of element to receive focus when the AlertDialog opens.\n   */\n  initialFocusRef?: React.RefObject<any> | any;\n  /**\n   * The ref of element to receive focus when the AlertDialog closes.\n   */\n  finalFocusRef?: React.RefObject<any> | any;\n  /**\n   * If true and the keyboard is opened, the AlertDialog will move up equivalent to the keyboard height.\n   * @default false\n   */\n  avoidKeyboard?: boolean;\n  /**\n   * If true, the AlertDialog will close when the overlay is clicked\n   * @default true\n   */\n  closeOnOverlayClick?: boolean;\n  /**\n   * If true, the AlertDialog will close when Escape key is pressed\n   * @default true\n   */\n  isKeyboardDismissable?: boolean;\n  /**\n   * If true, a backdrop element is visible\n   * @default true\n   */\n  overlayVisible?: boolean;\n  /**\n   * If true, a backdrop element is visible\n   * @default true\n   */\n  backdropVisible?: boolean;\n  /**\n   * Props applied on Overlay.\n   */\n  _backdrop?: any;\n  /**\n   * Props applied on Overlay Animation.\n   */\n  _backdropFade?: Partial<IFadeProps>;\n  /**\n   * Props applied on Child Fade Animation.\n   */\n  _fade?: Partial<IFadeProps>;\n  /**\n   * Props applied on Child Slide Animation.\n   */\n  _slide?: Partial<ISlideProps>;\n  /**\n   * Sets the animation type\n   * @default \"fade\"\n   */\n  animationPreset?: 'slide' | 'fade';\n  /* If true, renders react-native native modal\n   * @default false\n   */\n  useRNModal?: boolean;\n}\n\nexport type IAlertDialogComponentType = ((\n  props: IAlertDialogProps & { ref?: MutableRefObject<any> }\n) => JSX.Element) & {\n  Body: React.MemoExoticComponent<\n    (props: IBoxProps & { ref?: MutableRefObject<any> }) => JSX.Element\n  >;\n  CloseButton: React.MemoExoticComponent<\n    (props: IIconButtonProps & { ref?: MutableRefObject<any> }) => JSX.Element\n  >;\n  Content: React.MemoExoticComponent<\n    (props: IBoxProps & { ref?: MutableRefObject<any> }) => JSX.Element\n  >;\n  Footer: React.MemoExoticComponent<\n    (props: IBoxProps & { ref?: MutableRefObject<any> }) => JSX.Element\n  >;\n  Header: React.MemoExoticComponent<\n    (props: IBoxProps & { ref?: MutableRefObject<any> }) => JSX.Element\n  >;\n};\n\nexport type IAlertDialogProps = InterfaceAlertDialogProps &\n  CustomProps<'AlertDialog'>;\n"
  },
  {
    "path": "src/components/composites/AppBar/AppBar.tsx",
    "content": "import React from 'react';\nimport { useThemeProps } from '../../../hooks';\nimport { HStack } from '../../primitives';\nimport { APPROX_STATUSBAR_HEIGHT } from './utils';\nimport type { IAppBarProps } from './types';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst AppBar = ({ children, ...props }: IAppBarProps, ref: any) => {\n  const {\n    statusBarHeight = APPROX_STATUSBAR_HEIGHT,\n    ...newProps\n  } = useThemeProps('AppBar', props);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <HStack\n      mt={statusBarHeight}\n      justifyContent=\"space-between\"\n      alignItems=\"center\"\n      {...newProps}\n      ref={ref}\n    >\n      {children}\n    </HStack>\n  );\n};\n\nexport default React.memo(React.forwardRef(AppBar));\n"
  },
  {
    "path": "src/components/composites/AppBar/AppBarContent.tsx",
    "content": "import React from 'react';\nimport { Box, IBoxProps } from '../../primitives';\nimport { useThemeProps } from '../../../hooks';\n\nexport type IAppBarContentProps = IBoxProps;\n\nconst AppBarContent = (props: IAppBarContentProps) => {\n  const { color } = useThemeProps('AppBar', props);\n  return (\n    <Box alignItems=\"center\" flexDirection=\"row\" _text={{ color }} {...props} />\n  );\n};\n\nexport default React.memo(AppBarContent);\n"
  },
  {
    "path": "src/components/composites/AppBar/AppBarLeft.tsx",
    "content": "import React from 'react';\nimport { HStack, IStackProps } from '../../primitives';\nimport { useThemeProps } from '../../../hooks';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst AppBarLeft = (props: IStackProps) => {\n  const { color } = useThemeProps('AppBar', props);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return <HStack alignItems=\"center\" _text={{ color }} {...props} />;\n};\n\nexport default React.memo(AppBarLeft);\n"
  },
  {
    "path": "src/components/composites/AppBar/AppBarRight.tsx",
    "content": "import React from 'react';\nimport { HStack, IStackProps } from '../../primitives';\nimport { useThemeProps } from '../../../hooks';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst AppBarRight = (props: IStackProps) => {\n  const { color } = useThemeProps('AppBar', props);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <HStack\n      alignItems=\"center\"\n      justifyContent=\"flex-end\"\n      _text={{\n        color,\n      }}\n      {...props}\n    />\n  );\n};\n\nexport default React.memo(AppBarRight);\n"
  },
  {
    "path": "src/components/composites/AppBar/index.tsx",
    "content": "import AppBarMain from './AppBar';\nimport AppBarLeft from './AppBarLeft';\nimport AppBarRight from './AppBarRight';\nimport AppBarContent from './AppBarContent';\nimport type { IAppBarComponentType } from './types';\n\nconst AppBarTemp: any = AppBarMain;\nAppBarTemp.Left = AppBarLeft;\nAppBarTemp.Right = AppBarRight;\nAppBarTemp.Content = AppBarContent;\n\nconst AppBar = AppBarTemp as IAppBarComponentType;\n\nexport { AppBar };\nexport type { IAppBarProps } from './types';\n"
  },
  {
    "path": "src/components/composites/AppBar/types.tsx",
    "content": "import type { ColorSchemeType } from '../../../components/types';\nimport type { InterfaceStackProps } from '../../primitives/Stack/Stack';\n\nexport type IAppBarProps = InterfaceStackProps & {\n  colorScheme?: ColorSchemeType;\n  statusBarHeight?: number;\n  space?: number;\n};\n\nexport type IAppBarComponentType = ((props: IAppBarProps) => JSX.Element) & {\n  Left: React.MemoExoticComponent<(props: InterfaceStackProps) => JSX.Element>;\n  Right: React.MemoExoticComponent<(props: InterfaceStackProps) => JSX.Element>;\n  Content: React.MemoExoticComponent<\n    (props: InterfaceStackProps) => JSX.Element\n  >;\n};\n"
  },
  {
    "path": "src/components/composites/AppBar/utils.ts",
    "content": "import { Platform, StatusBar } from 'react-native';\n// import Constants from 'expo-constants';\n// @ts-ignore\n// const expo = global.__expo;\n\nconst IOS_STATUS_BAR_HEIGHT = 20;\n\nconst DEFAULT_STATUSBAR_HEIGHT_EXPO = 0;\n\n// https://docs.expo.io/versions/latest/sdk/constants/\n// Try to get height from expo if app is using expo env\n// IOS >= 11 is handled using SafeAreaView\nexport const APPROX_STATUSBAR_HEIGHT = Platform.select({\n  android: DEFAULT_STATUSBAR_HEIGHT_EXPO\n    ? DEFAULT_STATUSBAR_HEIGHT_EXPO\n    : StatusBar.currentHeight,\n  ios:\n    Platform.Version < 11\n      ? DEFAULT_STATUSBAR_HEIGHT_EXPO\n        ? DEFAULT_STATUSBAR_HEIGHT_EXPO\n        : IOS_STATUS_BAR_HEIGHT\n      : 0,\n});\n"
  },
  {
    "path": "src/components/composites/AspectRatio/index.tsx",
    "content": "import React, { forwardRef, memo } from 'react';\nimport { StyleSheet, ViewStyle, Platform } from 'react-native';\nimport { default as Box } from '../../primitives/Box';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nimport { usePropsResolution } from '../../../hooks';\nimport type { IAspectRatioProps } from './types';\n\nconst AspectView = forwardRef((props: any, ref?: any) => {\n  const [layout, setLayout] = React.useState();\n  const aspectViewStyle = [StyleSheet.flatten(props.style) || {}];\n  if (layout) {\n    // @ts-ignore\n    let { width = 0, height = 0 } = layout;\n    if (width === 0) {\n      aspectViewStyle.push({ width: height * props.aspectRatio, height });\n    } else {\n      aspectViewStyle.push({ width, height: width / props.aspectRatio });\n    }\n  }\n\n  return (\n    <Box\n      ref={ref}\n      {...props}\n      style={aspectViewStyle}\n      onLayout={({ nativeEvent: { layout: inLayout } }: any) =>\n        setLayout(inLayout)\n      }\n    />\n  );\n});\n\nconst AspectRatio = (props: IAspectRatioProps, ref?: any) => {\n  const { ratio, children = <></>, ...resolvedProps } = usePropsResolution(\n    'AspectRatio',\n    props,\n    {},\n    { resolveResponsively: ['ratio'] }\n  );\n  let computedStyle: ViewStyle | undefined = resolvedProps.style;\n  const newChildWithProps = React.cloneElement(\n    children,\n    {\n      ...children?.props,\n      style: StyleSheet.absoluteFillObject,\n    },\n    children?.props?.children\n  );\n\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(resolvedProps)) {\n    return null;\n  }\n  // DOC:  It uses a aspectRatio property of React Native and manually calculate on Web\n  if (Platform.OS === 'web') {\n    return (\n      <AspectView aspectRatio={ratio} {...resolvedProps} ref={ref}>\n        {newChildWithProps}\n      </AspectView>\n    );\n  } else {\n    computedStyle = StyleSheet.flatten([\n      { style: resolvedProps.style },\n      { aspectRatio: ratio },\n    ]);\n    return (\n      <Box {...resolvedProps} style={computedStyle} ref={ref}>\n        {newChildWithProps}\n      </Box>\n    );\n  }\n};\n\nexport default memo(forwardRef(AspectRatio));\n"
  },
  {
    "path": "src/components/composites/AspectRatio/types.ts",
    "content": "import type { InterfaceBoxProps } from '../../primitives/Box';\nimport type { CustomProps, ResponsiveValue } from '../../../components/types';\n\nexport interface InterfaceAspectRatioProps\n  extends InterfaceBoxProps<IAspectRatioProps> {\n  /**\n   * The aspect ratio of the container. Some examples are `16/9`, `16/10`, `9/16`, `4/3`\n   * @default 4/3\n   */\n  ratio?: ResponsiveValue<number>;\n}\n\nexport type IAspectRatioProps = InterfaceAspectRatioProps &\n  CustomProps<'AspectRatio'>;\n"
  },
  {
    "path": "src/components/composites/Avatar/Avatar.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport { Box, Image } from '../../primitives';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport type { IAvatarProps } from './types';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nimport isNil from 'lodash.isnil';\nimport has from 'lodash.has';\n\nconst Avatar = ({ children, ...props }: IAvatarProps, ref: any) => {\n  const [error, setError] = React.useState(false);\n  const { _image, _badgeSize, source, ...resolvedProps } = usePropsResolution(\n    'Avatar',\n    props\n  );\n\n  let Badge = <></>;\n  const remainingChildren: JSX.Element[] = [];\n  //  Pop Badge from children\n  React.Children.map(children, (child) => {\n    if (\n      typeof child?.type === 'object' &&\n      child?.type.displayName === 'AvatarBadge'\n    ) {\n      Badge = React.cloneElement(child, {\n        size: child?.props?.size\n          ? child?.props?.size\n          : _badgeSize\n          ? _badgeSize[0]\n          : undefined,\n      });\n    } else {\n      remainingChildren.push(child);\n    }\n  });\n\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n\n  const getSource = () => {\n    if (source) {\n      if (has(source, 'uri') && !isNil(source.uri)) {\n        return source;\n      } else if (!has(source, 'uri')) {\n        return source;\n      }\n    }\n    return null;\n  };\n  const imageSource = getSource();\n\n  return (\n    <Box {...resolvedProps}>\n      {imageSource && !error ? (\n        <Image\n          source={source}\n          onError={() => {\n            setError(true);\n          }}\n          {..._image}\n          ref={ref}\n        />\n      ) : (\n        remainingChildren.length !== 0 && remainingChildren\n      )}\n      {Badge}\n    </Box>\n  );\n};\n\nexport default memo(forwardRef(Avatar));\n"
  },
  {
    "path": "src/components/composites/Avatar/Badge.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport Box from '../../primitives/Box';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport type { IAvatarBadgeProps } from './types';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst AvatarBadge = memo(\n  forwardRef((props: IAvatarBadgeProps, ref?: any) => {\n    const resolvedProps = usePropsResolution('AvatarBadge', props);\n    //TODO: refactor for responsive prop\n    if (useHasResponsiveProps(props)) {\n      return null;\n    }\n    return <Box {...resolvedProps} ref={ref} />;\n  })\n);\n\nAvatarBadge.displayName = 'AvatarBadge';\nexport default AvatarBadge as (props: IAvatarBadgeProps, ref?: any) => any;\n"
  },
  {
    "path": "src/components/composites/Avatar/Group.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport Box from '../../primitives/Box';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport isNil from 'lodash.isnil';\nimport type { IAvatarGroupProps } from './types';\nimport { default as Avatar } from './Avatar';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\n// Todo: Try using HStack instead\n\nconst getAvatarGroupChildren = (\n  children?: JSX.Element[] | JSX.Element,\n  space?: number,\n  max?: number,\n  _hiddenAvatarPlaceholder?: Object,\n  _avatar?: any,\n  isVertical?: Boolean\n) => {\n  let childrenArray: any = React.Children.toArray(children);\n  let plusAvatars: number = 0;\n  if (!isNil(max) && max < childrenArray.length && max > 0) {\n    plusAvatars = childrenArray.length - max;\n    childrenArray = childrenArray.slice(0, max);\n  }\n  const spacingProps = {\n    ml: isVertical ? 0 : space,\n    mt: isVertical ? space : 0,\n  };\n  return [\n    plusAvatars > 0 ? (\n      <Avatar\n        key=\"avatar-group-wrapper\"\n        {...spacingProps}\n        {..._avatar}\n        {..._hiddenAvatarPlaceholder}\n      >\n        {'+ ' + plusAvatars}\n      </Avatar>\n    ) : null,\n    React.Children.map(childrenArray.reverse(), (child: any, index: number) => {\n      return React.cloneElement(\n        child,\n        {\n          key: `avatar-group-child-${index}`,\n          ..._avatar,\n          ...spacingProps,\n          ...child.props,\n        },\n        child.props.children\n      );\n    }),\n  ];\n};\n\nconst AvatarGroup = ({ children, ...props }: IAvatarGroupProps, ref: any) => {\n  const {\n    max,\n    _avatar,\n    _hiddenAvatarPlaceholder,\n    isVertical,\n    space,\n    ...resolvedProps\n  } = usePropsResolution('AvatarGroup', props);\n\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <Box {...resolvedProps} ref={ref}>\n      {getAvatarGroupChildren(\n        children,\n        space,\n        max,\n        _hiddenAvatarPlaceholder,\n        _avatar,\n        isVertical\n      )}\n    </Box>\n  );\n};\n\nexport default memo(forwardRef(AvatarGroup));\n"
  },
  {
    "path": "src/components/composites/Avatar/index.tsx",
    "content": "import AvatarDefault from './Avatar';\nimport AvatarBadge from './Badge';\nimport AvatarGroup from './Group';\nimport type { IAvatarComponentType } from './types';\n\nlet AvatarTemp: any = AvatarDefault;\nAvatarTemp.Badge = AvatarBadge;\nAvatarTemp.Group = AvatarGroup;\n\n// To add typings\nconst Avatar = AvatarTemp as IAvatarComponentType;\n\nexport { Avatar };\nexport type { IAvatarProps, IAvatarBadgeProps } from './types';\n"
  },
  {
    "path": "src/components/composites/Avatar/types.tsx",
    "content": "import type { InterfaceBoxProps } from '../../primitives/Box';\nimport type { IImageProps } from '../../primitives/Image';\nimport type { ImageSourcePropType } from 'react-native';\nimport type { MutableRefObject } from 'react';\nimport type { CustomProps } from '../../../components/types';\nimport type { ThemeComponentSizeType } from '../../../components/types/utils';\nexport interface InterfaceAvatarProps extends InterfaceBoxProps<IAvatarProps> {\n  /**\n   * The image source of the avatar.\n   */\n  source?: ImageSourcePropType;\n  /**\n   * The size of the avatar.\n   * @default md\n   */\n  size?: ThemeComponentSizeType<'Avatar'>;\n  /**\n   * For providing props to Image component inside the Avatar.\n   */\n  _image?: Partial<IImageProps>;\n  /**\n   * ref to be attached to the Avatar wrapper.\n   */\n  wrapperRef?: MutableRefObject<any>;\n}\n\nexport interface IAvatarBadgeProps\n  extends InterfaceBoxProps<IAvatarBadgeProps> {}\n\nexport interface IAvatarGroupProps extends IAvatarProps {\n  /**\n   * Avatar children\n   */\n  children?: JSX.Element[] | JSX.Element;\n  /**\n   * The distance each avatar.\n   */\n  space?: number;\n  /**\n   * The max number of avatar.\n   * @default -4\n   */\n  max?: number;\n  /**\n   * Make Avatar.Group render in vertical direction.\n   * @default false\n   */\n  isVertical?: Boolean;\n  /**\n   * For providing props to all Avatar in that Avatar.Group\n   */\n  _avatar?: Partial<IAvatarProps>;\n  /**\n   * For providing props to the Avatar that shows the count of remaining Avatars that are not visible when max is applied.\n   */\n  _hiddenAvatarPlaceholder?: Partial<IAvatarProps>;\n}\n\nexport type IAvatarComponentType = ((\n  props: IAvatarProps & { ref?: MutableRefObject<any> }\n) => JSX.Element) & {\n  Group: React.MemoExoticComponent<\n    (props: IAvatarGroupProps & { ref?: MutableRefObject<any> }) => JSX.Element\n  >;\n  Badge: React.MemoExoticComponent<\n    (props: IAvatarBadgeProps & { ref?: MutableRefObject<any> }) => JSX.Element\n  >;\n};\n\nexport type IAvatarProps = InterfaceAvatarProps & CustomProps<'Avatar'>;\n"
  },
  {
    "path": "src/components/composites/Backdrop/index.tsx",
    "content": "import React, { memo } from 'react';\nimport { Pressable, IPressableProps } from '../../primitives/Pressable';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst Backdrop = (props: IPressableProps) => {\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <Pressable\n      _web={{\n        //@ts-ignore\n        cursor: 'default',\n      }}\n      position=\"absolute\"\n      top={0}\n      bottom={0}\n      left={0}\n      right={0}\n      accessible={false}\n      importantForAccessibility=\"no\"\n      bg={props.bg || 'rgb(0, 0, 0)'}\n      opacity={0.3}\n      {...props}\n    />\n  );\n};\n\nexport default memo(Backdrop);\n"
  },
  {
    "path": "src/components/composites/Badge/index.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport HStack from '../../primitives/Stack/HStack';\nimport Box from '../../primitives/Box';\nimport type { IBadgeProps } from './types';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst Badge = (\n  {\n    children,\n    startIcon,\n    rightIcon,\n    leftIcon,\n    endIcon,\n\n    ...props\n  }: IBadgeProps,\n  ref: any\n) => {\n  const { _icon, _text, ...newProps } = usePropsResolution('Badge', props);\n\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n\n  if (leftIcon) {\n    startIcon = leftIcon;\n  }\n  if (rightIcon) {\n    endIcon = rightIcon;\n  }\n\n  if (endIcon && React.isValidElement(endIcon)) {\n    endIcon = React.Children.map(\n      endIcon,\n      (child: JSX.Element, index: number) => {\n        return React.cloneElement(child, {\n          key: `badge-end-icon-${index}`,\n          ..._icon,\n          ...child.props,\n        });\n      }\n    );\n  }\n  if (startIcon && React.isValidElement(startIcon)) {\n    startIcon = React.Children.map(\n      startIcon,\n      (child: JSX.Element, index: number) => {\n        return React.cloneElement(child, {\n          key: `badge-start-icon-${index}`,\n          ..._icon,\n          ...child.props,\n        });\n      }\n    );\n  }\n\n  return (\n    <HStack {...newProps} ref={ref}>\n      {startIcon ? startIcon : null}\n      <Box _text={_text}>{children}</Box>\n      {endIcon ? endIcon : null}\n    </HStack>\n  );\n};\n\nexport type IBadgeComponentType = (props: IBadgeProps) => JSX.Element;\n\nexport default memo(forwardRef(Badge)) as IBadgeComponentType;\nexport type { IBadgeProps };\n"
  },
  {
    "path": "src/components/composites/Badge/types.tsx",
    "content": "import type { ITextProps } from '../../primitives/Text/types';\nimport type { IIconProps } from '../../primitives/Icon';\nimport type { CustomProps, VariantType } from '../../types';\nimport type { InterfaceBoxProps } from '../../primitives/Box';\nimport type { ColorSchemeType } from '../../../components/types';\n\nexport interface InterfaceBadgeProps extends InterfaceBoxProps<IBadgeProps> {\n  /**\n   * The style variant of the badge.\n   * @default subtle\n   */\n  variant?: VariantType<'Badge'>;\n  /**\n   * The color scheme to use for the badge. Must be a key in theme.colors.\n   */\n  colorScheme?: ColorSchemeType;\n  /**\n   * The right icon element to use in the button.\n   */\n  rightIcon?: JSX.Element | Array<JSX.Element>;\n  /**\n   * The left icon element to use in the button.\n   */\n  leftIcon?: JSX.Element | Array<JSX.Element>;\n  /**\n   * The start icon element to use in the button.\n   */\n  startIcon?: JSX.Element | Array<JSX.Element>;\n  /**\n   * The end icon element to use in the button.\n   */\n  endIcon?: JSX.Element | Array<JSX.Element>;\n  /**\n   * Props to style the child text\n   */\n  _text?: ITextProps;\n  /**\n   * Props to be passed to the Icon used inside of Button.\n   */\n  _icon?: IIconProps;\n}\n\nexport type IBadgeProps = InterfaceBadgeProps & CustomProps<'Badge'>;\n"
  },
  {
    "path": "src/components/composites/Breadcrumb/Breadcrumb.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport { AccessibilityRole, Platform } from 'react-native';\nimport { HStack } from '../../primitives/Stack';\nimport { useControllableState } from '../../../hooks';\nimport { Pressable } from '../../primitives/Pressable';\nimport type { IBreadcrumbProps } from './types';\nimport { usePropsResolution } from '../../../hooks/useThemeProps/usePropsResolution';\nimport Text from '../../primitives/Text';\nimport type { IFlexProps } from '../../primitives';\nimport { ThreeDotsIcon } from '../../primitives/Icon/Icons';\n\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nconst Breadcrumb = (\n  {\n    style,\n    children,\n    separator,\n    _text,\n    maxItems,\n    _button,\n    isCollapsed,\n    onCollapseChange,\n    ...props\n  }: IBreadcrumbProps & IFlexProps,\n  ref: any\n) => {\n  const textProps = { ..._text };\n\n  // Maintaining state to show all children on press of collapse button\n  const [collapsed, setCollapsed] = useControllableState({\n    value: isCollapsed,\n    defaultValue: false,\n    onChange: (value) => {\n      onCollapseChange && onCollapseChange(value);\n    },\n  });\n  const { spacing, ...newProps } = usePropsResolution('Breadcrumb', props);\n\n  const separatorProps = {\n    accessibilityRole: (Platform.OS === 'web'\n      ? 'presentation'\n      : undefined) as AccessibilityRole,\n  };\n  const separatorElement = separator ? (\n    typeof separator === 'string' ? (\n      <Text {...separatorProps} mx={spacing}>\n        {separator}\n      </Text>\n    ) : (\n      React.cloneElement(separator, {\n        mx: spacing,\n        ...separatorProps,\n      })\n    )\n  ) : (\n    <Text mx={spacing} {...separatorProps}>\n      {'/'}\n    </Text>\n  );\n\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <HStack\n      display=\"flex\"\n      flexWrap=\"wrap\"\n      {...newProps}\n      ref={ref}\n      style={style}\n      // Custom Separator\n      divider={separatorElement}\n      space={spacing}\n      // @ts-ignore - Web only prop\n      accessibilityRole={Platform.OS === 'web' ? 'navigation' : undefined}\n      accessibilityLabel=\"Breadcrumb\"\n    >\n      {children && !children.length\n        ? children\n        : getBreadcrumbSeparator(\n            children,\n            textProps,\n            maxItems,\n            _button,\n            collapsed,\n            setCollapsed\n          )}\n    </HStack>\n  );\n};\n\n// Returns children to be rendered\nconst getBreadcrumbSeparator = (\n  children: JSX.Element[] | JSX.Element | any,\n  props: any,\n  maxItems: number | number[] | undefined,\n  _button: any,\n  collapsed: boolean | undefined,\n  setCollapsed: any\n) => {\n  if (Array.isArray(children)) {\n    if (children.length === 1) {\n      return children;\n    }\n    let result: any = [];\n    if (maxItems) {\n      let buttonAdded = false;\n      if (typeof maxItems == 'number') {\n        // When MaxItems is a number\n        if (children.length > 2 * maxItems) {\n          for (let i = 0; i < children.length; i++) {\n            if (i < maxItems || i >= children.length - maxItems) {\n              result.push(children[i]);\n            } else {\n              if (!buttonAdded) {\n                result.push(\n                  <CollapseButton {..._button} setCollapsed={setCollapsed} />\n                );\n                buttonAdded = true;\n              }\n            }\n          }\n          buttonAdded = false;\n        }\n      }\n      // Whem maxItems is an array\n      else if (typeof maxItems == 'object') {\n        if (children.length > maxItems[0] + maxItems[1])\n          for (let i = 0; i < children.length; i++) {\n            if (i < maxItems[0] || i >= children.length - maxItems[1]) {\n              result.push(children[i]);\n            } else {\n              if (!buttonAdded) {\n                // pushing Collapsible button as a child\n                result.push(\n                  <CollapseButton {..._button} setCollapsed={setCollapsed} />\n                );\n                buttonAdded = true;\n              }\n            }\n          }\n        buttonAdded = false;\n      }\n    } else {\n      result = children;\n    }\n    if (!collapsed) {\n      result = children;\n    }\n    return result.map((child: any, index: number) => {\n      return React.cloneElement(child, {\n        _text: { ...props },\n        ...props,\n        key: `breadcrumb-separator-${index}`,\n      });\n    });\n  } else {\n    return children;\n  }\n};\n\n// Collapse button\nconst CollapseButton = (props: any) => {\n  const { ...remainingProps } = props;\n\n  return (\n    <Pressable\n      {...remainingProps}\n      onPress={() => {\n        props.setCollapsed(false);\n      }}\n    >\n      <ThreeDotsIcon size={4} />\n    </Pressable>\n  );\n};\n\nexport default memo(forwardRef(Breadcrumb));\nexport type { IBreadcrumbProps };\n"
  },
  {
    "path": "src/components/composites/Breadcrumb/BreadcrumbIcon.tsx",
    "content": "import React, { forwardRef, memo } from 'react';\nimport { Icon } from '../../primitives/Icon';\nimport type { IBreadcrumbItemContext, IBreadcrumbIconProps } from './types';\nimport { BreadcrumbItemContext } from './Context';\nimport { usePropsResolution } from '../../../hooks/useThemeProps/usePropsResolution';\n\n// Add breadcrumbIcon as child of breadcrumbItem for implementaion of isCurrent prop\nconst BreadcrumbIcon = (props: IBreadcrumbIconProps, ref?: any) => {\n  const { isCurrent }: IBreadcrumbItemContext = React.useContext(\n    BreadcrumbItemContext\n  );\n\n  let { children, _current, ...resolvedProps } = usePropsResolution(\n    'BreadcrumbIcon',\n    props\n  );\n  return (\n    <Icon ref={ref} {...(isCurrent && _current)} {...resolvedProps}>\n      {children}\n    </Icon>\n  );\n};\n\nexport default memo(forwardRef(BreadcrumbIcon));\n"
  },
  {
    "path": "src/components/composites/Breadcrumb/BreadcrumbItem.tsx",
    "content": "import React, { forwardRef, memo } from 'react';\nimport { Platform } from 'react-native';\nimport { HStack } from '../../primitives/Stack';\nimport { BreadcrumbItemContext } from './Context';\nimport type { IBreadcrumbItemProps } from './types';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst BreadcrumbItem = (props: IBreadcrumbItemProps, ref?: any) => {\n  const { children, isCurrent, _text, ...remainingProps } = props;\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    // Provider wrapped to use isCurrent prop in children of breadcrumb Item\n    <BreadcrumbItemContext.Provider value={{ isCurrent }}>\n      <HStack {...remainingProps} ref={ref}>\n        {React.Children.map(children, (child: any, index: number) =>\n          React.cloneElement(child, {\n            'key': `breadcrumb-item-${index}`,\n            '_text': {\n              ..._text, //taken out empty _text prop from props\n              fontWeight: 700,\n            },\n            ...{\n              isUnderlined: false,\n            },\n            ...remainingProps,\n            'aria-current':\n              Platform.OS === 'web' && isCurrent ? 'page' : undefined,\n          })\n        )}\n      </HStack>\n    </BreadcrumbItemContext.Provider>\n  );\n};\n\nexport default memo(forwardRef(BreadcrumbItem));\n"
  },
  {
    "path": "src/components/composites/Breadcrumb/BreadcrumbLink.tsx",
    "content": "import BreadcrumbLink from '../../primitives/Link';\n\nexport default BreadcrumbLink;\n"
  },
  {
    "path": "src/components/composites/Breadcrumb/BreadcrumbText.tsx",
    "content": "import React, { forwardRef, memo } from 'react';\nimport Text from '../../primitives/Text';\nimport type { IBreadcrumbItemContext, IBreadcrumbTextProps } from './types';\nimport { BreadcrumbItemContext } from './Context';\nimport { usePropsResolution } from '../../../hooks/useThemeProps/usePropsResolution';\n\n// Add breadcrumbText as child of breadcrumbItem for implementaion of isCurrent prop\nconst BreadcrumbText = (props: IBreadcrumbTextProps, ref?: any) => {\n  const { isCurrent }: IBreadcrumbItemContext = React.useContext(\n    BreadcrumbItemContext\n  );\n  let { children, _current, ...resolvedProps } = usePropsResolution(\n    'BreadcrumbText',\n    props\n  );\n  return (\n    <Text ref={ref} {...(isCurrent && _current)} {...resolvedProps}>\n      {children}\n    </Text>\n  );\n};\n\nexport default memo(forwardRef(BreadcrumbText));\n"
  },
  {
    "path": "src/components/composites/Breadcrumb/Context.ts",
    "content": "import { createContext } from 'react';\nexport const BreadcrumbItemContext = createContext({});\n"
  },
  {
    "path": "src/components/composites/Breadcrumb/index.tsx",
    "content": "import BreadcrumbMain from './Breadcrumb';\nimport BreadcrumbLink from './BreadcrumbLink';\nimport BreadcrumbItem from './BreadcrumbItem';\nimport BreadcrumbText from './BreadcrumbText';\nimport BreadcrumbIcon from './BreadcrumbIcon';\nexport type { IBreadcrumbProps, IBreadcrumbItemProps } from './types';\nimport type { IBreadcrumbComponentType } from './types';\n\nlet BreadcrumbTemp: any = BreadcrumbMain;\nBreadcrumbTemp.Item = BreadcrumbItem;\nBreadcrumbTemp.Link = BreadcrumbLink;\nBreadcrumbTemp.Text = BreadcrumbText;\nBreadcrumbTemp.Icon = BreadcrumbIcon;\n\n// To add typings\nconst Breadcrumb = BreadcrumbTemp as IBreadcrumbComponentType;\nexport { Breadcrumb };\n"
  },
  {
    "path": "src/components/composites/Breadcrumb/types.ts",
    "content": "import type { IHStackProps } from '../../primitives/Stack/HStack';\nimport type { ITextProps, ILinkProps, IIconProps } from '../../primitives';\nimport type { MutableRefObject } from 'react';\nimport type { CustomProps, SpaceType } from '../../types';\nexport interface IBreadcrumbItemContext {\n  isCurrent?: boolean;\n  allChildren?: boolean;\n}\n\nexport interface InterfaceBreadcrumbProps extends IHStackProps {\n  spacing?: SpaceType;\n  separator?: string | JSX.Element | JSX.Element[] | any;\n  maxItems?: number | number[];\n  _button?: any;\n  isCollapsed?: boolean;\n  onCollapseChange?: any;\n}\nexport interface IBreadcrumbItemProps extends IHStackProps {\n  spacing?: SpaceType;\n  isCurrent?: boolean;\n}\nexport interface IBreadcrumbIconProps extends IIconProps {\n  _current?: any;\n}\nexport interface IBreadcrumbTextProps extends ITextProps {\n  _current?: any;\n}\nexport type IBreadcrumbComponentType = ((\n  props: IBreadcrumbProps & { ref?: MutableRefObject<any> }\n) => JSX.Element) & {\n  Item: React.MemoExoticComponent<\n    (\n      props: IBreadcrumbItemProps & { ref?: MutableRefObject<any> }\n    ) => JSX.Element\n  >;\n  Link: React.MemoExoticComponent<\n    (props: ILinkProps & { ref?: MutableRefObject<any> }) => JSX.Element\n  >;\n  Icon: React.MemoExoticComponent<\n    (props: IBreadcrumbIconProps & { ref?: any }) => JSX.Element\n  >;\n  Text: React.MemoExoticComponent<\n    (props: IBreadcrumbTextProps & { ref?: any }) => JSX.Element\n  >;\n};\n\nexport type IBreadcrumbProps = InterfaceBreadcrumbProps &\n  CustomProps<'Breadcrumb'>;\n"
  },
  {
    "path": "src/components/composites/Card/Card.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport Box from '../../primitives/Box';\nimport { usePropsResolution } from '../../../hooks/useThemeProps/usePropsResolution';\nimport type { ICardProps } from './types';\n\nconst Card = ({ children, ...props }: ICardProps, ref: any) => {\n  const resolvedProps = usePropsResolution('Card', props);\n  return (\n    <Box {...resolvedProps} ref={ref}>\n      {children}\n    </Box>\n  );\n};\nexport default memo(forwardRef(Card));\n"
  },
  {
    "path": "src/components/composites/Card/index.tsx",
    "content": "import { default as Card } from './Card';\nimport type { ICardProps } from './types';\n\nexport default Card;\nexport type { ICardProps };\n"
  },
  {
    "path": "src/components/composites/Card/types.ts",
    "content": "import type { CustomProps } from '../../../components/types/utils';\nimport type { InterfaceBoxProps } from '../../primitives/Box';\n\nexport interface InterfaceCardProps extends InterfaceBoxProps<ICardProps> {}\nexport type ICardProps = InterfaceCardProps & CustomProps<'Card'>;\n"
  },
  {
    "path": "src/components/composites/Center/Center.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport Box from '../../primitives/Box';\nimport type { ICenterProps } from './types';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst Center = (props: ICenterProps, ref: any) => {\n  const resolvedProps = usePropsResolution('Center', props);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return <Box ref={ref} {...resolvedProps} />;\n};\n\nexport default memo(forwardRef(Center));\n"
  },
  {
    "path": "src/components/composites/Center/Circle.tsx",
    "content": "import React from 'react';\nimport Box from '../../primitives/Box';\nimport type { ICircleProps } from './types';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst Circle = (props: ICircleProps, ref: any) => {\n  const resolvedProps = usePropsResolution('Circle', props);\n\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return <Box {...resolvedProps} ref={ref} />;\n};\n\nexport default React.memo(React.forwardRef(Circle));\n"
  },
  {
    "path": "src/components/composites/Center/Square.tsx",
    "content": "import React from 'react';\nimport Box from '../../primitives/Box';\nimport type { ISquareProps } from './types';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\n\nconst Square = (props: ISquareProps) => {\n  const resolvedProps = usePropsResolution('Square', props);\n\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return <Box {...resolvedProps} />;\n};\n\nexport default React.memo(Square);\n"
  },
  {
    "path": "src/components/composites/Center/index.tsx",
    "content": "export { default as Center } from './Center';\nexport { default as Circle } from './Circle';\nexport { default as Square } from './Square';\nexport type { ICenterProps, ICircleProps, ISquareProps } from './types';\n"
  },
  {
    "path": "src/components/composites/Center/types.ts",
    "content": "import type { CustomProps } from '../../../components/types/utils';\nimport type { InterfaceBoxProps } from '../../../components/primitives/Box/types';\n\nexport interface InterfaceCenterProps extends InterfaceBoxProps<ICenterProps> {}\nexport type ICircleProps = InterfaceBoxProps<ICircleProps> & {\n  size?: number | string;\n};\nexport type ISquareProps = InterfaceBoxProps<ISquareProps> & {\n  size?: number | string;\n};\n\nexport type ICenterProps = InterfaceCenterProps & CustomProps<'Center'>;\n"
  },
  {
    "path": "src/components/composites/CircularProgress/CircularProgress.tsx",
    "content": "import get from 'lodash.get';\nimport React from 'react';\nimport { Animated, Easing, StyleSheet } from 'react-native';\nimport { makeStyledComponent } from '../../../utils/styled';\nimport { useTheme, useThemeProps } from '../../../hooks';\nimport { canUseDom } from '../../../utils';\nimport { default as Box } from '../../primitives/Box';\nimport type { ICircularProgressProps } from './types';\nimport { themeTools } from '../../../theme';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst StyleAnimatedView = makeStyledComponent(Animated.View);\n\nconst CircularProgress = (\n  { value, isIndeterminate, max, min, ...props }: ICircularProgressProps,\n  ref: any\n) => {\n  const theme = useTheme();\n\n  const isDomUsable = canUseDom();\n  if (min) {\n    value = value - min;\n  }\n\n  let sizeProps;\n  let newProps = useThemeProps('CircularProgress', props);\n  let [, remainingProps] = themeTools.extractInObject(props, ['size']); // removing size from props so that Box don't accept size passed for CircularProgress\n\n  if (!newProps.size) {\n    sizeProps = {\n      height: newProps.height,\n      width: newProps.width,\n    };\n  } else {\n    sizeProps = { height: newProps.size, width: newProps.size };\n  }\n  // fetching size from theme for passing into style prop\n  const themeHeight = get(theme, 'space.' + sizeProps.height);\n  const themeWidth = get(theme, 'space.' + sizeProps.width);\n\n  const styleSize = {\n    height: themeHeight\n      ? parseInt(themeHeight.slice(themeHeight.Length, -2), 10)\n      : sizeProps.height,\n    width: themeWidth\n      ? parseInt(themeWidth.slice(themeWidth.Length, -2), 10)\n      : sizeProps.width,\n  };\n\n  const defaultThickness = newProps.thickness;\n  const degree: any = new Animated.Value(0);\n  if (isIndeterminate) {\n    if (isDomUsable) {\n      Animated.loop(\n        Animated.timing(degree, {\n          toValue: 1,\n          duration: 600,\n          easing: Easing.linear,\n          useNativeDriver: false,\n        })\n      ).start();\n    }\n  }\n  const [viewHeight, setViewHeight] = React.useState(0);\n  const layout = (e: any) => {\n    let height = e.nativeEvent.layout.height;\n    setViewHeight(height);\n  };\n\n  const defaultStyling: any = {\n    borderBottomLeftRadius: viewHeight / 2,\n    borderBottomRightRadius: viewHeight / 2,\n    borderTopLeftRadius: viewHeight / 2,\n    borderTopRightRadius: viewHeight / 2,\n    borderLeftWidth: defaultThickness,\n    borderBottomWidth: defaultThickness,\n    position: 'absolute',\n    borderLeftColor: 'transparent',\n    borderBottomColor: 'transparent',\n    ...styleSize,\n  };\n  const styles = StyleSheet.create({\n    firstProgressLayer: {\n      borderTopWidth: defaultThickness,\n      borderRightWidth: defaultThickness,\n      ...defaultStyling,\n      transform: [{ rotateZ: '-135deg' }],\n    },\n    secondProgressLayer: {\n      borderTopWidth: defaultThickness,\n      borderRightWidth: defaultThickness,\n      ...defaultStyling,\n      transform: [{ rotateZ: '45deg' }],\n    },\n    offsetLayer: {\n      borderTopWidth: defaultThickness,\n      borderRightWidth: defaultThickness,\n      ...defaultStyling,\n      borderRadius: viewHeight / 2,\n      transform: [{ rotateZ: '-135deg' }],\n    },\n    animateStyle: {\n      borderTopWidth: defaultThickness,\n      borderRightWidth: defaultThickness,\n      ...defaultStyling,\n      transform: [\n        {\n          rotateZ: degree.interpolate({\n            inputRange: [0, 1],\n            outputRange: ['0deg', '360deg'],\n          }),\n        },\n      ],\n    },\n  });\n  let halfSide = (max ? (min ? max - min : max) : 100) / 2; // calculating the halfvalue of the progress according to min and max\n\n  const propStyle = (percent: number, base_degrees: number) => {\n    const rotateBy = base_degrees + (percent * 180) / halfSide;\n    return {\n      transform: [{ rotateZ: rotateBy + 'deg' }],\n    };\n  };\n\n  const renderThirdLayer = (percent: number) => {\n    if (percent > halfSide) {\n      return (\n        <Box\n          borderTopColor={newProps.color}\n          borderRightColor={newProps.color}\n          style={[\n            styles.secondProgressLayer,\n            propStyle(percent - halfSide, 45),\n          ]}\n        />\n      );\n    } else {\n      return (\n        <Box\n          borderTopColor={newProps.trackColor}\n          borderRightColor={newProps.trackColor}\n          style={styles.offsetLayer}\n        />\n      );\n    }\n  };\n  let firstProgressLayerStyle;\n  if (value > halfSide) {\n    firstProgressLayerStyle = propStyle(halfSide, -135);\n  } else {\n    firstProgressLayerStyle = propStyle(value, -135);\n  }\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <Box\n      {...sizeProps}\n      rounded={viewHeight / 2}\n      borderWidth={defaultThickness}\n      borderColor={newProps.trackColor}\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      {...remainingProps}\n      ref={ref}\n      accessible\n      accessibilityRole=\"progressbar\"\n      accessibilityValue={{\n        min,\n        max,\n        now: value,\n      }}\n    >\n      {!isIndeterminate ? (\n        <>\n          <Box\n            onLayout={layout}\n            borderTopColor={newProps.color}\n            borderRightColor={newProps.color}\n            style={[styles.firstProgressLayer, firstProgressLayerStyle]}\n          />\n          {renderThirdLayer(value)}\n          <Box _text={newProps._text}>{remainingProps.children}</Box>\n        </>\n      ) : (\n        <StyleAnimatedView\n          onLayout={layout}\n          borderTopColor={newProps.color}\n          borderRightColor={newProps.color}\n          style={styles.animateStyle}\n        />\n      )}\n    </Box>\n  );\n};\n\nexport default React.memo(React.forwardRef(CircularProgress));\n"
  },
  {
    "path": "src/components/composites/CircularProgress/index.tsx",
    "content": "import { default as CircularProgress } from './CircularProgress';\nexport default CircularProgress;\n"
  },
  {
    "path": "src/components/composites/CircularProgress/types.ts",
    "content": "import type { ITextProps } from '../../primitives';\nimport type { ViewStyle } from 'react-native';\nimport type { CustomProps, ResponsiveValue } from '../../../components/types';\nimport type { ISizes } from '../../../theme/base/sizes';\nimport type { IColors } from '../../../theme/base/colors';\nimport type { InterfaceBoxProps } from '../../../components/primitives/Box/types';\nimport type { ColorSchemeType } from '../../../components/types';\n\nexport type InterfaceCircularProgressProps = InterfaceBoxProps<ICircularProgressProps> & {\n  style?: ViewStyle;\n  children?: JSX.Element | JSX.Element[] | string;\n  value: number;\n  size?: ResponsiveValue<ISizes | (string & {}) | number>;\n  thickness?: number;\n  colorScheme?: ColorSchemeType;\n  color?: ResponsiveValue<IColors | (string & {})>;\n  trackColor?: ResponsiveValue<IColors | (string & {})>;\n  isIndeterminate?: boolean;\n  max?: number;\n  min?: number;\n  _text?: ITextProps;\n};\n\nexport type ICircularProgressProps = InterfaceCircularProgressProps &\n  CustomProps<'CircularProgress'>;\n"
  },
  {
    "path": "src/components/composites/Code/index.tsx",
    "content": "import React from 'react';\nimport { Platform } from 'react-native';\nimport { useThemeProps } from '../../../hooks';\nimport Box from '../../primitives/Box';\nimport type { ICodeProps } from './types';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst Code = ({ ...props }: ICodeProps, ref?: any) => {\n  let { ...newProps } = useThemeProps('Code', props);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <Box\n      _text={{\n        fontFamily: Platform.OS === 'ios' ? 'Courier' : 'monospace',\n      }}\n      {...newProps}\n      ref={ref}\n    />\n  );\n};\n\nexport type { ICodeProps };\nexport default React.memo(React.forwardRef(Code));\n"
  },
  {
    "path": "src/components/composites/Code/types.ts",
    "content": "import type { CustomProps } from '../../../components/types/utils';\nimport type { InterfaceBoxProps } from '../../primitives/Box';\nimport type { ColorSchemeType } from '../../../components/types';\n\nexport type InterfaceCodeProps = InterfaceBoxProps<ICodeProps> & {\n  colorScheme?: ColorSchemeType;\n};\n\nexport type ICodeProps = InterfaceCodeProps & CustomProps<'Code'>;\n"
  },
  {
    "path": "src/components/composites/Collapse/index.tsx",
    "content": "import isNil from 'lodash.isnil';\nimport React, { useEffect, useRef, forwardRef } from 'react';\nimport { ViewStyle, LayoutAnimation, UIManager, Platform } from 'react-native';\nimport { Box } from '../../primitives';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nimport type { InterfaceBoxProps } from '../../primitives/Box';\nimport type { CustomProps } from '../../../components/types';\nexport type InterfaceCollapseProps = InterfaceBoxProps<ICollapseProps> & {\n  style?: ViewStyle;\n  endingHeight?: number;\n  startingHeight?: number;\n  duration?: number;\n  animateOpacity?: boolean;\n  isOpen?: boolean;\n  onAnimationEnd?: Function;\n  onAnimationStart?: Function;\n};\n\nexport type ICollapseProps = InterfaceCollapseProps & CustomProps<'Box'>;\n\nfunction usePrevious(value: any) {\n  const ref = useRef();\n  function updatePrevious(newVal: any) {\n    ref.current = newVal;\n  }\n  useEffect(() => {\n    updatePrevious(value);\n  }, [value]);\n  return { value: ref.current, updatePrevious };\n}\n\nconst Collapse = (\n  {\n    endingHeight,\n    startingHeight,\n    duration,\n    // animateOpacity,\n    isOpen,\n    onAnimationEnd,\n    onAnimationStart,\n    ...props\n  }: ICollapseProps,\n  ref?: any\n) => {\n  if (Platform.OS === 'android') {\n    UIManager.setLayoutAnimationEnabledExperimental &&\n      UIManager.setLayoutAnimationEnabledExperimental(true);\n  }\n  const CustomLayoutLinear = {\n    duration: duration ? duration : 400,\n    create: {\n      type: LayoutAnimation.Types.easeInEaseOut,\n      property: LayoutAnimation.Properties.opacity,\n    },\n    update: {\n      type: LayoutAnimation.Types.easeInEaseOut,\n    },\n  };\n  const defaultStartHeight: any = isOpen\n    ? endingHeight\n    : startingHeight\n    ? startingHeight\n    : 1;\n  let animatedStyle = { height: defaultStartHeight };\n  const animateView = () => {\n    if (onAnimationStart) {\n      onAnimationStart();\n    }\n    animatedStyle = {\n      height: isOpen ? endingHeight : defaultStartHeight,\n    };\n    let callback = onAnimationEnd ? onAnimationEnd : () => {};\n    LayoutAnimation.configureNext(CustomLayoutLinear, callback());\n  };\n\n  let wasOpen = usePrevious(isOpen);\n  if (!isNil(wasOpen.value) && wasOpen.value !== isOpen) {\n    animateView();\n    wasOpen.updatePrevious(isOpen);\n  }\n  const [size, setSize] = React.useState(startingHeight ?? 0);\n  const provideSize = (layoutSize: any) => {\n    setSize(layoutSize.height);\n  };\n  const _web = {\n    transition: `height ${duration ?? '400'}ms`,\n    height: isOpen ? endingHeight || size : startingHeight || 0,\n  };\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <Box\n      style={{ ...animatedStyle, ...(Platform.OS === 'web' && _web) }}\n      overflow=\"hidden\"\n      ref={ref}\n    >\n      <Box\n        //@ts-ignore\n        overflow={Platform.OS === 'web' ? 'auto' : 'scroll'}\n        onLayout={(e: any) => provideSize(e.nativeEvent.layout)}\n        {...props}\n      />\n    </Box>\n  );\n};\n\nexport default React.memo(forwardRef(Collapse));\n"
  },
  {
    "path": "src/components/composites/Container/index.tsx",
    "content": "import React from 'react';\nimport { usePropsResolution } from '../../../hooks';\nimport Box from '../../primitives/Box';\nimport type { IContainerProps } from './types';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst Container = ({ children, ...props }: IContainerProps, ref?: any) => {\n  const resolvedProps = usePropsResolution('Container', props);\n\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <Box ref={ref} {...resolvedProps}>\n      {children}\n    </Box>\n  );\n};\n\nexport default React.memo(React.forwardRef(Container));\nexport type { IContainerProps };\n"
  },
  {
    "path": "src/components/composites/Container/types.tsx",
    "content": "import type { CustomProps } from '../../../components/types';\nimport type { InterfaceBoxProps } from '../../primitives/Box';\n\nexport type InterfaceContainerProps = InterfaceBoxProps<IContainerProps> & {\n  centerContent?: boolean;\n};\n\nexport type IContainerProps = InterfaceContainerProps &\n  CustomProps<'Container'>;\n"
  },
  {
    "path": "src/components/composites/Divider/index.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport { Platform } from 'react-native';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport Box from './../../primitives/Box';\nimport type { IDividerProps } from './types';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst Divider = (props: IDividerProps, ref?: any) => {\n  const { orientation, ...resolvedProps } = usePropsResolution(\n    'Divider',\n    props,\n    {},\n    { resolveResponsively: ['thickness'] }\n  );\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <Box\n      {...resolvedProps}\n      ref={ref}\n      aria-orientation={orientation}\n      //@ts-ignore web only role\n      accessibilityRole={Platform.OS === 'web' ? 'separator' : undefined}\n    />\n  );\n};\n\nexport default memo(forwardRef(Divider));\n"
  },
  {
    "path": "src/components/composites/Divider/types.ts",
    "content": "import type { CustomProps, SpaceType } from '../../../components/types';\nimport type { InterfaceBoxProps } from '../../primitives/Box/types';\n\nexport interface InterfaceDividerProps\n  extends InterfaceBoxProps<IDividerProps> {\n  /**\n   * The orientation of the divider.\n   */\n  orientation?: 'vertical' | 'horizontal';\n  /**\n   * The thickness of the divider.\n   */\n  thickness?: SpaceType;\n}\n\nexport type IDividerProps = InterfaceDividerProps & CustomProps<'Divider'>;\n"
  },
  {
    "path": "src/components/composites/Drawer/index.tsx",
    "content": "import { OverlayContainer } from '@react-native-aria/overlays';\nimport React from 'react';\nimport Backdrop from '../Backdrop';\nimport Box from '../../primitives/Box';\n\nexport type IDrawerProps = {\n  placement?: 'top' | 'left' | 'right' | 'bottom';\n  children?: any;\n  isOpen: boolean;\n  onClose?: () => void;\n};\n\nconst Drawer = ({\n  children,\n  isOpen,\n  onClose,\n  placement = 'right',\n}: IDrawerProps) => {\n  const placementStyles = React.useMemo(() => {\n    const styles: any = {\n      position: 'absolute',\n    };\n\n    if (placement === 'top') {\n      styles.top = 0;\n      styles.left = 0;\n      styles.right = 0;\n      styles.width = '100%';\n    } else if (placement === 'bottom') {\n      styles.bottom = 0;\n      styles.left = 0;\n      styles.right = 0;\n      styles.width = '100%';\n    } else if (placement === 'right') {\n      styles.right = 0;\n      styles.top = 0;\n      styles.bottom = 0;\n      styles.height = '100%';\n    } else {\n      styles.top = 0;\n      styles.bottom = 0;\n      styles.left = 0;\n      styles.height = '100%';\n    }\n    return styles;\n  }, [placement]);\n\n  if (!isOpen) return null;\n\n  return (\n    <OverlayContainer>\n      <Backdrop onPress={onClose ? onClose : () => {}} />\n      <Box {...placementStyles} opacity={1}>\n        {children}\n      </Box>\n    </OverlayContainer>\n  );\n};\n\nexport default Drawer;\n"
  },
  {
    "path": "src/components/composites/Fab/Fab.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport { Button } from '../../primitives/Button';\nimport type { IFabProps } from './types';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport { OverlayContainer } from '@react-native-aria/overlays';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nimport { extractInObject } from '../../../theme/tools/utils';\n\nconst Fab = ({ ...props }: IFabProps, ref: any) => {\n  /** Extracting Button Specific Props */\n  const [buttonProps, remainingProps] = extractInObject(props, [\n    'variant',\n    '_pressed',\n    '_hover',\n    '_text',\n    '_focus',\n    '_stack',\n    '_loading',\n    '_disabled',\n    '_spinner',\n  ]);\n  const themeProps = usePropsResolution('FAB', remainingProps);\n\n  const {\n    label,\n    icon,\n    renderInPortal,\n    placement,\n    placementProps,\n    ...newProps\n  } = themeProps;\n\n  const fabComponent = (\n    <Button\n      {...buttonProps}\n      {...placementProps[placement]}\n      ref={ref}\n      startIcon={icon}\n      {...newProps}\n    >\n      {label}\n    </Button>\n  );\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n\n  return renderInPortal ? (\n    <OverlayContainer>{fabComponent}</OverlayContainer>\n  ) : (\n    fabComponent\n  );\n};\n\nexport default memo(forwardRef(Fab));\n"
  },
  {
    "path": "src/components/composites/Fab/FabItem.tsx",
    "content": "// import React from 'react';\n// import { Button, Box } from '../../primitives';\n// import { FabContext } from './context';\n// import type { IFabItemProps } from './props';\n// import { Animated } from 'react-native';\n// import { omitUndefined } from '../../../theme/tools/utils';\n\n// const FabItem = ({ children, ...props }: IFabItemProps) => {\n//   const slideAnim = React.useRef(new Animated.Value(0)).current;\n//   const { onPress, index = 0, ...newProps } = omitUndefined(props);\n//   const { isOpen, onToggle, slide }: any = React.useContext(FabContext);\n//   const [size, setSize] = React.useState(40);\n//   const slideStyle = {\n//     down: 'top',\n//     up: 'bottom',\n//     right: 'left',\n//     left: 'right',\n//   };\n\n//   const provideSize = (layoutSize: any) => {\n//     setSize(layoutSize.width + 10);\n//   };\n\n//   const pressHandler = () => {\n//     onToggle();\n//     onPress && onPress();\n//   };\n\n//   const slideIn = () => {\n//     Animated.timing(slideAnim, {\n//       toValue: 0,\n//       duration: 500,\n//       useNativeDriver: true,\n//     }).start();\n//   };\n\n//   let animToValue = index * size;\n//   animToValue =\n//     slide === 'left' || slide === 'up' ? animToValue * -1 : animToValue;\n//   const slideOut = () => {\n//     Animated.timing(slideAnim, {\n//       toValue: animToValue,\n//       duration: 500,\n//       useNativeDriver: true,\n//     }).start();\n//   };\n\n//   isOpen ? slideOut() : slideIn();\n//   const animatioStyle = {\n//     top: { transform: [{ translateY: slideAnim }] },\n//     right: { transform: [{ translateX: slideAnim }] },\n//     bottom: { transform: [{ translateY: slideAnim }] },\n//     left: { transform: [{ translateX: slideAnim }] },\n//   };\n\n//   return (\n//     // @ts-ignore\n//     <Animated.View style={animatioStyle[slideStyle[slide]]}>\n//       <Box\n//         position=\"absolute\"\n//         top={0}\n//         right={0}\n//         onLayout={(e) => provideSize(e.nativeEvent.layout)}\n//         zIndex={9999 - index}\n//       >\n//         <Button\n//           variant=\"unstyled\"\n//           bg=\"default.200\"\n//           borderRadius=\"full\"\n//           justifyContent=\"center\"\n//           alignItems=\"center\"\n//           {...newProps}\n//           onPress={pressHandler}\n//           p={1}\n//         >\n//           {children}\n//         </Button>\n//       </Box>\n//     </Animated.View>\n//   );\n// };\n\n// export default FabItem;\n"
  },
  {
    "path": "src/components/composites/Fab/FabList.tsx",
    "content": "// import React from 'react';\n// import { Box } from '../../primitives';\n// import getIndexedChildren from '../../../utils/getIndexedChildren';\n// import type { IFabListProps } from './props';\n\n// import { omitUndefined } from '../../../theme/tools/utils';\n\n// const FabList = ({ children, ...props }: IFabListProps) => {\n//   const newProps = omitUndefined(props);\n//   return (\n//     <Box position=\"absolute\" {...newProps}>\n//       {getIndexedChildren(children, 'FabItem', 0)}\n//     </Box>\n//   );\n// };\n\n// export default FabList;\n"
  },
  {
    "path": "src/components/composites/Fab/context.ts",
    "content": "// import { createContext } from 'react';\n\n// export const FabContext = createContext({});\n"
  },
  {
    "path": "src/components/composites/Fab/index.tsx",
    "content": "export { default as Fab } from './Fab';\nexport type { IFabProps } from './types';\n"
  },
  {
    "path": "src/components/composites/Fab/types.tsx",
    "content": "import type { CustomProps } from '../../../components/types/utils';\nimport type { InterfaceButtonProps } from '../../primitives/Button/types';\n\nexport interface InterfaceFabProps extends InterfaceButtonProps {\n  /**\n   * Placement of the Fab.\n   * @default bottom-right\n   */\n  placement?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';\n  /**\n   * Text to be displayed in Fab.\n   */\n  label?: JSX.Element | string;\n  /**\n   * Icon to be displayed in Fab.\n   */\n  icon?: JSX.Element;\n  /**\n   * Determines whether the Fab should be rendered in a Portal.\n   * Refer to this solution before using this prop-\n   * https://github.com/GeekyAnts/NativeBase/issues/3817\n   * @default true\n   */\n  renderInPortal?: boolean;\n}\n\nexport type IFabProps = InterfaceFabProps & CustomProps<'FAB'>;\n"
  },
  {
    "path": "src/components/composites/FormControl/FormControl.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport Box from '../../primitives/Box';\nimport type { IFormControlProps } from './types';\nimport { useFormControlProvider, FormControlContext } from './useFormControl';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst FormControl = (props: IFormControlProps, ref: any) => {\n  const { htmlProps, ...context } = useFormControlProvider(props);\n  const resolvedProps = usePropsResolution('FormControl', props, {\n    isDisabled: context.isDisabled,\n    isReadOnly: context.isReadOnly,\n    isInvalid: context.isInvalid,\n    // isRequired: context.isRequired,\n  });\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <FormControlContext.Provider value={context}>\n      <Box {...resolvedProps} {...htmlProps} ref={ref} />\n    </FormControlContext.Provider>\n  );\n};\n\nexport default memo(forwardRef(FormControl));\n"
  },
  {
    "path": "src/components/composites/FormControl/FormControlErrorMessage.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport Box from '../../primitives/Box';\nimport { HStack } from '../../primitives/Stack';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport { useFormControlContext } from './useFormControl';\nimport type { IFormControlErrorMessageProps } from './types';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nimport { combineContextAndProps } from '../../../utils';\nimport Text from '../../primitives/Text';\n\nconst FormControlErrorMessage = (\n  props: IFormControlErrorMessageProps,\n  ref: any\n) => {\n  const formControlContext = useFormControlContext();\n  const combinedProps = combineContextAndProps(formControlContext, props);\n  const {\n    leftIcon,\n    rightIcon,\n    children,\n    _text,\n    _stack,\n    ...resolvedProps\n  } = usePropsResolution('FormControlErrorMessage', combinedProps, {\n    isDisabled: combinedProps.isDisabled,\n    isReadOnly: combinedProps.isReadOnly,\n    isInvalid: combinedProps.isInvalid,\n    // isRequired: combinedProps.isRequired,\n  });\n  let { startIcon, endIcon } = resolvedProps;\n\n  if (rightIcon) {\n    endIcon = rightIcon;\n  }\n  if (leftIcon) {\n    startIcon = leftIcon;\n  }\n  if (endIcon && React.isValidElement(endIcon)) {\n    endIcon = React.Children.map(\n      endIcon,\n      (child: JSX.Element, index: number) => {\n        return React.cloneElement(child, {\n          key: `button-end-icon-${index}`,\n          ..._text,\n          ...child.props,\n        });\n      }\n    );\n  }\n  if (startIcon && React.isValidElement(startIcon)) {\n    startIcon = React.Children.map(\n      startIcon,\n      (child: JSX.Element, index: number) => {\n        return React.cloneElement(child, {\n          key: `button-start-icon-${index}`,\n          ..._text,\n          ...child.props,\n        });\n      }\n    );\n  }\n\n  React.useEffect(() => {\n    resolvedProps?.setHasFeedbackText(true);\n    return () => {\n      resolvedProps?.setHasFeedbackText(false);\n    };\n  });\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return resolvedProps?.isInvalid && children ? (\n    <Box nativeID={resolvedProps?.helpTextId} {...resolvedProps} ref={ref}>\n      <HStack {..._stack}>\n        {startIcon}\n        <Text {..._text}>{children}</Text>\n        {endIcon}\n      </HStack>\n    </Box>\n  ) : null;\n};\n\nexport default memo(forwardRef(FormControlErrorMessage));\n"
  },
  {
    "path": "src/components/composites/FormControl/FormControlHelperText.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport Box from '../../primitives/Box';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport { useFormControlContext } from './useFormControl';\nimport type { IFormControlHelperTextProps } from './types';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nimport { combineContextAndProps } from '../../../utils';\n\nconst FormControlHelperText = (\n  props: IFormControlHelperTextProps,\n  ref: any\n) => {\n  const formControlContext = useFormControlContext();\n  const combinedProps = combineContextAndProps(formControlContext, props);\n  const resolvedProps = usePropsResolution(\n    'FormControlHelperText',\n    combinedProps,\n    {\n      isDisabled: combinedProps.isDisabled,\n      isReadOnly: combinedProps.isReadOnly,\n      isInvalid: combinedProps.isInvalid,\n      // isRequired: combinedProps.isRequired,\n    }\n  );\n\n  React.useEffect(() => {\n    resolvedProps?.setHasHelpText(true);\n    return () => {\n      resolvedProps?.setHasHelpText(false);\n    };\n  });\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n\n  return (\n    <Box {...resolvedProps} nativeID={resolvedProps?.feedbackId} ref={ref} />\n  );\n};\n\nexport default memo(forwardRef(FormControlHelperText));\n"
  },
  {
    "path": "src/components/composites/FormControl/FormControlLabel.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport Box from '../../primitives/Box';\nimport Text from '../../primitives/Text';\nimport { useFormControlContext } from './useFormControl';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport type { IFormControlLabelProps } from './types';\nimport { mergeRefs } from '../../../utils';\nimport { combineContextAndProps } from '../../../utils';\n\nconst FormControlLabel = (\n  { children, ...props }: IFormControlLabelProps,\n  ref: any\n) => {\n  const formControlContext = useFormControlContext();\n  const combinedProps = combineContextAndProps(formControlContext, props);\n  const _ref = React.useRef<HTMLLabelElement>(null);\n  const { _astrick, ...resolvedProps } = usePropsResolution(\n    'FormControlLabel',\n    combinedProps,\n    {\n      isDisabled: combinedProps.isDisabled,\n      isReadOnly: combinedProps.isReadOnly,\n      isInvalid: combinedProps.isInvalid,\n      // isRequired: combinedProps.isRequired,\n    }\n  );\n\n  const requiredAsterisk = () => (\n    <Text\n      _web={{\n        accessibilityHidden: true,\n        //@ts-ignore\n        accessibilityRole: 'presentation',\n      }}\n      {..._astrick}\n    >\n      *\n    </Text>\n  );\n  const mergedRef = mergeRefs([_ref, ref]);\n  React.useEffect(() => {\n    if (_ref.current) {\n      // RN web doesn't support htmlFor for Label element yet\n      if (props.htmlFor) {\n        _ref.current.htmlFor = props.htmlFor;\n      } else if (resolvedProps?.nativeID) {\n        _ref.current.htmlFor = resolvedProps.nativeID;\n      }\n    }\n  }, [resolvedProps?.nativeID, props.htmlFor]);\n\n  return (\n    <Box\n      _web={{\n        //@ts-ignore\n        accessibilityRole: 'label',\n      }}\n      {...resolvedProps}\n      nativeID={resolvedProps?.labelId}\n      ref={mergedRef}\n    >\n      {children}\n      {resolvedProps?.isRequired && requiredAsterisk()}\n    </Box>\n  );\n};\nexport default memo(forwardRef(FormControlLabel));\n"
  },
  {
    "path": "src/components/composites/FormControl/index.tsx",
    "content": "import { default as FormControlBase } from './FormControl';\nimport { default as FormControlLabel } from './FormControlLabel';\nimport { default as FormControlErrorMessage } from './FormControlErrorMessage';\nimport { default as FormControlHelperText } from './FormControlHelperText';\nimport type { FormControlComponentType } from './types';\n\nlet FormControlTemp: any = FormControlBase;\nFormControlTemp.Label = FormControlLabel;\nFormControlTemp.ErrorMessage = FormControlErrorMessage;\nFormControlTemp.HelperText = FormControlHelperText;\n\n// To add typings\nconst FormControl = FormControlTemp as FormControlComponentType;\n\nexport { FormControl };\nexport {\n  FormControlContext,\n  useFormControl,\n  useFormControlProvider,\n  useFormControlContext,\n} from './useFormControl';\n\nexport type { IFormControlContext } from './useFormControl';\n\nexport type {\n  IFormControlProps,\n  IFormControlLabelProps,\n  IFormControlErrorMessageProps,\n  IFormControlHelperTextProps,\n} from './types';\n"
  },
  {
    "path": "src/components/composites/FormControl/test/FormControl.test.tsx",
    "content": "import React from 'react';\nimport { FormControl, useFormControl } from '../index';\nimport { TextInput } from 'react-native';\nimport { render } from '@testing-library/react-native';\nimport { Wrapper } from '../../../../utils/test-utils';\n\nconst Input = React.forwardRef((props: any, ref: any) => {\n  const inputProps = useFormControl(props);\n  return (\n    //@ts-ignore\n    <TextInput ref={ref} {...inputProps} />\n  );\n});\n\nit('a11y test in when required', async () => {\n  let { getByPlaceholderText } = render(\n    <Wrapper>\n      <FormControl nativeID=\"name\" isRequired>\n        <FormControl.Label>Name</FormControl.Label>\n        <Input placeholder=\"Name\" />\n        <FormControl.HelperText>Enter your name please!</FormControl.HelperText>\n        <FormControl.ErrorMessage>\n          Your name is invalid\n        </FormControl.ErrorMessage>\n      </FormControl>\n    </Wrapper>\n  );\n  const textInput = getByPlaceholderText('Name');\n  expect(textInput.props.accessibilityRequired).toBe(true);\n  expect(textInput.props.required).toBe(true);\n});\n\nit('a11y test in when invalid', async () => {\n  let { getByPlaceholderText } = render(\n    <Wrapper>\n      <FormControl nativeID=\"name\" isInvalid>\n        <FormControl.Label>Name</FormControl.Label>\n        <Input placeholder=\"Name\" />\n        <FormControl.HelperText>Enter your name please!</FormControl.HelperText>\n        <FormControl.ErrorMessage>\n          Your name is invalid\n        </FormControl.ErrorMessage>\n      </FormControl>\n    </Wrapper>\n  );\n  const textInput = getByPlaceholderText('Name');\n  expect(textInput.props.accessibilityInvalid).toBe(true);\n});\n\nit('a11y test in when readOnly', async () => {\n  let { getByPlaceholderText } = render(\n    <Wrapper>\n      <FormControl nativeID=\"name\" isReadOnly>\n        <FormControl.Label>Name</FormControl.Label>\n        <Input placeholder=\"Name\" />\n        <FormControl.HelperText>Enter your name please!</FormControl.HelperText>\n        <FormControl.ErrorMessage>\n          Your name is invalid\n        </FormControl.ErrorMessage>\n      </FormControl>\n    </Wrapper>\n  );\n  const textInput = getByPlaceholderText('Name');\n  expect(textInput.props.accessibilityReadOnly).toBe(true);\n  expect(textInput.props.readOnly).toBe(true);\n});\n\nit('a11y test in when disabled', async () => {\n  let { getByPlaceholderText } = render(\n    <Wrapper>\n      <FormControl nativeID=\"name\" isDisabled>\n        <FormControl.Label>Name</FormControl.Label>\n        <Input placeholder=\"Name\" />\n        <FormControl.HelperText>Enter your name please!</FormControl.HelperText>\n        <FormControl.ErrorMessage>\n          Your name is invalid\n        </FormControl.ErrorMessage>\n      </FormControl>\n    </Wrapper>\n  );\n  const textInput = getByPlaceholderText('Name');\n  expect(textInput.props.disabled).toBe(true);\n});\n\nit('a11y test when helper text is present', async () => {\n  let { getByPlaceholderText } = render(\n    <Wrapper>\n      <FormControl nativeID=\"name\" isDisabled>\n        <FormControl.Label>Name</FormControl.Label>\n        <Input placeholder=\"Name\" />\n        <FormControl.HelperText>Enter your name please!</FormControl.HelperText>\n      </FormControl>\n    </Wrapper>\n  );\n  const textInput = getByPlaceholderText('Name');\n  expect(textInput.props.accessibilityDescribedBy).toBe('name-helptext');\n  expect(textInput.props.accessibilityReadOnly).toBeUndefined();\n  expect(textInput.props.accessibilityInvalid).toBeUndefined();\n  expect(textInput.props.accessibilityRequired).toBeUndefined();\n});\n\nit('sets htmlFor of FormLabel ref to nativeID of Input', async () => {\n  let ref: HTMLLabelElement;\n  const inputID = 'name';\n  let { getByPlaceholderText } = render(\n    <Wrapper>\n      <FormControl nativeID={inputID} isInvalid>\n        <FormControl.Label\n          //@ts-ignore\n          ref={(_ref) => (ref = _ref)}\n        >\n          Name\n        </FormControl.Label>\n        <Input placeholder=\"Name\" />\n        <FormControl.HelperText>Enter your name please!</FormControl.HelperText>\n        <FormControl.ErrorMessage>\n          Your name is invalid\n        </FormControl.ErrorMessage>\n      </FormControl>\n    </Wrapper>\n  );\n  const textInput = getByPlaceholderText('Name');\n  //@ts-ignore\n  expect(textInput.props.nativeID).toBe(ref.htmlFor);\n});\n"
  },
  {
    "path": "src/components/composites/FormControl/types.tsx",
    "content": "import type { ITextProps } from '../../primitives';\nimport type { CustomProps } from '../../../components/types/utils';\nimport type { IBoxProps, IStackProps } from '../../primitives';\nimport type { InterfaceBoxProps } from '../../../components/primitives/Box';\n\nexport interface InterfaceFormControlProps\n  extends InterfaceBoxProps<IFormControlProps> {\n  /**\n   * If provided, this prop is passed to its children.\n   */\n  nativeID?: string;\n  /**\n   * If true, this prop is passed to its children.\n   */\n  isInvalid?: boolean;\n  /**\n   * If true, this prop is passed to its children.\n   */\n  isRequired?: boolean;\n  /**\n   * If true, this prop is passed to its children.\n   */\n  isDisabled?: boolean;\n  /**\n   * If true, this prop is passed to its children.\n   */\n  isReadOnly?: boolean;\n}\n\nexport interface IFormControlLabelProps extends IFormControlProps {\n  /**\n   * Passed props will be applied on disabled state.\n   */\n  _disabled?: Partial<IBoxProps<IFormControlLabelProps>>;\n  // _focus?: any;\n  /**\n   * Passed props will be applied on invalid state.\n   */\n  _invalid?: Partial<IBoxProps<IFormControlLabelProps>>;\n  /**\n   * Reflects the value of the 'for' content property.\n   */\n  htmlFor?: string;\n  /**\n   * Props applied to astrick text\n   */\n  _astrick?: Partial<ITextProps>;\n}\nexport interface IFormControlErrorMessageProps extends IFormControlProps {\n  /**\n   * Passed props will be applied on disabled state.\n   */\n  _disabled?: Partial<IBoxProps<IFormControlLabelProps>>;\n  /**\n   * The right icon element to use in the FormControl.ErrorMessage.\n   */\n  rightIcon?: JSX.Element | Array<JSX.Element>;\n  /**\n   * The left icon element to use in the FormControl.ErrorMessage.\n   */\n  leftIcon?: JSX.Element | Array<JSX.Element>;\n  /**\n   * The start icon element to use in the FormControl.ErrorMessage.\n   */\n  startIcon?: JSX.Element | Array<JSX.Element>;\n  /**\n   * The end icon element to use in the FormControl.ErrorMessage.\n   */\n  endIcon?: JSX.Element | Array<JSX.Element>;\n  /**\n   * Props to be passed to the HStack used inside of FormControl.ErrorMessage.\n   */\n  _stack?: Partial<IStackProps>;\n}\nexport interface IFormControlHelperTextProps extends IFormControlProps {\n  /**\n   * Passed props will be applied on disabled state.\n   */\n  _disabled?: Partial<IBoxProps<IFormControlLabelProps>>;\n  // _focus?: any;\n  /**\n   * Passed props will be applied on invalid state.\n   */\n  _invalid?: Partial<IBoxProps<IFormControlLabelProps>>;\n}\n\nexport type FormControlComponentType = ((\n  props: IFormControlProps\n) => JSX.Element) & {\n  Label: React.MemoExoticComponent<\n    (props: IFormControlLabelProps) => JSX.Element\n  >;\n  ErrorMessage: React.MemoExoticComponent<\n    (props: IFormControlErrorMessageProps) => JSX.Element\n  >;\n  HelperText: React.MemoExoticComponent<\n    (props: IFormControlHelperTextProps) => JSX.Element\n  >;\n};\n\nexport type IFormControlProps = InterfaceFormControlProps &\n  CustomProps<'FormControl'>;\n"
  },
  {
    "path": "src/components/composites/FormControl/useFormControl.tsx",
    "content": "import React from 'react';\nimport { useId } from '@react-native-aria/utils';\nimport omit from 'lodash.omit';\nimport type { IFormControlProps } from './types';\nimport { ariaAttr } from '../../../utils';\nimport { ResponsiveQueryContext } from '../../../utils/useResponsiveQuery/ResponsiveQueryProvider';\nimport uniqueId from 'lodash.uniqueid';\n\nexport type IFormControlContext = Omit<\n  ReturnType<typeof useFormControlProvider>,\n  'htmlProps'\n>;\n\nexport const FormControlContext = React.createContext({});\n\nexport function useFormControlProvider(props: IFormControlProps) {\n  const {\n    nativeID: idProp,\n    isRequired,\n    isInvalid,\n    isDisabled,\n    isReadOnly,\n    ...htmlProps\n  } = props;\n\n  let id = uniqueId();\n  const responsiveQueryContext = React.useContext(ResponsiveQueryContext);\n  const disableCSSMediaQueries = responsiveQueryContext.disableCSSMediaQueries;\n\n  if (!disableCSSMediaQueries) {\n    // This if statement technically breaks the rules of hooks, but is safe\n    // because the condition never changes after mounting.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    id = useId();\n  }\n\n  // const id = '';\n  // Generate all the required ids\n  const nativeID = idProp || `field-${id}`;\n\n  const labelId = `${nativeID}-label`;\n  const feedbackId = `${nativeID}-feedback`;\n  const helpTextId = `${nativeID}-helptext`;\n\n  /**\n   * Track whether the `FormErrorMessage` has been rendered.\n   * We use this to append its id the the `aria-describedby` of the `input`.\n   */\n  const [hasFeedbackText, setHasFeedbackText] = React.useState(false);\n\n  /**\n   * Track whether the `FormHelperText` has been rendered.\n   * We use this to append its id the the `aria-describedby` of the `input`.\n   */\n  const [hasHelpText, setHasHelpText] = React.useState(false);\n\n  const context = {\n    isRequired: !!isRequired,\n    isInvalid: !!isInvalid,\n    isReadOnly: !!isReadOnly,\n    isDisabled: !!isDisabled,\n    hasFeedbackText,\n    setHasFeedbackText,\n    hasHelpText,\n    setHasHelpText,\n    nativeID,\n    labelId,\n    feedbackId,\n    helpTextId,\n    htmlProps,\n  };\n\n  return context;\n}\n\n/**\n * React hook that provides the props that should be spread on to\n * input fields (`input`, `select`, `textarea`, etc.).\n *\n * It provides a convenient way to control a form fields, validation\n * and helper text.\n */\nexport function useFormControl(props: IFormControlProps) {\n  const field = useFormControlContext();\n  const describedBy: any[] = [];\n\n  // Error message must be described first in all scenarios.\n  if (field?.hasFeedbackText) describedBy.push(field?.feedbackId);\n  if (field?.hasHelpText) describedBy.push(field?.helpTextId);\n  const ariaDescribedBy = describedBy.join(' ');\n\n  const cleanProps = omit(props, [\n    'isInvalid',\n    'isDisabled',\n    'isReadOnly',\n    'isRequired',\n  ]);\n\n  let nativeID = props?.nativeID;\n\n  if (!nativeID && field?.nativeID) {\n    nativeID = `${field?.nativeID}-input`;\n  }\n\n  return {\n    ...cleanProps,\n    nativeID: nativeID,\n    disabled: props.isDisabled || field?.isDisabled,\n    readOnly: props.isReadOnly || field?.isReadOnly,\n    required: props.isRequired || field?.isRequired,\n    accessibilityInvalid: ariaAttr(props.isInvalid || field?.isInvalid),\n    accessibilityRequired: ariaAttr(props.isRequired || field?.isRequired),\n    accessibilityReadOnly: ariaAttr(props.isReadOnly || field?.isReadOnly),\n    accessibilityDescribedBy: ariaDescribedBy || undefined,\n  };\n}\n\nexport const useFormControlContext = () => {\n  return (React.useContext(\n    FormControlContext\n  ) as unknown) as IFormControlContext;\n};\n"
  },
  {
    "path": "src/components/composites/IconButton/index.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport { Pressable } from '../../primitives/Pressable';\nimport { Icon } from '../../primitives/Icon';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nimport { composeEventHandlers } from '../../../utils';\nimport type { IIconButtonProps } from './types';\nimport {\n  useHover,\n  useFocus,\n  useIsPressed,\n} from '../../primitives/Pressable/Pressable';\nimport { useFocusRing } from '@react-native-aria/focus';\nimport merge from 'lodash.merge';\n\nconst IconButton = (\n  {\n    icon,\n    _icon: pseudoIconProp,\n    children,\n    isHovered: isHoveredProp,\n    isPressed: isPressedProp,\n    isFocused: isFocusedProp,\n    isFocusVisible: isFocusVisibleProp,\n    isDisabled,\n    ...props\n  }: IIconButtonProps,\n  ref: any\n) => {\n  const { hoverProps, isHovered } = useHover();\n  const { pressableProps, isPressed } = useIsPressed();\n  const { focusProps, isFocused } = useFocus();\n  const { isFocusVisible, focusProps: focusRingProps }: any = useFocusRing();\n\n  const {\n    _icon,\n    onPressIn,\n    onPressOut,\n    onHoverIn,\n    onHoverOut,\n    onFocus,\n    onBlur,\n    ...resolvedProps\n  } = usePropsResolution(\n    'IconButton',\n    { ...props, _icon: merge({}, pseudoIconProp, icon?.props) },\n    {\n      isHovered: isHoveredProp || isHovered,\n      isPressed: isPressedProp || isPressed,\n      isFocused: isFocusedProp || isFocused,\n      isFocusVisible: isFocusVisibleProp || isFocusVisible,\n      isDisabled,\n    }\n  );\n\n  let clonedIcon;\n  if (icon) {\n    clonedIcon = React.cloneElement(icon, {\n      ..._icon,\n    });\n  }\n\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n\n  return (\n    <Pressable\n      disabled={isDisabled}\n      accessibilityRole=\"button\"\n      ref={ref}\n      onPressIn={composeEventHandlers(onPressIn, pressableProps.onPressIn)}\n      onPressOut={composeEventHandlers(onPressOut, pressableProps.onPressOut)}\n      // @ts-ignore - web only\n      onHoverIn={composeEventHandlers(onHoverIn, hoverProps.onHoverIn)}\n      // @ts-ignore - web only\n      onHoverOut={composeEventHandlers(onHoverOut, hoverProps.onHoverOut)}\n      // @ts-ignore - web only\n      onFocus={composeEventHandlers(\n        composeEventHandlers(onFocus, focusProps.onFocus),\n        focusRingProps.onFocus\n      )}\n      // @ts-ignore - web only\n      onBlur={composeEventHandlers(\n        composeEventHandlers(onBlur, focusProps.onBlur),\n        focusRingProps.onBlur\n      )}\n      {...resolvedProps}\n    >\n      {clonedIcon || <Icon {..._icon}>{children}</Icon>}\n    </Pressable>\n  );\n};\n\nexport default memo(forwardRef(IconButton));\nexport type { IIconButtonProps };\n"
  },
  {
    "path": "src/components/composites/IconButton/types.ts",
    "content": "import type { InterfacePressableProps } from '../../primitives/Pressable/types';\nimport type { IIconProps } from '../../primitives/Icon';\nimport type { ColorSchemeType, PlatformProps } from '../../../components/types';\n\nimport type { CustomProps, VariantType } from '../../types';\nimport type { ThemeComponentSizeType } from '../../../components/types/utils';\nexport interface InterfaceIconButtonProps\n  extends Omit<\n      InterfacePressableProps<InterfaceIconButtonProps>,\n      | 'children'\n      | 'color'\n      | '_light'\n      | '_dark'\n      | '_web'\n      | '_android'\n      | '_ios'\n      | '_important'\n    >,\n    Omit<\n      IIconProps,\n      | 'delayLongPress'\n      | 'disabled'\n      | 'hitSlop'\n      | 'onLongPress'\n      | 'onPress'\n      | 'onPressIn'\n      | 'onPressOut'\n      | 'style'\n      | 'size'\n      | '_light'\n      | '_dark'\n      | '_web'\n      | '_android'\n      | '_ios'\n      | '_important'\n    >,\n    PlatformProps<IIconButtonProps> {\n  /**\n   * The color of the radio when it's checked. This should be one of the color keys in the theme (e.g.\"green\", \"red\").\n   * @default 'primary'\n   */\n  colorScheme?: ColorSchemeType;\n  /**\n   * The variant of the button style to use.\n   * @default 'ghost'\n   */\n  variant?: VariantType<'IconButton'>;\n  /**\n   * The size of the button.\n   */\n  size?: ThemeComponentSizeType<'IconButton'>;\n  /**\n   * If true, the button will be disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * The icon to be used. Refer to the Icon section of the docs for the available icon options.\n   */\n  icon?: JSX.Element;\n  /**\n   * Props to be passed to the icon used inside of IconButton.\n   */\n  _icon?: Partial<IIconProps>;\n  /**\n   *\n   */\n  _hover?: Omit<Partial<IIconButtonProps>, '_hover'>;\n  /**\n   *\n   */\n  _pressed?: Omit<Partial<IIconButtonProps>, '_pressed'>;\n  /**\n   *\n   */\n  _focus?: Omit<Partial<IIconButtonProps>, '_focus'>;\n}\n\nexport type IIconButtonProps = InterfaceIconButtonProps & CustomProps<'Icon'>;\n"
  },
  {
    "path": "src/components/composites/KBD/index.tsx",
    "content": "import React from 'react';\nimport { Box } from '../../primitives';\nimport { useThemeProps } from '../../../hooks';\nimport type { IKbdProps } from './types';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst Kbd = ({ children, ...props }: IKbdProps, ref?: any) => {\n  const newProps = useThemeProps('Kbd', props);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <Box {...newProps} ref={ref}>\n      {children}\n    </Box>\n  );\n};\n\nexport default React.memo(React.forwardRef(Kbd));\nexport type { IKbdProps };\n"
  },
  {
    "path": "src/components/composites/KBD/types.ts",
    "content": "import type { CustomProps } from '../../../components/types/utils';\nimport type { InterfaceBoxProps } from '../../primitives/Box';\nexport type IKbdProps = InterfaceBoxProps<IKbdProps> & CustomProps<'Kbd'>;\n"
  },
  {
    "path": "src/components/composites/Menu/Menu.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport type { IMenuProps } from './types';\nimport Box from '../../primitives/Box';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport { Popper } from '../Popper';\nimport { AccessibilityInfo, ScrollView } from 'react-native';\nimport { useControllableState } from '../../../hooks';\nimport { useMenuTrigger, useMenu, useMenuTypeahead } from './useMenu';\nimport Backdrop from '../Backdrop';\nimport { PresenceTransition } from '../Transitions';\nimport { FocusScope } from '@react-native-aria/focus';\nimport { MenuContext } from './MenuContext';\nimport { Overlay } from '../../primitives/Overlay';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst Menu = (\n  {\n    trigger,\n    closeOnSelect = true,\n    children,\n    onOpen,\n    onClose,\n    isOpen: isOpenProp,\n    defaultIsOpen,\n    placement = 'bottom left',\n    ...props\n  }: IMenuProps,\n  ref?: any\n) => {\n  const triggerRef = React.useRef(null);\n  const [isOpen, setIsOpen] = useControllableState({\n    value: isOpenProp,\n    defaultValue: defaultIsOpen,\n    onChange: (value) => {\n      value ? onOpen && onOpen() : onClose && onClose();\n    },\n  });\n\n  const {\n    _overlay,\n    _presenceTransition,\n    _backdrop,\n    useRNModal,\n    ...resolvedProps\n  } = usePropsResolution('Menu', props);\n  const handleOpen = React.useCallback(() => {\n    setIsOpen(true);\n  }, [setIsOpen]);\n\n  const handleClose = React.useCallback(() => {\n    setIsOpen(false);\n  }, [setIsOpen]);\n\n  const triggerProps = useMenuTrigger({\n    handleOpen,\n    isOpen,\n  });\n\n  const updatedTrigger = () => {\n    return trigger(\n      {\n        ...triggerProps,\n        ref: triggerRef,\n        onPress: handleOpen,\n      },\n      { open: isOpen }\n    );\n  };\n\n  React.useEffect(() => {\n    if (isOpen) {\n      AccessibilityInfo.announceForAccessibility('Popup window');\n    }\n  }, [isOpen]);\n\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(resolvedProps)) {\n    return null;\n  }\n\n  return (\n    <>\n      {updatedTrigger()}\n      <Overlay\n        isOpen={isOpen}\n        onRequestClose={handleClose}\n        useRNModalOnAndroid\n        useRNModal={useRNModal}\n        {..._overlay}\n      >\n        <PresenceTransition visible={isOpen} {..._presenceTransition}>\n          <Popper\n            triggerRef={triggerRef}\n            onClose={handleClose}\n            placement={placement}\n            {...resolvedProps}\n          >\n            <Backdrop onPress={handleClose} {..._backdrop} />\n            <Popper.Content isOpen={isOpen}>\n              <MenuContext.Provider\n                value={{ closeOnSelect, onClose: handleClose }}\n              >\n                <FocusScope contain restoreFocus autoFocus>\n                  <MenuContent menuRef={ref} {...resolvedProps}>\n                    {children}\n                  </MenuContent>\n                </FocusScope>\n              </MenuContext.Provider>\n            </Popper.Content>\n          </Popper>\n        </PresenceTransition>\n      </Overlay>\n    </>\n  );\n};\n\nconst MenuContent = ({\n  menuRef,\n  children,\n  ...props\n}: Omit<IMenuProps, 'trigger'> & { menuRef: any }) => {\n  const menuProps = useMenu();\n  const typeaheadProps = useMenuTypeahead(menuProps);\n\n  return (\n    <Box {...props} {...menuProps} {...typeaheadProps} ref={menuRef}>\n      <ScrollView>{children}</ScrollView>\n    </Box>\n  );\n};\n\nexport default memo(forwardRef(Menu));\n"
  },
  {
    "path": "src/components/composites/Menu/MenuContext.ts",
    "content": "import React from 'react';\nexport const MenuContext = React.createContext({\n  closeOnSelect: true,\n  onClose: () => {},\n});\n"
  },
  {
    "path": "src/components/composites/Menu/MenuGroup.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport Text from '../../primitives/Text';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport Box from '../../primitives/Box';\nimport type { IMenuGroupProps } from './types';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst MenuGroup = (\n  { title, children, ...props }: IMenuGroupProps,\n  ref: any\n) => {\n  const { _title, ...resolvedProps } = usePropsResolution('MenuGroup', props);\n\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps({ ...props, title })) {\n    return null;\n  }\n\n  //TODO: Can be simplified\n  return (\n    <>\n      <Box {...resolvedProps} ref={ref}>\n        <Text {..._title}>{title}</Text>\n      </Box>\n      {children}\n    </>\n  );\n};\n\nexport default memo(forwardRef(MenuGroup));\n"
  },
  {
    "path": "src/components/composites/Menu/MenuItem.tsx",
    "content": "import React, { forwardRef, memo } from 'react';\nimport Text from '../../primitives/Text';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport { Pressable } from '../../primitives/Pressable';\nimport type { IMenuItemProps } from './types';\nimport { MenuContext } from './MenuContext';\nimport { useMenuItem } from './useMenu';\nimport { mergeRefs } from '../../../utils';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nimport { HStack } from '../../primitives';\n\nconst MenuItem = (\n  { children, isDisabled, onPress, textValue, ...props }: IMenuItemProps,\n  ref: any\n) => {\n  const { closeOnSelect, onClose } = React.useContext(MenuContext);\n  const menuItemRef = React.useRef<any>(null);\n  const mergedRef = mergeRefs([menuItemRef, ref]);\n  const { _text, _stack, ...resolvedProps } = usePropsResolution(\n    'MenuItem',\n    props,\n    {\n      isDisabled,\n    },\n    {\n      cascadePseudoProps: true,\n    }\n  );\n  const [textContent, setTextContent] = React.useState('');\n  React.useEffect(() => {\n    const menuItem = menuItemRef.current;\n    if (menuItem) {\n      setTextContent((menuItem.textContent ?? '').trim());\n    }\n  }, [children]);\n\n  const menuItemProps = useMenuItem({\n    textValue: textValue ?? textContent,\n    ref: menuItemRef,\n  });\n\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n\n  return (\n    <Pressable\n      {...menuItemProps}\n      {...resolvedProps}\n      ref={mergedRef}\n      disabled={isDisabled}\n      accessibilityState={{\n        disabled: isDisabled,\n      }}\n      onPress={(e: any) => {\n        if (!isDisabled) {\n          onPress && onPress(e);\n          if (closeOnSelect) {\n            onClose && onClose();\n          }\n        }\n      }}\n    >\n      <HStack {..._stack}>\n        {React.Children.map(children, (child, index: any) => {\n          if (typeof child === 'string' || typeof child === 'number') {\n            return (\n              <Text key={`menu-item-${index}`} {..._text}>\n                {child}\n              </Text>\n            );\n          } else {\n            return child;\n          }\n        })}\n      </HStack>\n    </Pressable>\n  );\n};\n\nexport default memo(forwardRef(MenuItem));\n"
  },
  {
    "path": "src/components/composites/Menu/MenuItemOption.tsx",
    "content": "import React, { forwardRef, memo, useContext } from 'react';\nimport { CheckIcon } from '../../primitives/Icon/Icons';\nimport Text from '../../primitives/Text';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport MenuItem from './MenuItem';\nimport type { IMenuItemOptionProps, IMenuOptionContextProps } from './types';\nimport { MenuOptionContext } from './MenuOptionGroup';\nimport { useMenuOptionItem } from './useMenu';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst MenuItemOption = (\n  { value, ...props }: IMenuItemOptionProps,\n  ref: any\n) => {\n  const { values, onChange, type }: IMenuOptionContextProps = useContext(\n    MenuOptionContext\n  );\n  const isChecked = values.includes(value);\n  const menuOptionProps = useMenuOptionItem({ isChecked, type });\n  const {\n    children,\n    onPress,\n    _icon,\n    _text,\n    ...resolvedProps\n  } = usePropsResolution('MenuItem', props, { isChecked });\n\n  const modifiedOnPress = (e: any) => {\n    onChange(value);\n    onPress && onPress(e);\n  };\n\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <MenuItem\n      {...resolvedProps}\n      {...menuOptionProps}\n      accessibilityRole=\"button\"\n      onPress={modifiedOnPress}\n      ref={ref}\n    >\n      <CheckIcon {..._icon} />\n      {React.Children.map(children, (child, index: any) => {\n        if (typeof child === 'string' || typeof child === 'number') {\n          return (\n            <Text key={`menu-item-option-${index}`} {..._text}>\n              {child}\n            </Text>\n          );\n        } else {\n          return child;\n        }\n      })}\n    </MenuItem>\n  );\n};\n\nexport default memo(forwardRef(MenuItemOption));\n"
  },
  {
    "path": "src/components/composites/Menu/MenuOptionGroup.tsx",
    "content": "import React, { forwardRef, memo } from 'react';\nimport MenuGroup from './MenuGroup';\nimport type { IMenuOptionGroupProps, IMenuOptionContextProps } from './types';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nexport const MenuOptionContext = React.createContext<IMenuOptionContextProps>({\n  values: [],\n  onChange: (_val) => {},\n  type: 'checkbox',\n});\n\nconst MenuOptionGroup = (\n  { type, defaultValue, value, onChange, ...props }: IMenuOptionGroupProps,\n  ref?: any\n) => {\n  const internalDefaultValue = defaultValue\n    ? Array.isArray(defaultValue)\n      ? defaultValue\n      : [defaultValue]\n    : [];\n\n  const [internalValues, setValues] = React.useState<Array<string | number>>(\n    internalDefaultValue\n  );\n  const _onChange = (newValue: string | number) => {\n    if (type === 'checkbox') {\n      const newValues = [...internalValues];\n      if (internalValues.includes(newValue)) {\n        newValues.splice(newValues.indexOf(newValue), 1);\n        setValues(newValues);\n      } else {\n        newValues.push(newValue);\n        setValues(newValues);\n      }\n      onChange && onChange(newValues);\n    } else if (type === 'radio') {\n      setValues([newValue]);\n      onChange && onChange(newValue);\n    }\n  };\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <MenuOptionContext.Provider\n      value={{\n        values: !value\n          ? internalValues\n          : Array.isArray(value)\n          ? value\n          : [value],\n        onChange: _onChange,\n        type,\n      }}\n    >\n      <MenuGroup {...props} ref={ref} />\n    </MenuOptionContext.Provider>\n  );\n};\n\nexport default memo(forwardRef(MenuOptionGroup));\n"
  },
  {
    "path": "src/components/composites/Menu/index.tsx",
    "content": "import { default as MenuMain } from './Menu';\nimport MenuGroup from './MenuGroup';\nimport MenuItem from './MenuItem';\nimport MenuItemOption from './MenuItemOption';\nimport MenuOptionGroup from './MenuOptionGroup';\nimport type { IMenuComponent } from './types';\n\nlet MenuTemp: any = MenuMain;\nMenuTemp.Item = MenuItem;\nMenuTemp.Group = MenuGroup;\nMenuTemp.ItemOption = MenuItemOption;\nMenuTemp.OptionGroup = MenuOptionGroup;\n\n// To add typings\nconst Menu = MenuTemp as IMenuComponent;\n\nexport { Menu };\nexport type {\n  IMenuProps,\n  IMenuItemProps,\n  IMenuItemOptionProps,\n  IMenuGroupProps,\n  IMenuOptionGroupProps,\n} from './types';\n"
  },
  {
    "path": "src/components/composites/Menu/types.ts",
    "content": "import type { ITextProps } from '../../primitives/Text';\nimport type { InterfaceBoxProps } from '../../primitives/Box/types';\nimport type { IPressableProps } from '../../primitives/Pressable';\nimport type { MutableRefObject } from 'react';\nimport type { IPresenceTransitionProps } from '../Transitions/types';\nimport type { IIconProps } from '../../../components/primitives/Icon';\nimport type { IStackProps } from '../../../components/primitives/Stack';\nimport type { IOverlayProps } from '../../../components/primitives/Overlay';\nimport type { CustomProps } from '../../../components/types';\n\nexport interface InterfaceMenuProps extends InterfaceBoxProps<IMenuProps> {\n  /**\n   * Function that returns a React Element. This element will be used as a Trigger for the menu.\n   */\n  trigger: (_props: any, state: { open: boolean }) => JSX.Element;\n  /**\n   * This function will be invoked when the menu is opened.\n   */\n  onOpen?: () => void;\n  /**\n   * This function will be invoked when menu is closed.  It will also be called when the user attempts to close the menu via Escape key or backdrop press.\n   */\n  onClose?: () => void;\n  /**\n   * Whether menu should be closed when a menu item is pressed.\n   * @default true\n   */\n  closeOnSelect?: boolean;\n  /**\n   * If true, the menu will be opened by default.\n   */\n  defaultIsOpen?: boolean;\n  /**\n   * Whether the menu is opened. Useful for controlling the open state.\n   */\n  isOpen?: boolean;\n  /**\n   * The additional offset applied along the cross axis between the element and its trigger element.\n   */\n  crossOffset?: number;\n  /**\n   * The additional offset applied along the main axis between the element and its trigger element.\n   */\n  offset?: number;\n  /**\n   * Determines whether menu content should overlap with the trigger.\n   * @default false\n   */\n  shouldOverlapWithTrigger?: boolean;\n  /**\n   * menu placement\n   * @default 'bottom left'\n   */\n  placement?:\n    | 'top'\n    | 'bottom'\n    | 'left'\n    | 'right'\n    | 'top left'\n    | 'top right'\n    | 'bottom left'\n    | 'bottom right'\n    | 'right top'\n    | 'right bottom'\n    | 'left top'\n    | 'left bottom';\n  /**\n   * Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.\n   * @default true\n   */\n  shouldFlip?: boolean;\n  /**\n   * Overlay related props can be passed in _overlay.\n   */\n  _overlay?: Partial<IOverlayProps>;\n  /**\n   * PresenceTransition related props can be passed in _presenceTransition.\n   */\n  _presenceTransition?: Partial<IPresenceTransitionProps>;\n  /**\n   * Backdrop related props can be passed in _backdrop.\n   */\n  _backdrop?: Partial<IPressableProps>;\n}\n\nexport interface IMenuItemProps extends IPressableProps {\n  /**\n   * Children of Menu Item.\n   */\n  children: string | JSX.Element | Array<JSX.Element>;\n  /**\n   * Whether menu item is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * Props to be passed to Text.\n   */\n  _text?: Partial<ITextProps>;\n  /**\n   * This value will be available for the typeahead menu feature.\n   */\n  textValue?: string;\n}\n\nexport interface IMenuItemOptionProps extends IMenuItemProps {\n  /**\n   * Value of the Menu Item option.\n   */\n  value: string | number;\n  /**\n   * Stack related props can be passed in _stack.\n   */\n  _stack?: Partial<IStackProps>;\n  /**\n   * Icon related props can be passed in _icon.\n   */\n  _icon?: Partial<IIconProps>;\n  /**\n   * Text related props can be passed in _text.\n   */\n  _text?: Partial<ITextProps>;\n}\nexport interface IMenuGroupProps {\n  /**\n   *  The title of the menu group.\n   */\n  title: string;\n  /**\n   * The children of the Menu group.\n   */\n  children: JSX.Element | Array<JSX.Element>;\n  /**\n   * Props to pass on to Text.\n   */\n  _title?: Partial<ITextProps>;\n}\n\nexport interface IMenuOptionGroupProps extends IMenuGroupProps {\n  /**\n   * Used to add selection type of menu group.\n   */\n  type: 'radio' | 'checkbox';\n  /**\n   * The initial value of the option group.\n   */\n  defaultValue?: string | number | string[] | number[];\n  /**\n   * The value of the option group.\n   */\n  value?: string | number | Array<string> | Array<number>;\n  /**\n   * Function called when selection changes.\n   */\n  onChange?: (val: any) => void;\n}\n\nexport type IMenuOptionContextProps = {\n  values: Array<string | number>;\n  onChange: (val: string | number) => void;\n  type: 'radio' | 'checkbox';\n};\n\nexport type IMenuComponent = ((\n  props: IMenuProps & { ref?: MutableRefObject<any> }\n) => JSX.Element) & {\n  Item: React.MemoExoticComponent<\n    (props: IMenuItemProps & { ref?: MutableRefObject<any> }) => JSX.Element\n  >;\n  Group: React.MemoExoticComponent<\n    (props: IMenuGroupProps & { ref?: MutableRefObject<any> }) => JSX.Element\n  >;\n  ItemOption: React.MemoExoticComponent<\n    (\n      props: IMenuItemOptionProps & { ref?: MutableRefObject<any> }\n    ) => JSX.Element\n  >;\n  OptionGroup: React.MemoExoticComponent<\n    (\n      props: IMenuOptionGroupProps & { ref?: MutableRefObject<any> }\n    ) => JSX.Element\n  >;\n};\n\nexport type IMenuContextProps = {\n  closeMenu?: () => void;\n  open?: boolean;\n  closeOnSelect?: boolean;\n};\nexport type IMenuProps = InterfaceMenuProps & CustomProps<'Menu'>;\n"
  },
  {
    "path": "src/components/composites/Menu/useMenu.tsx",
    "content": "import React from 'react';\nimport { useFocusManager } from '@react-native-aria/focus';\nimport { useId } from '@react-native-aria/utils';\nimport { AccessibilityRole, Platform } from 'react-native';\nimport { ResponsiveQueryContext } from '../../../utils/useResponsiveQuery/ResponsiveQueryProvider';\nimport uniqueId from 'lodash.uniqueid';\n\ntype IMenuTriggerProps = {\n  handleOpen: () => void;\n  isOpen: boolean;\n};\n\nexport const useMenuTrigger = ({ handleOpen, isOpen }: IMenuTriggerProps) => {\n  let menuTriggerId = uniqueId();\n\n  // let id = uniqueId();\n  const responsiveQueryContext = React.useContext(ResponsiveQueryContext);\n  const disableCSSMediaQueries = responsiveQueryContext.disableCSSMediaQueries;\n\n  if (!disableCSSMediaQueries) {\n    // This if statement technically breaks the rules of hooks, but is safe\n    // because the condition never changes after mounting.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    menuTriggerId = useId();\n  }\n  return {\n    'onKeyDownCapture': (event: KeyboardEvent) => {\n      if ([' ', 'Enter', 'ArrowUp', 'ArrowDown'].includes(event.key)) {\n        event.preventDefault();\n        handleOpen();\n      }\n    },\n    'aria-haspopup': 'menu',\n    'aria-expanded': isOpen ? true : undefined,\n    'nativeID': menuTriggerId,\n  };\n};\n\nexport const useMenu = () => {\n  const focusManager = useFocusManager();\n  const onKeyDown = (e: KeyboardEvent) => {\n    switch (e.key) {\n      case 'ArrowDown': {\n        e.preventDefault();\n        //@ts-ignore\n        focusManager?.focusNext({ wrap: true });\n        break;\n      }\n      case 'ArrowUp': {\n        e.preventDefault();\n        //@ts-ignore\n        focusManager?.focusPrevious({ wrap: true });\n        break;\n      }\n    }\n  };\n\n  return {\n    onKeyDown,\n    accessibilityRole: 'menu' as AccessibilityRole,\n  };\n};\n\nexport const useMenuItem = ({\n  textValue,\n  ref,\n}: {\n  textValue: string;\n  ref: any;\n}) => {\n  return {\n    accessibilityRole: 'menuitem' as AccessibilityRole,\n    dataSet: {\n      nativebaseMenuItem: textValue,\n    },\n    onHoverIn: () => {\n      if (ref.current && Platform.OS === 'web') ref.current.focus();\n    },\n  };\n};\n\nexport const useMenuOptionItem = ({\n  isChecked,\n  type,\n}: {\n  isChecked: boolean;\n  type: 'checkbox' | 'radio';\n}) => {\n  return {\n    accessibilityRole: ('menuitem' +\n      (Platform.OS === 'web' ? type : '')) as AccessibilityRole,\n    accessibilityState: {\n      checked: isChecked,\n    },\n    accessibilityChecked: isChecked,\n  };\n};\n\nconst ITEM_ATTR = 'data-nativebase-menu-item';\nconst getValue = (element: Element) => element.getAttribute(ITEM_ATTR) ?? '';\n\nexport const useMenuTypeahead = (props: any): any => {\n  return {\n    onKeyDown(event: KeyboardEvent) {\n      if (props.onKeyDown) {\n        props.onKeyDown(event);\n      }\n\n      if (\n        event.key.length === 1 &&\n        !(event.ctrlKey || event.altKey || event.metaKey)\n      ) {\n        const container = event.currentTarget as HTMLElement;\n        const values = Array.from(\n          container.querySelectorAll(`[${ITEM_ATTR}]`)\n        ).map(getValue);\n\n        const searchKey = event.key;\n\n        const foundValue = values.find((value) =>\n          value.toLowerCase().startsWith(searchKey)\n        );\n        const newItem = container.querySelector(\n          `[${ITEM_ATTR}=\"${foundValue}\"]`\n        );\n\n        if (newItem) {\n          /**\n           * Imperative focus during keydown is risky so we prevent React's batching updates\n           * to avoid potential bugs. See: https://github.com/facebook/react/issues/20332\n           */\n          setTimeout(() => (newItem as HTMLElement).focus());\n        }\n      }\n    },\n  };\n};\n"
  },
  {
    "path": "src/components/composites/Modal/Context.ts",
    "content": "import React from 'react';\n\nexport const ModalContext = React.createContext({\n  handleClose: (() => {}) as any,\n  contentSize: {} as any,\n  initialFocusRef: { current: null } as React.RefObject<any> | undefined,\n  finalFocusRef: { current: null } as React.RefObject<any> | undefined,\n  visible: false as boolean,\n});\n"
  },
  {
    "path": "src/components/composites/Modal/Modal.tsx",
    "content": "import React, { forwardRef, memo } from 'react';\nimport { StyleSheet } from 'react-native';\nimport Backdrop from '../Backdrop';\nimport { Slide } from '../Transitions';\nimport { FocusScope } from '@react-native-aria/focus';\nimport { useControllableState, usePropsResolution } from '../../../hooks';\nimport { ModalContext } from './Context';\nimport Box from '../../primitives/Box';\nimport type { IModalProps } from './types';\nimport { Fade } from '../../composites/Transitions';\nimport { useKeyboardBottomInset } from '../../../utils';\nimport { Overlay } from '../../primitives/Overlay';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst Modal = (\n  {\n    children,\n    isOpen,\n    onClose,\n    defaultIsOpen,\n    initialFocusRef,\n    finalFocusRef,\n    avoidKeyboard,\n    closeOnOverlayClick = true,\n    isKeyboardDismissable = true,\n    overlayVisible = true,\n    backdropVisible = true,\n    animationPreset,\n    ...rest\n  }: IModalProps,\n  ref: any\n) => {\n  const bottomInset = useKeyboardBottomInset();\n  const {\n    contentSize,\n    _backdrop,\n    _backdropFade,\n    _fade,\n    _slide,\n    _overlay,\n    useRNModal,\n    ...resolvedProps\n  } = usePropsResolution('Modal', rest);\n\n  const [visible, setVisible] = useControllableState({\n    value: isOpen,\n    defaultValue: defaultIsOpen,\n    onChange: (val) => {\n      if (!val) onClose && onClose();\n    },\n  });\n\n  const handleClose = React.useCallback(() => setVisible(false), [setVisible]);\n\n  const child = (\n    <Box\n      bottom={avoidKeyboard ? bottomInset + 'px' : undefined}\n      {...resolvedProps}\n      ref={ref}\n      pointerEvents=\"box-none\"\n    >\n      {children}\n    </Box>\n  );\n\n  const contextValue = React.useMemo(() => {\n    return {\n      handleClose,\n      contentSize,\n      initialFocusRef,\n      finalFocusRef,\n      visible,\n    };\n  }, [handleClose, contentSize, initialFocusRef, finalFocusRef, visible]);\n\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(rest)) {\n    return null;\n  }\n\n  return (\n    <Overlay\n      isOpen={visible}\n      onRequestClose={handleClose}\n      isKeyboardDismissable={isKeyboardDismissable}\n      animationPreset={animationPreset}\n      useRNModalOnAndroid\n      useRNModal={useRNModal}\n      {..._overlay}\n    >\n      <ModalContext.Provider value={contextValue}>\n        <Fade in={visible} style={StyleSheet.absoluteFill} {..._backdropFade}>\n          {overlayVisible && backdropVisible && (\n            <Backdrop\n              onPress={() => {\n                closeOnOverlayClick && handleClose();\n              }}\n              {..._backdrop}\n            />\n          )}\n        </Fade>\n        {animationPreset === 'slide' ? (\n          <Slide in={visible} {..._slide}>\n            <FocusScope\n              contain={visible}\n              autoFocus={visible && !initialFocusRef}\n              restoreFocus={visible && !finalFocusRef}\n            >\n              {child}\n            </FocusScope>\n          </Slide>\n        ) : (\n          <Fade in={visible} style={StyleSheet.absoluteFill} {..._fade}>\n            <FocusScope\n              contain={visible}\n              autoFocus={visible && !initialFocusRef}\n              restoreFocus={visible && !finalFocusRef}\n            >\n              {child}\n            </FocusScope>\n          </Fade>\n        )}\n      </ModalContext.Provider>\n    </Overlay>\n  );\n};\n\nexport default memo(forwardRef(Modal));\n"
  },
  {
    "path": "src/components/composites/Modal/ModalBody.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport Box, { IBoxProps } from '../../primitives/Box';\nimport { usePropsResolution } from '../../../hooks';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nimport { ScrollView, IScrollViewProps } from '../../basic/ScrollView';\n\nconst ModalBody = (\n  { children, ...props }: IBoxProps & { _scrollview?: IScrollViewProps },\n  ref?: any\n) => {\n  const { _scrollview, ...resolvedProps } = usePropsResolution(\n    'ModalBody',\n    props\n  );\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <ScrollView {..._scrollview}>\n      <Box {...resolvedProps} ref={ref}>\n        {children}\n      </Box>\n    </ScrollView>\n  );\n};\n\nexport default memo(forwardRef(ModalBody));\n"
  },
  {
    "path": "src/components/composites/Modal/ModalCloseButton.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport { ModalContext } from './Context';\nimport { usePropsResolution } from '../../../hooks';\nimport { Pressable } from '../../primitives/Pressable';\nimport { CloseIcon } from '../../primitives/Icon/Icons';\nimport type { IButtonProps } from '../../primitives/Button';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nimport {\n  useHover,\n  useFocus,\n  useIsPressed,\n} from '../../primitives/Pressable/Pressable';\nimport { composeEventHandlers } from '../../../utils';\nimport { useFocusRing } from '@react-native-aria/focus';\n\nconst ModalCloseButton = (props: IButtonProps, ref?: any) => {\n  const { hoverProps, isHovered } = useHover();\n  const { pressableProps, isPressed } = useIsPressed();\n  const { focusProps, isFocused } = useFocus();\n  const { isFocusVisible, focusProps: focusRingProps }: any = useFocusRing();\n\n  const {\n    _icon,\n    onPressIn,\n    onPressOut,\n    onHoverIn,\n    onHoverOut,\n    onFocus,\n    onBlur,\n    ...resolvedProps\n  } = usePropsResolution('ModalCloseButton', props, {\n    isHovered,\n    isPressed,\n    isFocused,\n    isFocusVisible,\n  });\n  const { handleClose } = React.useContext(ModalContext);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <Pressable\n      accessibilityRole=\"button\"\n      ref={ref}\n      onPressIn={composeEventHandlers(onPressIn, pressableProps.onPressIn)}\n      onPressOut={composeEventHandlers(onPressOut, pressableProps.onPressOut)}\n      // @ts-ignore - web only\n      onHoverIn={composeEventHandlers(onHoverIn, hoverProps.onHoverIn)}\n      // @ts-ignore - web only\n      onHoverOut={composeEventHandlers(onHoverOut, hoverProps.onHoverOut)}\n      // @ts-ignore - web only\n      onFocus={composeEventHandlers(\n        composeEventHandlers(onFocus, focusProps.onFocus),\n        focusRingProps.onFocus\n      )}\n      // @ts-ignore - web only\n      onBlur={composeEventHandlers(\n        composeEventHandlers(onBlur, focusProps.onBlur),\n        focusRingProps.onBlur\n      )}\n      onPress={handleClose}\n      {...resolvedProps}\n    >\n      <CloseIcon {..._icon} />\n    </Pressable>\n  );\n};\n\nexport default memo(forwardRef(ModalCloseButton));\n"
  },
  {
    "path": "src/components/composites/Modal/ModalContent.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport Box, { IBoxProps } from '../../primitives/Box';\nimport { usePropsResolution } from '../../../hooks';\nimport { ModalContext } from './Context';\nimport { Platform } from 'react-native';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst ModalContent = (props: IBoxProps, ref?: any) => {\n  const resolvedProps = usePropsResolution('ModalContent', props);\n  const {\n    contentSize,\n    initialFocusRef,\n    finalFocusRef,\n    handleClose,\n    visible,\n  } = React.useContext(ModalContext);\n  React.useEffect(() => {\n    const finalRefVal = finalFocusRef ? finalFocusRef.current : null;\n    if (visible) {\n      if (initialFocusRef && initialFocusRef.current) {\n        //@ts-ignore\n        initialFocusRef.current.focus();\n      }\n    } else {\n      if (finalRefVal) {\n        //@ts-ignore\n        finalRefVal.focus();\n      }\n    }\n  }, [initialFocusRef, finalFocusRef, visible]);\n\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <Box\n      {...contentSize}\n      {...resolvedProps}\n      ref={ref}\n      onAccessibilityEscape={handleClose}\n      //@ts-ignore - web only\n      aria-modal=\"true\"\n      //@ts-ignore - web only\n      accessibilityRole={Platform.OS === 'web' ? 'dialog' : undefined}\n      accessibilityViewIsModal\n      _web={{ focusable: false }}\n    />\n  );\n};\n\nexport default memo(forwardRef(ModalContent));\n"
  },
  {
    "path": "src/components/composites/Modal/ModalFooter.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport Box, { IBoxProps } from '../../primitives/Box';\nimport { usePropsResolution } from '../../../hooks';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst ModalFooter = (props: IBoxProps, ref?: any) => {\n  const resolvedProps = usePropsResolution('ModalFooter', props);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return <Box {...resolvedProps} ref={ref} />;\n};\n\nexport default memo(forwardRef(ModalFooter));\n"
  },
  {
    "path": "src/components/composites/Modal/ModalHeader.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport Box, { IBoxProps } from '../../primitives/Box';\nimport { usePropsResolution } from '../../../hooks';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst ModalHeader = (props: IBoxProps, ref?: any) => {\n  const resolvedProps = usePropsResolution('ModalHeader', props);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return <Box {...resolvedProps} ref={ref} />;\n};\n\nexport default memo(forwardRef(ModalHeader));\n"
  },
  {
    "path": "src/components/composites/Modal/index.tsx",
    "content": "import Modal from './Modal';\nimport ModalContent from './ModalContent';\nimport ModalBody from './ModalBody';\nimport ModalCloseButton from './ModalCloseButton';\nimport ModalFooter from './ModalFooter';\nimport ModalHeader from './ModalHeader';\nimport type { IModalComponentType } from './types';\n\nconst ModalTemp: any = Modal;\n\nModalTemp.Content = ModalContent;\nModalTemp.CloseButton = ModalCloseButton;\nModalTemp.Header = ModalHeader;\nModalTemp.Footer = ModalFooter;\nModalTemp.Body = ModalBody;\n\nconst ModalMain = ModalTemp as IModalComponentType;\n\nexport { ModalMain as Modal };\nexport type { IModalProps } from './types';\n"
  },
  {
    "path": "src/components/composites/Modal/types.ts",
    "content": "import type { InterfaceBoxProps } from '../../primitives/Box';\nimport type { IIconButtonProps } from '../../composites/IconButton';\nimport type { MutableRefObject } from 'react';\nimport type { CustomProps } from '../../../components/types';\nimport type { IScrollViewProps } from '../../basic/ScrollView';\nimport type { IFadeProps, ISlideProps } from '../Transitions';\nimport type { ThemeComponentSizeType } from '../../../components/types/utils';\nimport type { IOverlayProps } from '../../primitives/Overlay';\nexport interface InterfaceModalProps extends InterfaceBoxProps<IModalProps> {\n  /**\n   * If true, the modal will open. Useful for controllable state behavior.\n   */\n  isOpen?: boolean;\n  /**\n   * Callback invoked when the modal is closed.\n   */\n  onClose?: any;\n  /**\n   * If true, the modal will be opened by default.\n   */\n  defaultIsOpen?: boolean;\n  /**\n   * The size of the modal.\n   */\n  size?: ThemeComponentSizeType<'Modal'>;\n  /**\n   * The ref of element to receive focus when the modal opens.\n   */\n  initialFocusRef?: React.RefObject<any>;\n  /**\n   * The ref of element to receive focus when the modal closes.\n   */\n  finalFocusRef?: React.RefObject<any>;\n  /**\n   * If true and the keyboard is opened, the modal will move up equivalent to the keyboard height.\n   * @default false\n   */\n  avoidKeyboard?: boolean;\n  /**\n   * If true, the modal will close when the overlay is clicked.\n   * @default true\n   */\n  closeOnOverlayClick?: boolean;\n  /**\n   * If true, the modal will close when Escape key is pressed.\n   * @default true\n   */\n  isKeyboardDismissable?: boolean;\n  /**\n   * If true, a backdrop element is visible.\n   * @default true\n   */\n  overlayVisible?: boolean;\n  /**\n   * If true, a backdrop element is visible.\n   * @default true\n   */\n  backdropVisible?: boolean;\n  /**\n   * Props applied on Overlay.\n   */\n  _backdrop?: any;\n  /**\n   * Sets the animation type.\n   * @default \"fade\"\n   */\n  animationPreset?: 'fade' | 'slide';\n  /**\n   * Props applied on Overlay Animation.\n   */\n  _backdropFade?: Partial<IFadeProps>;\n  /**\n   * Props applied on Child Fade Animation.\n   */\n  _fade?: Partial<IFadeProps>;\n  /**\n   * Props applied on Child Slide Animation.\n   */\n  _slide?: Partial<ISlideProps>;\n  /**\n   * Props to be passed to the Overlay used inside of Modal.\n   */\n  _overlay?: IOverlayProps;\n  /**\n   * If true, renders react-native native modal\n   * @default false\n   */\n  useRNModal?: boolean;\n}\n\nexport type IModalComponentType = ((\n  props: IModalProps & { ref?: MutableRefObject<any> }\n) => JSX.Element) & {\n  Body: React.MemoExoticComponent<\n    (\n      props: InterfaceBoxProps<IModalProps> & {\n        _scrollview?: IScrollViewProps;\n      } & {\n        ref?: MutableRefObject<any>;\n      }\n    ) => JSX.Element\n  >;\n  CloseButton: React.MemoExoticComponent<\n    (props: IIconButtonProps & { ref?: MutableRefObject<any> }) => JSX.Element\n  >;\n  Content: React.MemoExoticComponent<\n    (\n      props: InterfaceBoxProps<IModalProps> & { ref?: MutableRefObject<any> }\n    ) => JSX.Element\n  >;\n  Footer: React.MemoExoticComponent<\n    (\n      props: InterfaceBoxProps<IModalProps> & { ref?: MutableRefObject<any> }\n    ) => JSX.Element\n  >;\n  Header: React.MemoExoticComponent<\n    (\n      props: InterfaceBoxProps<IModalProps> & { ref?: MutableRefObject<any> }\n    ) => JSX.Element\n  >;\n};\n\nexport type IModalProps = InterfaceModalProps & CustomProps<'Modal'>;\n"
  },
  {
    "path": "src/components/composites/NumberInput/Context.ts",
    "content": "import { createContext } from 'react';\n\nexport const NumberInputContext = createContext({});\n"
  },
  {
    "path": "src/components/composites/NumberInput/NumberDecrementStepper.tsx",
    "content": "import React from 'react';\nimport type { INumberInputContext, INumberInputStepperProps } from './types';\nimport { NBStepper } from './NumberInputStepper';\nimport { NumberInputContext } from './Context';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst NumberDecrementStepper = (\n  { children, isDisabled: pIsDisabled, ...props }: INumberInputStepperProps,\n  ref?: any\n) => {\n  const {\n    numberInputValue = 0,\n    step = 1,\n    min = -Infinity,\n    handleChange,\n    ...context\n  }: INumberInputContext = React.useContext(NumberInputContext);\n\n  const isDisabled = pIsDisabled || context.isDisabled;\n  const pressHandler = () => {\n    handleChange && handleChange(numberInputValue - step);\n  };\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <NBStepper\n      isIncrement={false}\n      isDisabled={isDisabled}\n      pressHandler={pressHandler}\n      disablitityCheck={numberInputValue - step < min}\n      {...props}\n      ref={ref}\n    >\n      {children}\n    </NBStepper>\n  );\n};\n\nexport default React.memo(React.forwardRef(NumberDecrementStepper));\n"
  },
  {
    "path": "src/components/composites/NumberInput/NumberIncrementStepper.tsx",
    "content": "import React from 'react';\nimport type { INumberInputContext, INumberInputStepperProps } from './types';\nimport { NBStepper } from './NumberInputStepper';\nimport { NumberInputContext } from './Context';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst NumberIncrementStepper = (\n  { children, isDisabled: pIsDisabled, ...props }: INumberInputStepperProps,\n  ref?: any\n) => {\n  const {\n    numberInputValue = 0,\n    step = 1,\n    max = +Infinity,\n    handleChange,\n    ...context\n  }: INumberInputContext = React.useContext(NumberInputContext);\n\n  const isDisabled = pIsDisabled || context.isDisabled;\n  const pressHandler = () => {\n    handleChange && handleChange(numberInputValue + step);\n  };\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <NBStepper\n      isIncrement\n      isDisabled={isDisabled}\n      pressHandler={pressHandler}\n      disablitityCheck={numberInputValue + step > max}\n      {...props}\n      ref={ref}\n    >\n      {children}\n    </NBStepper>\n  );\n};\nexport default React.memo(React.forwardRef(NumberIncrementStepper));\n"
  },
  {
    "path": "src/components/composites/NumberInput/NumberInput.tsx",
    "content": "import React from 'react';\nimport { useThemeProps } from '../../../hooks';\nimport { useFormControlContext } from '../FormControl';\nimport type { INumberInputProps } from './types';\nimport { NumberInputContext } from './Context';\nimport Box from '../../primitives/Box';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst NumberInput = ({ children, ...props }: INumberInputProps, ref?: any) => {\n  const {\n    defaultValue,\n    keepWithinRange,\n    value,\n    min,\n    max,\n    onChange,\n    ...newProps\n  } = useThemeProps('NumberInput', props);\n  const formControlContext = useFormControlContext();\n\n  const [numberInputValue, setNumberInputValue] = React.useState(\n    parseInt(value || defaultValue, 10)\n  );\n  const [numberInputStepper, setNumberInputStepper] = React.useState(null);\n  const handleChange = (newValue: number) => {\n    const temp = newValue;\n    setNumberInputValue(temp);\n    if (keepWithinRange) {\n      if (newValue < min) setNumberInputValue(min);\n      else if (newValue > max) setNumberInputValue(max);\n    }\n    //NOTE: only calling onChange on stepper click or blur event of input.\n    onChange && onChange(temp);\n  };\n  const handleChangeWithoutCheck = (newValue: number) => {\n    const temp = newValue;\n    setNumberInputValue(temp);\n  };\n\n  React.useEffect(() => {\n    if (value !== undefined && value != numberInputValue)\n      setNumberInputValue(value);\n  }, [value, numberInputValue, setNumberInputValue]);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <Box ref={ref}>\n      <NumberInputContext.Provider\n        value={{\n          ...formControlContext,\n          ...newProps,\n          min,\n          max,\n          handleChange,\n          handleChangeWithoutCheck,\n          numberInputValue,\n          numberInputStepper,\n          setNumberInputStepper,\n          isControlled: value !== undefined,\n        }}\n      >\n        {children}\n      </NumberInputContext.Provider>\n    </Box>\n  );\n};\n\nexport default React.memo(React.forwardRef(NumberInput));\n"
  },
  {
    "path": "src/components/composites/NumberInput/NumberInputField.tsx",
    "content": "import React from 'react';\nimport { Input } from '../../primitives/Input';\nimport type { INumberInputContext, INumberInputFieldProps } from './types';\nimport { NumberInputContext } from './Context';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst NumberInputFiled = (\n  { isDisabled, ...props }: INumberInputFieldProps,\n  ref: any\n) => {\n  const {\n    handleChange,\n    handleChangeWithoutCheck,\n    numberInputStepper,\n    numberInputValue,\n    isControlled,\n    ...context\n  }: INumberInputContext & {\n    handleChange?: (value: string | number) => void;\n    numberInputStepper?: any;\n  } = React.useContext(NumberInputContext);\n  const changeHandler = (inputValue: any) => {\n    let minusIndex = inputValue.indexOf('-');\n    if (minusIndex !== -1 && minusIndex !== 0) {\n      inputValue = inputValue.replace('-', '');\n      inputValue = '-' + inputValue;\n    }\n    const value = parseInt(inputValue, 10);\n    if (isControlled) handleChange && handleChange(value);\n    else if (value) handleChangeWithoutCheck && handleChangeWithoutCheck(value);\n    else handleChangeWithoutCheck && handleChangeWithoutCheck(0);\n  };\n  const blurHandler = () => {\n    if (numberInputValue) handleChange && handleChange(numberInputValue);\n  };\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <>\n      <Input\n        p={0}\n        pl={2}\n        {...context}\n        {...props}\n        onBlur={() => blurHandler()}\n        isDisabled={isDisabled || context.isDisabled}\n        onChangeText={(inputValue: any) => changeHandler(inputValue)}\n        keyboardType=\"numeric\"\n        value={`${numberInputValue}`}\n        InputRightElement={numberInputStepper}\n        ref={ref}\n      />\n    </>\n  );\n};\n\nexport default React.memo(React.forwardRef(NumberInputFiled));\n"
  },
  {
    "path": "src/components/composites/NumberInput/NumberInputStepper.tsx",
    "content": "import React from 'react';\nimport { TouchableOpacity, Platform } from 'react-native';\nimport { VStack, Box } from '../../primitives';\nimport { useThemeProps } from '../../../hooks';\nimport type { INumberInputSteppersProps, INumberInputContext } from './types';\nimport { NumberInputContext } from './Context';\nimport { ChevronUpIcon, ChevronDownIcon } from '../../primitives/Icon/Icons';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nexport const NBStepper = React.forwardRef(\n  ({ children, ...props }: any, ref?: any) => {\n    const {\n      style,\n      isIncrement,\n      disablitityCheck,\n      _active,\n      _disabled,\n      isDisabled,\n      accessibilityLabel,\n      pressHandler,\n      iconColor,\n      ...newProps\n    } = useThemeProps('NumberInputStepper', props);\n    //TODO: refactor for responsive prop\n    if (useHasResponsiveProps(props)) {\n      return null;\n    }\n    return (\n      <TouchableOpacity\n        activeOpacity={0.2}\n        disabled={disablitityCheck || isDisabled}\n        onPress={pressHandler}\n        accessible\n        accessibilityLabel={accessibilityLabel}\n        ref={ref}\n      >\n        <Box\n          {...newProps}\n          {..._active}\n          {...(disablitityCheck || isDisabled ? _disabled : {})}\n          borderColor=\"transparent\"\n          style={style}\n          opacity={disablitityCheck || isDisabled ? 0.4 : 1}\n          {...(Platform.OS === 'web'\n            ? {\n                disabled: disablitityCheck || isDisabled,\n                cursor: disablitityCheck || isDisabled ? 'not-allowed' : 'auto',\n              }\n            : {})}\n        >\n          {children || isIncrement ? (\n            <ChevronUpIcon color={iconColor} />\n          ) : (\n            <ChevronDownIcon color={iconColor} />\n          )}\n        </Box>\n      </TouchableOpacity>\n    );\n  }\n);\n\nconst NumberInputStepper = (\n  { children, ...props }: INumberInputSteppersProps,\n  ref?: any\n) => {\n  const {\n    //@ts-ignore\n    numberInputStepper,\n    setNumberInputStepper,\n  }: INumberInputContext = React.useContext(NumberInputContext);\n\n  React.useEffect(() => {\n    !numberInputStepper &&\n      setNumberInputStepper(\n        <VStack {...props} ref={ref}>\n          {children}\n        </VStack>\n      );\n  }, [numberInputStepper, setNumberInputStepper, props, children, ref]);\n  return null;\n};\n\nexport default React.memo(React.forwardRef(NumberInputStepper));\n"
  },
  {
    "path": "src/components/composites/NumberInput/index.tsx",
    "content": "export { NumberInputContext } from './Context';\nexport { default as NumberDecrementStepper } from './NumberDecrementStepper';\nexport { default as NumberIncrementStepper } from './NumberIncrementStepper';\nexport { default as NumberInput } from './NumberInput';\nexport { default as NumberInputField } from './NumberInputField';\nexport { default as NumberInputStepper } from './NumberInputStepper';\nexport type {\n  INumberInputContext,\n  INumberInputFieldProps,\n  INumberInputProps,\n  INumberInputStepperProps,\n  INumberInputSteppersProps,\n} from './types';\n"
  },
  {
    "path": "src/components/composites/NumberInput/types.tsx",
    "content": "import type { IInputProps, IStackProps } from '../../primitives';\nimport type { InterfaceInputProps } from '../../primitives/Input/types';\nimport type { InterfaceBoxProps } from '../../primitives/Box/types';\nimport type { CustomProps } from '../../../components/types';\n\nexport type INumberInputProps = (InterfaceInputProps &\n  InterfaceBoxProps<INumberInputProps> & {\n    onChange?: (value: number) => void;\n    min?: number;\n    max?: number;\n    step?: number;\n    precision?: number;\n    isReadOnly?: boolean;\n    isInvalid?: boolean;\n    isDisabled?: boolean;\n    keepWithinRange?: boolean;\n    allowMouseWheel?: boolean;\n    clampValueOnBlur?: boolean;\n    focusInputOnChange?: boolean;\n    getAriaValueText?: boolean;\n    children?: JSX.Element[] | JSX.Element;\n  }) &\n  CustomProps<'NumberInput'>;\n\nexport type INumberInputFieldProps = IInputProps & {};\nexport type INumberInputSteppersProps = IStackProps & {\n  children: JSX.Element[] | JSX.Element;\n};\nexport type INumberInputStepperProps = InterfaceBoxProps<INumberInputStepperProps> & {\n  isDisabled?: boolean;\n  _disabled?: Omit<INumberInputStepperProps, '_disabled'>;\n  _active?: Omit<INumberInputStepperProps, '_active'>;\n};\nexport type INumberInputContext = INumberInputProps & {\n  numberInputValue?: number;\n  value?: number;\n  handleChange?: (value: number) => void;\n  handleChangeWithoutCheck?: (value: number) => void;\n  numberInputStepper?: any;\n  setNumberInputStepper?: any;\n  isControlled?: boolean;\n};\n"
  },
  {
    "path": "src/components/composites/PinInput/Context.ts",
    "content": "import { createContext } from 'react';\n\nexport const PinInputContext = createContext({});\n"
  },
  {
    "path": "src/components/composites/PinInput/PinInput.tsx",
    "content": "import React from 'react';\nimport { HStack } from '../../primitives/Stack';\nimport { useThemeProps } from '../../../hooks';\nimport type { IPinInputProps } from './types';\nimport { useFormControlContext } from '../FormControl';\nimport { Platform } from 'react-native';\nimport { PinInputContext } from './Context';\nimport { themeTools } from '../../../theme';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst PinInput = ({ children, ...props }: IPinInputProps, ref?: any) => {\n  let [padding, remProps] = themeTools.extractInObject(props, [\n    'p',\n    'px',\n    'py',\n    'pt',\n    'pb',\n    'pl',\n    'pr',\n  ]);\n  const {\n    manageFocus,\n    defaultValue,\n    value,\n    space,\n    onChange,\n    ...newProps\n  } = useThemeProps('PinInput', remProps);\n  const formControlContext = useFormControlContext();\n\n  const RefList: Array<any> = [];\n  const setRefList = (ref: any, index: number) => {\n    RefList[index] = ref;\n  };\n  const [pinInputValue, setPinInputValue] = React.useState(\n    value || defaultValue\n  );\n\n  const handleChange = (newValue: string, fieldIndex: number) => {\n    let temp = (pinInputValue && [...pinInputValue]) || [];\n    temp[fieldIndex] = newValue;\n    value === undefined && setPinInputValue(temp.join(''));\n    onChange && onChange(temp.join(''));\n    if (newValue === '' && manageFocus && fieldIndex - 1 > -1)\n      RefList[fieldIndex - 1].current.focus();\n    else if (newValue && manageFocus && fieldIndex + 1 < RefList.length)\n      RefList[fieldIndex + 1].current.focus();\n    return temp.join('');\n  };\n  const handleMultiValueChange = (newValue: string, fieldIndex: number) => {\n    const pinFieldLength = RefList.length;\n    const newValueLength = newValue.length;\n    if (newValueLength >= pinFieldLength && newValueLength > 2) {\n      let splicedValue = newValue ? [...newValue] : [];\n      splicedValue.splice(pinFieldLength);\n      RefList[pinFieldLength - 1].current.focus();\n      setPinInputValue(splicedValue.join(''));\n      onChange && onChange(splicedValue.join(''));\n    }\n\n    if (Platform.OS !== 'ios') {\n      let temp = pinInputValue ? [...pinInputValue] : [];\n      if (newValue === '') {\n        // Handling Backward focus.\n        temp = temp.filter((_n, i) => i !== fieldIndex);\n        if (manageFocus && fieldIndex - 1 > -1)\n          RefList[fieldIndex - 1].current.focus();\n      } else {\n        temp[fieldIndex] = JSON.stringify(parseInt(newValue, 10) % 10);\n        if (manageFocus && fieldIndex + 1 < RefList.length)\n          RefList[fieldIndex + 1].current.focus();\n      }\n      value === undefined && setPinInputValue(temp.join(''));\n      onChange && onChange(temp.join(''));\n    }\n  };\n\n  const indexSetter = (allChildren: JSX.Element | JSX.Element[]) => {\n    let pinInputFiledCounter = -1;\n    return React.Children.map(allChildren, (child: JSX.Element) => {\n      pinInputFiledCounter++;\n      return React.cloneElement(\n        child,\n        {\n          fieldIndex: pinInputFiledCounter,\n        },\n        child.props.children\n      );\n    });\n  };\n\n  React.useEffect(() => {\n    if (value !== undefined && value != pinInputValue) setPinInputValue(value);\n  }, [value, pinInputValue, setPinInputValue]);\n\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n\n  return (\n    <PinInputContext.Provider\n      value={{\n        ...formControlContext,\n        ...newProps,\n        setRefList,\n        handleChange,\n        handleMultiValueChange,\n        value: pinInputValue,\n      }}\n    >\n      {children && (\n        <HStack flexDirection=\"row\" space={space} {...padding} ref={ref}>\n          {indexSetter(children)}\n        </HStack>\n      )}\n    </PinInputContext.Provider>\n  );\n};\n\nexport default React.memo(React.forwardRef(PinInput));\n"
  },
  {
    "path": "src/components/composites/PinInput/PinInputField.tsx",
    "content": "import React from 'react';\nimport { Input } from '../../primitives/Input';\nimport type { IPinInputFieldProps, IPinInputContext } from './types';\nimport { PinInputContext } from './Context';\nimport { Platform } from 'react-native';\nimport { mergeRefs } from '../../../utils';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst PinInputFiled = (\n  {\n    fieldIndex = 0,\n    defaultValue: pDefaultValue,\n    ...props\n  }: IPinInputFieldProps,\n  ref?: any\n) => {\n  let {\n    handleChange,\n    value: cValue,\n    setRefList,\n    defaultValue: cDefaultValue,\n    handleMultiValueChange,\n    ...context\n  }: IPinInputContext = React.useContext(PinInputContext);\n  cDefaultValue = cDefaultValue && cDefaultValue[fieldIndex];\n  let defaultValue = pDefaultValue || cDefaultValue;\n  let value = cValue && cValue[fieldIndex];\n\n  const keyPressHandler = (event: any) => {\n    if (Platform.OS !== 'web') {\n      if (event.nativeEvent.key >= 0 && event.nativeEvent.key <= 9) {\n        handleChange && handleChange(event.nativeEvent.key, fieldIndex);\n      } else if (event.nativeEvent.key === 'Backspace') {\n        handleChange && handleChange('', fieldIndex);\n      }\n    }\n  };\n  const textChangeHandler = (value: any) => {\n    // Also used to handle change for Android.\n    handleMultiValueChange && handleMultiValueChange(value, fieldIndex);\n  };\n  const myRef = React.useRef(null);\n  React.useEffect(() => {\n    setRefList && setRefList(myRef, fieldIndex);\n  }, [myRef, fieldIndex, setRefList]);\n\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <Input\n      //@ts-ignore\n      ref={mergeRefs([myRef, ref])}\n      {...context}\n      {...props}\n      onKeyPress={(event) => keyPressHandler(event)}\n      onChangeText={(value) => textChangeHandler(value)}\n      keyboardType=\"numeric\"\n      defaultValue={defaultValue}\n      value={value}\n    />\n  );\n};\n\nexport default React.memo(React.forwardRef(PinInputFiled));\n"
  },
  {
    "path": "src/components/composites/PinInput/index.tsx",
    "content": "import PinInputField from './PinInputField';\nimport PinInputMain from './PinInput';\nexport type {\n  IPinInputContext,\n  IPinInputFieldProps,\n  IPinInputProps,\n} from './types';\nimport type { IPinInputComponentType } from './types';\n\nlet PinInputTemp: any = PinInputMain;\nPinInputTemp.Field = PinInputField;\n\n// To add typings\nconst PinInput = PinInputTemp as IPinInputComponentType;\nexport { PinInput };\n"
  },
  {
    "path": "src/components/composites/PinInput/types.tsx",
    "content": "import type { MutableRefObject } from 'react';\nimport type { InterfaceInputProps } from '../../primitives/Input/types';\nimport type { CustomProps, ResponsiveValue } from '../../../components/types';\nimport type { ISizes } from '../../../theme/base/sizes';\n\nexport type IPinInputProps = (InterfaceInputProps & {\n  onChange?: (value: string) => void;\n  children?: JSX.Element[] | JSX.Element;\n  manageFocus?: boolean;\n}) &\n  CustomProps<'PinInput'>;\n\nexport type IPinInputFieldProps = InterfaceInputProps & {\n  fieldIndex?: number;\n  inputSize?: number | string;\n};\nexport type IPinInputComponentType = ((\n  props: IPinInputProps & { ref?: MutableRefObject<any> }\n) => JSX.Element) & {\n  Field: React.MemoExoticComponent<\n    (\n      props: IPinInputFieldProps & { ref?: MutableRefObject<any> }\n    ) => JSX.Element\n  >;\n};\nexport type IPinInputContext = IPinInputProps & {\n  handleChange?: (value: string, index: number) => void;\n  handleMultiValueChange?: (value: string, index: number) => void;\n  value?: string[] | string;\n  size?: ResponsiveValue<ISizes | (string & {}) | number>;\n  defaultValue?: string[] | string;\n  setRefList?: (ref: any, index: number) => void;\n};\n"
  },
  {
    "path": "src/components/composites/Popover/Popover.tsx",
    "content": "import React, { forwardRef, memo } from 'react';\nimport { Popper } from '../Popper';\nimport type { IPopoverProps } from './types';\nimport { mergeRefs } from '../../../utils';\nimport { useControllableState } from '../../../hooks';\nimport { PopoverContext } from './PopoverContext';\nimport Box from '../../primitives/Box';\nimport Backdrop from '../Backdrop';\nimport { FocusScope } from '@react-native-aria/focus';\nimport { PresenceTransition } from '../Transitions';\nimport { StyleSheet } from 'react-native';\nimport { useId } from '@react-native-aria/utils';\nimport { Overlay } from '../../primitives/Overlay';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nimport uniqueId from 'lodash.uniqueid';\nimport { ResponsiveQueryContext } from '../../../utils/useResponsiveQuery/ResponsiveQueryProvider';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\n\nconst Popover = (\n  {\n    onOpen,\n    trigger,\n    onClose,\n    isOpen: isOpenProp,\n    children,\n    defaultIsOpen,\n    initialFocusRef,\n    finalFocusRef,\n    useRNModal,\n    trapFocus = true,\n    _backdrop,\n    ...props\n  }: IPopoverProps,\n  ref: any\n) => {\n  const { _overlay } = usePropsResolution('Popover', props);\n\n  const triggerRef = React.useRef(null);\n  const mergedRef = mergeRefs([triggerRef]);\n  const [isOpen, setIsOpen] = useControllableState({\n    value: isOpenProp,\n    defaultValue: defaultIsOpen,\n    onChange: (value) => {\n      value ? onOpen && onOpen() : onClose && onClose();\n    },\n  });\n\n  const [bodyMounted, setBodyMounted] = React.useState(false);\n  const [headerMounted, setHeaderMounted] = React.useState(false);\n  let id = uniqueId();\n  const responsiveQueryContext = React.useContext(ResponsiveQueryContext);\n  const disableCSSMediaQueries = responsiveQueryContext.disableCSSMediaQueries;\n\n  if (!disableCSSMediaQueries) {\n    // This if statement technically breaks the rules of hooks, but is safe\n    // because the condition never changes after mounting.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    id = useId();\n  }\n\n  const popoverContentId = `${id}-content`;\n  const headerId = `${popoverContentId}-header`;\n  const bodyId = `${popoverContentId}-body`;\n\n  const handleOpen = React.useCallback(() => {\n    setIsOpen(true);\n  }, [setIsOpen]);\n\n  const updatedTrigger = () => {\n    return trigger(\n      {\n        'ref': mergedRef,\n        'onPress': handleOpen,\n        'aria-expanded': isOpen ? true : false,\n        'aria-controls': isOpen ? popoverContentId : undefined,\n        'aria-haspopup': true,\n      },\n      { open: isOpen }\n    );\n  };\n\n  const handleClose = () => {\n    setIsOpen(false);\n  };\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n\n  return (\n    <Box ref={ref}>\n      {updatedTrigger()}\n      <Overlay\n        isOpen={isOpen}\n        onRequestClose={handleClose}\n        useRNModalOnAndroid\n        useRNModal={useRNModal}\n        {..._overlay}\n      >\n        <PresenceTransition\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1, transition: { duration: 150 } }}\n          exit={{ opacity: 0, scale: 0.95, transition: { duration: 100 } }}\n          visible={isOpen}\n          style={StyleSheet.absoluteFill}\n        >\n          <Popper onClose={handleClose} triggerRef={triggerRef} {...props}>\n            <Backdrop onPress={handleClose} bg=\"transparent\" {..._backdrop} />\n            <PopoverContext.Provider\n              value={{\n                onClose: handleClose,\n                initialFocusRef,\n                finalFocusRef,\n                popoverContentId,\n                bodyId,\n                headerId,\n                headerMounted,\n                bodyMounted,\n                setBodyMounted,\n                setHeaderMounted,\n                isOpen,\n              }}\n            >\n              <FocusScope contain={trapFocus} restoreFocus autoFocus>\n                {children}\n              </FocusScope>\n            </PopoverContext.Provider>\n          </Popper>\n        </PresenceTransition>\n      </Overlay>\n    </Box>\n  );\n};\n\nexport default memo(forwardRef(Popover));\n"
  },
  {
    "path": "src/components/composites/Popover/PopoverArrow.tsx",
    "content": "import React from 'react';\nimport { usePropsResolution } from '../../../hooks';\nimport { Popper } from '../Popper';\nimport type { IBoxProps } from '../../primitives/Box';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst PopoverArrow = React.forwardRef((props: IBoxProps, ref: any) => {\n  const resolvedProps = usePropsResolution('PopoverArrow', props);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return <Popper.Arrow {...resolvedProps} ref={ref} />;\n});\n\nPopoverArrow.displayName = 'PopperArrow';\n\nexport default PopoverArrow;\n"
  },
  {
    "path": "src/components/composites/Popover/PopoverBody.tsx",
    "content": "import { usePropsResolution } from '../../../hooks';\nimport React, { useContext, memo, forwardRef, useEffect } from 'react';\nimport { default as Box, IBoxProps } from '../../primitives/Box';\nimport { PopoverContext } from './PopoverContext';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst PopoverBody = (props: IBoxProps, ref?: any) => {\n  const resolvedProps = usePropsResolution('PopoverBody', props);\n  const { setBodyMounted, bodyId } = useContext(PopoverContext);\n\n  useEffect(() => {\n    setBodyMounted(true);\n    return () => {\n      setBodyMounted(false);\n    };\n  }, [setBodyMounted]);\n\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return <Box nativeID={bodyId} {...resolvedProps} ref={ref} />;\n};\n\nexport default memo(forwardRef(PopoverBody));\n"
  },
  {
    "path": "src/components/composites/Popover/PopoverCloseButton.tsx",
    "content": "import React from 'react';\nimport { usePropsResolution } from '../../../hooks';\nimport { Pressable } from '../../primitives/Pressable';\nimport { CloseIcon } from '../../primitives/Icon/Icons';\nimport { PopoverContext } from './PopoverContext';\nimport type { IButtonProps } from '../../primitives/Button';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nimport {\n  useHover,\n  useFocus,\n  useIsPressed,\n} from '../../primitives/Pressable/Pressable';\nimport { composeEventHandlers } from '../../../utils';\nimport { useFocusRing } from '@react-native-aria/focus';\n\nconst PopoverCloseButton = (props: IButtonProps, ref: any) => {\n  const { onClose }: any = React.useContext(PopoverContext);\n  const { hoverProps, isHovered } = useHover();\n  const { pressableProps, isPressed } = useIsPressed();\n  const { focusProps, isFocused } = useFocus();\n  const { isFocusVisible, focusProps: focusRingProps }: any = useFocusRing();\n\n  const {\n    _icon,\n    onPressIn,\n    onPressOut,\n    onHoverIn,\n    onHoverOut,\n    onFocus,\n    onBlur,\n    ...resolvedProps\n  } = usePropsResolution('PopoverCloseButton', props, {\n    isHovered,\n    isPressed,\n    isFocused,\n    isFocusVisible,\n  });\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <Pressable\n      accessibilityRole=\"button\"\n      ref={ref}\n      onPressIn={composeEventHandlers(onPressIn, pressableProps.onPressIn)}\n      onPressOut={composeEventHandlers(onPressOut, pressableProps.onPressOut)}\n      // @ts-ignore - web only\n      onHoverIn={composeEventHandlers(onHoverIn, hoverProps.onHoverIn)}\n      // @ts-ignore - web only\n      onHoverOut={composeEventHandlers(onHoverOut, hoverProps.onHoverOut)}\n      // @ts-ignore - web only\n      onFocus={composeEventHandlers(\n        composeEventHandlers(onFocus, focusProps.onFocus),\n        focusRingProps.onFocus\n      )}\n      // @ts-ignore - web only\n      onBlur={composeEventHandlers(\n        composeEventHandlers(onBlur, focusProps.onBlur),\n        focusRingProps.onBlur\n      )}\n      onPress={onClose}\n      {...resolvedProps}\n    >\n      <CloseIcon {..._icon} />\n    </Pressable>\n  );\n};\n\nexport default React.memo(React.forwardRef(PopoverCloseButton));\n"
  },
  {
    "path": "src/components/composites/Popover/PopoverContent.tsx",
    "content": "import {\n  useKeyboardDismissable,\n  usePropsResolution,\n  useToken,\n} from '../../../hooks';\nimport React from 'react';\nimport { Platform } from 'react-native';\nimport type { IPopoverContentProps } from './types';\nimport { Popper } from '../Popper';\nimport { PopoverContext } from './PopoverContext';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nexport const PopoverContent = React.forwardRef(\n  (props: IPopoverContentProps, ref: any) => {\n    const {\n      onClose,\n      initialFocusRef,\n      finalFocusRef,\n      popoverContentId,\n      headerMounted,\n      bodyMounted,\n      bodyId,\n      headerId,\n      isOpen,\n    } = React.useContext(PopoverContext);\n    const resolvedProps = usePropsResolution('PopoverContent', props);\n\n    const arrowDefaultColor =\n      props.bgColor ??\n      props.bg ??\n      props.backgroundColor ??\n      resolvedProps.backgroundColor;\n    const color = useToken('colors', arrowDefaultColor);\n\n    React.useEffect(() => {\n      const finalFocusRefCurrentVal = finalFocusRef?.current;\n      if (initialFocusRef && initialFocusRef.current) {\n        initialFocusRef.current.focus();\n      }\n\n      return () => {\n        if (finalFocusRefCurrentVal) {\n          finalFocusRefCurrentVal.focus();\n        }\n      };\n    }, [finalFocusRef, initialFocusRef]);\n\n    useKeyboardDismissable({\n      enabled: true,\n      callback: onClose,\n    });\n\n    let arrowElement = null;\n    const restChildren: any = [];\n    React.Children.toArray(props.children).forEach((child: any) => {\n      if (child?.type?.displayName === 'PopperArrow') {\n        arrowElement = React.cloneElement(child, {\n          backgroundColor: child.props.color ?? color,\n        });\n      } else {\n        restChildren.push(child);\n      }\n    });\n\n    const accessibilityProps =\n      Platform.OS === 'web'\n        ? ({\n            'accessibilityRole': 'dialog',\n            'aria-labelledby': headerMounted ? headerId : undefined,\n            'aria-describedby': bodyMounted ? bodyId : undefined,\n          } as any)\n        : {};\n\n    //TODO: refactor for responsive prop\n    if (useHasResponsiveProps(props)) {\n      return null;\n    }\n\n    return (\n      <Popper.Content\n        nativeID={popoverContentId}\n        {...accessibilityProps}\n        {...resolvedProps}\n        ref={ref}\n        isOpen={isOpen}\n      >\n        {arrowElement}\n        {restChildren}\n      </Popper.Content>\n    );\n  }\n);\n\nPopoverContent.displayName = 'PopoverContent';\n"
  },
  {
    "path": "src/components/composites/Popover/PopoverContext.ts",
    "content": "import React, { RefObject } from 'react';\n\nexport const PopoverContext = React.createContext({\n  onClose: () => {},\n  initialFocusRef: { current: null } as RefObject<any> | undefined,\n  finalFocusRef: { current: null } as RefObject<any> | undefined,\n  popoverContentId: undefined as string | undefined,\n  headerId: undefined as string | undefined,\n  bodyId: undefined as string | undefined,\n  setHeaderMounted: (() => {}) as any,\n  setBodyMounted: (() => {}) as any,\n  headerMounted: false,\n  bodyMounted: false,\n  isOpen: false,\n});\n"
  },
  {
    "path": "src/components/composites/Popover/PopoverFooter.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport { usePropsResolution } from '../../../hooks';\nimport { default as Box, IBoxProps } from '../../primitives/Box';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst PopoverFooter = (props: IBoxProps, ref?: any) => {\n  const resolvedProps = usePropsResolution('PopoverFooter', props);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return <Box {...resolvedProps} ref={ref} />;\n};\n\nexport default memo(forwardRef(PopoverFooter));\n"
  },
  {
    "path": "src/components/composites/Popover/PopoverHeader.tsx",
    "content": "import React, { memo, forwardRef, useEffect, useContext } from 'react';\nimport { usePropsResolution } from '../../../hooks';\nimport { default as Box, IBoxProps } from '../../primitives/Box';\nimport { PopoverContext } from './PopoverContext';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst PopoverHeader = (props: IBoxProps, ref?: any) => {\n  const resolvedProps = usePropsResolution('PopoverHeader', props);\n  const { setHeaderMounted, headerId } = useContext(PopoverContext);\n\n  useEffect(() => {\n    setHeaderMounted(true);\n    return () => {\n      setHeaderMounted(false);\n    };\n  }, [setHeaderMounted]);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return <Box nativeID={headerId} {...resolvedProps} ref={ref} />;\n};\n\nexport default memo(forwardRef(PopoverHeader));\n"
  },
  {
    "path": "src/components/composites/Popover/index.tsx",
    "content": "import { default as PopoverMain } from './Popover';\nimport { PopoverContent } from './PopoverContent';\nimport PopoverBody from './PopoverBody';\nimport PopoverCloseButton from './PopoverCloseButton';\nimport PopoverFooter from './PopoverFooter';\nimport PopoverHeader from './PopoverHeader';\nimport type { IPopoverComponentType } from './types';\nimport PopoverArrow from './PopoverArrow';\nexport type { IPopoverProps } from './types';\n\nconst PopoverTemp: any = PopoverMain;\nPopoverTemp.Content = PopoverContent;\nPopoverTemp.CloseButton = PopoverCloseButton;\nPopoverTemp.Header = PopoverHeader;\nPopoverTemp.Footer = PopoverFooter;\nPopoverTemp.Body = PopoverBody;\nPopoverTemp.Arrow = PopoverArrow;\n\n// To add typings\nconst Popover = PopoverTemp as IPopoverComponentType;\nexport { Popover };\n"
  },
  {
    "path": "src/components/composites/Popover/types.ts",
    "content": "import type { ColorValue } from 'react-native';\nimport type { InterfaceBoxProps } from '../../primitives/Box';\nimport type { IIconButtonProps } from '../../composites/IconButton';\nimport type { MutableRefObject } from 'react';\n\nexport type IPopoverArrowProps = {\n  height?: number;\n  width?: number;\n  color?: ColorValue;\n} & InterfaceBoxProps;\n\nexport type IPopoverArrowImplProps = {\n  placement?: string;\n  arrowProps: IArrowProps;\n  height: number;\n  width: number;\n} & IPopoverArrowProps;\n\nexport type IArrowProps = {\n  style: Object;\n};\n\nexport interface InterfacePopoverProps {\n  /**\n   * If true, the popover will be opened by default.\n   */\n  defaultIsOpen?: boolean;\n  /**\n   * Whether the popover is opened. Useful for controlling the open state.\n   */\n  isOpen?: boolean;\n  /**\n   * Whether popover should trap focus.\n   * @default true\n   */\n  trapFocus?: boolean;\n  /**\n   * Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.\n   * @default true\n   */\n  shouldFlip?: boolean;\n  /**\n   * The ref of element to receive focus when the popover opens.\n   */\n  initialFocusRef?: React.RefObject<any>;\n  /**\n   * The ref of element to receive focus when the modal closes.\n   */\n  finalFocusRef?: React.RefObject<any>;\n  /**\n   * Function that returns a React Element. This element will be used as a Trigger for the popover.\n   */\n  trigger: (_props: any, state: { open: boolean }) => JSX.Element;\n  /**\n   * The additional offset applied along the cross axis between the element and its trigger element.\n   */\n  crossOffset?: number;\n  /**\n   * The additional offset applied along the main axis between the element and its trigger element.\n   */\n  offset?: number;\n  /**\n   * Determines whether menu content should overlap with the trigger.\n   * @default false\n   */\n  shouldOverlapWithTrigger?: boolean;\n  /**\n   * Popover children.\n   */\n  children: React.ReactNode;\n  /**\n   * If true, the modal will close when Escape key is pressed.\n   * @default true\n   */\n  isKeyboardDismissable?: boolean;\n  /**\n   * Popover placement\n   * @default bottom\n   */\n  placement?:\n    | 'top'\n    | 'bottom'\n    | 'left'\n    | 'right'\n    | 'top left'\n    | 'top right'\n    | 'bottom left'\n    | 'bottom right'\n    | 'right top'\n    | 'right bottom'\n    | 'left top'\n    | 'left bottom';\n  /**\n   * This function will be invoked when popover is closed. It'll also be called when user attempts to close the popover via Escape key or backdrop press.\n   */\n  onClose?: () => void;\n  /**\n   * This function will be invoked when popover is opened.\n   */\n  onOpen?: () => void;\n\n  /* If true, renders react-native native modal\n   * @default false\n   */\n  useRNModal?: boolean;\n  /**\n   * Props applied on backdrop.\n   */\n  _backdrop?: any;\n  /**\n   * Props applied on overlay.\n   */\n  _overlay?: any;\n}\n\nexport type IPopoverContentImpl = {\n  arrowHeight: number;\n  arrowWidth: number;\n  placement?: string;\n  arrowProps: IArrowProps;\n  children: any;\n};\n\nexport type IPopoverImplProps = IPopoverProps & {\n  triggerRef: any;\n};\n\nexport type IArrowStyles = {\n  placement?: string;\n  height?: number;\n  width?: number;\n};\n\nexport type IScrollContentStyle = {\n  placement?: string;\n  arrowHeight: number;\n  arrowWidth: number;\n};\n\nexport interface IPopoverContentProps\n  extends InterfaceBoxProps<IPopoverContentProps> {}\n\nexport type IPopoverComponentType = ((\n  props: IPopoverProps & { ref?: MutableRefObject<any> }\n) => JSX.Element & { ref?: MutableRefObject<any> }) & {\n  Body: React.MemoExoticComponent<\n    (\n      props: InterfaceBoxProps<IPopoverProps> & { ref?: MutableRefObject<any> }\n    ) => JSX.Element\n  >;\n  CloseButton: React.MemoExoticComponent<\n    (\n      props: Omit<IIconButtonProps, 'icon'> & { ref?: MutableRefObject<any> }\n    ) => JSX.Element\n  >;\n  Content: React.MemoExoticComponent<\n    (\n      props: IPopoverContentProps & { ref?: MutableRefObject<any> }\n    ) => JSX.Element\n  >;\n  Footer: React.MemoExoticComponent<\n    (\n      props: InterfaceBoxProps<IPopoverProps> & { ref?: MutableRefObject<any> }\n    ) => JSX.Element\n  >;\n  Header: React.MemoExoticComponent<\n    (\n      props: InterfaceBoxProps<IPopoverProps> & { ref?: MutableRefObject<any> }\n    ) => JSX.Element\n  >;\n  Arrow: React.MemoExoticComponent<\n    (\n      props: InterfaceBoxProps<IPopoverProps> & { ref?: MutableRefObject<any> }\n    ) => JSX.Element\n  >;\n};\n\nexport type IPopoverProps = InterfacePopoverProps;\n"
  },
  {
    "path": "src/components/composites/Popper/Popper.tsx",
    "content": "import React from 'react';\nimport { useOverlayPosition } from '@react-native-aria/overlays';\nimport { StyleSheet, View, ViewStyle } from 'react-native';\nimport type {\n  IPopperProps,\n  IScrollContentStyle,\n  IArrowStyles,\n  IPopoverArrowProps,\n} from './types';\nimport { createContext } from '../../../utils';\nimport Box, { IBoxProps } from '../../primitives/Box';\n// import { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst defaultArrowHeight = 15;\nconst defaultArrowWidth = 15;\n\nconst getDiagonalLength = (height: number, width: number) => {\n  return Math.pow(height * height + width * width, 0.5);\n};\n\ntype PopperContext = IPopperProps & {\n  triggerRef: any;\n  onClose: any;\n  setOverlayRef?: (overlayRef: any) => void;\n};\n\nconst [PopperProvider, usePopperContext] = createContext<PopperContext>(\n  'PopperContext'\n);\n\nconst Popper = (\n  props: IPopperProps & {\n    triggerRef: any;\n    onClose: any;\n    setOverlayRef?: (overlayRef: any) => void;\n  }\n) => {\n  return <PopperProvider {...props}>{props.children}</PopperProvider>;\n};\n\nconst PopperContent = React.forwardRef(\n  ({ children, style, ...rest }: IBoxProps & { isOpen: boolean }, ref: any) => {\n    const {\n      triggerRef,\n      shouldFlip,\n      crossOffset,\n      offset,\n      placement: placementProp,\n      onClose,\n      shouldOverlapWithTrigger,\n      setOverlayRef,\n    } = usePopperContext('PopperContent');\n    const overlayRef = React.useRef(null);\n\n    // const { top } = useSafeAreaInsets();\n    const {\n      overlayProps,\n      rendered,\n      arrowProps,\n      placement,\n    } = useOverlayPosition({\n      targetRef: triggerRef,\n      overlayRef,\n      shouldFlip: shouldFlip,\n      crossOffset: crossOffset,\n      isOpen: rest.isOpen,\n      offset: offset,\n      placement: placementProp as any,\n      containerPadding: 0,\n      onClose: onClose,\n      shouldOverlapWithTrigger,\n    });\n\n    const restElements: React.ReactNode[] = [];\n    let arrowElement: React.ReactElement | null = null;\n\n    React.useEffect(() => {\n      setOverlayRef && setOverlayRef(overlayRef);\n    }, [overlayRef, setOverlayRef]);\n\n    // Might have performance impact if there are a lot of siblings!\n    // Shouldn't be an issue with popovers since it would have atmost 2. Arrow and Content.\n    React.Children.forEach(children, (child) => {\n      if (\n        React.isValidElement(child) &&\n        // @ts-ignore\n        child.type.displayName === 'PopperArrow'\n      ) {\n        arrowElement = React.cloneElement(child, {\n          // @ts-ignore\n          arrowProps,\n          actualPlacement: placement,\n        });\n      } else {\n        restElements.push(child);\n      }\n    });\n\n    let arrowHeight = 0;\n    let arrowWidth = 0;\n\n    if (arrowElement) {\n      arrowHeight = defaultArrowHeight;\n      arrowWidth = defaultArrowWidth;\n\n      //@ts-ignore\n      if (arrowElement.props.height) {\n        //@ts-ignore\n        arrowHeight = arrowElement.props.height;\n      }\n\n      //@ts-ignore\n      if (arrowElement.props.width) {\n        //@ts-ignore\n        arrowWidth = arrowElement.props.width;\n      }\n    }\n\n    const containerStyle = React.useMemo(\n      () =>\n        getContainerStyle({\n          placement,\n          arrowHeight,\n          arrowWidth,\n        }),\n      [arrowHeight, arrowWidth, placement]\n    );\n\n    const overlayStyle = React.useMemo(\n      () =>\n        StyleSheet.create({\n          overlay: {\n            ...overlayProps.style,\n            // To handle translucent android StatusBar\n            // marginTop: Platform.select({ android: top, default: 0 }),\n            opacity: rendered ? 1 : 0,\n            position: 'absolute',\n          },\n        }),\n      [rendered, overlayProps.style]\n    );\n    //TODO: refactor for responsive prop\n    if (useHasResponsiveProps(rest)) {\n      return null;\n    }\n\n    return (\n      <View ref={overlayRef} collapsable={false} style={overlayStyle.overlay}>\n        {arrowElement}\n        <Box\n          style={StyleSheet.flatten([containerStyle, style])}\n          {...rest}\n          ref={ref}\n        >\n          {restElements}\n        </Box>\n      </View>\n    );\n  }\n);\n\n// This is an internal implementation of PopoverArrow\nconst PopperArrow = React.forwardRef(\n  (\n    {\n      height = defaultArrowHeight,\n      width = defaultArrowWidth,\n\n      //@ts-ignore - Will be passed by React.cloneElement from PopperContent\n      arrowProps,\n      //@ts-ignore - Will be passed by React.cloneElement from PopperContent\n      actualPlacement,\n      style,\n      borderColor = '#52525b',\n      backgroundColor = 'black',\n      ...rest\n    }: IPopoverArrowProps & IBoxProps<IPopoverArrowProps>,\n    ref: any\n  ) => {\n    const additionalStyles = React.useMemo(\n      () => getArrowStyles({ placement: actualPlacement, height, width }),\n      [actualPlacement, height, width]\n    );\n\n    const triangleStyle: ViewStyle = React.useMemo(\n      () => ({\n        position: 'absolute',\n        width,\n        height,\n      }),\n      [width, height]\n    );\n\n    const arrowStyles = React.useMemo(\n      () => [arrowProps?.style, triangleStyle, additionalStyles, style],\n      [triangleStyle, additionalStyles, arrowProps?.style, style]\n    );\n\n    return (\n      <Box\n        ref={ref}\n        style={arrowStyles}\n        borderColor={borderColor}\n        backgroundColor={backgroundColor}\n        zIndex={1}\n        {...rest}\n      />\n    );\n  }\n);\n\nconst getArrowStyles = (props: IArrowStyles) => {\n  const additionalStyles: any = {\n    transform: [],\n  };\n\n  const diagonalLength = getDiagonalLength(\n    defaultArrowHeight,\n    defaultArrowHeight\n  );\n\n  if (props.placement === 'top' && props.width) {\n    additionalStyles.transform.push({ translateX: -props.width / 2 });\n    additionalStyles.transform.push({ rotate: '45deg' });\n    additionalStyles.bottom = Math.ceil(\n      (diagonalLength - defaultArrowHeight) / 2\n    );\n    additionalStyles.borderBottomWidth = 1;\n    additionalStyles.borderRightWidth = 1;\n  }\n\n  if (props.placement === 'bottom' && props.width) {\n    additionalStyles.transform.push({ translateX: -props.width / 2 });\n    additionalStyles.transform.push({ rotate: '45deg' });\n    additionalStyles.top = Math.ceil((diagonalLength - defaultArrowHeight) / 2);\n    additionalStyles.borderTopWidth = 1;\n    additionalStyles.borderLeftWidth = 1;\n  }\n\n  if (props.placement === 'left' && props.height) {\n    additionalStyles.transform.push({ translateY: -props.height / 2 });\n    additionalStyles.transform.push({ rotate: '45deg' });\n    additionalStyles.right = Math.ceil(\n      (diagonalLength - defaultArrowHeight) / 2\n    );\n    additionalStyles.borderTopWidth = 1;\n    additionalStyles.borderRightWidth = 1;\n  }\n\n  if (props.placement === 'right' && props.height) {\n    additionalStyles.transform.push({ translateY: -props.height / 2 });\n    additionalStyles.transform.push({ rotate: '45deg' });\n    additionalStyles.left = Math.ceil(\n      (diagonalLength - defaultArrowHeight) / 2\n    );\n    additionalStyles.borderBottomWidth = 1;\n    additionalStyles.borderLeftWidth = 1;\n  }\n\n  return additionalStyles;\n};\n\nconst getContainerStyle = ({ placement, arrowHeight }: IScrollContentStyle) => {\n  const diagonalLength = getDiagonalLength(arrowHeight, arrowHeight) / 2;\n\n  if (placement === 'top') {\n    return { marginBottom: diagonalLength };\n  }\n\n  if (placement === 'bottom') {\n    return { marginTop: diagonalLength };\n  }\n\n  if (placement === 'left') {\n    return { marginRight: diagonalLength };\n  }\n\n  if (placement === 'right') {\n    return { marginLeft: diagonalLength };\n  }\n\n  return {};\n};\n\nPopperArrow.displayName = 'PopperArrow';\nPopper.Content = PopperContent;\nPopper.Arrow = PopperArrow;\n\nexport { Popper };\n"
  },
  {
    "path": "src/components/composites/Popper/index.ts",
    "content": "export { Popper } from './Popper';\n"
  },
  {
    "path": "src/components/composites/Popper/types.ts",
    "content": "import type { ReactElement, RefObject } from 'react';\n\nexport type IPopoverArrowProps = {\n  height?: any;\n  width?: any;\n  children?: any;\n  color?: any;\n  style?: any;\n};\n\nexport type IPlacement =\n  | 'top'\n  | 'bottom'\n  | 'left'\n  | 'right'\n  | 'top left'\n  | 'top right'\n  | 'bottom left'\n  | 'bottom right'\n  | 'right top'\n  | 'right bottom'\n  | 'left top'\n  | 'left bottom';\n\nexport type IPopperProps = {\n  shouldFlip?: boolean;\n  crossOffset?: number;\n  offset?: number;\n  children: React.ReactNode;\n  shouldOverlapWithTrigger?: boolean;\n  trigger?: ReactElement | RefObject<any>;\n  placement?: IPlacement;\n};\n\nexport type IArrowStyles = {\n  placement?: string;\n  height?: number;\n  width?: number;\n};\n\nexport type IScrollContentStyle = {\n  placement?: string;\n  arrowHeight: number;\n  arrowWidth: number;\n};\n"
  },
  {
    "path": "src/components/composites/Progress/index.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport { Box } from '../../primitives';\nimport type { InterfaceBoxProps } from '../../primitives/Box';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nimport type { ColorSchemeType } from '../../../components/types';\nimport type {\n  CustomProps,\n  ThemeComponentSizeType,\n} from '../../../components/types';\n\nexport interface InterfaceProgressProps\n  extends InterfaceBoxProps<IProgressProps> {\n  /**\n   * Value of Progress.\n   * @default 0\n   */\n  value?: number;\n  /**\n   * Defines height of Progress\n   * @default sm\n   */\n  size?: ThemeComponentSizeType<'Progress'>;\n\n  /**\n   * The color scheme of the progress. This should be one of the color keys in the theme (e.g.\"green\", \"red\").\n   * @default primary\n   */\n  colorScheme?: ColorSchemeType;\n  // /**\n  //  * Whether progress is indeterminate\n  //  * @default false\n  //  */\n  // isIndeterminate?: boolean;\n  /**\n   * Pseudo prop to give Prop to filled track\n   */\n  _filledTrack?: InterfaceBoxProps<IProgressProps>;\n  /**\n   * Min progress value\n   * @default 0\n   */\n  min?: number;\n  /**\n   * Max progress value\n   * @default 100\n   */\n  max?: number;\n}\n\nexport type IProgressProps = InterfaceProgressProps & CustomProps<'Progress'>;\nconst Progress = (props: IProgressProps, ref?: any) => {\n  const {\n    min,\n    max,\n    value,\n    _filledTrack,\n    children,\n    ...resolvedProps\n  } = usePropsResolution('Progress', props);\n\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n\n  let valueWidth =\n    value < max && value > min\n      ? ((value - min) / (max - min)) * 100\n      : value > min\n      ? 100\n      : 0;\n\n  return (\n    <Box\n      {...resolvedProps}\n      ref={ref}\n      accessible\n      accessibilityRole=\"progressbar\"\n      accessibilityValue={{\n        min: min,\n        max: max,\n        now: valueWidth,\n      }}\n    >\n      <Box w={`${valueWidth}%`} {..._filledTrack}>\n        {children}\n      </Box>\n    </Box>\n  );\n};\n\nexport default memo(forwardRef(Progress));\n"
  },
  {
    "path": "src/components/composites/SimpleGrid/SimpleGrid.tsx",
    "content": "import React from 'react';\nimport { Box, HStack, VStack } from '../../primitives';\nimport type { ISimpleGridProps } from './types';\n// const isDebug = process.env.NODE_ENV !== 'production';\nimport { useThemeProps } from '../../../hooks/useThemeProps';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst DEBUG_STYLES = false\n  ? {\n      rows: {\n        borderWidth: '1px',\n      },\n      cols: {\n        borderWidth: '1px',\n      },\n    }\n  : {\n      rows: {},\n      cols: {},\n    };\n\nconst SimpleGrid = (props: ISimpleGridProps, ref?: any): JSX.Element => {\n  const {\n    columns,\n    space,\n    spacingX,\n    spacingY,\n    minChildWidth,\n    children,\n    ...remainingProps\n  } = useThemeProps('SimpleGrid', props);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return <></>;\n  }\n  let cellSpacing = space ?? 0;\n  let cellSpacingX = spacingX ?? cellSpacing;\n  let cellSpacingY = spacingY ?? cellSpacing;\n\n  const childrenArray = React.Children.toArray(children);\n\n  if (columns) {\n    let rowSlices = [];\n    for (let i = 0; i < childrenArray.length; i = i + columns) {\n      rowSlices.push(childrenArray.slice(i, i + columns));\n    }\n\n    return (\n      <VStack\n        {...DEBUG_STYLES.rows}\n        space={cellSpacingY}\n        {...remainingProps}\n        ref={ref}\n      >\n        {rowSlices.map((row, rowIndex) => {\n          return (\n            <HStack space={cellSpacingX} key={rowIndex}>\n              {row.map((col: any) => {\n                return (\n                  <Box {...DEBUG_STYLES.cols} key={col.key}>\n                    {col}\n                  </Box>\n                );\n              })}\n            </HStack>\n          );\n        })}\n      </VStack>\n    );\n  }\n  // Needs more work for empty spacing i.e. auto-fit. Current workaround is to use wrap and let the columns be created dynamically\n  // https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/\n  else if (minChildWidth) {\n    return (\n      <Box\n        flexDirection=\"row\"\n        flexWrap=\"wrap\"\n        justifyContent=\"center\"\n        {...remainingProps}\n        ref={ref}\n      >\n        {childrenArray.map((col: any) => {\n          return (\n            <Box\n              {...DEBUG_STYLES.cols}\n              mx={cellSpacingX}\n              my={cellSpacingY}\n              key={col.key}\n              minWidth={minChildWidth}\n            >\n              {col}\n            </Box>\n          );\n        })}\n      </Box>\n    );\n  }\n\n  return <></>;\n};\nexport default React.memo(React.forwardRef(SimpleGrid));\n"
  },
  {
    "path": "src/components/composites/SimpleGrid/index.tsx",
    "content": "export { default as SimpleGrid } from './SimpleGrid';\nexport type { ISimpleGridProps } from './types';\n"
  },
  {
    "path": "src/components/composites/SimpleGrid/types.ts",
    "content": "import type { InterfaceBoxProps } from '../../primitives/Box/types';\n\nexport type ISimpleGridProps = InterfaceBoxProps<ISimpleGridProps> & {\n  space?: number;\n  columns?: number;\n  minChildWidth?: number;\n  spacingX?: number;\n  spacingY?: number;\n};\n"
  },
  {
    "path": "src/components/composites/Skeleton/Skeleton.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport { Animated, Platform } from 'react-native';\nimport { usePropsResolution } from '../../../hooks';\nimport { canUseDom } from '../../../utils';\nimport Box from '../../primitives/Box';\nimport type { ISkeletonProps } from './types';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nimport { useToken } from '../../../hooks/useToken';\n\nconst Skeleton = (props: ISkeletonProps, ref: any) => {\n  const isDomUsable = canUseDom();\n  const {\n    children,\n    startColor,\n    endColor,\n    ...resolvedProps\n  } = usePropsResolution('Skeleton', props);\n  // Setting blink Animation\n  const blinkAnim = React.useRef(new Animated.Value(0)).current;\n  const tokenisedStartColor = useToken('colors', startColor);\n\n  // Generating blink animation in a sequence\n  React.useEffect(() => {\n    //Check if window is loaded\n    if (isDomUsable) {\n      const blink = Animated.sequence([\n        Animated.timing(blinkAnim, {\n          toValue: 1,\n          duration:\n            resolvedProps.fadeDuration * 10000 * (1 / resolvedProps.speed),\n          useNativeDriver: Platform.OS !== 'web',\n        }),\n        Animated.timing(blinkAnim, {\n          toValue: 0,\n          duration:\n            resolvedProps.fadeDuration * 10000 * (1 / resolvedProps.speed),\n          useNativeDriver: Platform.OS !== 'web',\n        }),\n      ]);\n      Animated.loop(blink).start();\n    }\n  }, [blinkAnim, isDomUsable, resolvedProps]);\n\n  const skeletonStyle: any = {\n    skeleton: {\n      height: '100%',\n      width: '100%',\n      backgroundColor: tokenisedStartColor,\n      opacity: blinkAnim, // Bind opacity to animated value\n    },\n  };\n\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n\n  return resolvedProps.isLoaded ? (\n    children\n  ) : (\n    <Box bg={endColor} {...resolvedProps} ref={ref}>\n      <Animated.View style={skeletonStyle.skeleton} />\n    </Box>\n  );\n};\n\nexport default memo(forwardRef(Skeleton));\n"
  },
  {
    "path": "src/components/composites/Skeleton/SkeletonText.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport { usePropsResolution } from '../../../hooks';\nimport { Stack } from '../../primitives/Stack';\nimport Skeleton from './Skeleton';\nimport type { ISkeletonTextProps } from './types';\n\nconst SkeletonText = (\n  //@ts-ignore\n  props: ISkeletonTextProps,\n  ref: any\n) => {\n  // const { children, ...props } = allProps;\n  const {\n    children,\n    startColor,\n    endColor,\n    lines,\n    isLoaded,\n    _line,\n    ...resolvedProps\n  } = usePropsResolution('SkeletonText', props);\n\n  const computedChildren = [];\n  //generating an array of skeleton components (same length as noOfLines)\n  for (let i = 0; i < lines; i++) {\n    //check for last line (to change the width of last line)\n    if (i === lines - 1 && lines !== 1) {\n      computedChildren.push(\n        //Using Skeleton component with required props\n        <Skeleton\n          key={i}\n          endColor={endColor}\n          startColor={startColor}\n          w=\"75%\"\n          {..._line}\n        />\n      );\n    } else\n      computedChildren.push(\n        <Skeleton\n          key={i}\n          endColor={endColor}\n          startColor={startColor}\n          {..._line}\n        />\n      );\n  }\n  return isLoaded ? (\n    children\n  ) : (\n    <Stack {...resolvedProps} ref={ref}>\n      {computedChildren}\n    </Stack>\n  );\n};\n\nexport default memo(forwardRef(SkeletonText));\n"
  },
  {
    "path": "src/components/composites/Skeleton/index.tsx",
    "content": "import type { ISkeletonComponentType } from './types';\nimport SkeletonMain from './Skeleton';\nimport SkeletonText from './SkeletonText';\n\nconst SkeletonTemp: any = SkeletonMain;\nSkeletonTemp.Text = SkeletonText;\n\n// To add typings\nconst Skeleton = SkeletonTemp as ISkeletonComponentType;\nexport { Skeleton };\nexport type { ISkeletonProps, ISkeletonTextProps } from './types';\n"
  },
  {
    "path": "src/components/composites/Skeleton/types.tsx",
    "content": "import type { MutableRefObject } from 'react';\nimport type { InterfaceBoxProps } from '../../primitives/Box';\nimport type { IStackProps } from '../../primitives/Stack/Stack';\nimport type { CustomProps, ResponsiveValue } from '../../../components/types';\nimport type { ISizes } from '../../../theme/base/sizes';\nimport type { IColors } from '../../../theme/base/colors';\nexport interface InterfaceSkeletonProps\n  extends InterfaceBoxProps<ISkeletonProps> {\n  /**\n   * The fadeIn duration in seconds\n   */\n  fadeDuration?: number;\n  /**\n   * If true, it will render its children\n   */\n  isLoaded?: boolean;\n  /**\n   * The animation speed in seconds\n   */\n  speed?: number;\n  /**\n   * The color at the animation start\n   */\n  startColor?: ResponsiveValue<IColors | (string & {})>;\n  /**\n   * The color at the animation end\n   */\n  endColor?: ResponsiveValue<IColors | (string & {})>;\n  /**\n   * Sizes for Skeleton\n   */\n\n  size?: ResponsiveValue<ISizes | (string & {}) | number>;\n}\n\nexport interface ISkeletonTextProps extends IStackProps {\n  /**\n   * The fadeIn duration in seconds\n   */\n  fadeDuration?: number;\n  /**\n   * If true, it will render its children\n   */\n  isLoaded?: boolean;\n  /**\n   * The animation speed in seconds\n   */\n  speed?: number;\n  /**\n   * The color at the animation start\n   */\n  startColor?: ResponsiveValue<IColors | (string & {})>;\n  /**\n   * The color at the animation end\n   */\n  endColor?: ResponsiveValue<IColors | (string & {})>;\n  /**\n   * Number of Lines in text\n   */\n  lines?: number;\n  /**\n   * Stying for each line\n   */\n  _line?: Partial<ISkeletonProps>;\n\n  /**\n   * Props to be passed to the Stack used inside.\n   */\n  _stack?: Partial<IStackProps>;\n}\n\nexport type ISkeletonComponentType = ((\n  props: ISkeletonProps & { ref?: MutableRefObject<any> }\n) => JSX.Element) & {\n  Circle: React.MemoExoticComponent<\n    (props: ISkeletonProps & { ref?: MutableRefObject<any> }) => JSX.Element\n  >;\n  Text: React.MemoExoticComponent<\n    (props: ISkeletonTextProps & { ref?: MutableRefObject<any> }) => JSX.Element\n  >;\n};\n\nexport type ISkeletonProps = InterfaceSkeletonProps & CustomProps<'Skeleton'>;\n"
  },
  {
    "path": "src/components/composites/Stat/index.tsx",
    "content": "import React from 'react';\nimport {\n  Box,\n  IBoxProps,\n  Text,\n  ITextProps,\n  IIconProps,\n  HStack,\n  IStackProps,\n} from '../../primitives';\nimport { useThemeProps } from '../../../hooks';\nimport { ChevronDownIcon, ChevronUpIcon } from '../../primitives/Icon/Icons';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nexport const StatLabel = React.memo(\n  React.forwardRef(({ style, ...props }: ITextProps, ref?: any) => {\n    let newProps = useThemeProps('Stat', props);\n    //TODO: refactor for responsive prop\n    if (useHasResponsiveProps(props)) {\n      return null;\n    }\n    return (\n      <Text\n        {...newProps._statLabel}\n        {...newProps}\n        style={style}\n        {...props}\n        ref={ref}\n      >\n        {props.children}\n      </Text>\n    );\n  })\n);\n\nexport const StatNumber = React.memo(\n  React.forwardRef(({ style, ...props }: ITextProps, ref?: any) => {\n    let newProps = useThemeProps('Stat', props);\n    return (\n      <Text {...newProps._statNumber} {...newProps} style={style} ref={ref}>\n        {props.children}\n      </Text>\n    );\n  })\n);\n\nexport const StatHelpText = React.memo(\n  React.forwardRef(({ style, ...props }: IBoxProps, ref?: any) => {\n    let newProps = useThemeProps('Stat', props);\n    return (\n      <Box {...newProps._statHelpText} {...newProps} style={style} ref={ref}>\n        {props.children}\n      </Box>\n    );\n  })\n);\n\ntype IStatArrowProps = IIconProps & { type?: 'increase' | 'decrease' };\nexport const StatArrow = React.memo(\n  React.forwardRef(({ type, ...props }: IStatArrowProps, ref?: any) => {\n    return type === 'increase' ? (\n      <ChevronUpIcon ml={-1} color=\"green.500\" size={8} {...props} ref={ref} />\n    ) : (\n      <ChevronDownIcon ml={-1} color=\"red.500\" size={8} {...props} ref={ref} />\n    );\n  })\n);\n\nexport const StatGroup = React.memo(\n  React.forwardRef(({ style, ...props }: IBoxProps, ref: any) => {\n    let newProps = useThemeProps('Stat', props);\n    return (\n      <HStack {...newProps._statGroup} {...newProps} ref={ref} style={style} />\n    );\n  })\n);\n\nconst StatMain = React.forwardRef(\n  ({ style, ...props }: IBoxProps, ref: any) => {\n    return <Box {...props} ref={ref} style={style} />;\n  }\n);\n\ntype IStatComponentType = ((\n  props: IBoxProps & { ref?: any }\n) => JSX.Element) & {\n  Label: React.MemoExoticComponent<\n    (props: ITextProps & { ref?: any }) => JSX.Element\n  >;\n  Number: React.MemoExoticComponent<\n    (props: ITextProps & { ref?: any }) => JSX.Element\n  >;\n  HelpText: React.MemoExoticComponent<\n    (props: IBoxProps & { ref?: any }) => JSX.Element\n  >;\n  Arrow: React.MemoExoticComponent<\n    (props: IStatArrowProps & { ref?: any }) => JSX.Element\n  >;\n  Group: React.MemoExoticComponent<\n    (props: IStackProps & { ref?: any }) => JSX.Element\n  >;\n};\n\nconst StatTemp: any = StatMain;\nStatTemp.Label = StatLabel;\nStatTemp.Number = StatNumber;\nStatTemp.HelpText = StatHelpText;\nStatTemp.Arrow = StatArrow;\nStatTemp.Group = StatGroup;\n\nconst Stat = StatTemp as IStatComponentType;\n\nexport default Stat;\n"
  },
  {
    "path": "src/components/composites/Tabs/Context.ts",
    "content": "import { createContext } from 'react';\n\nexport const TabsContext = createContext({});\n"
  },
  {
    "path": "src/components/composites/Tabs/Tab.tsx",
    "content": "import React, { createContext } from 'react';\nimport { Pressable } from '../../primitives/Pressable';\nimport Box from '../../primitives/Box';\nimport { TabsContext } from './Context';\nimport type { ITabProps, ITabsContextProps } from './types';\nimport { omitUndefined } from '../../../theme/tools/utils';\nimport { useTab } from '@react-native-aria/tabs';\nimport { useHover } from '@react-native-aria/interactions';\nimport { mergeRefs } from '../../../utils';\nimport merge from 'lodash.merge';\nimport { themeTools } from '../../../theme';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nexport const TabContext = createContext({});\n\nconst Tab = (\n  {\n    children,\n    isDisabled,\n    style,\n    _active,\n    _disabled,\n    item,\n    ...props\n  }: ITabProps,\n  ref?: any\n) => {\n  const newProps = omitUndefined(props);\n\n  const {\n    inactiveTabStyle,\n    activeTabStyle,\n    state,\n    isFitted,\n  }: ITabsContextProps = React.useContext(TabsContext);\n  let tabRef = React.useRef<any>(null);\n  const _ref = React.useRef(null);\n  const { isHovered } = useHover({}, _ref);\n  let isSelected = state.selectedKey === item.key;\n\n  let { tabProps } = useTab({ item, isDisabled }, state, tabRef);\n\n  React.useEffect(() => {\n    if (isDisabled) {\n      state.disabledKeys.add(item.key);\n    } else {\n      state.disabledKeys.delete(item.key);\n    }\n  }, [isDisabled, item.key, state.disabledKeys]);\n\n  const tabStyle = isSelected ? activeTabStyle : inactiveTabStyle;\n  const { _hover, ...remainingTabStyle } = tabStyle;\n  const mergedProps = merge(remainingTabStyle, newProps);\n  const [\n    marginalProps,\n    remainingProps,\n  ] = themeTools.extractInObject(mergedProps, [\n    'margin',\n    'm',\n    'marginTop',\n    'mt',\n    'marginRight',\n    'mr',\n    'marginBottom',\n    'mb',\n    'marginLeft',\n    'ml',\n    'marginX',\n    'mx',\n    'marginY',\n    'my',\n  ]);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <TabContext.Provider\n      value={{\n        isSelected,\n      }}\n    >\n      <Pressable\n        disabled={isDisabled}\n        ref={mergeRefs([tabRef, _ref, ref])}\n        flex={isFitted ? 1 : undefined}\n        {...tabProps}\n        {...marginalProps}\n      >\n        <Box\n          {...remainingProps}\n          {...(isHovered && _hover)}\n          style={[style, isSelected && _active, isDisabled && _disabled]}\n        >\n          {children}\n        </Box>\n      </Pressable>\n    </TabContext.Provider>\n  );\n};\n\nexport default React.memo(React.forwardRef(Tab));\n"
  },
  {
    "path": "src/components/composites/Tabs/TabBar.tsx",
    "content": "import React from 'react';\nimport Box from '../../primitives/Box';\nimport { TabsContext } from './Context';\nimport type { ITabsContextProps, ITabBarProps } from './types';\nimport { mergeRefs } from '../../../utils';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst TabBarImpl = (\n  { tablistRef, tabListProps, ...props }: ITabBarProps,\n  ref?: any\n) => {\n  const {\n    tabBarStyle,\n    align,\n    isFitted,\n    state,\n  }: ITabsContextProps = React.useContext(TabsContext);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <Box\n      flexDirection=\"row\"\n      width=\"100%\"\n      justifyContent={isFitted ? 'space-between' : align}\n      {...tabListProps}\n      {...tabBarStyle}\n      {...props}\n      ref={mergeRefs([ref, tablistRef])}\n    >\n      {[...state.collection].map((item) =>\n        React.cloneElement(item.rendered, { item, key: item.key })\n      )}\n    </Box>\n  );\n};\nconst TabBar = React.memo(React.forwardRef(TabBarImpl));\n\nTabBar.displayName = 'TabBar';\n\nexport default TabBar;\n"
  },
  {
    "path": "src/components/composites/Tabs/TabIcon.tsx",
    "content": "import React from 'react';\nimport { Icon, IIconProps } from '../../primitives/Icon';\nimport type { ITabsContextProps, ITabContextProps } from './types';\nimport { TabsContext } from './Context';\nimport { TabContext } from './Tab';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst TabIcon = (props: IIconProps, ref?: any) => {\n  const {\n    activeIconProps,\n    inactiveIconProps,\n  }: ITabsContextProps = React.useContext(TabsContext);\n  const { isSelected }: ITabContextProps = React.useContext(TabContext);\n  const iconProps = isSelected ? activeIconProps : inactiveIconProps;\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return <Icon {...iconProps} {...props} ref={ref} />;\n};\n\nexport default React.memo(React.forwardRef(TabIcon));\n"
  },
  {
    "path": "src/components/composites/Tabs/TabView.tsx",
    "content": "import React from 'react';\nimport Box from '../../primitives/Box';\nimport type { ITabViewProps } from './types';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst TabView = ({ children, ...props }: ITabViewProps, ref?: any) => {\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <Box p={3} {...props} ref={ref}>\n      {children}\n    </Box>\n  );\n};\n\nexport default React.memo(React.forwardRef(TabView));\n"
  },
  {
    "path": "src/components/composites/Tabs/TabViews.tsx",
    "content": "import React from 'react';\nimport Box from '../../primitives/Box';\nimport type { ITabViewsProps } from './types';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst TabViewsImpl = React.forwardRef(\n  ({ children, ...props }: ITabViewsProps, ref?: any) => {\n    //TODO: refactor for responsive prop\n    if (useHasResponsiveProps(props)) {\n      return null;\n    }\n    return (\n      <Box {...props} ref={ref}>\n        {children}\n      </Box>\n    );\n  }\n);\n\nconst TabViews = React.memo(TabViewsImpl);\nTabViews.displayName = 'TabViews';\n\nexport default TabViews;\n"
  },
  {
    "path": "src/components/composites/Tabs/Tabs.tsx",
    "content": "import React from 'react';\nimport Box from '../../primitives/Box';\nimport type { ITabsProps } from './types';\nimport { useThemeProps } from '../../../hooks';\nimport { TabsContext } from './Context';\nimport { Item } from '@react-stately/collections';\nimport { useTabsState } from '@react-stately/tabs';\nimport TabViews from './TabViews';\nimport TabBar from './TabBar';\nimport { useTabs } from '@react-native-aria/tabs';\nimport { mergeRefs } from '../../../utils';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nconst getTabsAndBars = (children: any) => {\n  let bars: any = [];\n  let views: any = [];\n  let items = React.Children.toArray(children);\n  let tabBarProps: any = { props: {}, ref: undefined };\n  let tabViewsProps = { props: {}, ref: undefined };\n  items.forEach((item: any) => {\n    if (item.type) {\n      if (item.type.displayName === 'TabBar') {\n        bars = bars.concat(item.props.children);\n        tabBarProps = { props: item.props, ref: item.ref };\n      } else if (item.type.displayName === 'TabViews') {\n        views = views.concat(item.props.children);\n        tabViewsProps = { props: item.props, ref: item.ref };\n      }\n    }\n  });\n  return { views, bars, tabViewsProps, tabBarProps };\n};\nconst convertToCollectionItems = (children: any) => {\n  const { views, bars } = getTabsAndBars(children);\n  return bars.map((bar: any, index: number) => {\n    let textValue;\n    if (bar.props.accessibilityLabel) {\n      textValue = bar.props.accessibilityLabel;\n    } else if (typeof bar.props.children === 'string') {\n      textValue = bar.props.children;\n    }\n    return (\n      <Item key={index} title={bar} textValue={textValue}>\n        {views[index]}\n      </Item>\n    );\n  });\n};\nconst Tabs = ({ children, ...props }: ITabsProps, ref: any) => {\n  const {\n    onChange,\n    activeTabStyle,\n    inactiveTabStyle,\n    activeIconProps,\n    inactiveIconProps,\n    tabBarStyle,\n    isFitted,\n    align,\n    ...newProps\n  } = useThemeProps('Tabs', props);\n  // useTabsState needs collection children.\n  const collectionChildren = convertToCollectionItems(children);\n  const { tabBarProps, tabViewsProps } = getTabsAndBars(children);\n  const mappedProps = {\n    children: collectionChildren,\n    defaultSelectedKey:\n      props.defaultIndex !== undefined\n        ? props.defaultIndex.toString()\n        : undefined,\n    selectedKey: props.index !== undefined ? props.index.toString() : undefined,\n    onSelectionChange: (e: any) => onChange && onChange(parseInt(e)),\n    keyboardActivation: props.keyboardActivation,\n  };\n  // useTabsState needs collection children.\n  let state = useTabsState(mappedProps);\n  const setAlign = () => {\n    switch (align) {\n      case 'start':\n        return 'flex-start';\n      case 'end':\n        return 'flex-end';\n      case 'center':\n        return 'center';\n      default:\n        return 'flex-start';\n    }\n  };\n  let tablistRef = React.useRef<any>();\n  let { tabListProps, tabPanelProps } = useTabs(mappedProps, state, tablistRef);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <TabsContext.Provider\n      value={{\n        activeTabStyle,\n        inactiveTabStyle,\n        activeIconProps,\n        inactiveIconProps,\n        tabBarStyle,\n        isFitted,\n        align: setAlign(),\n        state,\n      }}\n    >\n      <Box width=\"100%\" {...newProps} ref={ref}>\n        <TabBar\n          tabListProps={tabListProps}\n          {...tabBarProps.props}\n          tablistRef={mergeRefs([tablistRef, tabBarProps.ref])}\n        />\n        <TabViews\n          {...tabPanelProps}\n          {...tabViewsProps.props}\n          ref={tabViewsProps.ref}\n        >\n          {state.selectedItem && state.selectedItem.props.children}\n        </TabViews>\n      </Box>\n    </TabsContext.Provider>\n  );\n};\nexport default React.memo(React.forwardRef(Tabs));\n"
  },
  {
    "path": "src/components/composites/Tabs/index.tsx",
    "content": "import { default as TabsMain } from './Tabs';\nexport { TabsContext } from './Context';\nimport { default as TabBar } from './TabBar';\nimport { default as Tab } from './Tab';\nimport { default as TabViews } from './TabViews';\nimport { default as TabView } from './TabView';\nimport TabIcon from './TabIcon';\nimport type { ITabsComponentType } from './types';\n\nexport type {\n  ITabsProps,\n  ITabBarProps,\n  ITabProps,\n  ITabViewsProps,\n  ITabViewProps,\n  ITabsContextProps,\n} from './types';\n\nconst TabsTemp: any = TabsMain;\nTabsTemp.Bar = TabBar;\nTabsTemp.Tab = Tab;\nTabsTemp.Views = TabViews;\nTabsTemp.View = TabView;\nTabsTemp.Icon = TabIcon;\n\nconst Tabs = TabsTemp as ITabsComponentType;\nexport { Tabs };\n"
  },
  {
    "path": "src/components/composites/Tabs/types.tsx",
    "content": "import type { RefObject } from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { IBoxProps, InterfaceBoxProps } from '../../primitives/Box';\nimport type { InterfaceIconProps } from '../../primitives/Icon/types';\nimport type { ColorSchemeType } from '../../../components/types';\n\nexport type ITabsProps = InterfaceBoxProps<ITabsProps> & {\n  align?: 'center' | 'end' | 'start';\n  id?: string;\n  colorScheme?: ColorSchemeType;\n  index?: number;\n  defaultIndex?: number;\n  isFitted?: boolean;\n  isLazy?: boolean;\n  isManual?: boolean;\n  orientation?: 'horizontal' | 'vertical';\n  size?: 'sm' | 'md' | 'lg';\n  variant?: 'outline' | 'filled' | 'filled-outline';\n  onChange?: (index: number) => void;\n  keyboardActivation?: 'manual' | 'automatic';\n};\n\nexport type ITabBarProps = InterfaceBoxProps<ITabBarProps> & {\n  align?: 'center' | 'end' | 'start';\n  isFitted?: boolean;\n  size?: 'sm' | 'md' | 'lg';\n  tablistRef?: RefObject<any>;\n  tabListProps?: ViewProps;\n};\nexport type ITabProps = InterfaceBoxProps<ITabProps> & {\n  isDisabled?: boolean;\n  _active?: any;\n  _disabled?: any;\n  _hover?: any;\n  item?: any;\n};\n\nexport type ITabViewsProps = IBoxProps;\nexport type ITabViewProps = IBoxProps & {\n  index?: number;\n};\n\nexport type ITabsContextProps = {\n  activeIconProps?: any;\n  inactiveIconProps?: any;\n  activeTabStyle?: any;\n  inactiveTabStyle?: any;\n  tabBarStyle?: any;\n  isFitted?: boolean;\n  align?: 'start' | 'center' | 'end';\n  state?: any;\n};\nexport type ITabContextProps = {\n  isSelected?: boolean;\n};\n\nexport type ITabsComponentType = ((\n  props: ITabsProps & { ref?: any }\n) => JSX.Element) & {\n  Bar: React.MemoExoticComponent<\n    (props: ITabBarProps & { ref?: any }) => JSX.Element\n  >;\n  Tab: React.MemoExoticComponent<\n    (props: ITabProps & { ref?: any }) => JSX.Element\n  >;\n  Views: React.MemoExoticComponent<\n    (props: ITabViewsProps & { ref?: any }) => JSX.Element\n  >;\n  View: React.MemoExoticComponent<\n    (props: ITabViewProps & { ref?: any }) => JSX.Element\n  >;\n  Icon: React.MemoExoticComponent<\n    (props: InterfaceIconProps & { ref?: any }) => JSX.Element\n  >;\n};\n"
  },
  {
    "path": "src/components/composites/Tag/index.tsx",
    "content": "import React from 'react';\nimport Box from '../../primitives/Box';\nimport { useThemeProps } from '../../../hooks';\nimport type { IInputComponentType, ITagProps } from './types';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst Tag = ({ style, ...props }: ITagProps, ref: any) => {\n  let resolvedProps = useThemeProps('Tag', props);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return <Box style={style} {...resolvedProps} ref={ref} />;\n};\n\nexport default React.memo(React.forwardRef(Tag)) as IInputComponentType;\nexport type { ITagProps };\n"
  },
  {
    "path": "src/components/composites/Tag/types.ts",
    "content": "import type { CustomProps } from '../../../components/types';\nimport type { InterfaceBoxProps } from '../../primitives/Box';\nimport type { ColorSchemeType } from '../../../components/types';\n\nexport interface InterfaceTagProps extends InterfaceBoxProps<ITagProps> {\n  variant?: 'solid' | 'subtle' | 'outline';\n  colorScheme?: ColorSchemeType;\n  size?: string | number;\n}\n\nexport type IInputComponentType = (props: ITagProps) => JSX.Element;\n\nexport type ITagProps = InterfaceTagProps & CustomProps<'Tag'>;\n"
  },
  {
    "path": "src/components/composites/TextField/TextField.tsx",
    "content": "import React from 'react';\nimport { usePropsResolution } from '../../../hooks';\nimport type { ITextFieldProps } from './types';\nimport { Stack } from '../../primitives/Stack';\nimport { Input } from '../../primitives/Input';\nimport Text from '../../primitives/Text';\nimport { extractInObject, stylingProps } from '../../../theme/tools/utils';\nimport Select from '../../primitives/Select';\nimport TextArea from '../../primitives/TextArea';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst TextField = (mainProps: ITextFieldProps, ref?: any) => {\n  //TODO: Remove `any`\n  const {\n    children,\n    helperText,\n    errorMessage,\n    InputLeftElement,\n    InputRightElement,\n    dropdownIcon,\n    ...props\n  }: any = mainProps;\n\n  const {\n    divider,\n    _errorMessageProps,\n    _helperTextProps,\n    component,\n    ...resolvedProps\n  } = usePropsResolution('TextField', props);\n\n  const [layoutProps, componentProps] = extractInObject(resolvedProps, [\n    'space',\n    'reversed',\n    ...stylingProps.margin,\n    ...stylingProps.layout,\n    ...stylingProps.flexbox,\n    ...stylingProps.position,\n  ]);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  const activeComponent = () => {\n    switch (component) {\n      case 'select':\n        return (\n          <Select {...componentProps} dropdownIcon={dropdownIcon}>\n            {children}\n          </Select>\n        );\n      case 'textarea':\n        return <TextArea {...componentProps} ref={ref} />;\n      default:\n        return (\n          <Input\n            InputLeftElement={InputLeftElement}\n            InputRightElement={InputRightElement}\n            {...componentProps}\n            ref={ref}\n          />\n        );\n    }\n  };\n\n  return (\n    <Stack divider={divider} {...layoutProps}>\n      {activeComponent()}\n      {componentProps.isInvalid && (\n        <Text {..._errorMessageProps}>{errorMessage}</Text>\n      )}\n      {!componentProps.isInvalid && (\n        <Text {..._helperTextProps}>{helperText}</Text>\n      )}\n    </Stack>\n  );\n};\n\nexport default React.memo(React.forwardRef(TextField));\n"
  },
  {
    "path": "src/components/composites/TextField/index.tsx",
    "content": "export { default as TextField } from './TextField';\nexport type { ITextFieldProps } from './types';\n"
  },
  {
    "path": "src/components/composites/TextField/types.tsx",
    "content": "import type { IInputProps } from '../../primitives/Input';\nimport type { InterfaceStackProps } from '../../primitives/Stack/Stack';\nimport type { ISelectProps } from '../../primitives/Select';\nimport type { ITextAreaProps } from '../../primitives/TextArea';\nimport type { CustomProps } from '../../../components/types';\n\ntype componentsSpecificProps =\n  | ({ component?: 'input' } & IInputProps)\n  | ({ component?: 'textarea' } & ITextAreaProps)\n  | ({ component?: 'select' } & ISelectProps);\n\nexport type ITextFieldProps = (componentsSpecificProps &\n  InterfaceStackProps & {\n    helperText?: string;\n    errorMessage?: string;\n    _helperTextProps?: any;\n    _errorMessageProps?: any;\n  }) &\n  CustomProps<'TextField'>;\n"
  },
  {
    "path": "src/components/composites/Toast/Toast.tsx",
    "content": "import { Overlay } from '../../primitives/Overlay';\nimport { PresenceTransition } from '../Transitions';\nimport VStack from '../../primitives/Stack/VStack';\nimport React, {\n  createContext,\n  MutableRefObject,\n  useState,\n  useMemo,\n} from 'react';\nimport { AccessibilityInfo, Platform, SafeAreaView } from 'react-native';\nimport Box from '../../primitives/Box';\nimport { usePropsResolution } from '../../../hooks';\nimport type { IToastContext, IToastInfo, IToast, IToastProps } from './types';\nimport { useKeyboardBottomInset } from '../../../utils';\n\nconst INSET = 50;\n\nconst POSITIONS = {\n  'top': {\n    top: INSET,\n    left: 0,\n    right: 0,\n  },\n  'top-right': {\n    top: INSET,\n    right: 0,\n  },\n  'top-left': {\n    top: INSET,\n    left: 0,\n  },\n  'bottom': {\n    bottom: INSET,\n    left: 0,\n    right: 0,\n  },\n  'bottom-left': {\n    bottom: INSET,\n    left: 0,\n  },\n  'bottom-right': {\n    bottom: INSET,\n    right: 0,\n  },\n};\n\nconst initialAnimationOffset = 24;\n\nconst transitionConfig: any = {\n  'bottom': initialAnimationOffset,\n  'top': -initialAnimationOffset,\n  'top-right': -initialAnimationOffset,\n  'top-left': -initialAnimationOffset,\n  'bottom-left': initialAnimationOffset,\n  'bottom-right': initialAnimationOffset,\n};\n\nconst ToastContext = createContext<IToastContext>({\n  toastInfo: {},\n  setToastInfo: () => {},\n  setToast: () => {},\n  removeToast: () => {},\n  hideAll: () => {},\n  isActive: () => false,\n  visibleToasts: {},\n  setVisibleToasts: () => {},\n  hideToast: () => {},\n});\n\nconst CustomToast = ({ _overlay, _stack, _presenceTransition }: any) => {\n  const { toastInfo, visibleToasts, removeToast } = React.useContext(\n    ToastContext\n  );\n\n  const bottomInset = useKeyboardBottomInset() * 2;\n  const getPositions = () => {\n    return Object.keys(toastInfo);\n  };\n\n  let hasToastOnOverlay = false;\n  getPositions().map((position) => {\n    if (toastInfo[position]?.length > 0) hasToastOnOverlay = true;\n  });\n\n  return getPositions().length > 0 ? (\n    <Overlay\n      {..._overlay}\n      isOpen={hasToastOnOverlay}\n      isKeyboardDismissable={false}\n    >\n      {getPositions().map((position: string) => {\n        if (Object.keys(POSITIONS).includes(position))\n          return (\n            <VStack\n              {..._stack}\n              key={position}\n              // @ts-ignore\n              {...POSITIONS[position]}\n            >\n              {\n                // @ts-ignore\n                toastInfo[position].map((toast: IToast) => (\n                  <PresenceTransition\n                    {..._presenceTransition}\n                    key={toast.id}\n                    visible={visibleToasts[toast.id]}\n                    onTransitionComplete={(status: any) => {\n                      if (status === 'exited') {\n                        removeToast(toast.id);\n                        toast.config?.onCloseComplete &&\n                          toast.config?.onCloseComplete();\n                      }\n                    }}\n                    initial={{\n                      opacity: 0,\n                      translateY: transitionConfig[position],\n                    }}\n                  >\n                    <SafeAreaView>\n                      <Box\n                        bottom={\n                          ['bottom', 'bottom-left', 'bottom-right'].includes(\n                            position\n                          ) && toast.config?.avoidKeyboard\n                            ? bottomInset + 'px'\n                            : undefined\n                        }\n                      >\n                        {toast.component}\n                      </Box>\n                    </SafeAreaView>\n                  </PresenceTransition>\n                ))\n              }\n            </VStack>\n          );\n        else return null;\n      })}\n    </Overlay>\n  ) : null;\n};\n\nexport const ToastProvider = ({ children }: { children: any }) => {\n  const [toastInfo, setToastInfo] = useState<IToastInfo>({});\n  const [visibleToasts, setVisibleToasts] = useState<\n    {\n      [key in string]: boolean;\n    }\n  >({});\n\n  const [themeProps] = useState(usePropsResolution('Toast', {}));\n  const toastIndex = React.useRef(1);\n\n  const hideAll = React.useCallback(() => {\n    setVisibleToasts({});\n  }, [setVisibleToasts]);\n\n  const hideToast = React.useCallback(\n    (id: any) => {\n      setVisibleToasts((prevVisibleToasts) => ({\n        ...prevVisibleToasts,\n        [id]: false,\n      }));\n    },\n    [setVisibleToasts]\n  );\n\n  const isActive = React.useCallback(\n    (id: any) => {\n      for (const toastPosition of Object.keys(toastInfo)) {\n        const positionArray: Array<IToast> = toastInfo[toastPosition];\n        return positionArray.findIndex((toastData) => toastData.id === id) > -1;\n      }\n\n      return false;\n    },\n    [toastInfo]\n  );\n\n  const removeToast = React.useCallback(\n    (id: any) => {\n      setToastInfo((prev) => {\n        for (const toastPosition of Object.keys(prev)) {\n          const positionArray: Array<IToast> = prev[toastPosition];\n          const isToastPresent =\n            positionArray.findIndex((toastData) => toastData.id === id) > -1;\n\n          if (isToastPresent) {\n            const newPositionArray = positionArray.filter(\n              (item) => item.id !== id\n            );\n            const temp: any = {};\n            temp[toastPosition] = newPositionArray;\n\n            const newToastInfo = { ...prev, ...temp };\n            return newToastInfo;\n          }\n        }\n\n        return prev;\n      });\n    },\n    [setToastInfo]\n  );\n\n  const setToast = React.useCallback(\n    (props: IToastProps): number => {\n      const {\n        placement = 'bottom',\n        title,\n        render,\n        id = toastIndex.current++,\n        description,\n        duration = 5000,\n        _title,\n        _description,\n        accessibilityAnnouncement,\n        // @ts-ignore\n        avoidKeyboard = false, //eslint-disable-line\n        ...rest\n      } = props;\n\n      let positionToastArray = toastInfo[placement];\n      if (!positionToastArray) positionToastArray = [];\n\n      let component = null;\n\n      if (render) {\n        component = render({ id });\n      } else {\n        component = (\n          // Below VStack is the default component where all the direct props spread.\n          <VStack {...themeProps} {...rest}>\n            <Box _text={{ ...themeProps._title, ..._title }}>{title}</Box>\n            {description && (\n              <Box _text={{ ...themeProps._description, ..._description }}>\n                {description}\n              </Box>\n            )}\n          </VStack>\n        );\n      }\n\n      toastInfo[placement] = [\n        ...positionToastArray,\n        { component, id, config: props },\n      ];\n\n      setToastInfo({ ...toastInfo });\n\n      setVisibleToasts({ ...visibleToasts, [id]: true });\n      if (duration !== null) {\n        setTimeout(function () {\n          hideToast(id);\n        }, duration);\n      }\n\n      // iOS doesn't support accessibilityLiveRegion\n      if (accessibilityAnnouncement && Platform.OS === 'ios') {\n        AccessibilityInfo.announceForAccessibility(accessibilityAnnouncement);\n      }\n\n      return id;\n    },\n    [themeProps, toastInfo, visibleToasts, hideToast]\n  );\n\n  const contextValue = React.useMemo(() => {\n    return {\n      toastInfo,\n      setToastInfo,\n      setToast,\n      removeToast,\n      hideAll,\n      isActive,\n      visibleToasts,\n      setVisibleToasts,\n      hideToast,\n    };\n  }, [\n    toastInfo,\n    setToastInfo,\n    setToast,\n    removeToast,\n    hideAll,\n    isActive,\n    visibleToasts,\n    setVisibleToasts,\n    hideToast,\n  ]);\n\n  return (\n    <ToastContext.Provider value={contextValue}>\n      {children}\n      <CustomToast\n        _overlay={themeProps._overlay}\n        _stack={themeProps._stack}\n        _presenceTransition={themeProps._presenceTransition}\n      />\n    </ToastContext.Provider>\n  );\n};\n\nexport const useToast = () => {\n  const { setToast, hideAll, isActive, hideToast } = React.useContext(\n    ToastContext\n  );\n\n  const toast = useMemo(\n    () => ({\n      show: setToast,\n      close: hideToast,\n      closeAll: hideAll,\n      isActive,\n    }),\n    [setToast, hideAll, isActive, hideToast]\n  );\n\n  return toast;\n};\n\nexport type IToastService = ReturnType<typeof useToast>;\n\nexport const ToastRef = React.createRef<IToastService>() as MutableRefObject<IToastService>;\n\nexport const Toast: IToastService = {\n  show: (props: IToastProps) => ToastRef.current?.show(props),\n  close: (id: any) => ToastRef.current?.close(id),\n  closeAll: () => ToastRef.current?.closeAll(),\n  isActive: (id: any) => ToastRef.current?.isActive(id),\n};\n"
  },
  {
    "path": "src/components/composites/Toast/ToastDummy.tsx",
    "content": "// This component is just exported for the documentation purpose\nimport type { IToastProps } from './types';\n\nexport const Toast = (props: IToastProps) => {\n  props; // no-op\n};\n"
  },
  {
    "path": "src/components/composites/Toast/index.ts",
    "content": "export * from './Toast';\nexport * from './types';\n"
  },
  {
    "path": "src/components/composites/Toast/types.ts",
    "content": "import type { ReactNode } from 'react';\nimport type { ITextProps } from '../../primitives/Text';\nimport type { InterfaceBoxProps } from '../../primitives/Box';\nimport type { CustomProps } from '../../../components/types';\n\nexport interface InterfaceToastProps extends InterfaceBoxProps<IToastProps> {\n  /**\n   * The title to be rendered in the Toast\n   */\n  title?: ReactNode;\n  /**\n   * The description of the toast\n   */\n  description?: ReactNode;\n  /**\n   * The delay before the toast hides (in milliseconds). If set to `null`, toast will never dismiss.\n   * @default 5000\n   */\n  duration?: number | null;\n  /**\n   * The `id` of the toast. Mostly used when you need to prevent duplicate. By default, we generate a unique `id` for each toast\n   */\n  id?: any;\n  /**\n   * Callback function to run side effects after the toast has closed.\n   */\n  onCloseComplete?: () => void;\n  /**\n   * The placement of the toast. Defaults to bottom\n   * @default bottom\n   */\n  placement?:\n    | 'top'\n    | 'top-right'\n    | 'top-left'\n    | 'bottom'\n    | 'bottom-left'\n    | 'bottom-right';\n  /**\n   * Render a component toast component. Any component passed will receive 2 props: `id` and `onClose`.\n   */\n  render?: (props: any) => ReactNode;\n  /**\n   * For providing props to Title inside Toast\n   */\n  _title?: Partial<ITextProps>;\n  /**\n   * For providing props to Description inside Toast\n   */\n  _description?: Partial<ITextProps>;\n  /**\n   * The text to be announced by a screen reader when the Toast opens.\n   */\n  accessibilityAnnouncement?: string;\n  /**\n   * Determines the [accessibility announcement tone](https://reactnative.dev/docs/accessibility#accessibilityliveregion-android).\n   */\n  accessibilityLiveRegion?: 'none' | 'polite' | 'assertive';\n  /**\n   * If true and the keyboard is opened, the Toast will move up equivalent to the keyboard height.\n   * @default false\n   */\n  avoidKeyboard?: boolean;\n}\n\nexport type IToast = {\n  id: number;\n  component: any;\n  config?: IToastProps;\n};\n\nexport type IToastInfo = {\n  [key in any]: Array<IToast>;\n};\n\nexport type IToastContext = {\n  toastInfo: IToastInfo;\n  setToastInfo: any;\n  setToast: (props: IToastProps) => any;\n  removeToast: (id: any) => void;\n  hideAll: () => void;\n  isActive: (id: any) => boolean;\n  visibleToasts: any;\n  setVisibleToasts: any;\n  hideToast: (id: any) => void;\n};\n\nexport type IToastProps = InterfaceToastProps & CustomProps<'Toast'>;\n"
  },
  {
    "path": "src/components/composites/Toast/utils.ts",
    "content": "let INSET = 0;\nexport const POSITIONS = {\n  'bottom': {\n    bottom: INSET,\n    left: 0,\n    right: 0,\n  },\n  'top': {\n    top: INSET,\n    left: 0,\n    right: 0,\n  },\n  'top-right': {\n    top: INSET,\n    right: INSET,\n  },\n  'top-left': {\n    top: INSET,\n    left: INSET,\n  },\n  'bottom-left': {\n    bottom: INSET,\n    left: INSET,\n  },\n  'bottom-right': {\n    bottom: INSET,\n    right: INSET,\n  },\n};\n"
  },
  {
    "path": "src/components/composites/Tooltip/Tooltip.tsx",
    "content": "import { OverlayContainer } from '@react-native-aria/overlays';\nimport React from 'react';\nimport { useControllableState, useKeyboardDismissable } from '../../../hooks';\nimport { Popper } from '../Popper';\nimport { composeEventHandlers, mergeRefs } from '../../../utils';\nimport { PresenceTransition } from '../Transitions';\nimport { Platform, StyleSheet } from 'react-native';\nimport { usePropsResolution } from '../../../hooks';\nimport Box from '../../primitives/Box';\nimport type { ITooltipProps } from './types';\nimport { useId } from '@react-native-aria/utils';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nimport uniqueId from 'lodash.uniqueid';\nimport { ResponsiveQueryContext } from '../../../utils/useResponsiveQuery/ResponsiveQueryProvider';\n\nexport const Tooltip = ({\n  label,\n  children,\n  onClose,\n  onOpen,\n  defaultIsOpen,\n  placement,\n  openDelay = 0,\n  closeDelay = 0,\n  closeOnClick = true,\n  offset,\n  isDisabled,\n  hasArrow,\n  arrowSize = 12,\n  isOpen: isOpenProp,\n  ...props\n}: ITooltipProps) => {\n  if (hasArrow && offset === undefined) {\n    offset = 0;\n  } else {\n    offset = 6;\n  }\n\n  const resolvedProps = usePropsResolution('Tooltip', props);\n  const [isOpen, setIsOpen] = useControllableState({\n    value: isOpenProp,\n    defaultValue: defaultIsOpen,\n    onChange: (value) => {\n      value ? onOpen && onOpen() : onClose && onClose();\n    },\n  });\n\n  const arrowBg =\n    props.backgroundColor ?? props.bgColor ?? props.bg ?? resolvedProps.bg;\n\n  const targetRef = React.useRef(null);\n\n  const enterTimeout = React.useRef<any>();\n  const exitTimeout = React.useRef<any>();\n  // const tooltipID = '';\n  // const tooltipID = useId();\n\n  let tooltipID = uniqueId();\n\n  // let id = uniqueId();\n  const responsiveQueryContext = React.useContext(ResponsiveQueryContext);\n  const disableCSSMediaQueries = responsiveQueryContext.disableCSSMediaQueries;\n\n  if (!disableCSSMediaQueries) {\n    // This if statement technically breaks the rules of hooks, but is safe\n    // because the condition never changes after mounting.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    tooltipID = useId();\n  }\n\n  const openWithDelay = React.useCallback(() => {\n    if (!isDisabled) {\n      enterTimeout.current = setTimeout(() => setIsOpen(true), openDelay);\n    }\n  }, [isDisabled, setIsOpen, openDelay]);\n\n  const closeWithDelay = React.useCallback(() => {\n    if (enterTimeout.current) {\n      clearTimeout(enterTimeout.current);\n    }\n    exitTimeout.current = setTimeout(() => setIsOpen(false), closeDelay);\n  }, [closeDelay, setIsOpen]);\n\n  React.useEffect(\n    () => () => {\n      clearTimeout(enterTimeout.current);\n      clearTimeout(exitTimeout.current);\n    },\n    []\n  );\n\n  let newChildren = children;\n\n  if (typeof children === 'string') {\n    newChildren = <Box>{children}</Box>;\n  }\n\n  newChildren = React.cloneElement(newChildren, {\n    'onPress': composeEventHandlers<any>(newChildren.props.onPress, () => {\n      if (closeOnClick) {\n        closeWithDelay();\n      }\n    }),\n    'onFocus': composeEventHandlers<any>(\n      newChildren.props.onFocus,\n      openWithDelay\n    ),\n    'onBlur': composeEventHandlers<any>(\n      newChildren.props.onBlur,\n      closeWithDelay\n    ),\n    'onMouseEnter': composeEventHandlers<any>(\n      newChildren.props.onMouseEnter,\n      openWithDelay\n    ),\n    'onMouseLeave': composeEventHandlers<any>(\n      newChildren.props.onMouseLeave,\n      closeWithDelay\n    ),\n    'ref': mergeRefs([newChildren.ref, targetRef]),\n\n    'aria-describedby': isOpen ? tooltipID : undefined,\n  });\n\n  useKeyboardDismissable({\n    enabled: isOpen,\n    callback: () => setIsOpen(false),\n  });\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <>\n      {newChildren}\n      {isOpen && (\n        <OverlayContainer>\n          <PresenceTransition\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1, transition: { duration: 150 } }}\n            exit={{ opacity: 0, transition: { duration: 100 } }}\n            visible={isOpen}\n            style={StyleSheet.absoluteFill}\n          >\n            <Popper\n              triggerRef={targetRef}\n              onClose={() => setIsOpen(false)}\n              placement={placement}\n              offset={offset}\n            >\n              <Popper.Content isOpen={isOpen}>\n                {hasArrow && (\n                  <Popper.Arrow\n                    borderColor=\"transparent\"\n                    backgroundColor={arrowBg}\n                    height={arrowSize}\n                    width={arrowSize}\n                  />\n                )}\n                <Box\n                  {...resolvedProps}\n                  //@ts-ignore\n                  accessibilityRole={\n                    Platform.OS === 'web' ? 'tooltip' : undefined\n                  }\n                  nativeID={tooltipID}\n                >\n                  {label}\n                </Box>\n              </Popper.Content>\n            </Popper>\n          </PresenceTransition>\n        </OverlayContainer>\n      )}\n    </>\n  );\n};\n"
  },
  {
    "path": "src/components/composites/Tooltip/index.ts",
    "content": "export { Tooltip } from './Tooltip';\nexport type { ITooltipProps } from './types';\n"
  },
  {
    "path": "src/components/composites/Tooltip/types.ts",
    "content": "import type { CustomProps } from '../../../components/types';\nimport type { InterfaceBoxProps } from '../../primitives/Box';\n\nexport interface InterfaceTooltipProps\n  extends InterfaceBoxProps<ITooltipProps> {\n  /**\n   * Text to be placed in the tooltip\n   */\n  label: string;\n  /**\n   * Whether the tooltip is opened. Useful for conrolling the open state\n   */\n  isOpen?: boolean;\n  /**\n   * Whether the tooltip is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * If true, the popover will be opened by default\n   */\n  defaultIsOpen?: boolean;\n  /**\n   * This function will be invoked when tooltip is closed. It'll also be called when user attempts to close the tooltip via Escape key\n   */\n  onClose?: () => void;\n  /**\n   * This function will be invoked when tooltip is opened\n   */\n  onOpen?: () => void;\n  /**\n   * Duration in ms to wait till displaying the tooltip\n   * @default 0\n   */\n  openDelay?: number;\n  /**\n   * Duration in ms to wait till hiding the tooltip\n   * @default 0\n   */\n  closeDelay?: number;\n  /**\n   * Tooltip placement\n   * @default bottom\n   */\n  placement?:\n    | 'top'\n    | 'bottom'\n    | 'left'\n    | 'right'\n    | 'top left'\n    | 'top right'\n    | 'bottom left'\n    | 'bottom right'\n    | 'right top'\n    | 'right bottom'\n    | 'left top'\n    | 'left bottom';\n  /**\n   * Children passed will be used as Trigger element for the tooltip\n   */\n  children: any;\n  /**\n   * Whether tooltip should be closed on Trigger click\n   * @default true\n   */\n  closeOnClick?: boolean;\n  /**\n   * Size of the arrow\n   * @default 12\n   */\n  arrowSize?: number;\n  /**\n   * Whether tooltip should display arrow\n   * @default false\n   */\n  hasArrow?: boolean;\n  /**\n   * Distance between the trigger and the tooltip\n   */\n  offset?: number;\n}\n\nexport type ITooltipProps = InterfaceTooltipProps & CustomProps<'Tooltip'>;\n"
  },
  {
    "path": "src/components/composites/Transitions/Fade.tsx",
    "content": "import React from 'react';\nimport PresenceTransition from '../Transitions/PresenceTransition';\nimport type { IFadeProps } from './types';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nimport { usePropsResolution } from '../../../hooks/';\n\nconst Fade = ({ children, ...props }: IFadeProps, ref?: any) => {\n  const {\n    in: animationState,\n    entryDuration,\n    exitDuration,\n    ...resolvedProps\n  } = usePropsResolution('Fade', props);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n\n  if (entryDuration) {\n    resolvedProps.animate.transition.duration = entryDuration;\n  }\n  if (exitDuration) {\n    resolvedProps.exit.transition.duration = exitDuration;\n  }\n\n  return (\n    <PresenceTransition visible={animationState} ref={ref} {...resolvedProps}>\n      {children}\n    </PresenceTransition>\n  );\n};\n\nexport default React.memo(React.forwardRef(Fade));\n"
  },
  {
    "path": "src/components/composites/Transitions/PresenceTransition.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport { ExitAnimationContext } from '../../primitives/Overlay/ExitAnimationContext';\nimport { Transition } from './Transition';\nimport type { IPresenceTransitionProps } from './types';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst PresenceTransition = (\n  { visible = false, onTransitionComplete, ...rest }: IPresenceTransitionProps,\n  ref: any\n) => {\n  // const [animationExited, setAnimationExited] = React.useState(!visible);\n\n  const { setExited } = React.useContext(ExitAnimationContext);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(rest)) {\n    return null;\n  }\n\n  return (\n    <Transition\n      visible={visible}\n      onTransitionComplete={(state) => {\n        if (state === 'exited') {\n          setExited(true);\n        } else {\n          setExited(false);\n        }\n        onTransitionComplete && onTransitionComplete(state);\n      }}\n      {...rest}\n      ref={ref}\n    />\n  );\n};\n\nexport default memo(forwardRef(PresenceTransition));\n"
  },
  {
    "path": "src/components/composites/Transitions/ScaleFade.tsx",
    "content": "import React from 'react';\nimport type { IScaleFadeProps } from './types';\nimport PresenceTransition from './PresenceTransition';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nimport { usePropsResolution } from '../../../hooks/';\n\nconst ScaleFade = ({ children, ...props }: IScaleFadeProps, ref?: any) => {\n  const {\n    in: animationState,\n    duration,\n    initialScale,\n    ...resolvedProps\n  } = usePropsResolution('ScaleFade', props);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  if (duration) {\n    resolvedProps.animate.transition.duration = duration;\n    resolvedProps.exit.transition.duration = duration;\n  }\n  if (initialScale) {\n    resolvedProps.animate.initial.scale = initialScale;\n    resolvedProps.exit.initial.scale = initialScale;\n  }\n\n  return (\n    <PresenceTransition visible={animationState} {...resolvedProps} ref={ref}>\n      {children}\n    </PresenceTransition>\n  );\n};\n\nexport default React.memo(React.forwardRef(ScaleFade));\n"
  },
  {
    "path": "src/components/composites/Transitions/Slide.tsx",
    "content": "import React, { forwardRef, memo } from 'react';\nimport Box from '../../primitives/Box';\nimport type { ISlideProps } from './types';\nimport PresenceTransition from './PresenceTransition';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nimport { Overlay } from '../../primitives/Overlay';\nimport { usePropsResolution } from '../../../hooks/';\n\nconst holderStyle: any = {\n  top: {\n    top: 0,\n    right: 0,\n    left: 0,\n  },\n  right: {\n    right: 0,\n    top: 0,\n    bottom: 0,\n  },\n  bottom: {\n    bottom: 0,\n    right: 0,\n    left: 0,\n  },\n  left: {\n    left: 0,\n    bottom: 0,\n    top: 0,\n  },\n};\n\nexport const Slide = memo(\n  forwardRef(({ children, ...props }: ISlideProps, ref: any) => {\n    const {\n      in: visible,\n      placement,\n      overlay,\n      duration,\n      _overlay,\n      ...resolvedProps\n    } = usePropsResolution('Slide', props);\n    const [containerOpacity, setContainerOpacity] = React.useState(0);\n    const [size, setSize] = React.useState(0);\n    const provideSize = (layoutSize: any) => {\n      if (placement === 'right' || placement === 'left')\n        setSize(layoutSize.width);\n      else setSize(layoutSize.height);\n      setContainerOpacity(1);\n    };\n\n    const transition = { duration };\n\n    const animationStyle: any = {\n      top: {\n        initial: {\n          translateY: -size,\n        },\n        animate: {\n          translateY: 0,\n          transition,\n        },\n      },\n      bottom: {\n        initial: {\n          translateY: size,\n        },\n        animate: {\n          translateY: 0,\n          transition,\n        },\n        exit: {\n          translateY: size,\n          transition,\n        },\n      },\n      left: {\n        initial: {\n          translateX: -size,\n        },\n        animate: {\n          translateX: 0,\n          transition,\n        },\n      },\n      right: {\n        initial: {\n          translateX: size,\n        },\n        animate: {\n          translateX: 0,\n          transition,\n        },\n      },\n    };\n\n    //TODO: refactor for responsive prop\n    if (useHasResponsiveProps(props)) {\n      return null;\n    }\n\n    const slideComponent = (\n      <PresenceTransition\n        visible={visible}\n        {...animationStyle[placement]}\n        style={[\n          { position: 'absolute' },\n          holderStyle[placement],\n          { height: '100%' },\n        ]}\n      >\n        <Box\n          {...resolvedProps}\n          opacity={containerOpacity}\n          ref={ref}\n          onLayout={(e) => provideSize(e.nativeEvent.layout)}\n        >\n          {children}\n        </Box>\n      </PresenceTransition>\n    );\n\n    if (overlay) {\n      return (\n        <>\n          <Overlay isKeyboardDismissable={false} {..._overlay}>\n            {slideComponent}\n          </Overlay>\n        </>\n      );\n    } else {\n      return slideComponent;\n    }\n  })\n);\n\nexport default Slide;\n"
  },
  {
    "path": "src/components/composites/Transitions/SlideFade.tsx",
    "content": "import React from 'react';\nimport Box from '../../primitives/Box';\nimport { useThemeProps } from '../../../hooks/useThemeProps';\nimport { Animated, Platform } from 'react-native';\nimport type { ISlideFadeProps } from './types';\nimport { canUseDom } from '../../../utils';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst SlideFade = ({ children, ...props }: ISlideFadeProps, ref?: any) => {\n  const isDomUsable = canUseDom();\n\n  const { in: animationState, duration, offsetX, offsetY } = useThemeProps(\n    'SlideFade',\n    props\n  );\n  const fadeAnim = React.useRef(new Animated.Value(0)).current;\n  const slideAnimX = React.useRef(new Animated.Value(0)).current;\n  const slideAnimY = React.useRef(new Animated.Value(0)).current;\n\n  const animIn = () => {\n    if (isDomUsable) {\n      Animated.timing(fadeAnim, {\n        toValue: 1,\n        duration: duration,\n        useNativeDriver: Platform.OS !== 'web',\n      }).start();\n      Animated.timing(slideAnimX, {\n        toValue: 0,\n        duration: duration,\n        useNativeDriver: Platform.OS !== 'web',\n      }).start();\n      Animated.timing(slideAnimY, {\n        toValue: 0,\n        duration: duration,\n        useNativeDriver: Platform.OS !== 'web',\n      }).start();\n    }\n  };\n  const animOut = () => {\n    if (isDomUsable) {\n      Animated.timing(fadeAnim, {\n        toValue: 0,\n        duration: duration,\n        useNativeDriver: Platform.OS !== 'web',\n      }).start();\n      offsetX &&\n        Animated.timing(slideAnimX, {\n          toValue: offsetX,\n          duration: duration,\n          useNativeDriver: Platform.OS !== 'web',\n        }).start();\n      offsetY &&\n        Animated.timing(slideAnimY, {\n          toValue: offsetY,\n          duration: duration,\n          useNativeDriver: Platform.OS !== 'web',\n        }).start();\n    }\n  };\n  animationState ? animIn() : animOut();\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n\n  return (\n    <Animated.View\n      style={[\n        {\n          opacity: fadeAnim,\n          transform: [{ translateX: slideAnimX, translateY: slideAnimY }],\n        },\n      ]}\n      ref={ref}\n    >\n      <Box {...props}>{children}</Box>\n    </Animated.View>\n  );\n};\n\nexport default React.memo(React.forwardRef(SlideFade));\n"
  },
  {
    "path": "src/components/composites/Transitions/Stagger.tsx",
    "content": "import cloneDeep from 'lodash.clonedeep';\nimport React from 'react';\nimport PresenceTransition from './PresenceTransition';\nimport type { ISupportedTransitions, ITransitionConfig } from './types';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\ninterface IStaggerConfig {\n  offset: number;\n  reverse?: boolean;\n}\n\nexport interface IStaggerStyleProps extends ISupportedTransitions {\n  transition?: ITransitionConfig & { stagger?: IStaggerConfig };\n}\n\ninterface IStaggerProps {\n  children: any;\n  /**\n   * Initial styles before the transition starts\n   */\n  initial?: ISupportedTransitions;\n  /**\n   * The styles to which each child should animate to while entering.\n   */\n  animate?: IStaggerStyleProps;\n  /**\n   * The styles to which each child should animate to while exiting.\n   */\n  exit?: IStaggerStyleProps;\n  /**\n   * Determines whether to start the animation\n   */\n  visible?: boolean;\n}\n\nconst defaultStaggerConfig: IStaggerConfig = { offset: 0, reverse: false };\n\nconst Stagger = ({ children, ...restProps }: IStaggerProps) => {\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(restProps)) {\n    return null;\n  }\n  return React.Children.map(children, (child, index) => {\n    const clonedAnimationConfig = cloneDeep(restProps);\n    const { animate, exit } = clonedAnimationConfig;\n\n    if (animate) {\n      if (!animate.transition) {\n        animate.transition = {};\n      }\n      animate.transition.delay = animate.transition.delay ?? 0;\n      const stagger = animate.transition.stagger ?? defaultStaggerConfig;\n      const offset = stagger.reverse\n        ? (React.Children.count(children) - 1 - index) * stagger.offset\n        : index * stagger.offset;\n      animate.transition.delay = animate.transition.delay + offset;\n    }\n\n    if (exit) {\n      if (!exit.transition) {\n        exit.transition = {};\n      }\n      exit.transition.delay = exit.transition.delay ?? 0;\n      const stagger = exit.transition.stagger ?? defaultStaggerConfig;\n      const offset = stagger.reverse\n        ? (React.Children.count(children) - 1 - index) * stagger.offset\n        : index * stagger.offset;\n      exit.transition.delay = exit.transition.delay + offset;\n    }\n\n    return (\n      <PresenceTransition key={child.key} {...clonedAnimationConfig}>\n        {child}\n      </PresenceTransition>\n    );\n  });\n};\n\nexport default Stagger;\n"
  },
  {
    "path": "src/components/composites/Transitions/Transition.tsx",
    "content": "/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { forwardRef } from 'react';\nimport { Animated } from 'react-native';\nimport type {\n  ISupportedTransitions,\n  ITransitionConfig,\n  ITransitionProps,\n} from './types';\n\nconst transformStylesMap = {\n  translateY: true,\n  translateX: true,\n  scale: true,\n  scaleX: true,\n  scaleY: true,\n  rotate: true,\n};\n\nconst defaultStyles = {\n  opacity: 1,\n  translateY: 0,\n  translateX: 0,\n  scale: 1,\n  scaleX: 1,\n  scaleY: 1,\n  rotate: '0deg',\n};\n\nconst getAnimatedStyles = (animateValue: any) => (\n  initial: ISupportedTransitions,\n  to: ISupportedTransitions\n) => {\n  const styles: any = {\n    transform: [],\n  };\n  for (let key in initial) {\n    if (key === 'transition') {\n      continue;\n    }\n\n    if (key in transformStylesMap) {\n      styles.transform?.push({\n        [key]: animateValue.interpolate({\n          inputRange: [0, 1],\n          outputRange: [(initial as any)[key], (to as any)[key]],\n        }),\n      } as any);\n    } else {\n      styles[key] = animateValue.interpolate({\n        inputRange: [0, 1],\n        outputRange: [(initial as any)[key], (to as any)[key]],\n      });\n    }\n  }\n\n  return styles;\n};\n\nconst defaultTransitionConfig: ITransitionConfig = {\n  type: 'timing',\n  useNativeDriver: true,\n  duration: 250,\n  delay: 0,\n};\n\nexport const Transition = forwardRef(\n  (\n    {\n      children,\n      onTransitionComplete,\n      visible = false,\n      initial,\n      animate,\n      exit,\n      style,\n      as,\n      ...rest\n    }: ITransitionProps,\n    ref: any\n  ) => {\n    const animateValue = React.useRef(new Animated.Value(0)).current;\n\n    const Component = React.useMemo(() => {\n      if (as) {\n        return Animated.createAnimatedComponent(as);\n      }\n      return Animated.View;\n    }, [as]);\n\n    const [animationState, setAnimationState] = React.useState('');\n\n    const prevVisible = React.useRef(visible);\n\n    React.useEffect(() => {\n      if (animationState === 'entering' || animationState === 'exiting') {\n        const entryTransition = {\n          ...defaultTransitionConfig,\n          ...animate?.transition,\n        };\n        const exitTransition = {\n          ...defaultTransitionConfig,\n          ...exit?.transition,\n        };\n\n        const startAnimation = animationState === 'entering' ? 1 : 0;\n\n        const transition = startAnimation ? entryTransition : exitTransition;\n\n        Animated.sequence([\n          // @ts-ignore - delay is present in defaultTransitionConfig\n          Animated.delay(transition.delay),\n          Animated[transition.type ?? 'timing'](animateValue, {\n            toValue: startAnimation,\n            useNativeDriver: true,\n            ...transition,\n          }),\n        ]).start(() => {\n          if (animationState === 'entering') {\n            setAnimationState('entered');\n          } else if (animationState === 'exiting') {\n            setAnimationState('exited');\n          }\n        });\n        // });\n      }\n\n      if (animationState === 'exited') {\n        onTransitionComplete && onTransitionComplete('exited');\n      } else if (animationState === 'entered') {\n        onTransitionComplete && onTransitionComplete('entered');\n      }\n      // if (animationState === 'entering') {\n      //   //\n      // }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [animationState, onTransitionComplete]);\n\n    React.useEffect(() => {\n      // if (!visible) {\n      if (prevVisible.current !== visible && !visible) {\n        setAnimationState('exiting');\n      }\n\n      if (visible) {\n        setAnimationState('entering');\n      }\n      prevVisible.current = visible;\n      // }\n    }, [visible]);\n\n    // If exit animation is present and state is exiting, we replace 'initial' with 'exit' animation\n\n    //  const initialState = { ...defaultStyles, ...initial };\n    const initialState =\n      animationState === 'exited' && exit\n        ? { ...defaultStyles, ...exit }\n        : { ...defaultStyles, ...initial };\n    // const initialState = { ...defaultStyles, ...initial };\n\n    // initial =\n    //   animationState === 'exited'\n    //     ? { ...defaultStyles, ...exit }\n    //     : { ...defaultStyles, ...initial };\n\n    const animateState = { ...defaultStyles, ...animate };\n\n    // const [initialState, setInitialState] = React.useState({\n    //   ...defaultStyles,\n    //   ...initial,\n    // });\n    // console.log('Initial state ', initial);\n\n    // const [animateState] = React.useState({ ...defaultStyles, ...animate });\n    const styles = React.useMemo(() => {\n      // console.log('display state here', initial);\n      return [\n        getAnimatedStyles(animateValue)(\n          initialState as ISupportedTransitions,\n          animateState as ISupportedTransitions\n        ),\n        style,\n      ];\n    }, [animateValue, initial, animate, style]);\n\n    return (\n      <Component\n        // pointerEvents=\"box-none\"\n        pointerEvents={!visible ? 'none' : 'box-none'}\n        // https://github.com/facebook/react-native/issues/23090#issuecomment-710803743\n        // needsOffscreenAlphaCompositing\n        // style={[styles]}\n        style={[styles]}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"
  },
  {
    "path": "src/components/composites/Transitions/index.tsx",
    "content": "export { default as Fade } from './Fade';\nexport { default as ScaleFade } from './ScaleFade';\nexport { default as Slide } from './Slide';\nexport { default as SlideFade } from './SlideFade';\nexport { default as Stagger } from './Stagger';\nexport { default as PresenceTransition } from './PresenceTransition';\nexport type {\n  IFadeProps,\n  IScaleFadeProps,\n  ISlideProps,\n  ISlideFadeProps,\n} from './types';\n"
  },
  {
    "path": "src/components/composites/Transitions/types.tsx",
    "content": "import type { ReactNode } from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { CustomProps } from '../../../components/types';\nimport type { InterfaceBoxProps } from '../../primitives/Box';\nimport type { IOverlayProps } from '../../primitives/Overlay';\nexport type IFadeProps = InterfaceBoxProps<IFadeProps> & {\n  in?: boolean;\n  entryDuration?: number;\n  exitDuration?: number;\n  delay?: number;\n  initial?: ISupportedTransitions;\n  animate?: ITransitionStyleProps;\n  exit?: ITransitionStyleProps;\n};\nexport type IScaleFadeProps = InterfaceBoxProps<IScaleFadeProps> & {\n  in?: boolean;\n  duration?: number;\n  delay?: number;\n  initialScale?: number;\n  initial?: ISupportedTransitions;\n  animate?: ITransitionStyleProps;\n  exit?: ITransitionStyleProps;\n};\nexport type ISlideProps = InterfaceBoxProps<ISlideProps> & {\n  in?: boolean;\n  duration?: number;\n  delay?: number;\n  placement?: 'top' | 'bottom' | 'right' | 'left';\n  overlay?: boolean;\n  /**\n   * Props to be passed to the Overlay used inside of Slide when overlay is true.\n   */\n  _overlay?: IOverlayProps;\n};\nexport type ISlideFadeProps = InterfaceBoxProps<ISlideFadeProps> & {\n  in?: boolean;\n  delay?: number;\n  duration?: number;\n  offsetX?: number;\n  offsetY?: number;\n} & CustomProps<'Slide'>;\n\nexport interface ISupportedTransitions {\n  opacity?: number;\n  translateY?: number;\n  translateX?: number;\n  scale?: number;\n  scaleX?: number;\n  scaleY?: number;\n  rotate?: string;\n}\n\nexport interface ITransitionConfig {\n  type?: 'timing' | 'spring';\n  easing?: (value: number) => number;\n  overshootClamping?: boolean;\n  restDisplacementThreshold?: number;\n  restSpeedThreshold?: number;\n  velocity?: number | { x: number; y: number };\n  bounciness?: number;\n  speed?: number;\n  tension?: number;\n  friction?: number;\n  stiffness?: number;\n  mass?: number;\n  damping?: number;\n  delay?: number;\n  duration?: number;\n  useNativeDriver?: boolean;\n}\n\nexport interface ITransitionStyleProps extends ISupportedTransitions {\n  transition?: ITransitionConfig;\n}\nexport interface ITransitionProps extends ViewProps {\n  /**\n   * Callback invoked when the transition is completed.\n   */\n  onTransitionComplete?: (s: 'entered' | 'exited') => any;\n  /**\n   * Styles before the transition starts\n   */\n  initial?: ISupportedTransitions;\n  /**\n   * Entry animation styles\n   */\n  animate?: ITransitionStyleProps;\n  /**\n   * Exit animation styles\n   */\n  exit?: ITransitionStyleProps;\n  /**\n   * Determines whether to start the animation\n   */\n  visible?: boolean;\n\n  animationExited?: boolean;\n  children?: any;\n  as?: any;\n}\n\nexport interface IPresenceTransitionProps extends ViewProps {\n  /**\n   * Callback invoked when the transition is completed.\n   */\n  onTransitionComplete?: (s: 'entered' | 'exited') => any;\n  /**\n   * Styles before the transition starts.\n   */\n  initial?: ISupportedTransitions;\n  /**\n   * Entry animation styles.\n   */\n  animate?: ITransitionStyleProps;\n  /**\n   * Exit animation styles.\n   */\n  exit?: ITransitionStyleProps;\n  /**\n   * Determines whether to start the animation.\n   */\n  visible?: boolean;\n  children?: ReactNode;\n  /**\n   * Accepts a Component to be rendered as Wrapper. Defaults to `View`.\n   */\n  as?: ReactNode;\n}\n"
  },
  {
    "path": "src/components/composites/Typeahead/Typeahead.tsx",
    "content": "import React from 'react';\nimport { useButton } from '@react-native-aria/button';\nimport { ComboBoxState, useComboBoxState } from '@react-stately/combobox';\nimport { useComboBox } from '@react-native-aria/combobox';\nimport { useListBox, useOption } from '@react-native-aria/listbox';\nimport { ScrollView, findNodeHandle, Platform } from 'react-native';\nimport { Item } from '@react-stately/collections';\nimport Box from '../../primitives/Box';\nimport { Pressable } from '../../primitives/Pressable';\nimport Text from '../../primitives/Text';\nimport { extractInObject } from '../../../theme/tools';\nimport { ITypeaheadProps, IComboBoxProps, layoutPropsList } from './types';\nimport { Input } from '../../primitives/Input';\nimport { useThemeProps } from '../../../hooks';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nexport const Typeahead = React.forwardRef(\n  (\n    {\n      onSelectedItemChange,\n      options,\n      renderItem,\n      getOptionLabel,\n      getOptionKey,\n      onChange,\n      numberOfItems,\n      ...rest\n    }: ITypeaheadProps,\n    ref?: any\n  ) => {\n    //TODO: refactor for responsive prop\n    if (useHasResponsiveProps(rest)) {\n      return null;\n    }\n    return (\n      <ComboBoxImplementation\n        {...rest}\n        onSelectionChange={onSelectedItemChange}\n        items={\n          numberOfItems !== undefined\n            ? options.slice(0, numberOfItems)\n            : options\n        }\n        onInputChange={onChange}\n        ref={ref}\n      >\n        {(item: any) => {\n          if (typeof item !== 'string' && getOptionLabel === undefined) {\n            throw new Error('Please use getOptionLabel prop');\n          }\n\n          if (item.id === undefined && getOptionKey === undefined) {\n            throw new Error('Please use getOptionKey prop');\n          }\n\n          const optionLabel = getOptionLabel ? getOptionLabel(item) : item;\n          const optionKey = getOptionKey\n            ? getOptionKey(item)\n            : item.id !== undefined\n            ? item.id\n            : optionLabel;\n\n          return (\n            <Item textValue={optionLabel} key={optionKey}>\n              {renderItem ? (\n                renderItem(item)\n              ) : (\n                <Box p={2} justifyContent=\"center\">\n                  <Text>{optionLabel}</Text>\n                </Box>\n              )}\n            </Item>\n          );\n        }}\n      </ComboBoxImplementation>\n    );\n  }\n);\n\nconst ComboBoxImplementation = React.forwardRef(\n  (props: IComboBoxProps, ref?: any) => {\n    const [layoutProps] = extractInObject(props, layoutPropsList);\n    let state = useComboBoxState(props);\n\n    let triggerRef = React.useRef(null);\n    let inputRef = React.useRef(null);\n    let listBoxRef = React.useRef(null);\n    let popoverRef = React.useRef(null);\n\n    let {\n      buttonProps: triggerProps,\n      inputProps,\n      listBoxProps,\n      labelProps,\n    } = useComboBox(\n      {\n        ...props,\n        inputRef,\n        buttonRef: triggerRef,\n        listBoxRef,\n        popoverRef,\n        menuTrigger: 'input',\n      },\n      state\n    );\n\n    const toggleIconSetter = () => {\n      if (typeof props.toggleIcon === 'function')\n        return props.toggleIcon({\n          isOpen: state.isOpen,\n        });\n      return props.toggleIcon;\n    };\n\n    let { buttonProps } = useButton(triggerProps);\n\n    return (\n      <Box flexDirection=\"row\" {...layoutProps} ref={ref}>\n        <Box flex={1}>\n          {props.label && (\n            <Text {...labelProps} pb={1}>\n              {props.label}\n            </Text>\n          )}\n          <Input\n            {...inputProps}\n            ref={inputRef}\n            InputRightElement={\n              // @ts-ignore - RN has hitSlop type inconsistent for View and Pressable!\n              <Pressable {...buttonProps} ref={triggerRef}>\n                {toggleIconSetter()}\n              </Pressable>\n            }\n          />\n\n          {state.isOpen && (\n            <ListBoxPopup\n              {...listBoxProps}\n              listBoxRef={listBoxRef}\n              popoverRef={popoverRef}\n              state={state}\n              label={props.label}\n            />\n          )}\n        </Box>\n      </Box>\n    );\n  }\n);\n\ntype IListBoxProps = {\n  popoverRef: any;\n  listBoxRef: any;\n  state: ComboBoxState<any>;\n  dropdownHeight: number;\n  label: string;\n};\n\nfunction ListBoxPopup(props: IListBoxProps) {\n  let { popoverRef, listBoxRef, state, dropdownHeight, label } = props;\n\n  let { listBoxProps } = useListBox(\n    {\n      label,\n      autoFocus: state.focusStrategy,\n      disallowEmptySelection: true,\n    },\n    state,\n    listBoxRef\n  );\n\n  return (\n    <Box ref={popoverRef}>\n      <Box position=\"absolute\" width=\"100%\" maxHeight={dropdownHeight ?? 200}>\n        <ScrollView\n          {...listBoxProps}\n          keyboardShouldPersistTaps=\"handled\"\n          ref={(node) => {\n            if (Platform.OS === 'web') {\n              listBoxRef.current = findNodeHandle(node);\n            } else {\n              listBoxRef.current = node;\n            }\n          }}\n        >\n          {[...state.collection].map((item) => (\n            <Option key={item.key} item={item} state={state} />\n          ))}\n        </ScrollView>\n      </Box>\n    </Box>\n  );\n}\n\nfunction Option({ item, state }: { item: any; state: ComboBoxState<any> }) {\n  const searchItemStyle = useThemeProps('TypeAheadSearchItem', {});\n\n  let ref = React.useRef(null);\n  let isDisabled = state.disabledKeys.has(item.key);\n  let isSelected = state.selectionManager.isSelected(item.key);\n  let isFocused = state.selectionManager.focusedKey === item.key;\n\n  let { optionProps } = useOption(\n    {\n      key: item.key,\n      isDisabled,\n      isSelected,\n      shouldFocusOnHover: true,\n      shouldUseVirtualFocus: true,\n    },\n    state,\n    ref\n  );\n\n  let backgroundColor = searchItemStyle.backgroundColor;\n  let opacity = 1;\n\n  if (isSelected) {\n    backgroundColor = searchItemStyle._focus.backgroundColor;\n  } else if (isFocused) {\n    backgroundColor = searchItemStyle._focus.backgroundColor;\n  } else if (isDisabled) {\n    opacity = 0.6;\n    backgroundColor = searchItemStyle._disabled.backgroundColor;\n  }\n\n  return (\n    <Pressable\n      {...optionProps}\n      opacity={opacity}\n      cursor={\n        isDisabled ? (Platform.OS === 'web' ? 'not-allowed' : null) : null\n      }\n      backgroundColor={backgroundColor}\n      ref={ref}\n    >\n      {item.rendered}\n    </Pressable>\n  );\n}\n"
  },
  {
    "path": "src/components/composites/Typeahead/index.ts",
    "content": "export { useTypeahead } from './useTypeahead';\nexport { Typeahead } from './Typeahead';\n"
  },
  {
    "path": "src/components/composites/Typeahead/types.ts",
    "content": "import type { InterfaceBoxProps } from '../../primitives/Box/types';\n\nexport type ITypeaheadProps = InterfaceBoxProps<ITypeaheadProps> & {\n  options: any[];\n  renderItem?: (item: any) => any;\n  onChange?: (value: string) => void;\n  toggleIcon?: any;\n  dropdownHeight?: number | string;\n  inputValue?: string;\n  onSelectedItemChange?: (value: any) => void;\n  numberOfItems?: number;\n  getOptionLabel?: (item: any) => string;\n  getOptionKey?: (item: any) => any;\n  disabledKeys?: Array<any>;\n  label?: string;\n};\n\nexport type IComboBoxProps = {\n  items: any[];\n  renderItem?: (item: any) => any;\n  onInputChange?: (value: string) => void;\n  toggleIcon?: any;\n  dropdownHeight?: number | string;\n  inputValue?: string;\n  onSelectionChange?: (value: any) => void;\n  children: any;\n  disabledKeys?: Array<any>;\n  label?: string;\n};\n\nexport const layoutPropsList = [\n  'm',\n  'mt',\n  'mb',\n  'ml',\n  'mr',\n  'position',\n  'flex',\n  'zIndex',\n  'top',\n  'right',\n  'bottom',\n  'left',\n  'h',\n  'w',\n  'minW',\n  'maxW',\n  'minH',\n  'maxH',\n  'height',\n  'width',\n  'minWidth',\n  'maxWidth',\n  'minHeight',\n  'maxHeight',\n  'flexBasis',\n  'flexDirection',\n  'flexGrow',\n  'flexShrink',\n  'flexWrap',\n  'direction',\n  'justify',\n  'justifyContent',\n  'align',\n  'alignContent',\n  'alignItems',\n  'alignSelf',\n];\n"
  },
  {
    "path": "src/components/composites/Typeahead/useTypeahead/index.ts",
    "content": "export { useTypeahead } from './useTypeahead';\n"
  },
  {
    "path": "src/components/composites/Typeahead/useTypeahead/reducer.tsx",
    "content": "import * as stateChangeTypes from './types';\nimport { getDefaultValue } from './utils';\n\ntype IState = {\n  isOpen: boolean;\n  selectedItem: any;\n  inputValue: string;\n};\n\nexport function useTypeaheadReducer(state: IState, action: any) {\n  const { type, props } = action;\n  let changes;\n\n  switch (type) {\n    case stateChangeTypes.ItemClick:\n      changes = {\n        isOpen: getDefaultValue(props, 'isOpen'),\n        selectedItem: props.items[action.index],\n        inputValue: props.itemToString(props.items[action.index]),\n      };\n      break;\n    case stateChangeTypes.InputBlur:\n      if (state.isOpen) {\n        changes = {\n          isOpen: false,\n        };\n      }\n      break;\n    case stateChangeTypes.InputChange:\n      changes = {\n        isOpen: true,\n        inputValue: action.inputValue,\n      };\n      break;\n\n    case stateChangeTypes.ToggleButtonClick:\n    case stateChangeTypes.FunctionToggleMenu:\n      changes = {\n        isOpen: !state.isOpen,\n      };\n      break;\n    case stateChangeTypes.FunctionOpenMenu:\n      changes = {\n        isOpen: true,\n      };\n      break;\n    case stateChangeTypes.FunctionCloseMenu:\n      changes = {\n        isOpen: false,\n      };\n      break;\n\n    case stateChangeTypes.FunctionSelectItem:\n      changes = {\n        selectedItem: action.selectedItem,\n        inputValue: props.itemToString(action.selectedItem),\n      };\n      break;\n    case stateChangeTypes.ControlledPropUpdatedSelectedItem:\n    case stateChangeTypes.FunctionSetInputValue:\n      changes = {\n        inputValue: action.inputValue,\n      };\n      break;\n    case stateChangeTypes.FunctionReset:\n      changes = {\n        isOpen: getDefaultValue(props, 'isOpen'),\n        selectedItem: getDefaultValue(props, 'selectedItem'),\n        inputValue: getDefaultValue(props, 'inputValue'),\n      };\n      break;\n    default:\n      throw new Error('Reducer called without proper action type.');\n  }\n\n  return {\n    ...state,\n    ...changes,\n  };\n}\n"
  },
  {
    "path": "src/components/composites/Typeahead/useTypeahead/types.tsx",
    "content": "export const InputChange = '__input_change__';\nexport const InputBlur = '__input_blur__';\n\nexport const ItemClick = '__item_click__';\n\nexport const ToggleButtonClick = '__togglebutton_click__';\n\nexport const FunctionToggleMenu = '__function_toggle_menu__';\nexport const FunctionOpenMenu = '__function_open_menu__';\nexport const FunctionCloseMenu = '__function_close_menu__';\n\nexport const FunctionSelectItem = '__function_select_item__';\nexport const FunctionSetInputValue = '__function_set_input_value__';\n\nexport const FunctionReset = '__function_reset__';\nexport const ControlledPropUpdatedSelectedItem =\n  '__controlled_prop_updated_selected_item__';\n\nexport type IItem = any;\nexport type IUseTypeaheadProps = {\n  isOpen?: boolean;\n  items: IItem[];\n  itemToString: (item?: any) => string;\n  selectedItem?: IItem;\n  onInputValueChange?: ({ inputValue }: { inputValue: string }) => any;\n  onSelectedItemChange?: (item: IItem) => any;\n};\n"
  },
  {
    "path": "src/components/composites/Typeahead/useTypeahead/useTypeahead.ts",
    "content": "import { useTypeaheadReducer } from './reducer';\nimport React, { useEffect } from 'react';\nimport * as stateChangeTypes from './types';\nimport type { AccessibilityRole } from 'react-native';\nimport { Keyboard } from 'react-native';\nimport { dropdownDefaultStateValues, getDefaultValue } from './utils';\n\nfunction isControlledProp(props: any, key: string) {\n  return props[key] !== undefined;\n}\n\nimport type { IUseTypeaheadProps } from './types';\n\nexport function useTypeahead(props: IUseTypeaheadProps) {\n  let defaultValues = { ...dropdownDefaultStateValues };\n  defaultValues.isOpen = getDefaultValue(props, 'isOpen');\n\n  const [state, dispatch] = React.useReducer(\n    useTypeaheadReducer,\n    defaultValues\n  );\n\n  const dispatchWithProps = (object: any) => {\n    dispatch({ ...object, props });\n  };\n\n  const { inputValue, isOpen } = state;\n\n  const {\n    items,\n    onInputValueChange,\n    onSelectedItemChange,\n    selectedItem,\n    itemToString,\n  } = props;\n\n  const isControlled = isControlledProp(props, 'selectedItem');\n\n  useEffect(() => {\n    if (isControlled) {\n      dispatch({\n        type: stateChangeTypes.ControlledPropUpdatedSelectedItem,\n        inputValue: itemToString(selectedItem),\n      });\n    }\n  }, [selectedItem, isControlled, itemToString]);\n\n  const onChangeText = (text: string) => {\n    onInputValueChange?.({ inputValue: text });\n    dispatchWithProps({ type: stateChangeTypes.InputChange, inputValue: text });\n  };\n\n  const handleItemSelect = (item: any, index: number) => {\n    onSelectedItemChange?.(item);\n    dispatchWithProps({ type: stateChangeTypes.ItemClick, index });\n    Keyboard.dismiss();\n  };\n\n  const getMenuItemProps = (item: any, index: number) => {\n    return {\n      onPress: () => handleItemSelect(item, index),\n      accessible: true,\n      accessiblityRole: 'menuitem' as AccessibilityRole,\n    };\n  };\n\n  const getMenuProps = () => {\n    return {\n      accessible: true,\n      accessibilityRole: 'menu' as AccessibilityRole,\n      accessibilityHint: `Showing ${items.length} records`,\n    };\n  };\n\n  const getToggleButtonProps = () => {\n    return {\n      onPress: () => {\n        dispatchWithProps({ type: stateChangeTypes.ToggleButtonClick });\n      },\n    };\n  };\n\n  const getInputProps = (propInputVal?: any, propOnchangeText?: any) => {\n    return {\n      onChangeText: propInputVal ? propOnchangeText : onChangeText,\n      value: propInputVal ? propInputVal : inputValue,\n      accessibilityRole: 'combobox' as AccessibilityRole,\n      accessibilityLabel: 'Typeahead input',\n      accessibilityState: {\n        expanded: isOpen,\n      },\n    };\n  };\n\n  return {\n    getInputProps,\n    getMenuItemProps,\n    getMenuProps,\n    getToggleButtonProps,\n    isOpen,\n  };\n}\n"
  },
  {
    "path": "src/components/composites/Typeahead/useTypeahead/utils.ts",
    "content": "export const dropdownDefaultStateValues = {\n  highlightedIndex: -1,\n  isOpen: false,\n  selectedItem: null,\n  inputValue: '',\n};\n\nexport function capitalizeString(string: string) {\n  return `${string.slice(0, 1).toUpperCase()}${string.slice(1)}`;\n}\n\nexport function getDefaultValue(\n  props: any,\n  propKey: any,\n  defaultStateValues = dropdownDefaultStateValues\n) {\n  const defaultPropKey = `default${capitalizeString(propKey)}`;\n\n  if (defaultPropKey in props) {\n    return props[defaultPropKey];\n  }\n  //@ts-ignore\n  return defaultStateValues[propKey];\n}\n"
  },
  {
    "path": "src/components/composites/Wrap/index.tsx",
    "content": "import isNil from 'lodash.isnil';\nimport React from 'react';\nimport Flex from '../../primitives/Flex';\nimport type { IWrapProps } from './types';\nimport { useThemeProps } from '../../../hooks';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst Wrap = ({ children, ...props }: IWrapProps, ref?: any) => {\n  const { space, ...newProps } = useThemeProps('Wrap', props);\n\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n\n  return (\n    <Flex wrap=\"wrap\" {...newProps} ref={ref}>\n      {isNil(space)\n        ? children\n        : React.Children.map(children, (child: any) => {\n            return React.cloneElement(\n              child,\n              { ...props, style: { margin: space } },\n              child.props.children\n            );\n          })}\n    </Flex>\n  );\n};\n\nexport default React.memo(React.forwardRef(Wrap));\nexport type { IWrapProps };\n"
  },
  {
    "path": "src/components/composites/Wrap/types.ts",
    "content": "import type { IFlexProps } from './../../primitives/Flex/types';\n\nexport type IWrapProps = IFlexProps & {\n  space?: number;\n};\n"
  },
  {
    "path": "src/components/composites/index.ts",
    "content": "export { default as AspectRatio } from './AspectRatio';\nexport type { IAspectRatioProps } from './AspectRatio/types';\n\nexport { default as Badge } from './Badge';\nexport type { IBadgeProps } from './Badge';\n\nexport { default as Card } from './Card';\nexport type { ICardProps } from './Card';\n\nexport { default as IconButton } from './IconButton';\nexport type { IIconButtonProps } from './IconButton';\n\nexport { Alert } from './Alert';\nexport type { IAlertProps } from './Alert';\n\nexport { Avatar } from './Avatar';\nexport type { IAvatarProps } from './Avatar';\n\nexport { Breadcrumb } from './Breadcrumb';\nexport type { IBreadcrumbProps } from './Breadcrumb';\n\nexport { default as Backdrop } from './Backdrop';\n\nexport { default as Container } from './Container';\nexport type { IContainerProps } from './Container';\n\nexport { Modal } from './Modal';\nexport type { IModalProps } from './Modal';\nexport { default as Drawer } from './Drawer';\nexport type { IDrawerProps } from './Drawer';\n\nexport { useToast, Toast } from './Toast';\nexport type { IToastProps } from './Toast';\n\nexport { default as Divider } from './Divider';\nexport type { IDividerProps } from './Divider/types';\n\nexport { default as Progress } from './Progress';\nexport type { IProgressProps } from './Progress';\n\n// export { default as Stat } from './Stat';\n\nexport { Skeleton } from './Skeleton';\nexport type { ISkeletonProps, ISkeletonTextProps } from './Skeleton';\n\nexport { Accordion } from './Accordion';\nexport type {\n  IAccordionProps,\n  IAccordionDetailsProps,\n  IAccordionSummaryProps,\n  IAccordionItemProps,\n  IAccordionIconProps,\n  IAccordionContextProps,\n  IAccordionItemContextProps,\n} from './Accordion';\n\nexport { FormControl, useFormControlContext } from './FormControl';\nexport type {\n  IFormControlProps,\n  IFormControlLabelProps,\n  IFormControlErrorMessageProps,\n  IFormControlHelperTextProps,\n  IFormControlContext,\n} from './FormControl';\n\nexport {\n  NumberInput,\n  NumberInputField,\n  NumberInputStepper,\n  NumberIncrementStepper,\n  NumberDecrementStepper,\n} from './NumberInput';\nexport type {\n  INumberInputProps,\n  INumberInputFieldProps,\n  INumberInputSteppersProps,\n  INumberInputStepperProps,\n  INumberInputContext,\n} from './NumberInput';\n\nexport { default as Tag } from './Tag';\nexport type { ITagProps } from './Tag';\n\nexport { default as Kbd } from './KBD';\nexport type { IKbdProps } from './KBD';\n\nexport { default as Code } from './Code';\n\nexport { Center, Square, Circle } from './Center';\nexport type { ICenterProps, ICircleProps, ISquareProps } from './Center';\n\nexport { default as Wrap } from './Wrap';\nexport type { IWrapProps } from './Wrap';\n\n// export type { IToastProps } from './Toast';\n\nexport { PinInput } from './PinInput';\nexport type { IPinInputProps, IPinInputFieldProps } from './PinInput';\n\nexport * from './Transitions';\nexport type {\n  IFadeProps,\n  IScaleFadeProps,\n  ISlideProps,\n  ISlideFadeProps,\n} from './Transitions';\n\nexport { default as Collapse } from './Collapse';\nexport { default as CircularProgress } from './CircularProgress';\n\nexport { Popover } from './Popover';\nexport { Tooltip } from './Tooltip';\nexport type { ITooltipProps } from './Tooltip';\n\nexport type { IPopoverProps } from './Popover';\n\nexport { AlertDialog } from './AlertDialog';\nexport type { IAlertDialogProps } from './AlertDialog';\n\nexport { Menu } from './Menu';\nexport type {\n  IMenuProps,\n  IMenuItemProps,\n  IMenuItemOptionProps,\n  IMenuGroupProps,\n  IMenuOptionGroupProps,\n} from './Menu';\n\nexport { SimpleGrid } from './SimpleGrid';\nexport type { ISimpleGridProps } from './SimpleGrid';\n\n// export { Tabs } from './Tabs';\n// export type {\n//   ITabsProps,\n//   ITabBarProps,\n//   ITabProps,\n//   ITabViewsProps,\n//   ITabViewProps,\n//   ITabsContextProps,\n// } from './Tabs';\nexport { TextField } from './TextField';\nexport type { ITextFieldProps } from './TextField';\n\nexport { Actionsheet } from './Actionsheet';\nexport type {\n  IActionsheetProps,\n  IActionsheetContentProps,\n  IActionsheetItemProps,\n} from './Actionsheet';\n\n// export { AppBar } from './AppBar';\nexport { Fab } from './Fab';\nexport type { IFabProps } from './Fab';\nexport { Typeahead, useTypeahead } from './Typeahead';\n"
  },
  {
    "path": "src/components/primitives/Box/index.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport { View } from 'react-native';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport { getColor } from '../../../theme';\nimport { useTheme } from '../../../hooks';\nimport { makeStyledComponent } from '../../../utils/styled';\nimport { wrapStringChild } from '../../../utils/wrapStringChild';\nimport type { IBoxProps, InterfaceBoxProps } from './types';\nimport { useSafeArea } from '../../../hooks/useSafeArea';\nimport { useNativeBaseConfig } from '../../../core/NativeBaseContext';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst StyledBox = makeStyledComponent(View);\n\nlet MemoizedGradient: any;\n\nconst Box = ({ children, ...props }: IBoxProps, ref: any) => {\n  // const { _text, ...resolvedProps } = useThemeProps('Box', props);\n  const theme = useTheme();\n  const { _text, ...resolvedProps } = usePropsResolution('Box', props);\n  let Gradient = useNativeBaseConfig('NativeBaseConfigProvider').config\n    .dependencies?.['linear-gradient'];\n\n  const safeAreaProps = useSafeArea(resolvedProps);\n\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n\n  if (\n    resolvedProps.bg?.linearGradient ||\n    resolvedProps.background?.linearGradient ||\n    resolvedProps.bgColor?.linearGradient ||\n    resolvedProps.backgroundColor?.linearGradient\n  ) {\n    const lgrad =\n      resolvedProps.bg?.linearGradient ||\n      resolvedProps.background?.linearGradient ||\n      resolvedProps.bgColor?.linearGradient ||\n      resolvedProps.backgroundColor?.linearGradient;\n\n    if (Gradient) {\n      if (!MemoizedGradient) {\n        MemoizedGradient = makeStyledComponent(Gradient);\n      }\n\n      Gradient = MemoizedGradient;\n\n      lgrad.colors = lgrad.colors?.map((color: string) => {\n        return getColor(color, theme.colors, theme);\n      });\n      let startObj = { x: 0, y: 0 };\n      let endObj = { x: 0, y: 1 };\n      if (lgrad.start && lgrad.start.length === 2) {\n        startObj = {\n          x: lgrad.start[0],\n          y: lgrad.start[1],\n        };\n      }\n      if (lgrad.end && lgrad.end.length === 2) {\n        endObj = {\n          x: lgrad.end[0],\n          y: lgrad.end[1],\n        };\n      }\n      const backgroundColorProps = [\n        'bg',\n        'bgColor',\n        'background',\n        'backgroundColor',\n      ];\n      backgroundColorProps.forEach((backgroundColorProp) => {\n        if (backgroundColorProp in safeAreaProps)\n          delete safeAreaProps[backgroundColorProp];\n      });\n\n      return (\n        <Gradient\n          ref={ref}\n          {...safeAreaProps}\n          colors={lgrad.colors}\n          start={startObj}\n          end={endObj}\n          locations={lgrad.locations}\n        >\n          {/* {React.Children.map(children, (child) =>\n            typeof child === 'string' || typeof child === 'number' ? (\n              <Text {..._text}>{child}</Text>\n            ) : (\n              child\n            )\n          )} */}\n          {wrapStringChild(children, _text)}\n        </Gradient>\n      );\n    }\n  }\n  return (\n    <StyledBox ref={ref} {...safeAreaProps}>\n      {/* {React.Children.map(children, (child) => {\n        return typeof child === 'string' ||\n          typeof child === 'number' ||\n          (child?.type === React.Fragment &&\n            (typeof child.props?.children === 'string' ||\n              typeof child.props?.children === 'number')) ? (\n          <Text {..._text}>{child}</Text>\n        ) : (\n          child\n        );\n      })} */}\n      {wrapStringChild(children, _text)}\n    </StyledBox>\n  );\n};\n\nexport type { IBoxProps, InterfaceBoxProps };\nexport default memo(forwardRef(Box));\n"
  },
  {
    "path": "src/components/primitives/Box/types.ts",
    "content": "import type { ViewProps } from 'react-native';\nimport type { StyledProps } from '../../../theme/types';\nimport type {\n  SafeAreaProps,\n  PlatformProps,\n  ResponsiveValue,\n  ColorType,\n  CustomProps,\n} from '../../types';\nimport type { ITextProps } from './../Text/types';\n\nexport interface ILinearGradientProps {\n  linearGradient?: {\n    colors: Array<string>;\n    start?: Array<number>;\n    end?: Array<number>;\n    locations?: Array<number>;\n  };\n}\n\nexport interface InterfaceBoxProps<T = null>\n  extends ViewProps,\n    SafeAreaProps,\n    PlatformProps<T extends null ? IBoxProps<any> : T>,\n    Omit<StyledProps, 'bgColor' | 'background' | 'bg' | 'backgroundColor'> {\n  /**\n   * Renders components as Box children. Accepts a JSX.Element or an array of JSX.Element. */\n  children?: JSX.Element | JSX.Element[] | string | any;\n  // /**\n  //  * Applies box shadow and accepts a number from 0 to 9\n  //  * @default 0\n  //  */\n  // shadow?: number;\n  /**\n   * For providing props to Text inside Box\n   */\n  _text?: Partial<ITextProps>;\n  bg?: ResponsiveValue<ColorType | (string & {}) | ILinearGradientProps>;\n  background?: ResponsiveValue<\n    ColorType | (string & {}) | ILinearGradientProps\n  >;\n  bgColor?: ResponsiveValue<ColorType | (string & {}) | ILinearGradientProps>;\n  backgroundColor?: ResponsiveValue<\n    ColorType | (string & {}) | ILinearGradientProps\n  >;\n  // gap?: ResponsiveValue<number | string>;\n}\n\nexport type IBoxProps<T = null> = InterfaceBoxProps<T> & CustomProps<'Box'>;\n"
  },
  {
    "path": "src/components/primitives/Button/Button.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport Spinner from '../Spinner';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport { default as Box, IBoxProps } from '../Box';\nimport HStack from '../Stack/HStack';\nimport { Pressable } from '../Pressable';\nimport type { IButtonProps } from './types';\nimport { composeEventHandlers } from '../../../utils';\nimport {\n  useHover,\n  useFocus,\n  useIsPressed,\n} from '../../primitives/Pressable/Pressable';\nimport { useFocusRing } from '@react-native-aria/focus';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst Button = (\n  {\n    //@ts-ignore\n    children,\n    startIcon,\n    rightIcon,\n    leftIcon,\n    endIcon,\n    spinner,\n    isDisabled,\n    isLoading,\n    isHovered: isHoveredProp,\n    isPressed: isPressedProp,\n    isFocused: isFocusedProp,\n    isFocusVisible: isFocusVisibleProp,\n    spinnerPlacement = 'start',\n    ...props\n  }: IButtonProps & IBoxProps,\n  ref: any\n) => {\n  const { hoverProps, isHovered } = useHover();\n  const { pressableProps, isPressed } = useIsPressed();\n  const { focusProps, isFocused } = useFocus();\n  const { isFocusVisible, focusProps: focusRingProps }: any = useFocusRing();\n\n  const {\n    onPressIn,\n    onPressOut,\n    onHoverIn,\n    onHoverOut,\n    onFocus,\n    onBlur,\n    _text,\n    _stack,\n    _spinner,\n    isLoadingText,\n    _icon,\n    ...resolvedProps\n  } = usePropsResolution('Button', props, {\n    isDisabled,\n    isHovered: isHoveredProp || isHovered,\n    isFocused: isFocusedProp || isFocused,\n    isPressed: isPressedProp || isPressed,\n    isLoading,\n    isFocusVisible: isFocusVisibleProp || isFocusVisible,\n  });\n\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n\n  if (leftIcon) {\n    startIcon = leftIcon;\n  }\n  if (rightIcon) {\n    endIcon = rightIcon;\n  }\n  if (endIcon && React.isValidElement(endIcon)) {\n    endIcon = React.Children.map(\n      endIcon,\n      (child: JSX.Element, index: number) => {\n        return React.cloneElement(child, {\n          key: `button-end-icon-${index}`,\n          ..._icon,\n          ...child.props,\n        });\n      }\n    );\n  }\n  if (startIcon && React.isValidElement(startIcon)) {\n    startIcon = React.Children.map(\n      startIcon,\n      (child: JSX.Element, index: number) => {\n        return React.cloneElement(child, {\n          key: `button-start-icon-${index}`,\n          ..._icon,\n          ...child.props,\n        });\n      }\n    );\n  }\n\n  const spinnerElement = spinner ? (\n    spinner\n  ) : (\n    <Spinner color={_text?.color} {..._spinner} />\n  );\n\n  const boxChildren = (child: any) => {\n    return child ? <Box _text={_text}>{child}</Box> : null;\n  };\n\n  return (\n    <Pressable\n      disabled={isDisabled || isLoading}\n      ref={ref}\n      onPressIn={composeEventHandlers(onPressIn, pressableProps.onPressIn)}\n      onPressOut={composeEventHandlers(onPressOut, pressableProps.onPressOut)}\n      // @ts-ignore - web only\n      onHoverIn={composeEventHandlers(onHoverIn, hoverProps.onHoverIn)}\n      // @ts-ignore - web only\n      onHoverOut={composeEventHandlers(onHoverOut, hoverProps.onHoverOut)}\n      // @ts-ignore - web only\n      onFocus={composeEventHandlers(\n        composeEventHandlers(onFocus, focusProps.onFocus),\n        focusRingProps.onFocus\n      )}\n      // @ts-ignore - web only\n      onBlur={composeEventHandlers(\n        composeEventHandlers(onBlur, focusProps.onBlur),\n        focusRingProps.onBlur\n      )}\n      {...resolvedProps}\n      accessibilityRole={props.accessibilityRole ?? 'button'}\n    >\n      <HStack {..._stack} test={true}>\n        {startIcon && !isLoading ? startIcon : null}\n        {isLoading && spinnerPlacement === 'start' ? spinnerElement : null}\n        {isLoading\n          ? isLoadingText\n            ? boxChildren(isLoadingText)\n            : null\n          : boxChildren(children)}\n\n        {endIcon && !isLoading ? endIcon : null}\n        {isLoading && spinnerPlacement === 'end' ? spinnerElement : null}\n      </HStack>\n    </Pressable>\n  );\n};\n\nexport default memo(forwardRef(Button));\n"
  },
  {
    "path": "src/components/primitives/Button/ButtonGroup.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport type { IButtonGroupProps } from './types';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport { Stack } from '../Stack';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nexport default memo(\n  forwardRef(\n    (\n      { children, divider, variant, ...props }: IButtonGroupProps,\n      ref?: any\n    ) => {\n      const {\n        space,\n        direction,\n\n        size,\n        colorScheme,\n        isDisabled,\n        isAttached,\n        ...newProps\n      } = usePropsResolution('ButtonGroup', props);\n\n      const { borderRadius } = usePropsResolution('Button', props);\n      let computedChildren;\n\n      if (Array.isArray(children)) {\n        computedChildren = React.Children.toArray(children).map(\n          (child: any, index: number) => {\n            if (typeof child === 'string' || typeof child === 'number')\n              return child;\n            return React.cloneElement(child, {\n              key: `button-group-child-${index}`,\n              variant,\n              size,\n              colorScheme,\n              isDisabled,\n\n              // when buttons are attached, remove rounded corners of all buttons except extreme buttons\n              ...(isAttached ? { borderRadius: 0 } : {}),\n              ...(isAttached && index === 0\n                ? direction === 'column'\n                  ? { borderTopRadius: borderRadius }\n                  : { borderLeftRadius: borderRadius }\n                : {}),\n              ...(isAttached && index === children?.length - 1\n                ? direction === 'column'\n                  ? { borderBottomRadius: borderRadius }\n                  : { borderRightRadius: borderRadius }\n                : {}),\n\n              //when buttons are attached, remove double border from them, just keep borderRight in case for direction row and borderBottom in case of direction column for every component\n              ...(isAttached && index !== 0\n                ? direction === 'column'\n                  ? { borderTopWidth: 0 }\n                  : { borderLeftWidth: 0 }\n                : {}),\n              ...child.props,\n            });\n          }\n        );\n      } else {\n        computedChildren = React.Children.toArray(children).map(\n          (child: any, index: number) => {\n            return React.cloneElement(child, {\n              key: `button-group-child-${index}`,\n              variant,\n              size,\n              colorScheme,\n              isDisabled,\n              ...child.props,\n            });\n          }\n        );\n      }\n      //TODO: refactor for responsive prop\n      if (useHasResponsiveProps(props)) {\n        return null;\n      }\n      return (\n        <Stack\n          divider={divider}\n          space={isAttached ? 0 : space}\n          direction={direction}\n          {...newProps}\n          ref={ref}\n        >\n          {computedChildren}\n        </Stack>\n      );\n    }\n  )\n);\n"
  },
  {
    "path": "src/components/primitives/Button/index.tsx",
    "content": "import ButtonMain from './Button';\nimport ButtonGroup from './ButtonGroup';\nimport type { IButtonComponentType } from './types';\n\nconst ButtonTemp: any = ButtonMain;\nButtonTemp.Group = ButtonGroup;\n\n// To add typings\nconst Button = ButtonTemp as IButtonComponentType;\n\nexport { Button };\nexport type { IButtonGroupProps, IButtonProps } from './types';\n"
  },
  {
    "path": "src/components/primitives/Button/types.ts",
    "content": "import type { ITextProps } from './../Text/types';\nimport type { IStackProps } from '../Stack';\nimport type { ResponsiveValue } from '../../types';\nimport type { MutableRefObject } from 'react';\nimport type { ISizes } from '../../../theme/base/sizes';\nimport type {\n  ThemeComponentSizeType,\n  CustomProps,\n  VariantType,\n  // VariantType,\n  // VariantTypeTest,\n} from '../../../components/types/utils';\nimport type { ISpinnerProps } from '../Spinner/types';\nimport type { IIconProps } from '../Icon';\nimport type { InterfacePressableProps } from '../Pressable/types';\nimport type { ColorSchemeType } from '../../../components/types';\n\n// const myFunction = ({ a, b }) => {\n//   return { a: a, b: b };\n// };\n\n// type returnType = ReturnType<typeof myFunction>;\n// type parameter = Parameters<typeof myFunction>[0];\n\n// type newparameter = keyof parameter;\n// const a: parameter =\n// type parameter = Para<typeof myFunction>;\n// type buttonVariant = VariantTypeTest<'Button'>;\n// Todo: Create underscore Props section on docs.\n// _hover?: IButtonProps;\n\nexport interface InterfaceButtonProps\n  extends InterfacePressableProps<IButtonProps> {\n  /**\n   * The color of the radio when it's checked. This should be one of the color keys in the theme (e.g.\"green\", \"red\").\n   * @default 'primary'\n   */\n  colorScheme?: ColorSchemeType;\n  /**\n   * The variant of the button style to use.\n   * @default 'solid'\n   */\n  variant?: VariantType<'Button'>;\n  /**\n   * If true, the button will show a spinner.\n   */\n  isLoading?: boolean;\n  /**\n   * If true, the button will be in hovered state.\n   */\n  isHovered?: boolean;\n  /**\n   * If true, the button will be in pressed state.\n   */\n  isPressed?: boolean;\n  /**\n   * If true, the button will be focused.\n   */\n  isFocused?: boolean;\n  /**\n   * If true, the button focus ring will be visible.\n   */\n  isFocusVisible?: boolean;\n  /**\n   * The size of the button.\n   */\n  size?: ThemeComponentSizeType<'Button'>;\n  // size?: SizeType;\n  /**\n   * The start icon element to use in the button.\n   */\n  startIcon?: JSX.Element | Array<JSX.Element>;\n  /**\n   * The end icon element to use in the button.\n   */\n  endIcon?: JSX.Element | Array<JSX.Element>;\n  /**\n   * The end icon element to use in the button.\n   */\n  isLoadingText?: string;\n  /**\n   * The spinner element to use when isLoading is set to true.\n   */\n  spinner?: JSX.Element;\n  /**\n   * If true, the button will be disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * Props to style the child text\n   */\n  _text?: Partial<ITextProps>;\n  /**\n   * Props to be passed to the HStack used inside of Button.\n   */\n  _stack?: Partial<IStackProps>;\n  /**\n   * Props to be passed to the Icon used inside of Button.\n   */\n  _icon?: Partial<IIconProps>;\n  /**\n   * Prop to decide placement of spinner.\n   */\n  spinnerPlacement?: 'start' | 'end';\n  /**\n   * Props to be passed to the button when isLoading is true.\n   */\n  _loading?: Partial<IButtonProps>;\n  /**\n   * Props to be passed to the button when button is disabled.\n   */\n  _disabled?: Partial<IButtonProps>;\n  /**\n   * Props to be passed to the spinner when isLoading is true.\n   */\n  _spinner?: Partial<ISpinnerProps>;\n  /**\n   * Props to be passed to the button when button is hovered.\n   */\n  _hover?: Partial<IButtonProps>;\n  /**\n   * Props to be passed to the button when button is pressed.\n   */\n  _pressed?: Partial<IButtonProps>;\n  /**\n   * Props to be passed to the button when button is focused.\n   */\n  _focus?: Partial<IButtonProps>;\n  /**\n   * The right icon element to use in the button.\n   */\n  rightIcon?: JSX.Element | Array<JSX.Element>;\n  /**\n   * The left icon element to use in the button.\n   */\n  leftIcon?: JSX.Element | Array<JSX.Element>;\n}\n\nexport interface IButtonGroupProps extends IStackProps {\n  /**\n   * The direction of the Stack Items.\n   * @default row\n   */\n  direction?: 'column' | 'row';\n  /**\n   *\n   */\n  children: JSX.Element | Array<JSX.Element>;\n  /**\n   * The variant of the button style to use.\n   * @default 'solid'\n   */\n  variant?: ResponsiveValue<\n    'ghost' | 'outline' | 'solid' | 'link' | 'unstyled' | 'subtle'\n  >;\n  /**\n   * The start icon element to use in the button.\n   */\n\n  size?: ResponsiveValue<ISizes | (string & {}) | number>;\n\n  /**\n   * The color of the radio when it's checked. This should be one of the color keys in the theme (e.g.\"green\", \"red\").\n   * @default 'primary'\n   */\n  colorScheme?: ColorSchemeType;\n  /**\n   * If true, the button will be disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * If true, button will be atttached together.\n   */\n  isAttached?: boolean;\n}\n\nexport type IButtonComponentType = ((\n  props: IButtonProps & { ref?: MutableRefObject<any> }\n) => JSX.Element) & {\n  Group: React.MemoExoticComponent<\n    (props: IButtonGroupProps & { ref?: MutableRefObject<any> }) => JSX.Element\n  >;\n};\n\nexport type IButtonProps = InterfaceButtonProps & CustomProps<'Button'>;\n"
  },
  {
    "path": "src/components/primitives/Checkbox/Checkbox.tsx",
    "content": "import React, { useContext, memo, forwardRef } from 'react';\n//@ts-ignore\nimport stableHash from 'stable-hash';\nimport { Pressable, IPressableProps } from '../Pressable';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport { Center } from '../../composites/Center';\nimport { useFormControlContext } from '../../composites/FormControl';\nimport Box from '../Box';\nimport { mergeRefs } from './../../../utils';\nimport type { ICheckboxProps } from './types';\nimport { useToggleState } from '@react-stately/toggle';\nimport { CheckboxGroupContext } from './CheckboxGroup';\nimport { useCheckbox, useCheckboxGroupItem } from '@react-native-aria/checkbox';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nimport { composeEventHandlers, combineContextAndProps } from '../../../utils';\nimport { extractInObject, stylingProps } from '../../../theme/tools/utils';\nimport {\n  useHover,\n  useFocus,\n  useIsPressed,\n} from '../../primitives/Pressable/Pressable';\nimport SizedIcon from './SizedIcon';\nimport { Stack } from '../Stack';\nimport { wrapStringChild } from '../../../utils/wrapStringChild';\n\nconst Checkbox = (\n  {\n    wrapperRef,\n    isHovered: isHoveredProp,\n    isPressed: isPressedProp,\n    isFocused: isFocusedProp,\n    ...props\n  }: ICheckboxProps,\n  ref: any\n) => {\n  const formControlContext = useFormControlContext();\n\n  const {\n    isInvalid,\n    isReadOnly,\n    isIndeterminate,\n    ...combinedProps\n  } = combineContextAndProps(formControlContext, props);\n\n  const checkboxGroupContext = useContext(CheckboxGroupContext);\n  const state = useToggleState({\n    ...combinedProps,\n    defaultSelected: combinedProps.defaultIsChecked,\n    isSelected: combinedProps.isChecked,\n  });\n  const _ref = React.useRef();\n  const mergedRef = mergeRefs([ref, _ref]);\n\n  // Swap hooks depending on whether this checkbox is inside a CheckboxGroup.\n  // This is a bit unorthodox. Typically, hooks cannot be called in a conditional,\n  // but since the checkbox won't move in and out of a group, it should be safe.\n  const { inputProps: groupItemInputProps } = checkboxGroupContext\n    ? // eslint-disable-next-line react-hooks/rules-of-hooks\n      useCheckboxGroupItem(\n        combinedProps,\n        checkboxGroupContext.state,\n        //@ts-ignore\n        mergedRef\n      )\n    : // eslint-disable-next-line react-hooks/rules-of-hooks\n      useCheckbox(\n        combinedProps,\n        state,\n        //@ts-ignore\n        mergedRef\n      );\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const inputProps = React.useMemo(() => groupItemInputProps, [\n    groupItemInputProps.checked,\n    groupItemInputProps.disabled,\n  ]);\n\n  const contextCombinedProps = React.useMemo(() => {\n    return { ...checkboxGroupContext, ...combinedProps };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [stableHash(combinedProps)]);\n\n  return (\n    <CheckboxComponent\n      inputProps={inputProps}\n      combinedProps={contextCombinedProps}\n      isInvalid={isInvalid}\n      isReadOnly={isReadOnly}\n      isIndeterminate={isIndeterminate}\n      isHovered={isHoveredProp}\n      isPressed={isPressedProp}\n      isFocused={isFocusedProp}\n      wrapperRef={wrapperRef}\n    />\n  );\n};\nconst CheckboxComponent = React.memo(\n  ({\n    wrapperRef,\n    inputProps,\n    combinedProps,\n    isInvalid,\n    isReadOnly,\n    isIndeterminate,\n    isHovered: isHoveredProp,\n    isPressed: isPressedProp,\n    isFocused: isFocusedProp,\n  }: any) => {\n    const _ref = React.useRef();\n    const { hoverProps, isHovered } = useHover();\n    const { pressableProps, isPressed } = useIsPressed();\n    const { focusProps, isFocused } = useFocus();\n\n    const { checked: isChecked, disabled: isDisabled } = inputProps;\n\n    const {\n      icon,\n      _interactionBox,\n      _icon,\n      _stack,\n      _text,\n      onPress,\n      onPressIn,\n      onPressOut,\n      onHoverIn,\n      onHoverOut,\n      onFocus,\n      onBlur,\n      ...resolvedProps\n    } = usePropsResolution(\n      'Checkbox',\n      { ...combinedProps, ...inputProps },\n      {\n        isInvalid,\n        isReadOnly,\n        isIndeterminate,\n        isDisabled,\n        isChecked,\n        isHovered: isHoveredProp || isHovered,\n        isPressed: isPressedProp || isPressed,\n        isFocused: isFocusedProp || isFocused,\n      }\n    );\n\n    const [layoutProps, nonLayoutProps] = extractInObject(resolvedProps, [\n      ...stylingProps.margin,\n      ...stylingProps.layout,\n      ...stylingProps.flexbox,\n      ...stylingProps.position,\n      '_text',\n    ]);\n\n    const [\n      accessibilityProps,\n      nonAccessibilityProps,\n    ] = extractInObject(nonLayoutProps, [\n      'accessibilityRole',\n      'accessibilityState',\n      'accessibilityLabel',\n      'accessibilityHint',\n    ]);\n\n    //TODO: refactor for responsive prop\n    if (useHasResponsiveProps(resolvedProps)) {\n      return null;\n    }\n\n    return (\n      <Pressable\n        disabled={isDisabled}\n        {...(pressableProps as IPressableProps)}\n        {...accessibilityProps}\n        onPress={onPress}\n        ref={mergeRefs([_ref, wrapperRef])}\n        accessibilityRole=\"checkbox\"\n        onPressIn={composeEventHandlers(onPressIn, pressableProps.onPressIn)}\n        onPressOut={composeEventHandlers(onPressOut, pressableProps.onPressOut)}\n        // @ts-ignore - web only\n        onHoverIn={composeEventHandlers(onHoverIn, hoverProps.onHoverIn)}\n        // @ts-ignore - web only\n        onHoverOut={composeEventHandlers(onHoverOut, hoverProps.onHoverOut)}\n        // @ts-ignore - web only\n        onFocus={composeEventHandlers(\n          composeEventHandlers(onFocus, focusProps.onFocus)\n          // focusRingProps.onFocu\n        )}\n        // @ts-ignore - web only\n        onBlur={composeEventHandlers(\n          composeEventHandlers(onBlur, focusProps.onBlur)\n          // focusRingProps.onBlur\n        )}\n      >\n        <Stack {...layoutProps} {..._stack}>\n          <Center>\n            {/* Interaction Wrapper */}\n            <Box {..._interactionBox} />\n            {/* Checkbox */}\n            <Center {...nonAccessibilityProps}>\n              <SizedIcon icon={icon} _icon={_icon} isChecked={isChecked} />\n            </Center>\n          </Center>\n          {/* Label */}\n          {wrapStringChild(combinedProps.children, _text)}\n        </Stack>\n      </Pressable>\n    );\n  }\n);\n\nexport default memo(forwardRef(Checkbox));\n"
  },
  {
    "path": "src/components/primitives/Checkbox/Checkbox.web.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\n//@ts-ignore\nimport stableHash from 'stable-hash';\nimport { mergeRefs } from '../../../utils';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport { Center } from '../../composites/Center';\nimport { useFormControlContext } from '../../composites/FormControl';\nimport Box from '../Box';\nimport type { ICheckboxProps } from './types';\nimport { useToggleState } from '@react-stately/toggle';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { CheckboxGroupContext } from './CheckboxGroup';\nimport { useHover } from '@react-native-aria/interactions';\nimport { useCheckbox, useCheckboxGroupItem } from '@react-native-aria/checkbox';\nimport { useFocusRing } from '@react-native-aria/focus';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nimport { extractInObject, stylingProps } from '../../../theme/tools/utils';\nimport { combineContextAndProps } from '../../../utils';\nimport SizedIcon from './SizedIcon';\nimport { Stack } from '../Stack';\nimport { wrapStringChild } from '../../../utils/wrapStringChild';\n\nconst Checkbox = (\n  {\n    wrapperRef,\n    isHovered: isHoveredProp,\n    isFocusVisible: isFocusVisibleProp,\n    ...props\n  }: ICheckboxProps,\n  ref: any\n) => {\n  const formControlContext = useFormControlContext();\n\n  const {\n    isInvalid,\n    isReadOnly,\n    isIndeterminate,\n    ...combinedProps\n  } = combineContextAndProps(formControlContext, props);\n\n  const checkboxGroupContext = React.useContext(CheckboxGroupContext);\n  const state = useToggleState({\n    ...props,\n    defaultSelected: props.defaultIsChecked,\n    isSelected: props.isChecked,\n  });\n\n  const _ref = React.useRef();\n  const mergedRef = mergeRefs([ref, _ref]);\n\n  // Swap hooks depending on whether this checkbox is inside a CheckboxGroup.\n  // This is a bit unorthodox. Typically, hooks cannot be called in a conditional,\n  // but since the checkbox won't move in and out of a group, it should be safe.\n  const { inputProps: groupItemInputProps } = checkboxGroupContext\n    ? // eslint-disable-next-line react-hooks/rules-of-hooks\n      useCheckboxGroupItem(\n        {\n          ...combinedProps,\n          'aria-label': combinedProps.accessibilityLabel,\n          'value': combinedProps.value,\n        },\n        checkboxGroupContext.state,\n        //@ts-ignore\n        mergedRef\n      )\n    : // eslint-disable-next-line react-hooks/rules-of-hooks\n      useCheckbox(\n        {\n          ...combinedProps,\n          'aria-label': combinedProps.accessibilityLabel,\n        },\n        state,\n        //@ts-ignore\n        mergedRef\n      );\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const inputProps = React.useMemo(() => groupItemInputProps, [\n    groupItemInputProps.checked,\n    groupItemInputProps.disabled,\n    groupItemInputProps,\n  ]);\n\n  const contextCombinedProps = React.useMemo(() => {\n    return { ...checkboxGroupContext, ...combinedProps };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [stableHash(combinedProps)]);\n\n  return (\n    <CheckboxComponent\n      wrapperRef={wrapperRef}\n      mergedRef={mergedRef}\n      inputProps={inputProps}\n      combinedProps={contextCombinedProps}\n      isInvalid={isInvalid}\n      isReadOnly={isReadOnly}\n      isHovered={isHoveredProp}\n      isIndeterminate={isIndeterminate}\n      isFocusVisible={isFocusVisibleProp}\n    />\n  );\n};\n\nconst CheckboxComponent = React.memo(\n  ({\n    wrapperRef,\n    inputProps,\n    combinedProps,\n    isInvalid,\n    isReadOnly,\n    isIndeterminate,\n    mergedRef,\n    isHovered: isHoveredProp,\n    isFocusVisible: isFocusVisibleProp,\n  }: any) => {\n    const _ref = React.useRef();\n    const { isHovered } = useHover({}, _ref);\n\n    const { checked: isChecked, disabled: isDisabled } = inputProps;\n\n    const { focusProps, isFocusVisible } = useFocusRing();\n\n    const {\n      icon,\n      _interactionBox,\n      _icon,\n      _stack,\n      _text,\n      ...resolvedProps\n    } = usePropsResolution('Checkbox', combinedProps, {\n      isInvalid,\n      isReadOnly,\n      isFocusVisible: isFocusVisibleProp || isFocusVisible,\n      isDisabled,\n      isIndeterminate,\n      isChecked,\n      isHovered: isHovered || isHoveredProp,\n    });\n\n    const [layoutProps, nonLayoutProps] = extractInObject(resolvedProps, [\n      ...stylingProps.margin,\n      ...stylingProps.layout,\n      ...stylingProps.flexbox,\n      ...stylingProps.position,\n      '_text',\n    ]);\n    const component = React.useMemo(() => {\n      return (\n        <Stack {..._stack} {...layoutProps}>\n          <Center>\n            {/* Interaction Box */}\n            <Box {..._interactionBox} />\n            {/* Checkbox */}\n            <Center {...nonLayoutProps}>\n              {/* {iconResolver()} */}\n              <SizedIcon icon={icon} _icon={_icon} isChecked={isChecked} />\n            </Center>\n          </Center>\n          {/* Label */}\n          {/* {resolvedProps?.children} */}\n          {wrapStringChild(resolvedProps?.children, _text)}\n        </Stack>\n      );\n    }, [\n      _icon,\n      _stack,\n      _text,\n      _interactionBox,\n      icon,\n      isChecked,\n      nonLayoutProps,\n      layoutProps,\n      resolvedProps?.children,\n    ]);\n\n    const mergedWrapperRef = React.useMemo(\n      () => mergeRefs([wrapperRef, _ref]),\n      [wrapperRef]\n    );\n\n    //TODO: refactor for responsive prop\n    if (useHasResponsiveProps(resolvedProps)) {\n      return null;\n    }\n\n    return (\n      <Box\n        // @ts-ignore - RN web supports accessibilityRole=\"label\"\n        accessibilityRole=\"label\"\n        ref={mergedWrapperRef}\n      >\n        <VisuallyHidden>\n          {/* <input {...props.inputProps} {...props.focusProps} ref={props.mergedRef} /> */}\n          <input {...inputProps} {...focusProps} ref={mergedRef} />\n        </VisuallyHidden>\n\n        {component}\n      </Box>\n    );\n  }\n);\n\nexport default memo(forwardRef(Checkbox));\n"
  },
  {
    "path": "src/components/primitives/Checkbox/CheckboxGroup.tsx",
    "content": "import React, { createContext, memo, forwardRef, useMemo } from 'react';\nimport { useCheckboxGroupState } from '@react-stately/checkbox';\nimport { useCheckboxGroup } from '@react-native-aria/checkbox';\nimport { useFormControlContext } from '../../composites/FormControl';\nimport type { ICheckboxGroupProps, ICheckboxContext } from './types';\nimport Box from '../Box';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\n\nexport const CheckboxGroupContext = createContext<ICheckboxContext | null>(\n  null\n);\n\nfunction CheckboxGroup(\n  { size, _checkbox, colorScheme, ...props }: ICheckboxGroupProps,\n  ref?: any\n) {\n  const resolvedProps = usePropsResolution('CheckboxGroup', props);\n  const { children } = props;\n  const state = useCheckboxGroupState(props);\n  const { groupProps } = useCheckboxGroup(\n    { 'aria-label': props.accessibilityLabel, ...props },\n    state\n  );\n  const formControlContext = useFormControlContext();\n  const value = useMemo(\n    () => ({\n      size,\n      colorScheme,\n      ..._checkbox,\n      ...formControlContext,\n      state,\n    }),\n    [_checkbox, colorScheme, formControlContext, size, state]\n  );\n\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps({ ...props, size, colorScheme })) {\n    return null;\n  }\n  return (\n    // @ts-ignore\n    <CheckboxGroupContext.Provider value={value}>\n      <Box {...resolvedProps} {...groupProps} {...props} ref={ref}>\n        {children}\n      </Box>\n    </CheckboxGroupContext.Provider>\n  );\n}\n\nexport default memo(forwardRef(CheckboxGroup));\n"
  },
  {
    "path": "src/components/primitives/Checkbox/SizedIcon.tsx",
    "content": "import React from 'react';\nimport { default as Box } from '../../primitives/Box';\nimport { CheckIcon } from '../../primitives/Icon/Icons';\n\nconst SizedIcon = ({\n  icon,\n  _icon,\n  isChecked,\n}: {\n  icon: JSX.Element;\n  _icon: any;\n  isChecked: boolean;\n}) => {\n  return isChecked ? (\n    icon ? (\n      React.cloneElement(icon, {\n        ..._icon,\n      })\n    ) : (\n      <CheckIcon {..._icon} />\n    )\n  ) : (\n    <Box {..._icon} />\n  );\n};\n\nexport default SizedIcon;\n"
  },
  {
    "path": "src/components/primitives/Checkbox/index.tsx",
    "content": "import CheckboxMain from './Checkbox';\nimport CheckboxGroup from './CheckboxGroup';\nimport type { ICheckboxComponentType } from './types';\n\nconst CheckTemp: any = CheckboxMain;\nCheckTemp.Group = CheckboxGroup;\n\n// To add typings\nconst Checkbox = CheckTemp as ICheckboxComponentType;\n\nexport { Checkbox };\nexport type { ICheckboxGroupProps, ICheckboxProps } from './types';\n"
  },
  {
    "path": "src/components/primitives/Checkbox/test/checkbox.test.tsx",
    "content": "import React from 'react';\nimport { fireEvent, render } from '@testing-library/react-native';\nimport { NativeBaseProvider } from '../../../../core/NativeBaseProvider';\nimport { Checkbox } from '..';\nimport { Text } from '../..';\n\nfunction CheckBoxGroup() {\n  const [groupValue, setGroupValue] = React.useState(['Item 1 ', 'Item 3 ']);\n  return (\n    <Checkbox.Group\n      colorScheme=\"green\"\n      defaultValue={groupValue}\n      onChange={(values) => {\n        setGroupValue(values || []);\n      }}\n    >\n      <Checkbox value=\"Item 1 \">\n        <Text mx={2}>Item 1</Text>\n      </Checkbox>\n      <Checkbox value=\"Item 2 \">\n        <Text mx={2}>Item 2</Text>\n      </Checkbox>\n      <Checkbox value=\"Item 3 \">\n        <Text mx={2}>Item 3</Text>\n      </Checkbox>\n      <Checkbox colorScheme=\"orange\" value=\"Indeterminate Item \">\n        <Text mx={2}>Indeterminate Item</Text>\n      </Checkbox>\n    </Checkbox.Group>\n  );\n}\n\nfunction CheckBox(group: any) {\n  const [groupValues, setGroupValues] = React.useState<Array<any>>([]);\n  return group ? (\n    <Checkbox.Group onChange={setGroupValues} value={groupValues}>\n      <Checkbox value=\"one\">\n        <Text>One</Text>\n      </Checkbox>\n      <Checkbox\n        value=\"two\"\n        isIndeterminate\n        onChange={() => setGroupValues([...groupValues, 'two'])}\n      >\n        <Text>Two</Text>\n      </Checkbox>\n    </Checkbox.Group>\n  ) : (\n    <>\n      <Checkbox\n        value=\"one\"\n        onChange={() => {\n          setGroupValues([...groupValues, 'one']);\n        }}\n      >\n        <Text>One</Text>\n      </Checkbox>\n      <Checkbox\n        value=\"two\"\n        isIndeterminate\n        onChange={() => setGroupValues([...groupValues, 'two'])}\n      >\n        <Text>Two</Text>\n      </Checkbox>\n    </>\n  );\n}\n\ndescribe('CheckBoxGroup', () => {\n  it('handles defaults and onChange on checkBoxGroup', () => {\n    const { getAllByRole } = render(\n      <NativeBaseProvider\n        initialWindowMetrics={{\n          frame: { x: 0, y: 0, width: 0, height: 0 },\n          insets: { top: 0, left: 0, right: 0, bottom: 0 },\n        }}\n      >\n        <CheckBoxGroup />\n      </NativeBaseProvider>\n    );\n    const checkbox = getAllByRole('checkbox');\n    expect(checkbox.length).toBe(4);\n    expect(checkbox[0].props.accessibilityState.checked).toBe(true);\n    expect(checkbox[1].props.accessibilityState.checked).toBe(false);\n    expect(checkbox[2].props.accessibilityState.checked).toBe(true);\n    expect(checkbox[3].props.accessibilityState.checked).toBe(false);\n    fireEvent.press(checkbox[1]);\n    expect(checkbox[1].props.accessibilityState.checked).toBe(true);\n  });\n  it('can be disabled on checkBox', () => {\n    const { getAllByRole } = render(\n      <NativeBaseProvider\n        initialWindowMetrics={{\n          frame: { x: 0, y: 0, width: 0, height: 0 },\n          insets: { top: 0, left: 0, right: 0, bottom: 0 },\n        }}\n      >\n        <Checkbox value=\"Item 1 \">\n          <Text mx={2}>Item 1</Text>\n        </Checkbox>\n        <Checkbox value=\"Item 2 \" isDisabled>\n          <Text mx={2}>Item 2</Text>\n        </Checkbox>\n        <Checkbox value=\"Item 3 \">\n          <Text mx={2}>Item 3</Text>\n        </Checkbox>\n        <Checkbox colorScheme=\"orange\" value=\"Indeterminate Item \">\n          <Text mx={2}>Indeterminate Item</Text>\n        </Checkbox>\n      </NativeBaseProvider>\n    );\n    const checkbox = getAllByRole('checkbox');\n    expect(checkbox.length).toBe(4);\n    expect(checkbox[1].props.accessibilityState.disabled).toBe(true);\n  });\n  it('is checked on checkBox', () => {\n    const { getAllByRole } = render(\n      <NativeBaseProvider\n        initialWindowMetrics={{\n          frame: { x: 0, y: 0, width: 0, height: 0 },\n          insets: { top: 0, left: 0, right: 0, bottom: 0 },\n        }}\n      >\n        <Checkbox value=\"Item 1 \" isChecked>\n          <Text mx={2}>Item 1</Text>\n        </Checkbox>\n        <Checkbox value=\"Item 2 \" isDisabled>\n          <Text mx={2}>Item 2</Text>\n        </Checkbox>\n        <Checkbox value=\"Item 3 \">\n          <Text mx={2}>Item 3</Text>\n        </Checkbox>\n        <Checkbox colorScheme=\"orange\" value=\"Indeterminate Item \">\n          <Text mx={2}>Indeterminate Item</Text>\n        </Checkbox>\n      </NativeBaseProvider>\n    );\n    const checkbox = getAllByRole('checkbox');\n    expect(checkbox.length).toBe(4);\n    expect(checkbox[0].props.accessibilityState.checked).toBe(true);\n  });\n\n  /****   inDeterminant is not yet implemented in checkbox ****/\n\n  // it('inDeterminant on checkBoxGroup', () => {\n  //   const { getAllByRole } = render(\n  //     <NativeBaseProvider\n  //       initialWindowMetrics={{\n  //         frame: { x: 0, y: 0, width: 0, height: 0 },\n  //         insets: { top: 0, left: 0, right: 0, bottom: 0 },\n  //       }}\n  //     >\n  //       <CheckBox group={true} />\n  //     </NativeBaseProvider>\n  //   );\n  //   const checkbox = getAllByRole('checkbox');\n  //   expect(checkbox.length).toBe(2);\n  //   expect(checkbox[1].props.accessibilityState.checked).toBe('mixed');\n  // });\n\n  // it('inDeterminant on checkBox', () => {\n  //   const { getAllByRole } = render(\n  //     <NativeBaseProvider\n  //       initialWindowMetrics={{\n  //         frame: { x: 0, y: 0, width: 0, height: 0 },\n  //         insets: { top: 0, left: 0, right: 0, bottom: 0 },\n  //       }}\n  //     >\n  //       <CheckBox group={false} />\n  //     </NativeBaseProvider>\n  //   );\n  //   const checkbox = getAllByRole('checkbox');\n  //   expect(checkbox.length).toBe(2);\n  //   fireEvent.press(checkbox[1]);\n  //   expect(checkbox[1].props.accessibilityState.checked).toBe('mixed');\n  // });\n\n  it('onChange on checkBox', () => {\n    const { getAllByRole } = render(\n      <NativeBaseProvider\n        initialWindowMetrics={{\n          frame: { x: 0, y: 0, width: 0, height: 0 },\n          insets: { top: 0, left: 0, right: 0, bottom: 0 },\n        }}\n      >\n        <CheckBox />\n      </NativeBaseProvider>\n    );\n    const checkbox = getAllByRole('checkbox');\n    expect(checkbox.length).toBe(2);\n    fireEvent.press(checkbox[0]);\n    expect(checkbox[0].props.accessibilityState.checked).toBe(true);\n  });\n});\n"
  },
  {
    "path": "src/components/primitives/Checkbox/types.tsx",
    "content": "import type { CheckboxGroupState } from '@react-stately/checkbox';\nimport type { MutableRefObject } from 'react';\nimport type { TouchableOpacityProps } from 'react-native';\nimport type { IFormControlContext } from '../../composites/FormControl';\nimport type { InterfaceBoxProps } from '../Box';\nimport type { IIconProps } from '../Icon';\nimport type { IStackProps } from '../../primitives/Stack';\nimport type {\n  CustomProps,\n  ResponsiveValue,\n  ThemeComponentSizeType,\n} from '../../../components/types';\nimport type { ColorSchemeType } from '../../../components/types';\n\nexport type ICheckboxValue = string;\n\nexport interface InterfaceCheckbox extends InterfaceBoxProps<ICheckboxProps> {\n  /**\n   * assign id to checkbox\n   */\n  id?: string;\n  /**\n   * The name of the input field in a checkbox.\n   */\n  name?: string;\n  /**\n   * The value to be used in the checkbox input. This is the value that will be returned on form submission.\n   */\n  value: ICheckboxValue;\n  /**\n   * The color of the radio when it's checked. This should be one of the color keys in the theme (e.g.\"green\", \"red\").\n   */\n  colorScheme?: ColorSchemeType & ResponsiveValue<'default'>;\n  /**\n   * If true, the checkbox will be initially checked. (use defaultValue prop if using it inside Checkbox.Group)\n   */\n  defaultIsChecked?: boolean;\n  /**\n   * If true, the checkbox will be checked. You'll need to pass onChange to update it's value (since it's now controlled).\n   */\n  isChecked?: boolean;\n  /**\n   * If true, the checkbox will be indeterminate. This only affects the icon shown inside checkbox.\n   */\n  isIndeterminate?: boolean;\n  // isFullWidth?: boolean;\n  /**\n   * If true, the checkbox will be disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * If true, the checkbox is marked as invalid.\n   */\n  isInvalid?: boolean;\n  /**\n   * If true, the checkbox is marked as readonly.\n   */\n  isReadOnly?: boolean;\n  /**\n   * If true, the checkbox will be hovered.\n   */\n  isHovered?: boolean;\n  /**\n   * If true, the checkbox will be pressed.\n   */\n  isPressed?: boolean;\n  /**\n   * If true, the checkbox will be focused.\n   */\n  isFocused?: boolean;\n  /**\n   * If true, the checkbox focus ring will be visible.\n   */\n  isFocusVisible?: boolean;\n  /**\n   * The size (width and height) of the checkbox.\n   * @default 'md'\n   */\n  size?: ThemeComponentSizeType<'Checkbox'>;\n  /**\n   * If given, will use this icon instead of the default.\n   */\n  icon?: JSX.Element;\n  /**\n   * Passed props wilICheckboxGroupPropsl be applied on disabled state.\n   */\n  _disabled?: Omit<Partial<ICheckboxProps>, '_disabled'>;\n  /**\n   * Passed props will be applied on checked state.\n   */\n  _checked?: Omit<Partial<ICheckboxProps>, '_checked'>;\n  /**\n   * Passed props will be applied on unchecked state.\n   */\n  _unchecked?: Omit<Partial<ICheckboxProps>, '_unchecked'>;\n  /**\n   * Passed props will be applied on focus state.\n   */\n  _focus?: Omit<Partial<ICheckboxProps>, '_focus'>;\n  /**\n   * Passed props will be applied on hover state.\n   */\n  _hover?: Omit<Partial<ICheckboxProps>, '_hover'>;\n  /**\n   * Passed props will be applied on invalid state.\n   */\n  _invalid?: Omit<Partial<ICheckboxProps>, '_invalid'>;\n  /**\n   * Passed props will be applied on pressed state on native.\n   */\n  _pressed?: Omit<Partial<ICheckboxProps>, '_pressed'>;\n  /**\n   * Passed props will be applied on readonly state.\n   */\n  _readOnly?: Omit<Partial<ICheckboxProps>, '_readOnly'>;\n  /**\n   * Icon related props can be passed in _icon.\n   */\n  _icon?: Partial<IIconProps>;\n  /**\n   * You can style interaction box around the checkbox using this.\n   */\n  _interactionBox?: Omit<Partial<ICheckboxProps>, '_interactionBox'>;\n  /**\n   * Props to be passed to the Stack used inside.\n   */\n  _stack?: Partial<IStackProps>;\n  /**\n   * Function called when the state of the checkbox changes.\n   */\n  onChange?: (isSelected: boolean) => void;\n  // onBlur?: (event: any) => void;\n  // onFocus?: (event: any) => void;\n  // ariaLabelledby?: string;\n  /**\n   * Ref to be passed to Icon's wrapper Box\n   */\n  wrapperRef?: any;\n  ref?: MutableRefObject<any>;\n}\nexport interface ICheckboxGroupProps\n  extends InterfaceBoxProps<ICheckboxGroupProps> {\n  /**\n   * assign id to checkbox group\n   */\n  id?: string;\n  /**\n   * The value of the checkbox group.\n   */\n  value?: Array<string>;\n  /**\n   * The initial value of the checkbox group.\n   */\n  defaultValue?: Array<string>;\n  /**\n   * The color of the radio when it's checked. This should be one of the color keys in the theme (e.g.\"green\", \"red\").\n   */\n  colorScheme?: ColorSchemeType;\n  /**\n   * The size (width and height) of the checkbox.\n   */\n  size?: ResponsiveValue<'sm' | 'md' | 'lg'>;\n  /**\n   * The callback fired when any children Checkbox is checked or unchecked.\n   */\n  onChange?: (values: any) => any;\n  /**\n   * Pass props will be passed to each checkbox.\n   */\n  _checkbox?: Partial<ICheckboxProps>;\n}\nexport interface ICheckboxContext extends IFormControlContext {\n  colorScheme?: ColorSchemeType;\n  size?: ResponsiveValue<'sm' | 'md' | 'lg'>;\n  state: CheckboxGroupState;\n}\n\nexport interface IUseCheckboxReturnType {\n  inputProps: {\n    checked: boolean;\n  } & Partial<TouchableOpacityProps>;\n}\n\nexport interface IUseCheckboxGroupReturnType {\n  checkboxGroupProps: {\n    onChange: (checkboxValue: ICheckboxValue, isChecked: boolean) => any;\n    values: Array<ICheckboxValue>;\n  };\n}\n\nexport type ICheckboxComponentType = ((\n  props: ICheckboxProps\n) => JSX.Element) & {\n  Group: React.MemoExoticComponent<\n    (props: ICheckboxGroupProps, ref?: MutableRefObject<any>) => JSX.Element\n  >;\n};\n\nexport type ICheckboxProps = InterfaceCheckbox & CustomProps<'Checkbox'>;\n"
  },
  {
    "path": "src/components/primitives/Column/index.tsx",
    "content": "import { VStack } from '../Stack';\nexport { VStack as Column };\n"
  },
  {
    "path": "src/components/primitives/Flex/index.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport Box from '../Box';\nimport type { IFlexProps } from './types';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst Flex = (props: IFlexProps, ref: any) => {\n  const {\n    align,\n    justify,\n    wrap,\n    basis,\n    grow,\n    shrink,\n    direction,\n    ...resolvedProps\n  } = usePropsResolution('Flex', props);\n\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n\n  return (\n    <Box\n      {...resolvedProps}\n      flexDirection={direction || resolvedProps.flexDirection}\n      alignItems={align || resolvedProps.alignItems}\n      justifyContent={justify || resolvedProps.justifyContent}\n      flexGrow={grow || resolvedProps.flexGrow}\n      flexBasis={basis || resolvedProps.flexBasis}\n      flexShrink={shrink || resolvedProps.flexShrink}\n      flexWrap={wrap || resolvedProps.flexWrap}\n      ref={ref}\n    />\n  );\n};\n\n//Spacer Component that adds space between components where it is placed\nexport const Spacer = (props: any) => {\n  const resolvedProps = usePropsResolution('Spacer', props);\n\n  return <Box {...resolvedProps} />;\n};\n\nexport type { IFlexProps };\nexport default memo(forwardRef(Flex));\n"
  },
  {
    "path": "src/components/primitives/Flex/types.ts",
    "content": "import type * as CSS from 'csstype';\nimport type { CustomProps } from '../../types/utils';\nimport type { InterfaceBoxProps } from '../Box/types';\n\n// export type IFlexProps = IBoxProps<IFlexProps> & {\n//   direction?: CSS.Property.FlexDirection;\n//   align?: CSS.Property.AlignItems;\n//   justify?: CSS.Property.JustifyContent;\n//   wrap?: CSS.Property.FlexWrap;\n//   basis?: CSS.Property.FlexBasis;\n//   grow?: CSS.Property.FlexGrow;\n//   shrink?: CSS.Property.FlexShrink;\n// };\n\nexport type IFlexProps = (InterfaceBoxProps<IFlexProps> & {\n  direction?: CSS.Property.FlexDirection;\n  align?: CSS.Property.AlignItems;\n  justify?: CSS.Property.JustifyContent;\n  wrap?: CSS.Property.FlexWrap;\n  basis?: CSS.Property.FlexBasis;\n  grow?: CSS.Property.FlexGrow;\n  shrink?: CSS.Property.FlexShrink;\n}) &\n  CustomProps<'Flex'>;\n"
  },
  {
    "path": "src/components/primitives/GridItem/props.ts",
    "content": "import type * as CSS from 'csstype';\nimport type { CustomProps } from '../../types/utils';\nimport type { InterfaceBoxProps } from '../Box/types';\n// import type { IBoxProps } from '../Box';\n\n// export type IGridItemProps = IBoxProps<IGridItemProps> & {\n//   gap?: CSS.Property.Gap;\n//   rowSpan?: number;\n//   colSpan?: number;\n//   colStart?: CSS.Property.GridColumnStart;\n//   colEnd?: CSS.Property.GridColumnEnd;\n//   rowStart?: CSS.Property.GridColumnStart;\n//   rowEnd?: CSS.Property.GridColumnEnd;\n//   area?: string;\n// };\n\nexport type IGridItemProps = (InterfaceBoxProps<IGridItemProps> & {\n  gap?: CSS.Property.Gap;\n  rowSpan?: number;\n  colSpan?: number;\n  colStart?: CSS.Property.GridColumnStart;\n  colEnd?: CSS.Property.GridColumnEnd;\n  rowStart?: CSS.Property.GridColumnStart;\n  rowEnd?: CSS.Property.GridColumnEnd;\n  area?: string;\n}) &\n  CustomProps<'Box'>;\n"
  },
  {
    "path": "src/components/primitives/Heading/index.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport Text from '../Text';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport type { IHeadingProps } from './types';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst Heading = (props: IHeadingProps, ref: any) => {\n  const resolvedProps = usePropsResolution('Heading', props);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return <Text {...resolvedProps} ref={ref} />;\n};\n\nexport default memo(forwardRef(Heading));\nexport type { IHeadingProps };\n"
  },
  {
    "path": "src/components/primitives/Heading/types.ts",
    "content": "import type { InterfaceTextProps } from '../Text/types';\n\nimport type { CustomProps, ThemeComponentSizeType } from '../../types/utils';\n\nexport interface IterfaceHeadingProps\n  extends InterfaceTextProps<IHeadingProps> {\n  /**\n   * The size of the heading.\n   * @default xl\n   */\n  size?: ThemeComponentSizeType<'Heading'>;\n}\n\nexport type IHeadingProps = IterfaceHeadingProps & CustomProps<'Heading'>;\n"
  },
  {
    "path": "src/components/primitives/Hidden/HiddenSSR.tsx",
    "content": "import React from 'react';\nimport { useTheme } from 'native-base';\nimport { Platform } from 'react-native';\nimport type { IHiddenProps } from './types';\nimport { useColorMode } from '../../../core/color-mode/hooks';\n\nexport const HiddenSSR = React.memo(({ children, ...props }: IHiddenProps) => {\n  const theme = useTheme();\n  const breakPoints = Object.keys(theme.breakpoints);\n  const currentColorMode = useColorMode();\n\n  const { from, till, only, colorMode, platform } = props;\n\n  if (children === null) return null;\n  if (!from && !till && !only && !colorMode && !platform) {\n    return null;\n  } else if (\n    (Array.isArray(platform) && platform.includes(Platform.OS)) ||\n    platform === Platform.OS\n  ) {\n    return null;\n  } else if (colorMode === currentColorMode.colorMode) {\n    return null;\n  }\n  const display: any = {};\n\n  if (till) {\n    let flag = false;\n    for (const i in breakPoints) {\n      if (breakPoints[i] === till) {\n        display[breakPoints[i]] = 'flex';\n        flag = true;\n      } else {\n        display[breakPoints[i]] = flag ? 'flex' : 'none';\n      }\n    }\n  }\n\n  if (from) {\n    let flag = false;\n    for (const i in breakPoints) {\n      if (breakPoints[i] === from || flag) {\n        display[breakPoints[i]] = 'none';\n        flag = true;\n      } else {\n        display[breakPoints[i]] = 'flex';\n      }\n    }\n  }\n  if (only) {\n    if (Array.isArray(only)) {\n      for (const i in breakPoints) {\n        if (only.includes(breakPoints[i])) {\n          display[breakPoints[i]] = 'none';\n        } else {\n          display[breakPoints[i]] = 'flex';\n        }\n      }\n    } else {\n      display[only] = 'none';\n    }\n  }\n\n  return React.cloneElement(children, {\n    display: display,\n  });\n});\n"
  },
  {
    "path": "src/components/primitives/Hidden/index.tsx",
    "content": "import React from 'react';\nimport { memo } from 'react';\nimport type { IHiddenProps } from './types';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport { useBreakpointValue, useTheme, useToken } from '../../../hooks';\nimport { useColorMode } from '../../../core/color-mode/hooks';\nimport { Platform } from 'react-native';\nimport { useNativeBaseConfig } from '../../../core/NativeBaseContext';\nimport { HiddenSSR } from './HiddenSSR';\nexport function Hidden({ isSSR, ...props }: IHiddenProps) {\n  const {\n    from,\n    till,\n    only,\n    platform,\n    colorMode,\n    children,\n  } = usePropsResolution(\n    'Hidden',\n    props,\n    {},\n    {\n      ignoreProps: ['only', 'platform'],\n    }\n  );\n  const { breakpoints } = useTheme();\n  const currentColorMode = useColorMode();\n\n  const breakpointValueObject = Object.keys(breakpoints).reduce(\n    (obj: any, val: string) => {\n      obj[val] = val;\n      return obj;\n    },\n    {}\n  );\n  const breakpointValue = useBreakpointValue(breakpointValueObject);\n  const [currentBreakpointValue] = useToken('breakpoints', [breakpointValue]);\n  const [fromBreakPointValue] = useToken('breakpoints', [from]);\n  const [tillBreakPointValue] = useToken('breakpoints', [till]);\n  const isSSRProvider = useNativeBaseConfig('useBreakpointResolvedProps').isSSR;\n\n  if (isSSR && isSSRProvider) return <HiddenSSR {...props} />;\n  //if no prop is passed, it will hide the element wrapped with hidden\n  if (!from && !till && !only && !colorMode && !platform) {\n    return null;\n  }\n\n  //if from and till prop exists, it will hide the element wrapped accordingly\n  else if (\n    from &&\n    till &&\n    currentBreakpointValue >= fromBreakPointValue &&\n    currentBreakpointValue < tillBreakPointValue\n  ) {\n    return null;\n  }\n\n  //if from prop exists, it will hide the element wrapped starting from that breakpoint.\n  else if (from && !till && currentBreakpointValue >= fromBreakPointValue) {\n    return null;\n  }\n\n  //if till prop exists, it will hide the element wrapped starting from  0 till that breakpoint.\n  else if (till && !from && currentBreakpointValue < tillBreakPointValue) {\n    return null;\n  }\n\n  //if only prop exists and is array, check that array consists current breakpoint value, and if that exists, hide on that breakpoint to next breakpoint.\n  // if only prop is string, hide on that breakpoint to next breakpoint.\n  else if (\n    (Array.isArray(only) && only.includes(breakpointValue)) ||\n    only === breakpointValue\n  ) {\n    return null;\n  }\n  //if platform prop exists and is array, check that array consists current platform value, and if that exists, hide on that platform.\n  // if platform prop is string, hide on that platform.\n  else if (\n    (Array.isArray(platform) && platform.includes(Platform.OS)) ||\n    platform === Platform.OS\n  ) {\n    return null;\n  }\n  //if colormode prop is valid string, hide on that colormode.\n  else if (colorMode === currentColorMode.colorMode) {\n    return null;\n  }\n  return children;\n}\n\nexport default memo(Hidden);\nexport type { IHiddenProps };\n"
  },
  {
    "path": "src/components/primitives/Hidden/types.ts",
    "content": "type LiteralUnion<T extends U, U = string> = T | (U & {});\n\nexport interface InterfaceHiddenProps {\n  /**\n   * The from prop takes breakpoint from which the wrapped component is hidden.\n   */\n  from?: LiteralUnion<'base' | 'sm' | 'md' | 'lg' | 'xl'>;\n  /**\n   * The till prop takes breakpoint till which the wrapped component is hidden.\n   */\n  till?: LiteralUnion<'base' | 'sm' | 'md' | 'lg' | 'xl'>;\n  /**\n   * The only prop takes array of breakpoints on which the wrapped component is hidden.\n   * It hides the component starting from that breakpoint to the next breakpoint.\n   */\n  only?:\n    | LiteralUnion<'base' | 'sm' | 'md' | 'lg' | 'xl'>\n    | Array<LiteralUnion<'base' | 'sm' | 'md' | 'lg' | 'xl'>>;\n  /**\n   * The colormode takes the mode on which the wrapped component must be hidden.\n   */\n  colorMode?: 'light' | 'dark';\n  /**\n   * The platform takes the platform as string or array for the multiple on which the wrapped component must be hidden.\n   */\n  platform?:\n    | LiteralUnion<'ios' | 'android' | 'web'>\n    | Array<LiteralUnion<'ios' | 'android' | 'web'>>;\n  /**\n   *\n   */\n  children: React.ReactElement | null;\n  /**\n   *\n   */\n  isSSR?: boolean;\n}\n\nexport type IHiddenProps = InterfaceHiddenProps;\n"
  },
  {
    "path": "src/components/primitives/Icon/Icon.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport { useToken, usePropsResolution } from '../../../hooks';\nimport type { IIconProps } from './types';\nimport SVGIcon from './SVGIcon';\nimport { Factory } from '../../../factory';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst Icon = (props: IIconProps, ref?: any) => {\n  const { as, size, ...resolvedProps } = usePropsResolution('Icon', props);\n  const tokenizedFontSize = useToken('space', size);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  if (!as) {\n    return <SVGIcon size={size} {...resolvedProps} ref={ref} />;\n  }\n  const isJSX = React.isValidElement(as);\n  const StyledAs = Factory(\n    isJSX\n      ? (resolvedProps) =>\n          React.cloneElement(as, {\n            ...resolvedProps,\n            //@ts-ignore\n            ...as.props,\n          })\n      : as\n  );\n\n  return (\n    <StyledAs\n      {...resolvedProps}\n      fontSize={tokenizedFontSize}\n      lineHeight={tokenizedFontSize}\n      size={size}\n      ref={ref}\n    />\n  );\n};\n\nexport default memo(forwardRef(Icon));\n"
  },
  {
    "path": "src/components/primitives/Icon/Icons/Add.tsx",
    "content": "import { createIcon } from '../createIcon';\n\nexport const AddIcon = createIcon({\n  viewBox: '0 0 24 24',\n  d: 'M13.25 10.75V2H10.75V10.75H2V13.25H10.75V22H13.25V13.25H22V10.75H13.25Z',\n});\n"
  },
  {
    "path": "src/components/primitives/Icon/Icons/Arrow.tsx",
    "content": "import React from 'react';\nimport { createIcon } from '../createIcon';\nimport { G, Path } from '../nbSvg';\n\nexport const ArrowUpIcon = createIcon({\n  viewBox: '0 0 24 24',\n  path: (\n    <G>\n      <Path\n        d=\"M20.2362 13.0666L13.6036 6.43395L12.75 5.58039V6.7875L12.75 21.5H11.25L11.25 6.7875V5.58192L10.3968 6.43363L3.76282 13.0557L2.70711 12L12 2.70711L21.2941 12.0012L20.2362 13.0666Z\"\n        stroke=\"currentColor\"\n      />\n    </G>\n  ),\n});\n\nexport const ArrowDownIcon = createIcon({\n  viewBox: '0 0 24 24',\n  path: (\n    <G>\n      <Path\n        d=\"M3.76375 10.9334L10.3964 17.5661L11.25 18.4196V17.2125L11.25 2.5H12.75L12.75 17.2125V18.4181L13.6032 17.5664L20.2372 10.9443L21.2929 12L12 21.2929L2.70586 11.9988L3.76375 10.9334Z\"\n        stroke=\"currentColor\"\n      />\n    </G>\n  ),\n});\n\nexport const ArrowForwardIcon = createIcon({\n  viewBox: '0 0 24 24',\n  path: (\n    <G>\n      <Path\n        d=\"M10.9334 3.76375L17.5661 10.3964L18.4196 11.25H17.2125H2.5V12.75H17.2125H18.4181L17.5664 13.6032L10.9443 20.2372L12 21.2929L21.2929 12L11.9988 2.70586L10.9334 3.76375Z\"\n        stroke=\"currentColor\"\n      />\n    </G>\n  ),\n});\n\nexport const ArrowBackIcon = createIcon({\n  viewBox: '0 0 24 24',\n  path: (\n    <G>\n      <Path\n        d=\"M13.0666 3.76375L6.43395 10.3964L5.58039 11.25H6.7875H21.5V12.75H6.7875H5.58192L6.43363 13.6032L13.0557 20.2372L12 21.2929L2.70711 12L12.0012 2.70586L13.0666 3.76375Z\"\n        stroke=\"currentColor\"\n      />\n    </G>\n  ),\n});\n"
  },
  {
    "path": "src/components/primitives/Icon/Icons/Check.tsx",
    "content": "import { createIcon } from '../createIcon';\n\nexport const CheckIcon = createIcon({\n  viewBox: '0 0 24 24',\n  d:\n    'M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z',\n});\n\nexport const CheckCircleIcon = createIcon({\n  viewBox: '0 0 24 24',\n  d:\n    'M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.17719 11.2464L9.91869 13.9114L16.8228 7.2L18 8.34432L9.91869 16.2L6 12.3907L7.17719 11.2464Z',\n});\n"
  },
  {
    "path": "src/components/primitives/Icon/Icons/Chevron.tsx",
    "content": "import { createIcon } from '../createIcon';\n\nexport const ChevronUpIcon = createIcon({\n  viewBox: '0 0 24 24',\n  d:\n    'M20.2286 18L11.9973 9.62148L3.76862 17.9973L2 16.1971L12 6L22 16.1971L20.2286 18Z',\n});\n\nexport const ChevronDownIcon = createIcon({\n  viewBox: '0 0 24 24',\n  d:\n    'M20.2286 6L11.9973 14.3785L3.76862 6.00268L2 7.80293L12 18L22 7.80293L20.2286 6Z',\n});\n\nexport const ChevronLeftIcon = createIcon({\n  viewBox: '0 0 24 24',\n  d:\n    'M18 3.77141L9.62148 12.0027L17.9973 20.2314L16.1971 22L6 12L16.1971 2L18 3.77141Z',\n});\n\nexport const ChevronRightIcon = createIcon({\n  viewBox: '0 0 24 24',\n  d:\n    'M6 3.77141L14.3785 12.0027L6.00268 20.2314L7.80293 22L18 12L7.80293 2L6 3.77141Z',\n});\n"
  },
  {
    "path": "src/components/primitives/Icon/Icons/Circle.tsx",
    "content": "import { createIcon } from '../createIcon';\n\nexport const CircleIcon = createIcon({\n  viewBox: '0 0 24 24',\n  d:\n    'M0 12C-2.34822e-08 13.5759 0.310389 15.1363 0.913445 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 10.4241 23.6896 8.86371 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913446C15.1363 0.310389 13.5759 0 12 0C10.4241 0 8.86371 0.310389 7.4078 0.913446C5.95189 1.5165 4.62902 2.40042 3.51472 3.51472C2.40042 4.62902 1.5165 5.95189 0.913445 7.4078C0.310389 8.86371 -2.34822e-08 10.4241 0 12Z',\n});\n"
  },
  {
    "path": "src/components/primitives/Icon/Icons/Close.tsx",
    "content": "import React from 'react';\nimport { createIcon } from '../createIcon';\nimport { Path } from '../nbSvg';\n\nexport const CloseIcon = createIcon({\n  viewBox: '0 0 24 24',\n  d:\n    'M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z',\n});\n\nexport const SmallCloseIcon = createIcon({\n  viewBox: '0 0 16 16',\n  path: (\n    <Path\n      d=\"M9.41 8l2.29-2.29c.19-.18.3-.43.3-.71a1.003 1.003 0 0 0-1.71-.71L8 6.59l-2.29-2.3a1.003 1.003 0 0 0-1.42 1.42L6.59 8 4.3 10.29c-.19.18-.3.43-.3.71a1.003 1.003 0 0 0 1.71.71L8 9.41l2.29 2.29c.18.19.43.3.71.3a1.003 1.003 0 0 0 .71-1.71L9.41 8z\"\n      fillRule=\"evenodd\"\n      fill=\"currentColor\"\n    />\n  ),\n});\n"
  },
  {
    "path": "src/components/primitives/Icon/Icons/Delete.tsx",
    "content": "import { createIcon } from '../createIcon';\n\nexport const DeleteIcon = createIcon({\n  viewBox: '0 0 24 24',\n  d:\n    'M5.11111 19.7778C5.11111 21 6.11111 22 7.33333 22H16.2222C17.4444 22 18.4444 21 18.4444 19.7778V6.44444H5.11111V19.7778ZM19.5556 3.11111H15.6667L14.5556 2H9L7.88889 3.11111H4V5.33333H19.5556V3.11111Z',\n});\n"
  },
  {
    "path": "src/components/primitives/Icon/Icons/Favourite.tsx",
    "content": "import { createIcon } from '../createIcon';\n\nexport const FavouriteIcon = createIcon({\n  viewBox: '0 0 24 24',\n  d:\n    'M1.75143 3.371C2.87321 2.22206 4.39447 1.57662 5.98067 1.57662C7.56686 1.57662 9.08812 2.22206 10.2099 3.371L11.9626 5.16516L13.7153 3.371C14.2671 2.78565 14.9272 2.31876 15.657 1.99756C16.3869 1.67637 17.1718 1.5073 17.9661 1.50023C18.7604 1.49316 19.5481 1.64823 20.2832 1.95638C21.0184 2.26453 21.6863 2.7196 22.2479 3.29504C22.8096 3.87047 23.2538 4.55474 23.5545 5.30793C23.8553 6.06112 24.0067 6.86813 23.9998 7.68189C23.9929 8.49564 23.8279 9.29984 23.5143 10.0476C23.2008 10.7953 22.7451 11.4715 22.1738 12.0369L11.9626 22.5L1.75143 12.0369C0.629991 10.8876 0 9.32904 0 7.70394C0 6.07885 0.629991 4.52029 1.75143 3.371Z',\n});\n"
  },
  {
    "path": "src/components/primitives/Icon/Icons/Hamburger.tsx",
    "content": "import { createIcon } from '../createIcon';\n\nexport const HamburgerIcon = createIcon({\n  viewBox: '0 0 24 24',\n  d:\n    'M22 5H2V7.47961H22V5ZM22 10.4795H2V12.9591H22V10.4795ZM2 15.959H22V18.4386H2V15.959Z',\n});\n"
  },
  {
    "path": "src/components/primitives/Icon/Icons/Info.tsx",
    "content": "import React from 'react';\nimport { createIcon } from '../createIcon';\nimport { G, Path } from '../nbSvg';\n\nexport const InfoOutlineIcon = createIcon({\n  viewBox: '0 0 24 24',\n  path: (\n    <G>\n      <Path d=\"M11.9442 8.24C12.5628 8.24 13.0642 7.73856 13.0642 7.12C13.0642 6.50144 12.5628 6 11.9442 6C11.3257 6 10.8242 6.50144 10.8242 7.12C10.8242 7.73856 11.3257 8.24 11.9442 8.24Z\" />\n      <Path d=\"M14.4008 15.9996H12.8008V9.59961H10.4008C10.1886 9.59961 9.98513 9.68389 9.8351 9.83392C9.68507 9.98395 9.60078 10.1874 9.60078 10.3996C9.60078 10.6118 9.68507 10.8153 9.8351 10.9653C9.98513 11.1153 10.1886 11.1996 10.4008 11.1996H11.2008V15.9996H9.60078C9.38861 15.9996 9.18513 16.0839 9.0351 16.2339C8.88507 16.384 8.80078 16.5874 8.80078 16.7996C8.80078 17.0118 8.88507 17.2153 9.0351 17.3653C9.18513 17.5153 9.38861 17.5996 9.60078 17.5996H14.4008C14.613 17.5996 14.8164 17.5153 14.9665 17.3653C15.1165 17.2153 15.2008 17.0118 15.2008 16.7996C15.2008 16.5874 15.1165 16.384 14.9665 16.2339C14.8164 16.0839 14.613 15.9996 14.4008 15.9996Z\" />\n      <Path d=\"M12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17316C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8078C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 9.34783 20.9464 6.80429 19.0711 4.92893C17.1957 3.05357 14.6522 2 12 2ZM12 20.3333C10.3518 20.3333 8.74066 19.8446 7.37025 18.9289C5.99984 18.0132 4.93174 16.7117 4.30101 15.189C3.67028 13.6663 3.50525 11.9908 3.82679 10.3742C4.14834 8.75774 4.94201 7.27288 6.10745 6.10744C7.27288 4.942 8.75774 4.14833 10.3743 3.82679C11.9908 3.50525 13.6663 3.67027 15.189 4.301C16.7117 4.93173 18.0132 5.99984 18.9289 7.37025C19.8446 8.74066 20.3333 10.3518 20.3333 12C20.3333 13.0943 20.1178 14.178 19.699 15.189C19.2802 16.2001 18.6664 17.1187 17.8926 17.8926C17.1187 18.6664 16.2001 19.2802 15.189 19.699C14.178 20.1178 13.0944 20.3333 12 20.3333Z\" />\n    </G>\n  ),\n});\n\nexport const InfoIcon = createIcon({\n  viewBox: '0 0 24 24',\n  d:\n    'M12 0C9.62663 0 7.30655 0.703788 5.33316 2.02236C3.35977 3.34094 1.8217 5.21509 0.913451 7.4078C0.00519948 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6689 1.83649 18.807 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0865C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6935 24 14.3734 24 12C23.9966 8.81846 22.7312 5.76821 20.4815 3.51852C18.2318 1.26883 15.1815 0.00344108 12 0ZM12.25 5C12.5467 5 12.8367 5.08797 13.0834 5.25279C13.33 5.41762 13.5223 5.65189 13.6358 5.92597C13.7494 6.20006 13.7791 6.50166 13.7212 6.79263C13.6633 7.08361 13.5204 7.35088 13.3107 7.56066C13.1009 7.77044 12.8336 7.9133 12.5426 7.97118C12.2517 8.02905 11.9501 7.99935 11.676 7.88582C11.4019 7.77229 11.1676 7.58003 11.0028 7.33335C10.838 7.08668 10.75 6.79667 10.75 6.5C10.75 6.10217 10.908 5.72064 11.1893 5.43934C11.4706 5.15803 11.8522 5 12.25 5ZM14.5 18.5H10.5C10.2348 18.5 9.98043 18.3946 9.7929 18.2071C9.60536 18.0196 9.5 17.7652 9.5 17.5C9.5 17.2348 9.60536 16.9804 9.7929 16.7929C9.98043 16.6054 10.2348 16.5 10.5 16.5H11.25C11.3163 16.5 11.3799 16.4737 11.4268 16.4268C11.4737 16.3799 11.5 16.3163 11.5 16.25V11.75C11.5 11.6837 11.4737 11.6201 11.4268 11.5732C11.3799 11.5263 11.3163 11.5 11.25 11.5H10.5C10.2348 11.5 9.98043 11.3946 9.7929 11.2071C9.60536 11.0196 9.5 10.7652 9.5 10.5C9.5 10.2348 9.60536 9.98043 9.7929 9.79289C9.98043 9.60536 10.2348 9.5 10.5 9.5H11.5C12.0304 9.5 12.5391 9.71071 12.9142 10.0858C13.2893 10.4609 13.5 10.9696 13.5 11.5V16.25C13.5 16.3163 13.5263 16.3799 13.5732 16.4268C13.6201 16.4737 13.6837 16.5 13.75 16.5H14.5C14.7652 16.5 15.0196 16.6054 15.2071 16.7929C15.3946 16.9804 15.5 17.2348 15.5 17.5C15.5 17.7652 15.3946 18.0196 15.2071 18.2071C15.0196 18.3946 14.7652 18.5 14.5 18.5Z',\n});\n"
  },
  {
    "path": "src/components/primitives/Icon/Icons/Minus.tsx",
    "content": "import { createIcon } from '../createIcon';\n\nexport const MinusIcon = createIcon({\n  viewBox: '0 0 24 24',\n  d: 'M22 10.5H2V13H22V10.5Z',\n});\n"
  },
  {
    "path": "src/components/primitives/Icon/Icons/Moon.tsx",
    "content": "import { createIcon } from '../createIcon';\n\nexport const MoonIcon = createIcon({\n  viewBox: '0 0 24 24',\n  d:\n    'M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z',\n});\n"
  },
  {
    "path": "src/components/primitives/Icon/Icons/Play.tsx",
    "content": "import { createIcon } from '../createIcon';\n\nexport const PlayIcon = createIcon({\n  viewBox: '0 0 24 24',\n  d:\n    'M12 0C5.376 0 0 5.376 0 12C0 18.624 5.376 24 12 24C18.624 24 24 18.624 24 12C24 5.376 18.624 0 12 0ZM9.6 17.4V6.6L16.8 12L9.6 17.4Z',\n});\n"
  },
  {
    "path": "src/components/primitives/Icon/Icons/Question.tsx",
    "content": "import { createIcon } from '../createIcon';\nimport { questionOutlineIconPath } from './questionIconPath';\n\nexport const QuestionIcon = createIcon({\n  viewBox: '0 0 24 24',\n  d:\n    'M12 0C9.62663 0 7.30655 0.703787 5.33316 2.02236C3.35977 3.34094 1.8217 5.21508 0.913451 7.4078C0.00519943 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6688 1.83649 18.807 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0865C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6934 24 14.3734 24 12C23.9966 8.81846 22.7312 5.76821 20.4815 3.51852C18.2318 1.26883 15.1815 0.00344108 12 0V0ZM12 19C11.7033 19 11.4133 18.912 11.1666 18.7472C10.92 18.5824 10.7277 18.3481 10.6142 18.074C10.5007 17.7999 10.4709 17.4983 10.5288 17.2074C10.5867 16.9164 10.7296 16.6491 10.9393 16.4393C11.1491 16.2296 11.4164 16.0867 11.7074 16.0288C11.9983 15.9709 12.2999 16.0006 12.574 16.1142C12.8481 16.2277 13.0824 16.42 13.2472 16.6666C13.412 16.9133 13.5 17.2033 13.5 17.5C13.5 17.8978 13.342 18.2794 13.0607 18.5607C12.7794 18.842 12.3978 19 12 19ZM13.6 12.92C13.4216 12.9979 13.2698 13.1261 13.1632 13.289C13.0566 13.4519 12.9999 13.6423 13 13.837C13 14.1022 12.8946 14.3566 12.7071 14.5441C12.5196 14.7316 12.2652 14.837 12 14.837C11.7348 14.837 11.4804 14.7316 11.2929 14.5441C11.1054 14.3566 11 14.1022 11 13.837C10.9999 13.2532 11.1702 12.682 11.4899 12.1936C11.8096 11.7051 12.2649 11.3205 12.8 11.087C13.1305 10.9427 13.4159 10.7118 13.6259 10.4186C13.8359 10.1255 13.9627 9.78099 13.993 9.42163C14.0232 9.06228 13.9557 8.70144 13.7976 8.37731C13.6396 8.05317 13.3968 7.77781 13.095 7.58037C12.7932 7.38292 12.4437 7.27074 12.0834 7.25571C11.7231 7.24067 11.3654 7.32333 11.0482 7.49495C10.7311 7.66656 10.4662 7.92074 10.2817 8.23057C10.0971 8.54041 9.99982 8.89437 10 9.255C10 9.52021 9.89465 9.77457 9.70711 9.9621C9.51957 10.1496 9.26522 10.255 9 10.255C8.73479 10.255 8.48043 10.1496 8.2929 9.9621C8.10536 9.77457 8 9.52021 8 9.255C7.99999 8.53384 8.19495 7.82608 8.56423 7.20665C8.93352 6.58721 9.4634 6.07913 10.0978 5.73618C10.7322 5.39324 11.4475 5.22817 12.168 5.25847C12.8886 5.28876 13.5875 5.51329 14.1909 5.90828C14.7942 6.30327 15.2796 6.85404 15.5956 7.50229C15.9116 8.15054 16.0464 8.87216 15.9859 9.59077C15.9253 10.3094 15.6716 10.9983 15.2516 11.5845C14.8316 12.1707 14.261 12.6325 13.6 12.921V12.92Z',\n});\n\nexport const QuestionOutlineIcon = createIcon({\n  viewBox: '0 0 24 24',\n  path: questionOutlineIconPath,\n});\n"
  },
  {
    "path": "src/components/primitives/Icon/Icons/Search.tsx",
    "content": "import { createIcon } from '../createIcon';\n\nexport const SearchIcon = createIcon({\n  viewBox: '0 0 24 24',\n  d:\n    'M21.9399 20.5624L15.4474 14.0699C16.4549 12.7675 16.9999 11.175 16.9999 9.49997C16.9999 7.49498 16.2174 5.61498 14.8024 4.19749C13.3874 2.78 11.5025 2 9.49997 2C7.49748 2 5.61248 2.7825 4.19749 4.19749C2.78 5.61248 2 7.49498 2 9.49997C2 11.5025 2.7825 13.3874 4.19749 14.8024C5.61248 16.2199 7.49498 16.9999 9.49997 16.9999C11.175 16.9999 12.765 16.4549 14.0674 15.4499L20.5599 21.9399C20.579 21.959 20.6016 21.9741 20.6264 21.9844C20.6513 21.9947 20.678 22 20.7049 22C20.7318 22 20.7585 21.9947 20.7834 21.9844C20.8083 21.9741 20.8309 21.959 20.8499 21.9399L21.9399 20.8524C21.959 20.8334 21.9741 20.8108 21.9844 20.7859C21.9947 20.761 22 20.7343 22 20.7074C22 20.6805 21.9947 20.6538 21.9844 20.6289C21.9741 20.6041 21.959 20.5815 21.9399 20.5624ZM13.46 13.46C12.4 14.5174 10.995 15.0999 9.49997 15.0999C8.00497 15.0999 6.59998 14.5174 5.53998 13.46C4.48249 12.4 3.89999 10.995 3.89999 9.49997C3.89999 8.00497 4.48249 6.59748 5.53998 5.53998C6.59998 4.48249 8.00497 3.89999 9.49997 3.89999C10.995 3.89999 12.4025 4.47999 13.46 5.53998C14.5174 6.59998 15.0999 8.00497 15.0999 9.49997C15.0999 10.995 14.5174 12.4025 13.46 13.46Z',\n});\n"
  },
  {
    "path": "src/components/primitives/Icon/Icons/Share.tsx",
    "content": "import { createIcon } from '../createIcon';\n\nexport const ShareIcon = createIcon({\n  viewBox: '0 0 24 24',\n  d:\n    'M18.0621 16.1487C17.2993 16.1487 16.6113 16.4451 16.0895 16.9223L8.93445 12.7495C8.98988 12.523 9.02482 12.2868 9.02482 12.0458C9.02482 11.8048 8.98988 11.5698 8.93445 11.3433L16.0136 7.21147C16.5679 7.73368 17.3006 8.02461 18.0621 8.02482C19.7237 8.02482 21.0745 6.67406 21.0745 5.01241C21.0745 3.35076 19.7237 2 18.0621 2C16.4004 2 15.0496 3.35076 15.0496 5.01241C15.0496 5.2534 15.0846 5.48958 15.14 5.71491L8.06085 9.84673C7.50628 9.32504 6.7738 9.0342 6.01241 9.03338C4.35077 9.03338 3 10.3841 3 12.0458C3 13.7074 4.35077 15.0582 6.01241 15.0582C6.77392 15.058 7.50661 14.7671 8.06085 14.2449L15.2159 18.4176C15.1632 18.633 15.1361 18.8538 15.1352 19.0756C15.1354 19.6541 15.3072 20.2196 15.6288 20.7005C15.9503 21.1814 16.4073 21.5562 16.9418 21.7775C17.4764 21.9988 18.0645 22.0567 18.6319 21.9437C19.1993 21.8308 19.7205 21.5522 20.1296 21.1431C20.5387 20.734 20.8173 20.2128 20.9302 19.6454C21.0432 19.078 20.9853 18.4898 20.764 17.9553C20.5427 17.4208 20.1679 16.9638 19.687 16.6423C19.2061 16.3207 18.6406 16.1489 18.0621 16.1487Z',\n});\n"
  },
  {
    "path": "src/components/primitives/Icon/Icons/Sun.tsx",
    "content": "import React from 'react';\nimport { createIcon } from '../createIcon';\nimport { G, Path } from '../nbSvg';\n\nexport const SunIcon = createIcon({\n  viewBox: '0 0 24 24',\n  path: (\n    <G>\n      <Path d=\"M11.9996 7.21094C9.36096 7.21094 7.22266 9.34924 7.22266 11.9879C7.22266 14.6265 9.36096 16.7648 11.9996 16.7648C14.6382 16.7648 16.7765 14.6265 16.7765 11.9879C16.7765 9.34924 14.6382 7.21094 11.9996 7.21094ZM11.9996 14.7715C10.462 14.7715 9.21437 13.5255 9.21437 11.9863C9.21437 10.4487 10.462 9.20265 11.9996 9.20265C13.5356 9.20265 14.7832 10.4487 14.7832 11.9863C14.7832 13.5255 13.5356 14.7715 11.9996 14.7715Z\" />\n      <Path d=\"M13.1236 2.46526C13.1236 2.20873 12.9149 2 12.6599 2H11.3422C11.0857 2 10.877 2.20873 10.877 2.46526V5.48789C10.877 5.74283 11.0857 5.95315 11.3422 5.95315H12.6599C12.9149 5.95315 13.1236 5.74283 13.1236 5.48789V2.46526Z\" />\n      <Path d=\"M6.05371 4.46121C5.87206 4.28116 5.5757 4.28116 5.39565 4.46121L4.46512 5.39174C4.28507 5.57338 4.28507 5.86975 4.46512 6.0498L6.60183 8.18651C6.78347 8.36816 7.07984 8.36816 7.25989 8.18651L8.19042 7.25598C8.37206 7.07434 8.37206 6.77797 8.19042 6.59792L6.05371 4.46121Z\" />\n      <Path d=\"M2.46526 10.875C2.342 10.8754 2.2239 10.9246 2.13674 11.0117C2.04957 11.0989 2.00042 11.217 2 11.3403V12.658C2 12.9145 2.21033 13.1232 2.46686 13.1232H5.48789C5.74442 13.1232 5.95475 12.9145 5.95475 12.658V11.3419C5.95475 11.0869 5.74602 10.8766 5.48948 10.8766H2.46526V10.875Z\" />\n      <Path d=\"M4.46316 17.9472C4.28311 18.1288 4.28311 18.4252 4.46316 18.6052L5.39369 19.5358C5.57374 19.7158 5.87011 19.7158 6.05175 19.5358L8.18847 17.3975C8.37011 17.2158 8.37011 16.9194 8.18847 16.7394L7.25794 15.8089C7.07629 15.6288 6.77993 15.6288 6.59987 15.8089L4.46316 17.9472Z\" />\n      <Path d=\"M10.877 21.5344C10.877 21.7909 11.0857 21.9997 11.3438 21.9997H12.6599C12.9149 21.9997 13.1236 21.7893 13.1236 21.5344V18.5102C13.1236 18.2552 12.9149 18.0449 12.6583 18.0449L11.3422 18.0465C11.0857 18.0465 10.877 18.2552 10.877 18.5118V21.5344Z\" />\n      <Path d=\"M17.9484 19.5342C18.13 19.7142 18.4264 19.7142 18.6064 19.5342L19.537 18.6036C19.6242 18.5164 19.6732 18.398 19.6732 18.2746C19.6732 18.1512 19.6242 18.0329 19.537 17.9456L17.3987 15.8089C17.2186 15.6288 16.9222 15.6288 16.7406 15.8089L15.8101 16.7394C15.6284 16.921 15.6284 17.2174 15.8101 17.3975L17.9484 19.5342Z\" />\n      <Path d=\"M21.5348 13.1236C21.658 13.1232 21.7761 13.074 21.8633 12.9869C21.9505 12.8997 21.9996 12.7816 22 12.6583V11.3422C21.9996 11.219 21.9505 11.1009 21.8633 11.0137C21.7761 10.9265 21.658 10.8774 21.5348 10.877H18.5121C18.3889 10.8774 18.2708 10.9265 18.1836 11.0137C18.0964 11.1009 18.0473 11.219 18.0469 11.3422V12.6599C18.0469 12.9149 18.2556 13.1252 18.5121 13.1252L21.5348 13.1236Z\" />\n      <Path d=\"M19.5358 6.05175C19.7174 5.87011 19.7174 5.57374 19.5358 5.39369L18.6036 4.46316C18.4236 4.28311 18.1256 4.28311 17.9472 4.46316L15.8089 6.60147C15.6288 6.78152 15.6288 7.07789 15.8089 7.25953L16.7394 8.19006C16.921 8.3717 17.2174 8.3717 17.3975 8.19006L19.5358 6.05175Z\" />\n    </G>\n  ),\n});\n"
  },
  {
    "path": "src/components/primitives/Icon/Icons/ThreeDots.tsx",
    "content": "import React from 'react';\nimport { createIcon } from '../createIcon';\nimport { G, Path } from '../nbSvg';\n\nexport const ThreeDotsIcon = createIcon({\n  viewBox: '0 0 32.055 32.055',\n  path: [\n    <G>\n      <Path d=\"M3.968,12.061C1.775,12.061,0,13.835,0,16.027c0,2.192,1.773,3.967,3.968,3.967c2.189,0,3.966-1.772,3.966-3.967   C7.934,13.835,6.157,12.061,3.968,12.061z M16.233,12.061c-2.188,0-3.968,1.773-3.968,3.965c0,2.192,1.778,3.967,3.968,3.967   s3.97-1.772,3.97-3.967C20.201,13.835,18.423,12.061,16.233,12.061z M28.09,12.061c-2.192,0-3.969,1.774-3.969,3.967   c0,2.19,1.774,3.965,3.969,3.965c2.188,0,3.965-1.772,3.965-3.965S30.278,12.061,28.09,12.061z\" />\n    </G>,\n  ],\n});\n"
  },
  {
    "path": "src/components/primitives/Icon/Icons/Warning.tsx",
    "content": "import React from 'react';\nimport { createIcon } from '../createIcon';\nimport { G, Path } from '../nbSvg';\n\nexport const WarningIcon = createIcon({\n  viewBox: '0 0 24 24',\n  d:\n    'M11.9836 0.00267822C8.77744 0.0551662 5.72075 1.36728 3.47427 3.65538C2.35024 4.77447 1.46338 6.10869 0.866705 7.57831C0.270027 9.04793 -0.0242179 10.6228 0.00155827 12.2087C-0.000286057 13.7583 0.303697 15.2931 0.896087 16.7251C1.48848 18.1571 2.35763 19.458 3.45373 20.5535C4.54983 21.6489 5.85133 22.5173 7.28365 23.1089C8.71596 23.7004 10.2509 24.0035 11.8006 24.0007H12.0146C15.2217 23.9677 18.2847 22.6638 20.5316 20.3751C22.7785 18.0864 24.0257 14.9999 23.9996 11.7927C24.0033 10.2243 23.6933 8.6709 23.0879 7.22398C22.4825 5.77706 21.5939 4.4658 20.4744 3.36731C19.3548 2.26882 18.0269 1.40527 16.5688 0.827453C15.1106 0.249636 13.5517 -0.0307856 11.9836 0.00267822ZM10.5007 16.5433C10.4935 16.3473 10.5254 16.1517 10.5947 15.9682C10.6639 15.7846 10.7691 15.6167 10.904 15.4742C11.0389 15.3318 11.2009 15.2177 11.3804 15.1386C11.5599 15.0594 11.7534 15.0169 11.9496 15.0135H11.9766C12.3712 15.0142 12.7501 15.1677 13.034 15.4417C13.3179 15.7157 13.4847 16.089 13.4995 16.4833C13.5068 16.6794 13.4749 16.875 13.4057 17.0586C13.3365 17.2423 13.2314 17.4102 13.0965 17.5527C12.9615 17.6952 12.7995 17.8093 12.6199 17.8884C12.4403 17.9674 12.2468 18.0099 12.0506 18.0132H12.0236C11.6291 18.0119 11.2505 17.8583 10.9667 17.5844C10.6829 17.3105 10.5159 16.9375 10.5007 16.5433ZM11.0007 12.5017V6.50215C11.0007 6.23695 11.106 5.98262 11.2935 5.7951C11.481 5.60758 11.7354 5.50223 12.0006 5.50223C12.2658 5.50223 12.5201 5.60758 12.7076 5.7951C12.8951 5.98262 13.0005 6.23695 13.0005 6.50215V12.5017C13.0005 12.7669 12.8951 13.0212 12.7076 13.2087C12.5201 13.3962 12.2658 13.5016 12.0006 13.5016C11.7354 13.5016 11.481 13.3962 11.2935 13.2087C11.106 13.0212 11.0007 12.7669 11.0007 12.5017Z',\n});\n\nexport const WarningTwoIcon = createIcon({\n  viewBox: '0 0 24 24',\n  path: (\n    <G>\n      <Path\n        d=\"M13.9193 18.4271C13.8992 17.9392 13.6816 17.4813 13.3178 17.1478C12.9545 16.8148 12.4731 16.631 11.975 16.6304H11.9746H11.945V16.6304L11.9392 16.6305C11.6898 16.6348 11.4434 16.6864 11.2142 16.7827L11.333 17.0655L11.2142 16.7827C10.9851 16.879 10.7773 17.0183 10.6035 17.1931C10.4296 17.368 10.2932 17.5751 10.2031 17.8026C10.113 18.0302 10.0712 18.2732 10.0806 18.5171L10.0807 18.5176C10.1001 19.0055 10.3169 19.4638 10.6802 19.7979C11.043 20.1315 11.5241 20.3162 12.0222 20.3177H12.0233H12.0529V20.3178L12.058 20.3177C12.3081 20.3138 12.5552 20.2624 12.785 20.1661C13.0148 20.0698 13.2232 19.9303 13.3974 19.7549C13.5716 19.5795 13.7081 19.3718 13.7981 19.1436C13.8881 18.9153 13.9295 18.6716 13.9193 18.4271ZM13.9193 18.4271L13.5863 18.4408M13.9193 18.4271C13.9193 18.4271 13.9193 18.4271 13.9193 18.427L13.5863 18.4408M13.5863 18.4408C13.5945 18.6386 13.5611 18.836 13.488 19.0213C13.415 19.2066 13.3037 19.3762 13.1609 19.52C13.018 19.6638 12.8464 19.779 12.6561 19.8587C12.4658 19.9385 12.2607 19.9812 12.0529 19.9844H12.0233C11.6062 19.9831 11.2058 19.8284 10.9059 19.5525C10.6059 19.2767 10.4296 18.9011 10.4137 18.5043C10.4061 18.3069 10.4399 18.1101 10.513 17.9254C10.5862 17.7406 10.6973 17.5715 10.8399 17.4281C10.9824 17.2847 11.1536 17.1698 11.3434 17.09C11.5331 17.0103 11.7376 16.9674 11.945 16.9638H11.9746C12.3916 16.9642 12.7922 17.1182 13.0926 17.3936C13.393 17.6689 13.5699 18.0442 13.5863 18.4408ZM23.4665 20.2125L23.4665 20.2125C23.6068 20.4676 23.6751 20.7517 23.6658 21.0376C23.6566 21.3234 23.57 21.6033 23.4131 21.8501C23.2562 22.097 23.0337 22.3031 22.7658 22.4469C22.4978 22.5907 22.1942 22.6667 21.8847 22.6667H21.8846H2.11538H2.11533C1.80576 22.6667 1.50222 22.5907 1.23422 22.4469C0.96631 22.3031 0.743845 22.097 0.586879 21.8501L0.305565 22.0289L0.586879 21.8501C0.429998 21.6033 0.343434 21.3234 0.334166 21.0376C0.324898 20.7517 0.393165 20.4676 0.533517 20.2125L0.53353 20.2125L10.4192 2.23977C10.5681 1.96911 10.7933 1.74021 11.0721 1.5796C11.3511 1.41893 11.6722 1.33333 12.0005 1.33333C12.3289 1.33333 12.65 1.41893 12.9289 1.5796C13.2078 1.74021 13.4329 1.96911 13.5819 2.23977L23.4665 20.2125ZM11.0224 7.44182C10.7599 7.69176 10.6091 8.03434 10.6091 8.39521V14.4365C10.6091 14.7974 10.7599 15.1399 11.0224 15.3899C11.2843 15.6393 11.6363 15.7767 12 15.7767C12.3637 15.7767 12.7157 15.6393 12.9776 15.3899C13.2401 15.1399 13.3909 14.7974 13.3909 14.4365V8.39521C13.3909 8.03434 13.2401 7.69176 12.9776 7.44182C12.7157 7.19242 12.3637 7.05499 12 7.05499C11.6363 7.05499 11.2843 7.19242 11.0224 7.44182Z\"\n        stroke=\"currentColor\"\n        strokeWidth=\"0.666667\"\n      />\n    </G>\n  ),\n});\n"
  },
  {
    "path": "src/components/primitives/Icon/Icons/WarningOutline.tsx",
    "content": "import { createIcon } from '../createIcon';\n\nexport const WarningOutlineIcon = createIcon({\n  viewBox: '0 0 16 16',\n  d:\n    'M8 16C6.41775 16 4.87103 15.5308 3.55544 14.6518C2.23985 13.7727 1.21447 12.5233 0.608967 11.0615C0.00346627 9.59966 -0.15496 7.99113 0.153721 6.43928C0.462403 4.88743 1.22433 3.46197 2.34315 2.34315C3.46197 1.22433 4.88743 0.462403 6.43928 0.153721C7.99113 -0.15496 9.59966 0.00346627 11.0615 0.608967C12.5233 1.21447 13.7727 2.23985 14.6518 3.55544C15.5308 4.87103 16 6.41775 16 8C16 10.1217 15.1571 12.1566 13.6569 13.6569C12.1566 15.1571 10.1217 16 8 16ZM8 14.4C9.2658 14.4 10.5032 14.0246 11.5556 13.3214C12.6081 12.6182 13.4284 11.6186 13.9128 10.4492C14.3972 9.27973 14.524 7.9929 14.277 6.75142C14.0301 5.50995 13.4205 4.36958 12.5255 3.47452C11.6304 2.57946 10.4901 1.96992 9.24858 1.72298C8.0071 1.47603 6.72028 1.60277 5.55083 2.08717C4.38138 2.57158 3.38184 3.39188 2.6786 4.44435C1.97536 5.49683 1.6 6.7342 1.6 8C1.6 9.69739 2.27429 11.3253 3.47452 12.5255C4.67475 13.7257 6.30262 14.4 8 14.4ZM7.2 10.4H8.8V12H7.2V10.4ZM7.2 4H8.8V8.8H7.2V4Z',\n});\n"
  },
  {
    "path": "src/components/primitives/Icon/Icons/index.tsx",
    "content": "export * from './Add';\nexport * from './Arrow';\nexport * from './Check';\nexport * from './Chevron';\nexport * from './Circle';\nexport * from './Close';\nexport * from './Hamburger';\nexport * from './Info';\nexport * from './Minus';\nexport * from './Moon';\nexport * from './Question';\nexport * from './Search';\nexport * from './Sun';\nexport * from './Warning';\nexport * from './WarningOutline';\nexport * from './ThreeDots';\nexport * from './Share';\nexport * from './Play';\nexport * from './Delete';\nexport * from './Favourite';\n"
  },
  {
    "path": "src/components/primitives/Icon/Icons/questionIconPath.tsx",
    "content": "import React from 'react';\nimport { G, Path } from '../nbSvg';\n\nexport const questionOutlineIconPath = (\n  <G>\n    <Path d=\"M12 20.75C9.67936 20.75 7.45376 19.8281 5.81282 18.1872C4.17187 16.5462 3.25 14.3206 3.25 12C3.25 9.67936 4.17187 7.45376 5.81282 5.81282C7.45376 4.17187 9.67936 3.25 12 3.25C14.3206 3.25 16.5462 4.17187 18.1872 5.81282C19.8281 7.45376 20.75 9.67936 20.75 12C20.75 14.3206 19.8281 16.5462 18.1872 18.1872C16.5462 19.8281 14.3206 20.75 12 20.75ZM12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 9.34784 20.9464 6.8043 19.0711 4.92893C17.1957 3.05357 14.6522 2 12 2C9.34784 2 6.8043 3.05357 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C6.8043 20.9464 9.34784 22 12 22Z\" />\n    <Path d=\"M8.70533 9.34281C8.70369 9.38156 8.70999 9.42024 8.72385 9.45647C8.73771 9.4927 8.75883 9.52571 8.78592 9.55347C8.81301 9.58123 8.84549 9.60316 8.88136 9.6179C8.91724 9.63265 8.95575 9.6399 8.99453 9.63921H9.98453C10.1501 9.63921 10.2821 9.50361 10.3037 9.33921C10.4117 8.55201 10.9517 7.97841 11.9141 7.97841C12.7373 7.97841 13.4909 8.39001 13.4909 9.38001C13.4909 10.142 13.0421 10.4924 12.3329 11.0252C11.5253 11.612 10.8857 12.2972 10.9313 13.4096L10.9349 13.67C10.9362 13.7487 10.9684 13.8238 11.0245 13.879C11.0806 13.9343 11.1562 13.9652 11.2349 13.9652H12.2081C12.2877 13.9652 12.364 13.9336 12.4203 13.8773C12.4765 13.8211 12.5081 13.7448 12.5081 13.6652V13.5392C12.5081 12.6776 12.8357 12.4268 13.7201 11.756C14.4509 11.2004 15.2129 10.5836 15.2129 9.28881C15.2129 7.47561 13.6817 6.59961 12.0053 6.59961C10.4849 6.59961 8.81933 7.30761 8.70533 9.34281ZM10.5737 16.2584C10.5737 16.898 11.0837 17.3708 11.7857 17.3708C12.5165 17.3708 13.0193 16.898 13.0193 16.2584C13.0193 15.596 12.5153 15.1304 11.7845 15.1304C11.0837 15.1304 10.5737 15.596 10.5737 16.2584Z\" />\n  </G>\n);\n"
  },
  {
    "path": "src/components/primitives/Icon/SVGIcon.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport { useToken, usePropsResolution } from '../../../hooks';\nimport { makeStyledComponent } from '../../../utils/styled';\nimport { Svg, G } from './nbSvg';\nimport type { IIconProps } from './types';\nimport { questionOutlineIconPath } from './Icons/questionIconPath';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst SVG = makeStyledComponent(Svg);\n\nconst SVGIcon = ({ children, ...props }: IIconProps, ref: any) => {\n  const {\n    focusable,\n    stroke,\n    color,\n    size,\n    ...resolvedProps\n  } = usePropsResolution('Icon', props);\n  const strokeHex = useToken('colors', stroke || '');\n  const colorHex = useToken('colors', color || '');\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <SVG\n      {...resolvedProps}\n      // height={\n      //   newProps.size\n      //     ? parseInt(newProps.size, 10)\n      //     : parseInt(newProps.height, 10)\n      // }\n      // width={\n      //   newProps.size\n      //     ? parseInt(newProps.size, 10)\n      //     : parseInt(newProps.width, 10)\n      // }\n      size={size}\n      color={colorHex}\n      stroke={strokeHex}\n      focusable={focusable}\n      accessibilityRole=\"image\"\n      // style={style}\n      ref={ref}\n    >\n      {React.Children.count(children) > 0 ? (\n        <G>\n          {React.Children.map(children, (child, i) => (\n            <ChildPath\n              key={child?.key ?? i}\n              element={child}\n              {...child?.props}\n            />\n          ))}\n        </G>\n      ) : (\n        questionOutlineIconPath\n      )}\n    </SVG>\n  );\n};\nconst ChildPath = ({ element, fill, stroke: pathStroke }: any) => {\n  const pathStrokeColor = useToken('colors', pathStroke || '');\n  const fillColor = useToken('colors', fill || '');\n\n  if (!element) {\n    return null;\n  }\n\n  return React.cloneElement(element, {\n    fill: fillColor ? fillColor : 'currentColor',\n    stroke: pathStrokeColor,\n  });\n};\nexport default memo(forwardRef(SVGIcon));\n"
  },
  {
    "path": "src/components/primitives/Icon/createIcon.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport SVGIcon from './SVGIcon';\nimport { Path } from './nbSvg';\nimport type { IcreateIconProps } from './types';\nimport isEmpty from 'lodash.isempty';\n\nexport const createIcon = ({ path, d, ...initialProps }: IcreateIconProps) => {\n  const createdIcon = (props: any, ref: any) => {\n    let children = path;\n    if (d && (!path || isEmpty(path))) {\n      children = <Path fill=\"currentColor\" d={d} />;\n    }\n    return (\n      <SVGIcon children={children} {...initialProps} {...props} ref={ref} />\n    );\n  };\n  return memo(forwardRef(createdIcon));\n};\n"
  },
  {
    "path": "src/components/primitives/Icon/index.tsx",
    "content": "export { default as Icon } from './Icon';\nexport { createIcon } from './createIcon';\nexport type { IIconProps } from './types';\n"
  },
  {
    "path": "src/components/primitives/Icon/nbSvg.tsx",
    "content": "export { Svg, G, Path, Polygon, Line, Circle, Rect } from 'react-native-svg';\n"
  },
  {
    "path": "src/components/primitives/Icon/nbSvg.web.tsx",
    "content": "//@ts-ignore\nimport { unstable_createElement } from 'react-native-web';\nimport { forwardRef } from 'react';\n\nexport const Svg = forwardRef((props: any, ref: any) =>\n  unstable_createElement('svg', { ...props, ref })\n);\nexport const G = forwardRef((props: any, ref: any) =>\n  unstable_createElement('g', { ...props, ref })\n);\nexport const Path = forwardRef((props: any, ref: any) =>\n  unstable_createElement('path', { ...props, ref })\n);\nexport const Polygon = forwardRef((props: any, ref: any) =>\n  unstable_createElement('polygon', { ...props, ref })\n);\nexport const Line = forwardRef((props: any, ref: any) =>\n  unstable_createElement('line', { ...props, ref })\n);\nexport const Circle = forwardRef((props: any, ref: any) =>\n  unstable_createElement('circle', { ...props, ref })\n);\nexport const Rect = forwardRef((props: any, ref: any) =>\n  unstable_createElement('rect', { ...props, ref })\n);\n"
  },
  {
    "path": "src/components/primitives/Icon/types.ts",
    "content": "import type { PlatformProps } from '../../types';\nimport type { StyledProps } from '../../../theme/types';\nimport type { ResponsiveValue } from '../../types/responsiveValue';\nimport type { SvgProps } from 'react-native-svg';\nimport type { IColors } from '../../../theme/base/colors';\n\nimport type { CustomProps, ThemeComponentSizeType } from '../../types/utils';\n\nexport interface InterfaceIconProps\n  extends Omit<\n      SvgProps,\n      'opacity' | 'stroke' | 'height' | 'width' | 'transform' | 'color'\n    >,\n    StyledProps,\n    PlatformProps<IIconProps> {\n  // name?: IconNameType;\n  // type?: IconType;\n  /**\n   * Use <a href='https://github.com/expo/vector-icons'>@expo/vector-icons</a>\n   */\n  as?: any;\n  /**\n   * The viewBox of the icon.\n   */\n  // viewBox?: string;\n  /**\n   * The size of the icon.\n   */\n  size?: ThemeComponentSizeType<'Icon'>;\n\n  /**\n   * The color of the icon.\n   */\n  // color?: string;\n  color?: ResponsiveValue<IColors | (string & {})>;\n  /**\n   *\n   */\n  // focusable?: boolean;\n  /**\n   *\n   */\n  children?: JSX.Element[] | JSX.Element;\n  /**\n   *\n   */\n  name?: string;\n  /**\n   *\n   */\n  // stroke?: string;\n  /**\n   *\n   */\n  // strokeWidth?: string;\n}\n\nexport interface IcreateIconProps {\n  /**\n   * The viewBox of the icon.\n   */\n  viewBox?: string;\n  /**\n   * Path element of the icon.\n   */\n  path?: JSX.Element[] | JSX.Element;\n  /**\n   * The path of the SVG icon.\n   */\n  d?: string;\n}\n\nexport type IIconProps = InterfaceIconProps & CustomProps<'Icon'>;\n"
  },
  {
    "path": "src/components/primitives/Image/index.tsx",
    "content": "import React, { useState, memo, forwardRef, useCallback, useRef } from 'react';\nimport { Image as RNImage } from 'react-native';\nimport Text from '../Text';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport type { IImageProps } from './types';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nimport { makeStyledComponent } from '../../../utils/styled';\n\nconst StyledImage = makeStyledComponent(RNImage);\n\nconst Image = memo(\n  forwardRef((props: IImageProps, ref: any) => {\n    const {\n      source,\n      src,\n      fallbackElement,\n      alt,\n      fallbackSource,\n      ignoreFallback,\n      _alt,\n      ...resolvedProps\n    } = usePropsResolution('Image', props);\n\n    const finalSource: any = useRef(null);\n    const getSource = useCallback(() => {\n      if (source) {\n        finalSource.current = source;\n      } else if (src) {\n        finalSource.current = { uri: src };\n      }\n      return finalSource.current;\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [source?.uri, src]);\n\n    const [renderedSource, setSource] = useState(getSource());\n    const [alternate, setAlternate] = useState(false);\n    const [fallbackSourceFlag, setfallbackSourceFlag] = useState(true);\n\n    React.useEffect(() => {\n      setSource(getSource());\n      return () => {\n        finalSource.current = null;\n      };\n    }, [source?.uri, src, getSource]);\n\n    const onImageLoadError = useCallback(\n      (event: any) => {\n        props.onError && props.onError(event);\n        console.warn(event.nativeEvent.error);\n        if (\n          !ignoreFallback &&\n          fallbackSource &&\n          fallbackSource !== renderedSource &&\n          fallbackSourceFlag\n        ) {\n          setfallbackSourceFlag(false);\n          setSource(fallbackSource);\n        } else {\n          setAlternate(true);\n        }\n      },\n      [\n        fallbackSource,\n        fallbackSourceFlag,\n        ignoreFallback,\n        props,\n        renderedSource,\n      ]\n    );\n    //TODO: refactor for responsive prop\n    if (useHasResponsiveProps(props)) {\n      return null;\n    }\n\n    if (typeof alt !== 'string') {\n      console.warn('Please pass alt prop to Image component');\n    }\n\n    if (alternate) {\n      if (fallbackElement) {\n        if (React.isValidElement(fallbackElement)) {\n          return fallbackElement;\n        }\n      } else return <Text {..._alt}>{alt}</Text>;\n    }\n    return (\n      <StyledImage\n        source={renderedSource}\n        accessibilityLabel={alt}\n        alt={alt}\n        {...resolvedProps}\n        onError={onImageLoadError}\n        ref={ref}\n      />\n    );\n  })\n);\n\ninterface ImageStatics {\n  getSize: typeof RNImage.prefetch;\n  prefetch: typeof RNImage.prefetch;\n  queryCache: typeof RNImage.queryCache;\n}\nconst ImageWithStatics: typeof Image & ImageStatics = {\n  ...Image,\n  //@ts-ignore\n  getSize: RNImage.getSize,\n  prefetch: RNImage.prefetch,\n  queryCache: RNImage.queryCache,\n};\n\nexport default ImageWithStatics;\nexport type { IImageProps };\n"
  },
  {
    "path": "src/components/primitives/Image/types.ts",
    "content": "import type { ImageProps, ImageSourcePropType } from 'react-native';\nimport type { StyledProps } from '../../../theme/types';\nimport type { ITextProps } from '../../primitives';\nimport type { CustomProps, PlatformProps } from '../../types';\n\nexport interface InterfaceImageProps\n  extends PlatformProps<IImageProps>,\n    Omit<\n      ImageProps,\n      | 'borderRadius'\n      | 'borderTopLeftRadius'\n      | 'borderTopRightRadius'\n      | 'borderBottomLeftRadius'\n      | 'borderBottomRightRadius'\n      | 'height'\n      | 'width'\n      | 'source'\n    >,\n    StyledProps {\n  /**\n   * specify a source for image.\n   */\n  source?: ImageSourcePropType;\n  /**\n   * The alt text that describes the image. This will be added as accessibilityLabel in android/iOS and alt on web.\n   */\n  alt?: string;\n  /**\n   * In the event of an error loading the src, specify a fallback source.\n   */\n  fallbackSource?: ImageSourcePropType;\n  /**\n   * Opt out of the fallbackSource logic and show alternative text.\n   */\n  ignoreFallback?: boolean;\n  /**\n   * Text styling for alt.\n   */\n  _alt?: Partial<ITextProps>;\n  /**\n   * In the event of an error loading the src, specify a fallback JSX Element.\n   */\n  fallbackElement?: JSX.Element | JSX.Element[];\n  /**\n   * specify a source for image.\n   */\n  src?: string;\n}\n\nexport type IImageProps = InterfaceImageProps & CustomProps<'Image'>;\n"
  },
  {
    "path": "src/components/primitives/Input/Input.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport type { IInputProps } from './types';\nimport { TextInput } from 'react-native';\nimport { useToken } from '../../../hooks';\nimport { useFormControl } from '../../composites/FormControl';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nimport { useHover } from '@react-native-aria/interactions';\nimport { extractInObject, stylingProps } from '../../../theme/tools/utils';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport { mergeRefs, resolveStackStyleInput } from '../../../utils';\nimport { Stack } from '../Stack';\nimport { makeStyledComponent } from '../../../utils/styled';\nimport { useResolvedFontFamily } from '../../../hooks/useResolvedFontFamily';\n\nconst StyledInput = makeStyledComponent(TextInput);\n\nconst Input = (\n  {\n    isHovered: isHoveredProp,\n    isFocused: isFocusedProp,\n    onKeyPress,\n    InputLeftElement,\n    InputRightElement,\n    leftElement,\n    rightElement,\n    ...props\n  }: IInputProps,\n  ref: any\n) => {\n  const inputProps = useFormControl({\n    isDisabled: props.isDisabled,\n    isInvalid: props.isInvalid,\n    isReadOnly: props.isReadOnly,\n    isRequired: props.isRequired,\n    nativeID: props.nativeID,\n  });\n  const [isFocused, setIsFocused] = React.useState(false);\n  const handleFocus = (focusState: boolean, callback: any) => {\n    setIsFocused(focusState);\n    callback();\n  };\n\n  const _ref = React.useRef(null);\n  const { isHovered } = useHover({}, _ref);\n\n  const inputThemeProps = {\n    isDisabled: inputProps.disabled,\n    isInvalid: inputProps.accessibilityInvalid,\n    isReadOnly: inputProps.accessibilityReadOnly,\n    isRequired: inputProps.required,\n  };\n\n  const {\n    ariaLabel,\n    accessibilityLabel,\n    type,\n    isFullWidth,\n    isDisabled,\n    isReadOnly,\n    fontFamily,\n    fontWeight,\n    fontStyle,\n    placeholderTextColor,\n    selectionColor,\n    underlineColorAndroid,\n    onFocus,\n    onBlur,\n    wrapperRef,\n    _stack,\n    _input,\n\n    ...resolvedProps\n  } = usePropsResolution(\n    'Input',\n    {\n      ...inputThemeProps,\n      ...props,\n    },\n    {\n      isDisabled: inputThemeProps.isDisabled,\n      isHovered: isHoveredProp || isHovered,\n      isFocused: isFocusedProp || isFocused,\n      isInvalid: inputThemeProps.isInvalid,\n      isReadOnly: inputThemeProps.isReadOnly,\n    }\n  );\n\n  const [layoutProps, nonLayoutProps] = extractInObject(resolvedProps, [\n    ...stylingProps.margin,\n    ...stylingProps.border,\n    ...stylingProps.layout,\n    ...stylingProps.flexbox,\n    ...stylingProps.position,\n    ...stylingProps.background,\n    'shadow',\n    'opacity',\n  ]);\n\n  const resolvedFontFamily = useResolvedFontFamily({\n    fontFamily,\n    fontWeight: fontWeight ?? 400,\n    fontStyle: fontStyle ?? 'normal',\n  });\n  const resolvedPlaceholderTextColor = useToken('colors', placeholderTextColor);\n  const resolvedSelectionColor = useToken('colors', selectionColor);\n  const resolvedUnderlineColorAndroid = useToken(\n    'colors',\n    underlineColorAndroid\n  );\n\n  /**Converting into Hash Color Code */\n  //@ts-ignore\n  resolvedProps.focusOutlineColor = useToken(\n    'colors',\n    resolvedProps.focusOutlineColor\n  );\n  //@ts-ignore\n  resolvedProps.invalidOutlineColor = useToken(\n    'colors',\n    resolvedProps.invalidOutlineColor\n  );\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n\n  if (resolvedProps.focusOutlineColor && isFocused) {\n    layoutProps.borderColor = resolvedProps.focusOutlineColor;\n    _stack.style = resolveStackStyleInput(\n      props.variant,\n      resolvedProps.focusOutlineColor\n    );\n  }\n\n  if (resolvedProps.invalidOutlineColor && props.isInvalid) {\n    layoutProps.borderColor = resolvedProps.invalidOutlineColor;\n    _stack.style = resolveStackStyleInput(\n      props.variant,\n      resolvedProps.invalidOutlineColor\n    );\n  }\n\n  return (\n    <Stack\n      {..._stack}\n      {...layoutProps}\n      ref={mergeRefs([_ref, wrapperRef])}\n      isFocused={isFocused}\n    >\n      {InputLeftElement || leftElement ? InputLeftElement || leftElement : null}\n      <StyledInput\n        {...inputProps}\n        secureTextEntry={type === 'password'}\n        accessible\n        accessibilityLabel={ariaLabel || accessibilityLabel}\n        editable={isDisabled || isReadOnly ? false : true}\n        w={isFullWidth ? '100%' : undefined}\n        {...nonLayoutProps}\n        {...resolvedFontFamily}\n        placeholderTextColor={resolvedPlaceholderTextColor}\n        selectionColor={resolvedSelectionColor}\n        underlineColorAndroid={resolvedUnderlineColorAndroid}\n        onKeyPress={(e: any) => {\n          e.persist();\n          onKeyPress && onKeyPress(e);\n        }}\n        onFocus={(e: any) => {\n          handleFocus(true, onFocus ? () => onFocus(e) : () => {});\n        }}\n        onBlur={(e: any) => {\n          handleFocus(false, onBlur ? () => onBlur(e) : () => {});\n        }}\n        {..._input}\n        ref={mergeRefs([ref, _ref, wrapperRef])}\n      />\n      {InputRightElement || rightElement\n        ? InputRightElement || rightElement\n        : null}\n    </Stack>\n  );\n};\n\nexport default memo(forwardRef(Input));\n"
  },
  {
    "path": "src/components/primitives/Input/InputAddons.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport { default as Box, IBoxProps } from '../Box';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nimport { usePropsResolution } from '../../../hooks/useThemeProps/usePropsResolution';\n\nexport const InputLeftAddon = memo(\n  //@r\n  forwardRef((props: IBoxProps, ref?: any) => {\n    const resolvedProps = usePropsResolution('InputLeftAddon', props);\n    //TODO: refactor for responsive prop\n    if (useHasResponsiveProps(props)) {\n      return null;\n    }\n    return (\n      <Box {...resolvedProps} ref={ref}>\n        {props.children}\n      </Box>\n    );\n  })\n);\nexport const InputRightAddon = memo(\n  forwardRef((props: IBoxProps, ref?: any) => {\n    const resolvedProps = usePropsResolution('InputRightAddon', props);\n    //TODO: refactor for responsive prop\n    if (useHasResponsiveProps(props)) {\n      return null;\n    }\n    return (\n      <Box {...resolvedProps} ref={ref}>\n        {props.children}\n      </Box>\n    );\n  })\n);\n"
  },
  {
    "path": "src/components/primitives/Input/InputAdvanced.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport InputBase from './InputBase';\nimport Box from '../Box';\nimport type { IInputProps } from './types';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport { extractInObject, stylingProps } from '../../../theme/tools/utils';\nimport { useHover } from '@react-native-aria/interactions';\nimport { mergeRefs } from '../../../utils';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst InputAdvance = (\n  {\n    InputLeftElement,\n    InputRightElement,\n    leftElement,\n    rightElement,\n    onFocus,\n    onBlur,\n    inputProps,\n    wrapperRef,\n    ...props\n  }: IInputProps & {\n    inputProps: any;\n  },\n  ref: any\n) => {\n  const inputThemeProps = {\n    isDisabled: inputProps.disabled,\n    isInvalid: inputProps.accessibilityInvalid,\n    isReadOnly: inputProps.accessibilityReadOnly,\n    isRequired: inputProps.required,\n  };\n\n  if (InputLeftElement) {\n    leftElement = InputLeftElement;\n  }\n  if (InputRightElement) {\n    rightElement = InputRightElement;\n  }\n\n  const [isFocused, setIsFocused] = React.useState(false);\n  const handleFocus = (focusState: boolean, callback: any) => {\n    setIsFocused(focusState);\n    callback();\n  };\n\n  const _ref = React.useRef(null);\n  const { isHovered } = useHover({}, _ref);\n\n  const resolvedProps = usePropsResolution(\n    'Input',\n    {\n      ...inputThemeProps,\n      ...props,\n    },\n    {\n      isDisabled: inputThemeProps.isDisabled,\n      isHovered,\n      isFocused,\n      isInvalid: inputThemeProps.isInvalid,\n      isReadOnly: inputThemeProps.isReadOnly,\n    }\n  );\n\n  const [layoutProps, nonLayoutProps] = extractInObject(resolvedProps, [\n    ...stylingProps.margin,\n    ...stylingProps.border,\n    ...stylingProps.layout,\n    ...stylingProps.flexbox,\n    ...stylingProps.position,\n    ...stylingProps.background,\n    'shadow',\n    'opacity',\n  ]);\n\n  // Extracting baseInputProps from remaining props\n  const [, baseInputProps] = extractInObject(nonLayoutProps, ['variant']);\n\n  //TODO: refactor for responsive prop\n  if (\n    useHasResponsiveProps({\n      ...props,\n      InputLeftElement,\n      InputRightElement,\n      onFocus,\n      onBlur,\n      inputProps,\n      wrapperRef,\n    })\n  ) {\n    return null;\n  }\n\n  return (\n    <Box\n      display=\"flex\"\n      flexDirection=\"row\"\n      alignItems=\"center\"\n      justifyContent=\"space-between\"\n      {...layoutProps}\n      ref={mergeRefs([_ref, wrapperRef])}\n    >\n      {InputLeftElement || leftElement ? InputLeftElement || leftElement : null}\n      <InputBase\n        inputProps={inputProps}\n        bg=\"transparent\"\n        {...baseInputProps}\n        flex={1}\n        disableFocusHandling\n        ref={ref}\n        variant=\"unstyled\"\n        onFocus={(e: any) => {\n          handleFocus(true, onFocus ? () => onFocus(e) : () => {});\n        }}\n        onBlur={(e: any) => {\n          handleFocus(false, onBlur ? () => onBlur(e) : () => {});\n        }}\n        shadow=\"none\"\n      />\n      {InputRightElement || rightElement\n        ? InputRightElement || rightElement\n        : null}\n    </Box>\n  );\n};\n\nexport default memo(forwardRef(InputAdvance));\n"
  },
  {
    "path": "src/components/primitives/Input/InputBase.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport { TextInput, Platform } from 'react-native';\nimport type { IInputProps } from './types';\nimport { useToken } from '../../../hooks';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport { useHover } from '@react-native-aria/interactions';\nimport { mergeRefs } from '../../../utils';\nimport { makeStyledComponent } from '../../../utils/styled';\nimport { useResolvedFontFamily } from '../../../hooks/useResolvedFontFamily';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst StyledInput = makeStyledComponent(TextInput);\n\nconst InputBase = (\n  {\n    onKeyPress,\n    onFocus,\n    onBlur,\n    disableFocusHandling,\n    inputProps,\n    wrapperRef,\n    InputLeftElement,\n    InputRightElement,\n    leftElement,\n    rightElement,\n    isHovered: isHoveredProp,\n    isFocused: isFocusedProp,\n    ...props\n  }: IInputProps & {\n    disableFocusHandling?: boolean;\n    inputProps: any;\n  },\n  ref: any\n) => {\n  let passUnresolvedProps;\n  if (InputLeftElement || InputRightElement || leftElement || rightElement) {\n    passUnresolvedProps = true;\n  }\n\n  const [isFocused, setIsFocused] = React.useState(false);\n  const handleFocus = (focusState: boolean, callback: any) => {\n    !disableFocusHandling && setIsFocused(focusState);\n    callback();\n  };\n\n  const inputThemeProps = {\n    isDisabled: inputProps.disabled,\n    isInvalid: inputProps.accessibilityInvalid,\n    isReadOnly: inputProps.accessibilityReadOnly,\n    isRequired: inputProps.required,\n  };\n\n  const _ref = React.useRef(null);\n  const { isHovered } = useHover({}, _ref);\n\n  const {\n    isFullWidth,\n    isDisabled,\n    isReadOnly,\n    ariaLabel,\n    accessibilityLabel,\n    placeholderTextColor,\n    selectionColor,\n    underlineColorAndroid,\n    type,\n    fontFamily,\n    fontWeight,\n    fontStyle,\n    _webInputBase,\n    ...resolvedProps\n  } = usePropsResolution(\n    'Input',\n    {\n      ...inputThemeProps,\n      ...props,\n    },\n    {\n      isDisabled: inputThemeProps.isDisabled,\n      isHovered: isHoveredProp || isHovered,\n      isFocused: isFocusedProp || isFocused,\n      isInvalid: inputThemeProps.isInvalid,\n      isReadOnly: inputThemeProps.isReadOnly,\n    }\n  );\n\n  const resolvedFontFamily = useResolvedFontFamily({\n    fontFamily,\n    fontWeight: fontWeight ?? 400,\n    fontStyle: fontStyle ?? 'normal',\n  });\n  const resolvedPlaceholderTextColor = useToken('colors', placeholderTextColor);\n  const resolvedSelectionColor = useToken('colors', selectionColor);\n  const resolvedUnderlineColorAndroid = useToken(\n    'colors',\n    underlineColorAndroid\n  );\n  //TODO: refactor for responsive prop\n  if (\n    useHasResponsiveProps({\n      ...props,\n      onKeyPress,\n      onFocus,\n      onBlur,\n      disableFocusHandling,\n      inputProps,\n    })\n  ) {\n    return null;\n  }\n\n  return (\n    <StyledInput\n      {...inputProps}\n      secureTextEntry={type === 'password'}\n      accessible\n      accessibilityLabel={ariaLabel || accessibilityLabel}\n      editable={isDisabled || isReadOnly ? false : true}\n      w={isFullWidth ? '100%' : undefined}\n      {...(passUnresolvedProps ? props : resolvedProps)}\n      {...resolvedFontFamily}\n      placeholderTextColor={resolvedPlaceholderTextColor}\n      selectionColor={resolvedSelectionColor}\n      underlineColorAndroid={resolvedUnderlineColorAndroid}\n      onKeyPress={(e: any) => {\n        e.persist();\n        onKeyPress && onKeyPress(e);\n      }}\n      onFocus={(e: any) => {\n        handleFocus(true, onFocus ? () => onFocus(e) : () => {});\n      }}\n      onBlur={(e: any) => {\n        handleFocus(false, onBlur ? () => onBlur(e) : () => {});\n      }}\n      // TODO: this can be moved to baseStyle using _web\n      {...(Platform.OS === 'web'\n        ? {\n            disabled: isDisabled,\n            cursor: isDisabled ? 'not-allowed' : 'auto',\n          }\n        : {})}\n      ref={mergeRefs([ref, _ref, wrapperRef])}\n      style={Platform.OS === 'web' ? _webInputBase : {}}\n    />\n  );\n};\n\nexport default memo(forwardRef(InputBase));\n"
  },
  {
    "path": "src/components/primitives/Input/InputGroup.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport type { IInputGroupProps } from './types';\nimport { getAttachedChildren } from '../../../utils';\nimport { HStack } from '../Stack';\nimport { extractInObject, stylingProps } from '../../../theme/tools/utils';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst supplyPropsToChildren = (children: any, props: any) => {\n  if (children.length >= 2) {\n    const result = [];\n    const firstChild = children[0];\n    const firstChildProps = {\n      ...firstChild.props.children,\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    };\n    result.push(\n      React.cloneElement(firstChild, firstChildProps, firstChild.props.children)\n    );\n    for (let i = 1; i < children.length - 1; i++) {\n      const child = children[i];\n      const newProps = { ...props, borderRadius: '0' };\n      result.push(React.cloneElement(child, newProps, child.props.children));\n    }\n    const lastChild = children[children.length - 1];\n    const lastChildProps = {\n      ...lastChild.props.children,\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n    };\n    result.push(\n      React.cloneElement(lastChild, lastChildProps, lastChild.props.children)\n    );\n    return result;\n  }\n\n  return React.Children.map(children, (child: JSX.Element) => {\n    return React.cloneElement(child, props, child.props.children);\n  });\n};\n\nexport const InputGroup = memo(\n  forwardRef(({ children, ...props }: IInputGroupProps, ref: any) => {\n    const [layoutProps, nonLayoutProps] = extractInObject(props, [\n      ...stylingProps.margin,\n      ...stylingProps.border,\n      ...stylingProps.layout,\n      ...stylingProps.flexbox,\n      ...stylingProps.position,\n      ...stylingProps.background,\n      'space',\n      'shadow',\n      'opacity',\n    ]);\n    //TODO: refactor for responsive prop\n    if (useHasResponsiveProps(props)) {\n      return null;\n    }\n    return (\n      <HStack {...layoutProps} ref={ref}>\n        {supplyPropsToChildren(getAttachedChildren(children), nonLayoutProps)}\n      </HStack>\n    );\n  })\n);\n"
  },
  {
    "path": "src/components/primitives/Input/index.tsx",
    "content": "export { InputGroup } from './InputGroup';\nexport { InputRightAddon, InputLeftAddon } from './InputAddons';\nexport type { IInputGroupProps, IInputProps } from './types';\n\nimport InputMain from './Input';\nimport type { IInputComponentType } from './types';\n\nconst InputTemp: any = InputMain;\n\n// To add typings\nconst Input = InputTemp as IInputComponentType;\n\nexport { Input };\n"
  },
  {
    "path": "src/components/primitives/Input/types.ts",
    "content": "import type { TextInputProps } from 'react-native';\nimport type { StyledProps } from '../../../theme/types';\nimport type { PlatformProps } from '../../types';\nimport type { InterfaceBoxProps } from '../Box';\nimport type { ISizes } from '../../../theme/base/sizes';\nimport type {\n  CustomProps,\n  ThemeComponentSizeType,\n  VariantType,\n} from '../../types';\nimport type { ResponsiveValue, ColorType } from '../../../components/types';\nimport type { IStackProps } from '../Stack/Stack';\nimport type { MutableRefObject, RefCallback } from 'react';\n\nexport interface InterfaceInputProps\n  extends PlatformProps<IInputProps>,\n    Omit<TextInputProps, 'textAlign'>,\n    StyledProps {\n  /**\n   * If true, the input will indicate an error.\n   */\n  isInvalid?: boolean;\n  /**\n   * The variant of the input style to use.\n   * @default 'outline'\n   */\n  variant?: VariantType<'Input'>;\n  /**\n   * \tIf true, the input will be disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * \tIf true, the input will be hovered.\n   */\n  isHovered?: boolean;\n  /**\n   * \tIf true, the input will be focused.\n   */\n  isFocused?: boolean;\n  /**\n   * The size of the input.\n   * @default 'md'\n   */\n  size?: ThemeComponentSizeType<'Input'>; // ResponsiveValue<ISizes | (string & {}) | number>;\n  /**\n   * This will set aria-required=\"true\" on web when passed in formcontrol.\n   */\n  isRequired?: boolean;\n  /**\n   * If true, prevents the value of the input from being edited.\n   */\n  isReadOnly?: boolean;\n  /**\n   * If true, the input element will span the full width of its parent\n   */\n  isFullWidth?: boolean;\n  /**\n   * If given, adds the provided element to the left of the input.\n   */\n  InputLeftElement?: JSX.Element | JSX.Element[];\n  /**\n   * If given, adds the provided element to the left of the input.\n   */\n  leftElement?: JSX.Element | JSX.Element[];\n  /**\n   * If given, adds the provided element to the right of the input.\n   */\n  InputRightElement?: JSX.Element | JSX.Element[];\n  /**\n   * If given, adds the provided element to the right of the input.\n   */\n  rightElement?: JSX.Element | JSX.Element[];\n  /**\n   * Using the type password, user can mask the input.\n   */\n  type?: 'text' | 'password';\n  /**\n   * Ref to be passed to Icon's wrapper Box\n   */\n  wrapperRef?: any;\n  // Interaction Props\n  /**\n   * Passed props will be applied on hovered state.\n   */\n  _hover?: Partial<IInputProps>;\n  /**\n   * Passed props will be applied on focused state.\n   */\n  _focus?: Partial<IInputProps>;\n  /**\n   * Passed props will be applied on disabled state.\n   */\n  _disabled?: Partial<IInputProps>;\n  /**\n   * Passed props will be applied on readOnly state.\n   */\n  _readOnly?: Partial<IInputProps>;\n  /**\n   * Passed props will be applied on invalid state.\n   */\n  _invalid?: Partial<IInputProps>;\n  /**\n   * props are passed to InputBase component\n   */\n  _input?: Partial<IInputProps>;\n  /**\n   * Props to be passed to the Stack used inside.\n   */\n  _stack?: Partial<IStackProps>;\n  /** This prop allows you to change outlineColor when input is in the focused state*/\n  focusOutlineColor?: ColorType;\n  /** This prop allows you to change outlineColor when input is in invalid state*/\n  invalidOutlineColor?: ColorType;\n  ref?: MutableRefObject<any> | RefCallback<any>;\n}\n\nexport interface IInputGroupProps extends InterfaceBoxProps<IInputGroupProps> {\n  /**\n   * The variant of the input style to use.\n   * @default 'outline'\n   */\n  variant?: string;\n  /**\n   * The size of the input.\n   * @default 'md'\n   */\n  size?: ResponsiveValue<ISizes | (string & {}) | number>;\n}\n\nexport type IInputComponentType = (props: IInputProps) => JSX.Element;\n\nexport type IInputProps = InterfaceInputProps & CustomProps<'Input'>;\n"
  },
  {
    "path": "src/components/primitives/Link/index.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport { Platform } from 'react-native';\nimport type { ILinkProps } from './types';\nimport Box from '../Box';\nimport Text from '../Text';\nimport { usePropsResolution } from '../../../hooks';\nimport { useLink } from './useLink';\nimport { mergeRefs } from '../../../utils';\nimport { Pressable } from '../Pressable';\nimport { useHover } from '@react-native-aria/interactions';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst Link = ({ isHovered: isHoveredProp, ...props }: ILinkProps, ref: any) => {\n  const _ref = React.useRef(null);\n  const { isHovered } = useHover({}, _ref);\n  const {\n    isUnderlined,\n    children,\n    _text,\n    href,\n    onPress,\n    isExternal,\n    ...resolvedProps\n  } = usePropsResolution('Link', props, {\n    isHovered: isHoveredProp || isHovered,\n  });\n  const { linkProps } = useLink({ href, onPress, isExternal, _ref });\n\n  const linkTextProps = {\n    textDecorationLine: isUnderlined ? 'underline' : 'none',\n    ..._text,\n  };\n  // function getHoverProps() {\n  //   let hoverTextProps = {\n  //     ...linkTextProps,\n  //     ..._hover?._text,\n  //   };\n  //   return {\n  //     ...hoverTextProps,\n  //   };\n  // }\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <>\n      {/* On web we render Link in anchor tag */}\n      {Platform.OS === 'web' ? (\n        <Box\n          {...linkProps}\n          {...resolvedProps}\n          _text={linkTextProps}\n          ref={mergeRefs([ref, _ref])}\n          flexDirection=\"row\"\n        >\n          {children}\n        </Box>\n      ) : (\n        <Pressable\n          {...linkProps}\n          {...resolvedProps}\n          ref={ref}\n          flexDirection=\"row\"\n        >\n          {React.Children.map(children, (child) =>\n            typeof child === 'string' || typeof child === 'number' ? (\n              <Text {...resolvedProps._text} {...linkTextProps}>\n                {child}\n              </Text>\n            ) : (\n              child\n            )\n          )}\n        </Pressable>\n      )}\n    </>\n  );\n};\n\nexport default memo(forwardRef(Link));\nexport type { ILinkProps };\n"
  },
  {
    "path": "src/components/primitives/Link/types.ts",
    "content": "import type { MutableRefObject } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\nimport type { CustomProps } from '../../types';\nimport type { InterfaceBoxProps } from '../Box/types';\n\nexport interface InterfaceLinkProps extends InterfaceBoxProps<ILinkProps> {\n  /**\n   * URL that should be opened on Link press\n   */\n  href?: string | undefined;\n  /**\n   * Size of the link\n   */\n  size?: '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xsm' | number;\n  /**\n   * Whether Link text should be underlined\n   */\n  isUnderlined?: boolean | undefined;\n  /**\n   * Whether Link text should be hovered\n   */\n  isHovered?: boolean;\n  /**\n   * Callback that will be invoked on Link press\n   */\n  onPress?: ((event?: GestureResponderEvent) => any) | null | undefined;\n  /**\n   * If true, link will be opened in new tab on web. It uses _target property to achieve this\n   */\n  isExternal?: boolean;\n  /**\n   * Hover props. Accepts all styled system props.\n   */\n  _hover?: Omit<Partial<ILinkProps>, '_hover'>;\n  /**\n   * Ref to be attached to the Link wrapper\n   */\n  wrapperRef?: MutableRefObject<any>;\n}\n\nexport type IUseLinkProp = {\n  href?: string;\n  isExternal?: boolean;\n  onPress: ((event?: GestureResponderEvent) => any) | null | undefined;\n  _ref: MutableRefObject<any>;\n};\n\nexport type ILinkProps = InterfaceLinkProps & CustomProps<'Link'>;\n"
  },
  {
    "path": "src/components/primitives/Link/useLink.ts",
    "content": "import { Linking, Platform } from 'react-native';\nimport type { IUseLinkProp } from './types';\nimport type { AccessibilityRole } from 'react-native';\n\nconst linkToHREF = (URL: string) => {\n  Linking.openURL(URL).catch((err) => console.error('An error occurred', err));\n};\n\nconst addOnPressFunctionality = (href: string | any, callback: any) => {\n  href ? linkToHREF(href) : '';\n  callback ? callback() : () => {};\n};\n\nexport function useLink(props: IUseLinkProp) {\n  const { href, isExternal, onPress, _ref } = props;\n\n  let platformLinkProps = {};\n\n  if (Platform.OS === 'web') {\n    platformLinkProps = {\n      href,\n      onClick: onPress,\n    };\n    // Adding target to a tag created by RN-Web\n    if (isExternal && _ref.current) {\n      _ref.current.target = '_blank';\n    }\n  } else {\n    platformLinkProps = {\n      onPress: () => {\n        addOnPressFunctionality(href, onPress);\n      },\n    };\n  }\n\n  return {\n    linkProps: {\n      ...platformLinkProps,\n      accessibilityRole: 'link' as AccessibilityRole,\n      accessible: true,\n    },\n  };\n}\n"
  },
  {
    "path": "src/components/primitives/List/List.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport { VStack } from '../Stack';\nimport type { IListProps, IListItemProps } from './types';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst List = ({ children, divider, ...props }: IListProps, ref?: any) => {\n  const {\n    _text,\n    _hover,\n    _focus,\n    _pressed,\n    ...resolvedProps\n  } = usePropsResolution('List', props);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  // add props to children\n  children = React.Children.map(children, (child: any, ind: number) => {\n    return React.cloneElement(child, {\n      index: ind,\n      _text: { ..._text, ...child.props?._text },\n      _hover: { ..._hover, ...child.props?._hover },\n      _focus: { ..._focus, ...child.props?._focus },\n      _pressed: { ..._pressed, ...child.props?._pressed },\n    });\n  });\n\n  return (\n    <VStack divider={divider} ref={ref} {...resolvedProps}>\n      {children}\n    </VStack>\n  );\n};\n\nexport type { IListProps, IListItemProps };\nexport default memo(forwardRef(List));\n"
  },
  {
    "path": "src/components/primitives/List/ListIcon.tsx",
    "content": "import React from 'react';\nimport { IIconProps, Icon } from '../Icon';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst ListIcon = (props: IIconProps, ref?: any) => {\n  const resolvedProps = usePropsResolution('ListIcon', props);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return <Icon {...resolvedProps} ref={ref} />;\n};\n\nexport default React.memo(React.forwardRef(ListIcon));\n"
  },
  {
    "path": "src/components/primitives/List/ListItem.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport Box from '../Box';\nimport type { IListItemProps } from './types';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport { mergeRefs } from '../../../utils';\nimport { Pressable } from '../Pressable';\n// import { useHover } from '@react-native-aria/interactions';\nimport { extractInObject } from '../../../theme/tools';\nimport { composeEventHandlers } from '../../../utils';\nimport {\n  useHover,\n  useFocus,\n  useIsPressed,\n} from '../../primitives/Pressable/Pressable';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst ListItem = ({ children, ...props }: IListItemProps, ref: any) => {\n  const { hoverProps, isHovered } = useHover();\n  const { pressableProps, isPressed } = useIsPressed();\n  const { focusProps, isFocused } = useFocus();\n  const {\n    index,\n    start,\n    unordered,\n    ul,\n    ordered,\n    ol,\n    _text,\n    borderTopWidth,\n    onPressIn,\n    onPressOut,\n    onHoverIn,\n    onHoverOut,\n    onFocus,\n    onBlur,\n    ...resolvedProps\n  } = usePropsResolution('ListItem', props, {\n    isHovered,\n    isPressed,\n    isFocused,\n  });\n  const _ref = React.useRef(null);\n  // const { isHovered } = useHover({}, _ref);\n\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n\n  // Extracting Pressable Props from resolvedProps\n  const [\n    pressableComponentProps,\n    nonPressableProps,\n  ] = extractInObject(resolvedProps, [\n    'onPress',\n    'unstable_pressDelay',\n    'android_ripple',\n    'android_disableSound',\n    'delayLongPress',\n    'hitSlop',\n    'disabled',\n    'onLongPress',\n    'onPressIn',\n    'onPressOut',\n    'pressRetentionOffset',\n    'testOnly_pressed',\n    'onHoverIn',\n    'onHoverOut',\n    'onFocus',\n    'onBlur',\n    '_pressed',\n    '_focus',\n  ]);\n\n  return Object.keys(pressableComponentProps).length !== 0 ? (\n    // Checking if any Pressable Props present\n    <Pressable\n      accessibilityRole=\"button\"\n      accessibilityLabel={`List-Item-${index + start}`}\n      flexDirection=\"row\"\n      alignItems=\"center\"\n      {...resolvedProps}\n      onPressIn={composeEventHandlers(onPressIn, pressableProps.onPressIn)}\n      onPressOut={composeEventHandlers(onPressOut, pressableProps.onPressOut)}\n      // @ts-ignore - web only\n      onHoverIn={composeEventHandlers(onHoverIn, hoverProps.onHoverIn)}\n      // @ts-ignore - web only\n      onHoverOut={composeEventHandlers(onHoverOut, hoverProps.onHoverOut)}\n      // @ts-ignore - web only\n      onFocus={composeEventHandlers(\n        composeEventHandlers(onFocus, focusProps.onFocus)\n        // focusRingProps.onFocu\n      )}\n      // @ts-ignore - web only\n      onBlur={composeEventHandlers(\n        composeEventHandlers(onBlur, focusProps.onBlur)\n        // focusRingProps.onBlur\n      )}\n      borderTopWidth={index ? borderTopWidth : 0}\n      ref={ref}\n    >\n      {/* {({ isPressed, isHovered, isFocusVisible }: any) => {\n        const focusTextProps = isFocusVisible &&\n          _focus?._text && { ..._focus._text };\n        const hoverTextProps = isHovered &&\n          _hover?._text && { ..._hover._text };\n        const pressedTextProps = isPressed &&\n          _pressed?._text && { ..._pressed._text };\n        return ( */}\n      <>\n        <Box flexDirection=\"row\" alignItems=\"center\" pl={2}>\n          {ul || unordered ? ( //Adding disc in front of ListItem\n            <Box\n              style={{ transform: [{ scale: 1.5 }] }}\n              mr={2}\n              // _text={{\n              //   fontWeight: 'bold',\n              //   ..._text,\n              //   ...hoverTextProps,\n              //   ...focusTextProps,\n              //   ...pressedTextProps,\n              // }}\n            >\n              •\n            </Box>\n          ) : null}\n          {ol || ordered ? ( //Adding index number in front of ListItem\n            <Box\n              mr={2}\n              // _text={{\n              //   fontWeight: 'bold',\n              //   ..._text,\n              //   ...hoverTextProps,\n              //   ...focusTextProps,\n              //   ...pressedTextProps,\n              // }}\n            >\n              {index + start + '.'}\n            </Box>\n          ) : null}\n        </Box>\n        <Box\n          flexDirection=\"row\"\n          alignItems=\"center\"\n          // _text={{\n          //   ..._text,\n          //   ...hoverTextProps,\n          //   ...focusTextProps,\n          //   ...pressedTextProps,\n          // }}\n        >\n          {children}\n        </Box>\n      </>\n      {/* ); */}\n      {/* }} */}\n    </Pressable>\n  ) : (\n    // If no Pressable Props passed by user render Box instead of Pressable\n    <Box\n      accessibilityRole=\"text\"\n      accessibilityLabel={`List-Item-${index + start}`}\n      flexDirection=\"row\"\n      alignItems=\"center\"\n      {...nonPressableProps}\n      borderTopWidth={index ? borderTopWidth : 0}\n      ref={mergeRefs([ref, _ref])}\n      {...(isHovered && resolvedProps._hover)}\n      {...(isPressed && resolvedProps._pressed)}\n      {...(isFocused && resolvedProps._focus)}\n    >\n      <Box flexDirection=\"row\" alignItems=\"center\" pl={2}>\n        {ul || unordered ? ( //Adding disc in front of ListItem\n          <Box\n            style={{ transform: [{ scale: 1.5 }] }}\n            mr={2}\n            _text={{ fontWeight: 'bold', ..._text }}\n          >\n            •\n          </Box>\n        ) : null}\n        {ol || ordered ? ( //Adding index number in front of ListItem\n          <Box mr={2} _text={{ fontWeight: 'bold', ..._text }}>\n            {index + start + '.'}\n          </Box>\n        ) : null}\n      </Box>\n      <Box\n        flex={1}\n        flexDirection=\"row\"\n        alignItems=\"center\"\n        _text={\n          _text\n          // ...(isHovered && _hover?._text && { ..._hover._text }),\n        }\n      >\n        {children}\n      </Box>\n    </Box>\n  );\n};\n\nexport default memo(forwardRef(ListItem));\n"
  },
  {
    "path": "src/components/primitives/List/Ordered.tsx",
    "content": "import React from 'react';\nimport { VStack } from '../Stack';\nimport type { IListProps } from './types';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst OrderedList = ({ style, children, ...props }: IListProps, ref?: any) => {\n  const { _text, start, _hover, ...resolvedProps } = usePropsResolution(\n    'List',\n    props\n  );\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  // add props to children\n  children = React.Children.map(children, (child: any, ind: number) => {\n    return React.cloneElement(\n      child,\n      {\n        ol: true,\n        index: ind,\n        _text,\n        _hover,\n        start,\n        ...child.props,\n      },\n      child.props.children\n    );\n  });\n  return (\n    <VStack style={style} {...resolvedProps} ref={ref}>\n      {children}\n    </VStack>\n  );\n};\n\nexport default React.memo(React.forwardRef(OrderedList));\n"
  },
  {
    "path": "src/components/primitives/List/Unordered.tsx",
    "content": "import React from 'react';\nimport { VStack } from '../Stack';\nimport type { IListProps } from './types';\nimport { usePropsResolution } from '../../../hooks';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst UnorderedList = ({ children, ...props }: IListProps, ref?: any) => {\n  const { _text, _hover, ...resolvedProps } = usePropsResolution('List', props);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  // add props to children\n  children = React.Children.map(children, (child: any, ind: number) => {\n    return React.cloneElement(\n      child,\n      {\n        index: ind,\n        ul: true,\n        _text: _text,\n        _hover,\n        ...child.props,\n      },\n      child.props.children\n    );\n  });\n\n  return (\n    <VStack {...resolvedProps} ref={ref}>\n      {children}\n    </VStack>\n  );\n};\n\nexport default React.memo(React.forwardRef(UnorderedList));\n"
  },
  {
    "path": "src/components/primitives/List/index.tsx",
    "content": "import ListDefault from './List';\nimport ListItem from './ListItem';\nimport ListIcon from './ListIcon';\nimport ListOrdered from './Ordered';\nimport ListUnordered from './Unordered';\nimport type { IListComponentType } from './types';\n\nlet ListTemp: any = ListDefault;\nListTemp.Item = ListItem;\nListTemp.Icon = ListIcon;\nListTemp.Ordered = ListOrdered;\nListTemp.Unordered = ListUnordered;\n\n// To add typings\nconst List = ListTemp as IListComponentType;\n\nexport { List };\nexport type { IListProps, IListItemProps } from './types';\n"
  },
  {
    "path": "src/components/primitives/List/types.ts",
    "content": "import type { IStackProps } from '../Stack';\nimport type { IPressableProps } from '../Pressable';\nimport type { IIconProps } from '../Icon/types';\nimport type { ITextProps } from '../Text';\nimport type { MutableRefObject } from 'react';\n\nexport interface IListProps extends IStackProps {\n  /**\n   * List's Children.\n   */\n  children: JSX.Element[] | JSX.Element;\n  /**\n   * Is ListItem Unordered?.\n   */\n  unordered?: boolean;\n  /**\n   * Is ListItem Unordered?.\n   */\n  ul?: boolean;\n  /**\n   * Is ListItem Ordered?.\n   */\n  ordered?: boolean;\n  /**\n   * Is ListItem Ordered?.\n   */\n  ol?: boolean;\n  /**\n   * common _hover that is passed to all the children.\n   */\n  _hover?: Partial<IStackProps>;\n  /**\n   * common _focus that is passed to all the children.\n   */\n  _focus?: Partial<IStackProps>;\n  /**\n   * common _pressed that is passed to all the children.\n   */\n  _pressed?: Partial<IStackProps>;\n  /**\n   * Ordered List index starting value.\n   * @default 0\n   */\n  start?: number;\n  /**\n   * Props to style the commonly all the List.Item's text.\n   */\n  _text?: Partial<ITextProps>;\n}\n\nexport interface IListItemProps extends IPressableProps {\n  /**\n   * Is ListItem Unordered?.\n   */\n  unordered?: boolean;\n  /**\n   * Is ListItem Unordered?.\n   */\n  ul?: boolean;\n  /**\n   * Is ListItem Ordered?.\n   */\n  ordered?: boolean;\n  /**\n   * Is ListItem Ordered?.\n   */\n  ol?: boolean;\n  /**\n   * Ordered List index starting value.\n   * @default 0\n   */\n  start?: number;\n  /**\n   * Props to style the child text.\n   */\n  _text?: Partial<Omit<ITextProps, '_text'>>;\n}\nexport type IListComponentType = ((\n  props: IListProps & { ref?: any }\n) => JSX.Element) & {\n  Item: React.MemoExoticComponent<\n    (props: IListItemProps & { ref?: MutableRefObject<any> }) => JSX.Element\n  >;\n  Icon: React.MemoExoticComponent<\n    (props: IIconProps & { ref?: MutableRefObject<any> }) => JSX.Element\n  >;\n  Ordered: React.MemoExoticComponent<\n    (props: IListProps & { ref?: MutableRefObject<any> }) => JSX.Element\n  >;\n  Unordered: React.MemoExoticComponent<\n    (props: IListProps & { ref?: MutableRefObject<any> }) => JSX.Element\n  >;\n};\n"
  },
  {
    "path": "src/components/primitives/List/utils.ts",
    "content": "import { themeTools } from '../../../theme';\nexport function findProps(props: any) {\n  const [textProps, remaining] = themeTools.extractInObject(props, [\n    'fontWeight',\n    'fontSize',\n    'textDecorationLine',\n    'color',\n  ]);\n  const [\n    borderProps,\n    otherRemainingProps,\n  ] = themeTools.extractInObject(remaining, [\n    'border',\n    'borderBottom',\n    'borderTop',\n    'borderLeft',\n    'borderRight',\n    'borderWidth',\n    'borderRadius',\n    'borderColor',\n    'borderRightColor',\n    'borderBottomWidth',\n    'borderLeftWidth',\n    'borderTopWidth',\n    'borderBotttomWidth',\n    'borderTopLeftRadius',\n    'borderBottomColor',\n    'borderBottomEndRadius',\n    'borderBottomLeftRadius',\n    'borderBottomRightRadius',\n    'borderBottomStartRadius',\n    'borderBottomWidth',\n    'borderEndColor',\n    'borderLeftColor',\n    'borderLeftWidth',\n    'borderRadius',\n    'borderRightWidth',\n    'borderStartColor',\n    'borderTopColor',\n    'borderTopEndRadius',\n    'borderTopLeftRadius',\n    'borderTopRightRadius',\n    'borderTopStartRadius',\n    'borderTopWidth',\n  ]);\n  const [\n    layoutProps,\n    remainingProps,\n  ] = themeTools.extractInObject(otherRemainingProps, [\n    'm',\n    'margin',\n    'mt',\n    'marginTop',\n    'mr',\n    'marginRight',\n    'mb',\n    'marginBottom',\n    'ml',\n    'marginLeft',\n    'mx',\n    'marginX',\n    'my',\n    'marginY',\n    'left',\n    'top',\n    'bottom',\n    'right',\n    'position',\n    'minH',\n    'minHeight',\n    'minWidth',\n    'minW',\n    'height',\n    'width',\n  ]);\n\n  return [textProps, remainingProps, layoutProps, borderProps];\n}\n"
  },
  {
    "path": "src/components/primitives/Overlay/ExitAnimationContext.ts",
    "content": "import React from 'react';\n\nexport const ExitAnimationContext = React.createContext({\n  exited: true,\n  setExited: (_exited: boolean) => {},\n});\n"
  },
  {
    "path": "src/components/primitives/Overlay/Overlay.tsx",
    "content": "/* eslint-disable @typescript-eslint/no-unused-vars */\nimport { OverlayContainer } from '@react-native-aria/overlays';\nimport React from 'react';\nimport type { ViewStyle } from 'react-native';\nimport { Modal, Platform } from 'react-native';\nimport { useKeyboardDismissable } from '../../../hooks';\nimport { ExitAnimationContext } from './ExitAnimationContext';\n\nexport interface IOverlayProps {\n  isOpen?: boolean;\n  children?: any;\n  // We use RN modal on android if needed as it supports shifting accessiblity focus to the opened view. IOS automatically shifts focus if an absolutely placed view appears in front.\n  useRNModalOnAndroid?: boolean;\n  useRNModal?: boolean;\n  onRequestClose?: any;\n  isKeyboardDismissable?: boolean;\n  animationPreset?: 'fade' | 'slide' | 'none';\n  style?: ViewStyle;\n  unmountOnExit?: boolean;\n}\n\nexport function Overlay({\n  children,\n  isOpen,\n  useRNModal = false,\n  useRNModalOnAndroid = false,\n  isKeyboardDismissable = true,\n  //@ts-ignore\n  animationPreset = 'fade',\n  onRequestClose,\n  style,\n  unmountOnExit,\n}: IOverlayProps) {\n  const [exited, setExited] = React.useState(!isOpen);\n\n  useKeyboardDismissable({\n    enabled: isOpen && isKeyboardDismissable,\n    callback: onRequestClose ? onRequestClose : () => {},\n  });\n  const styleObj = { ...style };\n  if (animationPreset === 'slide') {\n    styleObj.overflow = 'hidden';\n    styleObj.display = 'flex';\n  } else {\n    styleObj.display = exited && !isOpen ? 'none' : 'flex';\n  }\n\n  if (unmountOnExit && !isOpen && exited) {\n    return null;\n  }\n\n  if (useRNModal || (useRNModalOnAndroid && Platform.OS === 'android')) {\n    return (\n      <ExitAnimationContext.Provider value={{ exited, setExited }}>\n        <Modal\n          statusBarTranslucent\n          transparent\n          visible={isOpen}\n          onRequestClose={onRequestClose}\n          animationType={animationPreset}\n        >\n          {children}\n        </Modal>\n      </ExitAnimationContext.Provider>\n    );\n  }\n\n  if (unmountOnExit && !isOpen && exited) {\n    return null;\n  }\n\n  return (\n    //@ts-ignore\n    <OverlayContainer style={{ ...styleObj }}>\n      <ExitAnimationContext.Provider value={{ exited, setExited }}>\n        {children}\n      </ExitAnimationContext.Provider>\n    </OverlayContainer>\n  );\n}\n"
  },
  {
    "path": "src/components/primitives/Overlay/index.ts",
    "content": "export * from './Overlay';\n"
  },
  {
    "path": "src/components/primitives/Pressable/Pressable.tsx",
    "content": "import React, { forwardRef, memo } from 'react';\nimport { Pressable as RNPressable } from 'react-native';\nimport { composeEventHandlers } from '../../../utils';\nimport type { IPressableProps } from './types';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nimport { makeStyledComponent } from '../../../utils/styled';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport { useFocusRing } from '@react-native-aria/focus';\n\nexport const useHover = () => {\n  const [isHovered, setHovered] = React.useState(false);\n  return {\n    hoverProps: {\n      onHoverIn: () => setHovered(true),\n      onHoverOut: () => setHovered(false),\n    },\n    isHovered,\n  };\n};\n\nexport const useFocus = () => {\n  const [isFocused, setFocused] = React.useState(false);\n  return {\n    focusProps: {\n      onFocus: () => setFocused(true),\n      onBlur: () => setFocused(false),\n    },\n    isFocused,\n  };\n};\n\nexport const useIsPressed = () => {\n  const [isPressed, setIsPressed] = React.useState(false);\n  return {\n    pressableProps: {\n      onPressIn: () => setIsPressed(true),\n      onPressOut: () => setIsPressed(false),\n    },\n    isPressed,\n  };\n};\n\nconst StyledPressable = makeStyledComponent(RNPressable);\n\nconst Pressable = (\n  {\n    children,\n    isDisabled,\n    disabled,\n    isHovered: isHoveredProp,\n    isPressed: isPressedProp,\n    isFocused: isFocusedProp,\n    isFocusVisible: isFocusVisibleProp,\n    ...props\n  }: IPressableProps,\n  ref: any\n) => {\n  const { hoverProps, isHovered } = useHover();\n  const { pressableProps, isPressed } = useIsPressed();\n  const { focusProps, isFocused } = useFocus();\n  const { isFocusVisible, focusProps: focusRingProps }: any = useFocusRing();\n\n  const stateProps = {\n    isPressed: isPressedProp || isPressed,\n    isFocused: isFocusedProp || isFocused,\n    isHovered: isHoveredProp || isHovered,\n  };\n\n  const {\n    onPressIn,\n    onPressOut,\n    onHoverIn,\n    onHoverOut,\n    onFocus,\n    onBlur,\n    ...resolvedProps\n  } = usePropsResolution('Pressable', props, {\n    ...stateProps,\n    isFocusVisible: isFocusVisibleProp || isFocusVisible,\n    isDisabled: disabled || isDisabled,\n  });\n\n  // TODO: Replace Render props with Context Hook\n\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n\n  // TODO: Replace Render props with Context Hook\n  return (\n    <StyledPressable\n      ref={ref}\n      onPressIn={composeEventHandlers(onPressIn, pressableProps.onPressIn)}\n      onPressOut={composeEventHandlers(onPressOut, pressableProps.onPressOut)}\n      // @ts-ignore - web only\n      onHoverIn={composeEventHandlers(onHoverIn, hoverProps.onHoverIn)}\n      // @ts-ignore - web only\n      onHoverOut={composeEventHandlers(onHoverOut, hoverProps.onHoverOut)}\n      // @ts-ignore - web only\n      onFocus={composeEventHandlers(\n        composeEventHandlers(onFocus, focusProps.onFocus),\n        focusRingProps.onFocus\n      )}\n      // @ts-ignore - web only\n      onBlur={composeEventHandlers(\n        composeEventHandlers(onBlur, focusProps.onBlur),\n        focusRingProps.onBlur\n      )}\n      disabled={disabled || isDisabled}\n      {...resolvedProps}\n    >\n      {typeof children !== 'function' ? children : children({ ...stateProps })}\n    </StyledPressable>\n  );\n};\n\nexport default memo(forwardRef(Pressable));\n"
  },
  {
    "path": "src/components/primitives/Pressable/index.tsx",
    "content": "export { default as Pressable } from './Pressable';\nexport type { IPressableProps } from './types';\nexport { useFocus, useHover, useIsPressed } from './Pressable';\n"
  },
  {
    "path": "src/components/primitives/Pressable/types.ts",
    "content": "import type { PressableProps } from 'react-native';\nimport type { StyledProps } from '../../../theme/types';\nimport type { CustomProps, PlatformProps } from '../../types';\nexport interface InterfacePressableProps<T = IPressableProps>\n  extends PressableProps,\n    StyledProps,\n    PlatformProps<T> {\n  /**\n   * Called when a mouse enters the Pressable\n   */\n  onHoverIn?: () => void;\n  /**\n   * Called when a mouse leaves the Pressable\n   */\n  onHoverOut?: () => void;\n  /**\n   * Called when Pressable receives focus\n   */\n  onFocus?: () => void;\n  /**\n   * Called when Pressable loses focus\n   */\n  onBlur?: () => void;\n  /**\n   * Style props to be applied when hovered\n   */\n  _hover?: Omit<Partial<T>, '_hover'>;\n  /**\n   * Style props to be applied when pressed\n   */\n  _pressed?: Omit<Partial<T>, '_pressed'>;\n  /**\n   * Style props to be applied when focus\n   */\n  _focus?: Omit<Partial<T>, '_focus'>;\n\n  /**\n   * Style props to be applied when disabled\n   */\n  _disabled?: Omit<Partial<T>, '_disabled'>;\n\n  /**\n   * \tIf true, the p will be disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * \tIf true, the p will be hovered.\n   */\n  isHovered?: boolean;\n  /**\n   * \tIf true, the p will be pressed.\n   */\n  isPressed?: boolean;\n  /**\n   * \tIf true, the p will be focused.\n   */\n  isFocused?: boolean;\n  /**\n   * \tIf true, the focus ring will be visible .\n   */\n  isFocusVisible?: boolean;\n  /**\n   * Style props to be applied when focus visible. These styles will be only applied when user is interacting the app using a keyboard. (Web only)\n   */\n  _focusVisible?: Omit<Partial<T>, '_focusVisible'>;\n\n  children?:\n    | React.ReactNode\n    | (({\n        isPressed,\n        isHovered,\n        isFocused,\n      }: {\n        isPressed: boolean;\n        isHovered: boolean;\n        isFocused: boolean;\n      }) => any);\n}\n\n// export type IPressableProps<T> =\n//   | InterfacePressableProps<T>\n//   & CustomProps<'Pressable'>;\n\nexport type IPressableProps = InterfacePressableProps<IPressableProps> &\n  CustomProps<'Pressable'>;\n"
  },
  {
    "path": "src/components/primitives/Radio/Radio.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\n//@ts-ignore\nimport stableHash from 'stable-hash';\nimport { Pressable, IPressableProps } from '../Pressable';\nimport { Center } from '../../composites/Center';\nimport Box from '../Box';\nimport { Stack } from '../Stack';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport { wrapStringChild } from '../../../utils/wrapStringChild';\nimport type { IRadioProps } from './types';\nimport { useRadio } from '@react-native-aria/radio';\nimport { RadioContext } from './RadioGroup';\nimport { mergeRefs } from '../../../utils';\nimport { CircleIcon } from '../Icon/Icons';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nimport {\n  composeEventHandlers,\n  combineContextAndProps,\n  isEmptyObj,\n} from '../../../utils';\nimport { extractInObject, stylingProps } from '../../../theme/tools/utils';\nimport {\n  useHover,\n  useFocus,\n  useIsPressed,\n} from '../../primitives/Pressable/Pressable';\nimport { useFormControlContext } from '../../composites/FormControl';\n\nconst RadioComponent = memo(\n  forwardRef(\n    (\n      {\n        icon,\n        inputProps,\n        combinedProps,\n        size,\n        children,\n        wrapperRef,\n        isHovered: isHoveredProp,\n        isPressed: isPressedProp,\n        isFocused: isFocusedProp,\n      }: any,\n      ref: any\n    ) => {\n      const { isInvalid, isReadOnly, isIndeterminate } = combinedProps;\n      const { hoverProps, isHovered } = useHover();\n      const { pressableProps, isPressed } = useIsPressed();\n      const { focusProps, isFocused } = useFocus();\n\n      const { disabled: isDisabled, checked: isChecked } = inputProps;\n\n      const {\n        onPressIn,\n        onPressOut,\n        onHoverIn,\n        onHoverOut,\n        onFocus,\n        onBlur,\n        _interactionBox,\n        _icon,\n        _stack,\n        _text,\n        ...resolvedProps\n      } = usePropsResolution(\n        'Radio',\n        {\n          ...combinedProps,\n          size,\n        },\n        {\n          isInvalid,\n          isReadOnly,\n          isDisabled,\n          isIndeterminate,\n          isChecked,\n          isHovered: isHoveredProp || isHovered,\n          isPressed: isPressedProp || isPressed,\n          isFocused: isFocusedProp || isFocused,\n        }\n      );\n\n      const [, cleanInputProps] = extractInObject(inputProps, [\n        ...stylingProps.margin,\n        ...stylingProps.layout,\n        ...stylingProps.flexbox,\n        ...stylingProps.position,\n        ...stylingProps.background,\n        ...stylingProps.padding,\n        ...stylingProps.border,\n        '_text',\n      ]);\n\n      // only calling below function when icon exist.\n      const sizedIcon = () =>\n        //@ts-ignore\n        React.cloneElement(icon, {\n          ..._icon,\n        });\n\n      return (\n        <Pressable\n          disabled={isDisabled}\n          {...pressableProps}\n          {...(cleanInputProps as IPressableProps)}\n          ref={mergeRefs([ref, wrapperRef])}\n          accessibilityRole=\"radio\"\n          onPressIn={composeEventHandlers(onPressIn, pressableProps.onPressIn)}\n          onPressOut={composeEventHandlers(\n            onPressOut,\n            pressableProps.onPressOut\n          )}\n          // @ts-ignore - web only\n          onHoverIn={composeEventHandlers(onHoverIn, hoverProps.onHoverIn)}\n          // @ts-ignore - web only\n          onHoverOut={composeEventHandlers(onHoverOut, hoverProps.onHoverOut)}\n          // @ts-ignore - web only\n          onFocus={composeEventHandlers(\n            composeEventHandlers(onFocus, focusProps.onFocus)\n            // focusRingProps.onFocu\n          )}\n          // @ts-ignore - web only\n          onBlur={composeEventHandlers(\n            composeEventHandlers(onBlur, focusProps.onBlur)\n            // focusRingProps.onBlur\n          )}\n        >\n          <Stack {..._stack}>\n            <Center>\n              {/* Interaction Wrapper */}\n              <Box {..._interactionBox} />\n              {/* radio */}\n              <Center {...resolvedProps}>\n                {icon && sizedIcon && isChecked ? (\n                  sizedIcon()\n                ) : (\n                  <CircleIcon {..._icon} opacity={isChecked ? 1 : 0} />\n                )}\n              </Center>\n            </Center>\n            {/* Label */}\n            {wrapStringChild(children, _text)}\n          </Stack>\n        </Pressable>\n      );\n    }\n  )\n);\n\nconst Radio = (\n  {\n    icon,\n    children,\n    size,\n    wrapperRef,\n    isHovered: isHoveredProp,\n    isPressed: isPressedProp,\n    isFocused: isFocusedProp,\n    ...props\n  }: IRadioProps,\n  ref: any\n) => {\n  const formControlContext = useFormControlContext();\n  const contextState = React.useContext(RadioContext);\n  const combinedProps = combineContextAndProps(\n    { ...formControlContext, ...contextState },\n    props\n  );\n  const inputRef = React.useRef(null);\n  const radioState = useRadio(\n    { ...combinedProps, 'aria-label': props.accessibilityLabel, children },\n    contextState.state ?? {},\n    inputRef\n  );\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const inputProps = React.useMemo(() => radioState.inputProps, [\n    radioState.inputProps.checked,\n    radioState.inputProps.disabled,\n  ]);\n\n  const contextCombinedProps = React.useMemo(() => {\n    return { ...combinedProps };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [stableHash(combinedProps)]);\n\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  if (isEmptyObj(contextState)) {\n    console.error('Error: Radio must be wrapped inside a Radio.Group');\n    return <></>;\n  }\n\n  return (\n    <RadioComponent\n      inputProps={inputProps}\n      combinedProps={contextCombinedProps}\n      children={children}\n      size={size}\n      ref={ref}\n      icon={icon}\n      wrapperRef={wrapperRef}\n      isHovered={isHoveredProp}\n      isPressed={isPressedProp}\n      isFocused={isFocusedProp}\n    />\n  );\n};\n\nexport default memo(forwardRef(Radio));\n"
  },
  {
    "path": "src/components/primitives/Radio/Radio.web.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\n//@ts-ignore\nimport stableHash from 'stable-hash';\nimport Box from '../Box';\nimport { Stack } from '../Stack';\nimport { Center } from '../../composites/Center';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport { wrapStringChild } from '../../../utils/wrapStringChild';\nimport type { IRadioProps } from './types';\nimport { mergeRefs } from './../../../utils';\nimport { useHover } from '@react-native-aria/interactions';\nimport { useRadio } from '@react-native-aria/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { RadioContext } from './RadioGroup';\nimport { useFocusRing } from '@react-native-aria/focus';\nimport { CircleIcon } from '../Icon/Icons';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nimport { combineContextAndProps, isEmptyObj } from '../../../utils';\nimport { useFormControlContext } from '../../composites/FormControl';\nconst RadioComponent = memo(\n  forwardRef(\n    (\n      {\n        icon,\n        inputProps,\n        combinedProps,\n        children,\n        wrapperRef,\n        isHovered: isHoveredProp,\n        isPressed: isPressedProp,\n        isFocused: isFocusedProp,\n        isFocusVisible: isFocusVisibleProp,\n        ...props\n      }: any,\n      ref: any\n    ) => {\n      const { isInvalid, isReadOnly, isIndeterminate } = combinedProps;\n      const { disabled: isDisabled, checked: isChecked } = inputProps;\n      const _ref = React.useRef(null);\n      const { isHovered } = useHover({}, _ref);\n      const mergedRefs = mergeRefs([_ref, wrapperRef]);\n      const { focusProps, isFocusVisible } = useFocusRing();\n      const [isFocused, setFocused] = React.useState(isFocusedProp);\n      const [isPressed, setPressed] = React.useState(isPressedProp);\n      const handleFocus = () => {\n        setFocused(true);\n      };\n      const handleBlur = () => {\n        isFocusedProp ? setFocused(true) : setFocused(false);\n      };\n      const handlePressIn = () => {\n        setPressed(true);\n      };\n\n      const handlePressOut = () => {\n        isPressedProp ? setPressed(true) : setPressed(false);\n      };\n      const {\n        _interactionBox,\n        _icon,\n        _stack,\n        _text,\n        ...resolvedProps\n      } = usePropsResolution('Radio', combinedProps, {\n        isInvalid,\n        isReadOnly,\n        isFocusVisible: isFocusVisibleProp || isFocused || isFocusVisible,\n        isDisabled,\n        isIndeterminate,\n        isChecked,\n        isHovered: isHoveredProp || isHovered,\n        isPressed,\n        isFocused,\n      });\n\n      // only calling below function when icon exist.\n      const sizedIcon = () =>\n        //@ts-ignore\n        React.cloneElement(icon, {\n          ..._icon,\n        });\n\n      const component = (\n        <Stack {..._stack}>\n          <Center>\n            {/* Interaction Box */}\n            <Box {..._interactionBox} />\n            {/* Radio */}\n            <Center {...resolvedProps}>\n              {icon && sizedIcon && isChecked ? (\n                sizedIcon()\n              ) : (\n                <CircleIcon {..._icon} opacity={isChecked ? 1 : 0} />\n              )}\n            </Center>\n          </Center>\n          {wrapStringChild(children, _text)}\n        </Stack>\n      );\n      //TODO: refactor for responsive prop\n      if (useHasResponsiveProps(props)) {\n        return null;\n      }\n\n      return (\n        <Box\n          // @ts-ignore - RN web supports accessibilityRole=\"label\"\n          accessibilityRole=\"label\"\n          ref={mergedRefs}\n        >\n          <div onMouseDown={handlePressIn} onMouseUp={handlePressOut}>\n            <VisuallyHidden>\n              <input\n                {...inputProps}\n                {...focusProps}\n                ref={ref}\n                onFocus={handleFocus}\n                onBlur={handleBlur}\n              />\n            </VisuallyHidden>\n            {component}\n          </div>\n        </Box>\n      );\n    }\n  )\n);\n\nconst Radio = (\n  {\n    icon,\n    children,\n    wrapperRef,\n    isHovered: isHoveredProp,\n    isPressed,\n    isFocused: isFocusedProp,\n    isFocusVisible: isFocusVisibleProp,\n    ...props\n  }: IRadioProps,\n  ref: any\n) => {\n  const formControlContext = useFormControlContext();\n  const contextState = React.useContext(RadioContext);\n\n  const combinedProps = combineContextAndProps(\n    { ...formControlContext, ...contextState },\n    props\n  );\n\n  const inputRef = React.useRef(null);\n  const radioState = useRadio(\n    { ...combinedProps, 'aria-label': props.accessibilityLabel, children },\n    contextState.state ?? {},\n    inputRef\n  );\n\n  //@ts-ignore\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const inputProps = React.useMemo(() => radioState.inputProps, [\n    radioState.inputProps.checked,\n    radioState.inputProps.disabled,\n  ]);\n\n  const contextCombinedProps = React.useMemo(() => {\n    return { ...combinedProps };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [stableHash(combinedProps)]);\n\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  if (isEmptyObj(contextState)) {\n    console.error('Error: Radio must be wrapped inside a Radio.Group');\n    return <></>;\n  }\n\n  return (\n    <RadioComponent\n      inputProps={inputProps}\n      combinedProps={contextCombinedProps}\n      children={children}\n      ref={ref}\n      icon={icon}\n      wrapperRef={wrapperRef}\n      isHovered={isHoveredProp}\n      isPressed={isPressed}\n      isFocused={isFocusedProp}\n      isFocusVisible={isFocusVisibleProp}\n    />\n  );\n};\n\nexport default memo(forwardRef(Radio));\n"
  },
  {
    "path": "src/components/primitives/Radio/RadioGroup.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport { Stack } from '../Stack';\nimport { useFormControlContext } from '../../composites/FormControl';\nimport type { IRadioContext, IRadioGroupProps } from './types';\nimport { useRadioGroupState } from '@react-stately/radio';\nimport { useRadioGroup } from '@react-native-aria/radio';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\n\nexport const RadioContext = React.createContext<IRadioContext>(\n  {} as IRadioContext\n);\nconst RadioWrapper = memo((props: any) => {\n  const resolvedProps = usePropsResolution('RadioGroup', props);\n  return <Stack {...resolvedProps} {...props.radioGroupProps} {...props} />;\n});\n\nconst RadioGroup = (\n  { size, colorScheme, _radio, children, ...props }: IRadioGroupProps,\n  ref: any\n) => {\n  const formControlContext = useFormControlContext();\n\n  const state = useRadioGroupState(props);\n  const radioGroupState = useRadioGroup(\n    { ...formControlContext, ...props, 'aria-label': props.accessibilityLabel },\n    state\n  );\n  const [propsState] = React.useState(props);\n  const contextValue: any = React.useMemo(() => {\n    return {\n      formControlContext,\n      size,\n      colorScheme,\n      ..._radio,\n      state,\n    };\n  }, [size, colorScheme, formControlContext, state, _radio]);\n\n  const radioGroupProps = React.useMemo(\n    () => radioGroupState.radioGroupProps,\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    []\n  );\n\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps({ ...props, size, colorScheme })) {\n    return null;\n  }\n\n  return (\n    <RadioContext.Provider value={contextValue}>\n      <RadioWrapper {...radioGroupProps} {...propsState} ref={ref}>\n        {children}\n      </RadioWrapper>\n    </RadioContext.Provider>\n  );\n};\n\nexport default memo(forwardRef(RadioGroup));\n"
  },
  {
    "path": "src/components/primitives/Radio/index.tsx",
    "content": "import RadioMain from './Radio';\nimport RadioGroup from './RadioGroup';\nimport type { IRadioComponentType } from './types';\n\nconst RadioTemp: any = RadioMain;\nRadioTemp.Group = RadioGroup;\n\n// To add typings\nconst Radio = RadioTemp as IRadioComponentType;\n\nexport { Radio };\nexport type {\n  IRadioProps,\n  IRadioGroupProps,\n  IRadioContext,\n  IRadioValue,\n  IRadioComponentType,\n} from './types';\n\nexport { RadioContext } from './RadioGroup';\n"
  },
  {
    "path": "src/components/primitives/Radio/test/radio.test.tsx",
    "content": "import React from 'react';\nimport { fireEvent, render } from '@testing-library/react-native';\nimport { Radio } from '..';\nimport { Text } from '../..';\nimport { NativeBaseProvider } from '../../../../core/NativeBaseProvider';\nfunction RadiosGroup() {\n  const [, setValue] = React.useState<any>('one');\n  return (\n    <Radio.Group\n      defaultValue=\"1\"\n      name=\"myRadioGroup\"\n      onChange={(nextValue: any) => {\n        setValue(nextValue);\n      }}\n    >\n      <Radio value=\"1\">\n        <Text mx={2}>First</Text>\n      </Radio>\n      <Radio value=\"2\">\n        <Text mx={2}>Second</Text>\n      </Radio>\n      <Radio value=\"3\">\n        <Text mx={2}>Third</Text>\n      </Radio>\n    </Radio.Group>\n  );\n}\ndescribe('RadioGroup', () => {\n  it('onChange and default on RadioGroup', () => {\n    let { getAllByRole, getByText } = render(\n      <NativeBaseProvider\n        initialWindowMetrics={{\n          frame: { x: 0, y: 0, width: 0, height: 0 },\n          insets: { top: 0, left: 0, right: 0, bottom: 0 },\n        }}\n      >\n        <RadiosGroup />\n      </NativeBaseProvider>\n    );\n    let radios = getAllByRole('radio');\n    expect(radios.length).toBe(3);\n    expect(radios[0].props.accessibilityState.checked).toBe(true);\n    expect(radios[1].props.accessibilityState.checked).toBe(false);\n    expect(radios[2].props.accessibilityState.checked).toBe(false);\n    let second = getByText('Second');\n    fireEvent.press(second);\n    expect(radios[0].props.accessibilityState.checked).toBe(false);\n  });\n\n  it('can be disabled', () => {\n    let { getAllByRole } = render(\n      <NativeBaseProvider\n        initialWindowMetrics={{\n          frame: { x: 0, y: 0, width: 0, height: 0 },\n          insets: { top: 0, left: 0, right: 0, bottom: 0 },\n        }}\n      >\n        <Radio.Group defaultValue=\"1\" name=\"myRadioGroup\">\n          <Radio value=\"1\">\n            <Text mx={2}>First</Text>\n          </Radio>\n          <Radio value=\"2\" isDisabled>\n            <Text mx={2}>Second</Text>\n          </Radio>\n          <Radio value=\"3\">\n            <Text mx={2}>Third</Text>\n          </Radio>\n        </Radio.Group>\n      </NativeBaseProvider>\n    );\n    let second = getAllByRole('radio');\n    expect(second[1].props.accessibilityState.disabled).toBe(true);\n  });\n});\n"
  },
  {
    "path": "src/components/primitives/Radio/types.tsx",
    "content": "import type { IStackProps } from '../../primitives/Stack';\nimport type { InterfaceBoxProps } from '../../primitives/Box/types';\nimport type { IFormControlContext } from '../../composites';\nimport type { AccessibilityRole } from 'react-native';\nimport type { RadioGroupState } from '@react-stately/radio';\nimport type { MutableRefObject } from 'react';\nimport type { ResponsiveValue } from '../../../components/types';\nimport type { ISizes } from '../../../theme/base/sizes';\nexport type IRadioValue = string;\nimport type { CustomProps, ThemeComponentSizeType } from '../../types';\nimport type { IIconProps } from '../Icon';\nimport type { ColorSchemeType } from '../../../components/types';\n\nexport type IRadioGroupOnChangeHandler = (value: IRadioValue) => any;\n\nexport interface InterfaceRadioProps extends InterfaceBoxProps<IRadioProps> {\n  /**\n   * The value to be used in the radio input. This is the value that will be returned on form submission\n   */\n  value: IRadioValue;\n  /**\n   * The color of the radio. This should be one of the color keys in the theme (e.g.\"green\", \"red\").\n   * @default 'primary'\n   */\n  colorScheme?: ColorSchemeType & ResponsiveValue<'default'>;\n  /**\n   * \tIf true, the radio will be disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * \tIf true, the radio will be hovered\n   */\n  isHovered?: boolean;\n  /**\n   * \tIf true, the radio will be pressed\n   */\n  isPressed?: boolean;\n  /**\n   * \tIf true, the radio will be focused\n   */\n  isFocused?: boolean;\n  /**\n   * \tIf true, the radio focus ring will be visible\n   */\n  isFocusVisible?: boolean;\n  /**\n   * If true, the radio is marked as invalid. Changes style of unchecked state.\n   */\n  isInvalid?: boolean;\n  /**\n   * \tThe size (width and height) of the radio.\n   */\n\n  size?: ThemeComponentSizeType<'Radio'>;\n\n  /**\n   * If given, will use this icon instead of the default.\n   */\n  icon?: JSX.Element;\n  /**\n   * Ref to be passed to Icon's wrapper Box\n   */\n  wrapperRef?: any;\n  /**\n   * Props to be passed to the Stack used inside.\n   */\n  _stack?: Partial<IStackProps>;\n\n  /**\n   * Passed props wilICheckboxGroupProps will be applied on the disabled state.\n   */\n  _disabled?: Omit<Partial<IRadioProps>, '_disabled'>;\n  /**\n   * Passed props will be applied on checked state.\n   */\n  _checked?: Omit<Partial<IRadioProps>, '_checked'>;\n  /**\n   * Passed props will be applied on focus state.\n   */\n  _focus?: Omit<Partial<IRadioProps>, '_focus'>;\n  /**\n   * Passed props will be applied on hover state.\n   */\n  _hover?: Omit<Partial<IRadioProps>, '_hover'>;\n  /**\n   * Passed props will be applied on invalid state.\n   */\n  _invalid?: Omit<Partial<IRadioProps>, '_invalid'>;\n  /**\n   * Passed props will be applied on pressed state on native.\n   */\n  _pressed?: Omit<Partial<IRadioProps>, '_pressed'>;\n  /**\n   * Icon related props can be passed in _icon.\n   */\n  _icon?: Partial<IIconProps>;\n  /**\n   * Passed props will be applied on readonly state.\n   */\n  _readOnly?: Omit<Partial<IRadioProps>, '_readOnly'>;\n  /**\n   * You can style interaction box around the checkbox using this.\n   */\n  _interactionBox?: Omit<Partial<IRadioProps>, '_interactionBox'>;\n\n  ref?: MutableRefObject<any>;\n  // /**\n  //  * Passed props will be applied on unchecked state.\n  //  */\n  // _unchecked?: Omit<Partial<IRadioProps>, '_unchecked'>;\n}\nexport interface IRadioGroupProps extends IStackProps {\n  /**\n   * The value of the radio group.\n   */\n  value?: IRadioValue;\n  /**\n   * The name of the input field in a radio (Useful for form submission).\n   */\n  name: string;\n  /**\n   * The initial value of the radio group.\n   */\n  defaultValue?: IRadioValue;\n  /**\n   * The color of the radios. This should be one of the color keys in the theme (e.g.\"green\", \"red\").\n   * @default 'primary'\n   */\n  colorScheme?: ColorSchemeType;\n  /**\n   * \tThe size (width and height) of the radio.\n   */\n  size?: ResponsiveValue<ISizes | (string & {}) | number>;\n  /**\n   *\n   */\n  // TODO: removing\n  // children?:\n  //   | React.ReactElement<IRadioProps>\n  //   | React.ReactElement<IRadioProps>[];\n  /**\n   * The callback fired when any children radio is checked or unchecked.\n   */\n  onChange?: IRadioGroupOnChangeHandler;\n  /**\n   * Pass props will be passed to each radio.\n   */\n  _radio?: Partial<IRadioProps>;\n}\nexport interface IRadioContext extends IFormControlContext {\n  colorScheme?: ColorSchemeType;\n  size?: ResponsiveValue<ISizes | (string & {}) | number>;\n  state: RadioGroupState;\n}\n\nexport type IUseRadioGroupReturnType = {\n  radioGroupProps: {\n    accessibilityRole: AccessibilityRole;\n    onChange: (value: IRadioValue) => any;\n    value: IRadioValue;\n    name: string;\n  };\n};\n\nexport type IRadioComponentType = ((props: IRadioProps) => JSX.Element) & {\n  Group: React.MemoExoticComponent<\n    (props: IRadioGroupProps & { ref?: MutableRefObject<any> }) => JSX.Element\n  >;\n};\n\nexport type IRadioProps = InterfaceRadioProps & CustomProps<'Radio'>;\n"
  },
  {
    "path": "src/components/primitives/Row/index.tsx",
    "content": "import { HStack } from '../Stack';\nexport { HStack as Row };\n"
  },
  {
    "path": "src/components/primitives/Select/Select.tsx",
    "content": "import React, { forwardRef, memo } from 'react';\nimport type { ISelectProps } from './types';\nimport { Platform, Keyboard } from 'react-native';\nimport { Actionsheet } from '../../composites/Actionsheet';\nimport Box from '../Box';\nimport { Input } from '../Input';\nimport { useFocusRing } from '@react-native-aria/focus';\nimport { useControllableState } from '../../../hooks';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport { useHover } from '@react-native-aria/interactions';\nimport { mergeRefs } from '../../../utils';\nimport { useFormControl } from '../../composites/FormControl';\nimport { ChevronDownIcon } from '../Icon/Icons';\nimport type { IButtonProps } from '../Button/types';\nimport { ScrollView } from '../../basic/ScrollView';\nimport { extractInObject, stylingProps } from '../../../theme/tools/utils';\nimport { FlatList } from '../../basic/FlatList';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nimport type { ISelectItemProps } from './types';\nimport { Pressable } from '../Pressable';\n\nexport const SelectContext = React.createContext({\n  onValueChange: (() => {}) as any,\n  selectedValue: null as any,\n  _selectedItem: {} as IButtonProps,\n  _item: {} as IButtonProps,\n});\n\nconst Select = (\n  {\n    isHovered: isHoveredProp,\n    isFocused: isFocusedProp,\n    isFocusVisible: isFocusVisibleProp,\n    variant,\n    ...props\n  }: ISelectProps,\n  ref: any\n) => {\n  const selectProps = useFormControl({\n    isDisabled: props.isDisabled,\n    nativeID: props.nativeID,\n  });\n  const flatListData: ISelectItemProps[] = [];\n\n  const isDisabled = selectProps.disabled;\n  const tempFix = '__NativebasePlaceholder__';\n  const _ref = React.useRef(null);\n\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [isFocused, setIsFocused] = React.useState<boolean>(false);\n\n  const { focusProps, isFocusVisible } = useFocusRing();\n  const { hoverProps, isHovered } = useHover({ isDisabled }, _ref);\n\n  const {\n    onValueChange,\n    selectedValue,\n    children,\n    dropdownIcon,\n    dropdownCloseIcon,\n    dropdownOpenIcon,\n    placeholder,\n    accessibilityLabel,\n    defaultValue,\n    _item,\n    _selectedItem,\n    onOpen,\n    onClose,\n    optimized,\n    _customDropdownIconProps,\n    _actionSheet,\n    _actionSheetContent,\n    _actionSheetBody,\n    _webSelect,\n    ...resolvedProps\n  } = usePropsResolution(\n    'Select',\n    props,\n    {\n      isDisabled,\n      isHovered: isHoveredProp || isHovered,\n      isFocused: isFocusedProp || isFocused,\n      isFocusVisible: isFocusVisibleProp || isFocusVisible,\n    },\n    undefined\n  );\n\n  const [value, setValue] = useControllableState({\n    value: selectedValue,\n    defaultValue,\n    onChange: (newValue) => {\n      onValueChange && onValueChange(newValue);\n      setIsOpen(false);\n    },\n  });\n\n  const itemsList: Array<{\n    label: string;\n    value: string;\n  }> = React.Children.toArray(children).map((child: any) => {\n    return {\n      label: child?.props?.label,\n      value: child?.props?.value,\n    };\n  });\n\n  const selectedItemArray = itemsList.filter(\n    (item: any) => item?.value === value\n  );\n\n  const selectedItem =\n    selectedItemArray && selectedItemArray.length ? selectedItemArray[0] : null;\n\n  const contextValue = React.useMemo(() => {\n    return {\n      onValueChange: setValue,\n      selectedValue: value,\n      _selectedItem: _selectedItem ?? {},\n      _item: _item ?? {},\n    };\n  }, [value, setValue, _selectedItem, _item]);\n\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n\n  const rightIcon =\n    isOpen && dropdownOpenIcon ? (\n      dropdownOpenIcon\n    ) : !isOpen && dropdownCloseIcon ? (\n      dropdownCloseIcon\n    ) : dropdownIcon ? (\n      dropdownIcon\n    ) : (\n      <ChevronDownIcon {..._customDropdownIconProps} />\n    );\n\n  const handleClose = () => {\n    setIsOpen(false);\n    onClose && onClose();\n  };\n\n  if (optimized) {\n    React.Children.toArray(children).map((child: any) => {\n      flatListData.push(child.props);\n    });\n  }\n\n  const [layoutProps, nonLayoutProps] = extractInObject(resolvedProps, [\n    ...stylingProps.margin,\n    ...stylingProps.flexbox,\n    ...stylingProps.position,\n    'shadow',\n    'opacity',\n  ]);\n\n  const commonInput = (\n    <Input\n      placeholder={placeholder}\n      InputRightElement={rightIcon}\n      {...nonLayoutProps}\n      // NOTE: Adding ts-ignore as we're not exposing isFocused in the Input component\n      // @ts-ignore-next-line\n      isFocused={isFocused}\n      isHovered={isHovered}\n      aria-hidden={true}\n      importantForAccessibility=\"no\"\n      value={selectedItem ? selectedItem.label : ''}\n      editable={false}\n      focusable={false}\n      isDisabled={isDisabled}\n      pointerEvents=\"none\"\n      variant={variant}\n    />\n  );\n\n  return Platform.OS === 'android' || Platform.OS === 'ios' ? (\n    <>\n      <Pressable\n        onPress={() => {\n          Keyboard.dismiss();\n          setIsOpen(true);\n          onOpen && onOpen();\n        }}\n        disabled={isDisabled}\n        accessibilityLabel={accessibilityLabel}\n        accessibilityRole=\"button\"\n        ref={mergeRefs([ref, _ref])}\n        {...layoutProps}\n      >\n        {commonInput}\n      </Pressable>\n      <Actionsheet isOpen={isOpen} onClose={handleClose} {..._actionSheet}>\n        <Actionsheet.Content {..._actionSheetContent}>\n          {/* TODO: Replace ScrollVeiw with FlatList */}\n          {optimized ? (\n            <FlatList\n              {..._actionSheetBody}\n              data={flatListData}\n              // eslint-disable-next-line no-shadow\n              keyExtractor={(_item, index) => index.toString()}\n              renderItem={({ item }: any) => {\n                const isSelected = selectedValue === item?.value;\n                return (\n                  <Actionsheet.Item\n                    onPress={() => {\n                      if (!isDisabled) {\n                        setValue(item?.value);\n                      }\n                    }}\n                    accessibilityState={{ selected: isSelected }}\n                    {...item}\n                    {..._item}\n                    {...(isSelected && _selectedItem)}\n                  >\n                    {item?.label}\n                  </Actionsheet.Item>\n                );\n              }}\n            />\n          ) : (\n            <ScrollView {..._actionSheetBody}>\n              <SelectContext.Provider value={contextValue}>\n                {children}\n              </SelectContext.Provider>\n            </ScrollView>\n          )}\n        </Actionsheet.Content>\n      </Actionsheet>\n    </>\n  ) : (\n    <Box {...layoutProps}>\n      {/* <Box w=\"100%\" h=\"100%\" position=\"absolute\" opacity=\"0\" zIndex={1}> */}\n      <select\n        aria-readonly={selectProps.readOnly}\n        required={selectProps.required}\n        disabled={isDisabled}\n        {...focusProps}\n        {...hoverProps}\n        ref={mergeRefs([ref, _ref])}\n        //@ts-ignore\n        onChange={(e) => {\n          setValue(e.target.value);\n        }}\n        value={selectedItem === null ? tempFix : value}\n        aria-label={placeholder}\n        onFocus={() => {\n          setIsFocused(true);\n          onOpen && onOpen();\n        }}\n        onBlur={() => {\n          setIsFocused(false);\n          onClose && onClose();\n        }}\n        {..._webSelect}\n      >\n        <option disabled value={tempFix}>\n          {placeholder}\n        </option>\n        {children}\n      </select>\n      {/* </Box> */}\n      {commonInput}\n    </Box>\n  );\n};\n\nexport default memo(forwardRef(Select));\n"
  },
  {
    "path": "src/components/primitives/Select/SelectItem.tsx",
    "content": "import React, { forwardRef, memo } from 'react';\nimport type { ISelectItemProps } from './types';\nimport { Platform } from 'react-native';\nimport { Actionsheet } from '../../composites/Actionsheet';\nimport { SelectContext } from './Select';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nexport const Item = (\n  { isDisabled, label, value, ...props }: ISelectItemProps,\n  ref?: any\n) => {\n  const {\n    onValueChange,\n    selectedValue,\n    _selectedItem,\n    _item,\n  } = React.useContext(SelectContext);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps({ ...props, isDisabled, label, value })) {\n    return null;\n  }\n  if (Platform.OS !== 'web') {\n    const isSelected = selectedValue === value;\n\n    return (\n      <Actionsheet.Item\n        ref={ref}\n        onPress={() => {\n          if (!isDisabled) {\n            onValueChange(value);\n          }\n        }}\n        accessibilityState={{ selected: isSelected }}\n        {..._item}\n        {...(isSelected && _selectedItem)}\n        {...props}\n      >\n        {label}\n      </Actionsheet.Item>\n    );\n  } else {\n    return (\n      <option ref={ref} value={value} disabled={isDisabled}>\n        {label}\n      </option>\n    );\n  }\n};\n\nexport default memo(forwardRef(Item));\n"
  },
  {
    "path": "src/components/primitives/Select/index.tsx",
    "content": "import SelectItem from './SelectItem';\nimport SelectMain from './Select';\nimport type {\n  ISelectProps,\n  ISelectItemProps,\n  ISelectComponentType,\n} from './types';\n\n// const SelectTemp: any = SelectMain;\nconst SelectTemp: any = SelectMain;\nSelectTemp.Item = SelectItem;\n\nconst Select = SelectTemp as ISelectComponentType;\n\nexport default Select;\nexport type { ISelectProps, ISelectItemProps, ISelectComponentType };\n"
  },
  {
    "path": "src/components/primitives/Select/types.ts",
    "content": "import type { InterfaceBoxProps } from '../Box';\nimport type { IButtonProps } from '../Button';\nimport type {\n  IActionsheetContentProps,\n  IActionsheetProps,\n} from '../../composites/Actionsheet/types';\nimport type { MutableRefObject } from 'react';\nimport type { CustomProps, ResponsiveValue } from '../../../components/types';\nimport type { IColors } from '../../../theme/base/colors';\nimport type { IFlatListProps } from '../../../components/basic/FlatList';\nimport type { InterfaceButtonProps } from '../Button/types';\n\nexport interface InterfaceSelectProps extends InterfaceBoxProps<ISelectProps> {\n  /**\n   * The placeholder that describes the Select.\n   */\n  placeholder?: string;\n  /**\n   * The Selected Item text color.\n   */\n  color?: ResponsiveValue<IColors | (string & {})>;\n  /**\n   * The placeholder text color\n   */\n  placeholderTextColor?: ResponsiveValue<IColors | (string & {})>;\n  /**\n   * Item props passed here will be passed to each Select.Item component.\n   */\n  _item?: Partial<IButtonProps>;\n  /**\n   * Item props passed here will be passed to the selected Select.Item component.\n   */\n  _selectedItem?: Partial<IButtonProps>;\n  /**\n   * Currently selected value. Useful for controlling the Select state\n   */\n  selectedValue?: string;\n  /**\n   * Default selected value.\n   */\n  defaultValue?: string;\n  /**\n   * Callback to be invoked when Select value is changed\n   */\n  onValueChange?: (itemValue: string) => void;\n  /**\n   * Whether Select is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether Select is hovered\n   */\n  isHovered?: boolean;\n  /**\n   * Whether Select is focused\n   */\n  isFocused?: boolean;\n  /**\n   * If true, the focus ring of select will be visible.\n   */\n  isFocusVisible?: boolean;\n  /**\n   * If given, updates the dropdown Icon\n   */\n  dropdownIcon?: JSX.Element;\n  /**\n   * If given, updates the dropdown Icon when opened\n   */\n  dropdownOpenIcon?: JSX.Element;\n  /**\n   * If given, updates the dropdown Icon when closed\n   */\n  dropdownCloseIcon?: JSX.Element;\n  /**\n   * Variant of the Select\n   * @default outline\n   */\n  variant?: 'outline' | 'filled' | 'underlined' | 'unstyled' | 'rounded';\n  /**\n   * Callback to be invoked when Select Dropdown or BottomSheet is opened.\n   */\n  onOpen?: (nativeEvent: any) => void;\n  /**\n   * Callback to be invoked when Select Dropdown or BottomSheet is closed.\n   */\n  onClose?: (nativeEvent: any) => void;\n  /**\n   * props to be passed to underlying ActionSheet. Select uses ActionSheet underneath.\n   */\n  _actionSheet?: Partial<IActionsheetProps>;\n  /**\n   * props to be passed to underlying ActionSheet.Content. Select uses ActionSheet underneath.\n   */\n  _actionSheetContent?: Partial<IActionsheetContentProps>;\n  /**\n   * props to be passed to underlying Flatlist in ActionSheet.Content.\n   */\n  _actionSheetBody?: Partial<IFlatListProps<any>>;\n  /**\n   * Ref to be attached to the Select wrapper\n   */\n  wrapperRef?: MutableRefObject<any>;\n}\n\nexport interface ISelectItemProps extends InterfaceButtonProps {\n  /**\n   * The label which will be displayed.\n   */\n  label: string;\n  /**\n   * The value to be used for the item. This is the value that will be returned on form submission.\n   */\n  value: string;\n}\n\nexport type ISelectComponentType = ((\n  props: ISelectProps & { ref?: MutableRefObject<any> }\n) => JSX.Element) & {\n  Item: React.MemoExoticComponent<\n    (props: ISelectItemProps & { ref?: MutableRefObject<any> }) => JSX.Element\n  >;\n};\nexport type ISelectProps = InterfaceSelectProps & CustomProps<'Select'>;\n"
  },
  {
    "path": "src/components/primitives/Slider/Context.ts",
    "content": "import React from 'react';\n\nexport const SliderContext = React.createContext<any>({});\n"
  },
  {
    "path": "src/components/primitives/Slider/Slider.tsx",
    "content": "import React, { forwardRef } from 'react';\nimport { useSliderState } from '@react-stately/slider';\nimport { useLayout } from '../../../hooks';\nimport { usePropsResolution } from '../../../hooks';\nimport type { ISliderProps } from './types';\nimport Box from '../Box';\nimport { SliderContext } from './Context';\nimport { useSlider } from '@react-native-aria/slider';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nfunction Slider({ isDisabled, isReadOnly, ...props }: ISliderProps, ref?: any) {\n  const newProps = {\n    ...props,\n    'aria-label': props.accessibilityLabel ?? 'Slider',\n  };\n\n  if (typeof props.value === 'number') {\n    //@ts-ignore - React Native Aria slider accepts array of values\n    newProps.value = [props.value];\n  }\n\n  if (typeof props.defaultValue === 'number') {\n    //@ts-ignore - React Native Aria slider accepts array of values\n    newProps.defaultValue = [props.defaultValue];\n  }\n\n  props = newProps;\n\n  const { onLayout, layout: trackLayout } = useLayout();\n  const updatedProps: ISliderProps = Object.assign({}, props);\n\n  if (isReadOnly || isDisabled) {\n    updatedProps.isDisabled = true;\n  }\n\n  const state = useSliderState({\n    ...updatedProps,\n    //@ts-ignore\n    numberFormatter: { format: (e) => e },\n    minValue: props.minValue,\n    maxValue: props.maxValue,\n    onChange: (val: any) => {\n      props.onChange && props.onChange(val[0]);\n    },\n    onChangeEnd: (val: any) => {\n      props.onChangeEnd && props.onChangeEnd(val[0]);\n    },\n  });\n\n  const resolvedProps = usePropsResolution('Slider', props, {\n    isDisabled,\n    isReadOnly,\n  });\n\n  const { trackProps } = useSlider(\n    (props as unknown) as any,\n    state,\n    trackLayout\n  );\n\n  const contextValue = React.useMemo(() => {\n    return {\n      trackLayout,\n      state,\n      orientation: props.orientation,\n      isDisabled: isDisabled,\n      isReversed: props.isReversed,\n      colorScheme: props.colorScheme,\n      trackProps,\n      isReadOnly: isReadOnly,\n      onTrackLayout: onLayout,\n      thumbSize: resolvedProps.thumbSize,\n      sliderSize: resolvedProps.sliderTrackHeight,\n      _interactionBox: resolvedProps._interactionBox,\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    trackLayout,\n    state,\n    props.orientation,\n    isDisabled,\n    props.isReversed,\n    props.colorScheme,\n    isReadOnly,\n    onLayout,\n    resolvedProps.thumbSize,\n    resolvedProps.sliderTrackHeight,\n  ]);\n\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n\n  return (\n    <SliderContext.Provider value={contextValue}>\n      <Box {...resolvedProps} ref={ref}>\n        {React.Children.map(props.children, (child, index) => {\n          if (child.displayName === 'SliderThumb') {\n            return React.cloneElement(child as React.ReactElement, {\n              index,\n            });\n          }\n\n          return child;\n        })}\n      </Box>\n    </SliderContext.Provider>\n  );\n}\n\nexport default forwardRef(Slider);\n"
  },
  {
    "path": "src/components/primitives/Slider/SliderFilledTrack.tsx",
    "content": "import React from 'react';\nimport { SliderContext } from './Context';\nimport Box from '../Box';\nimport type { ISliderTrackFilledProps } from './types';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst SliderFilledTrack = (props: ISliderTrackFilledProps, ref?: any) => {\n  const {\n    isReversed,\n    colorScheme,\n    state,\n    trackLayout,\n    orientation,\n    isDisabled,\n    sliderSize,\n    isReadOnly,\n  } = React.useContext(SliderContext);\n\n  const sliderTrackPosition = isReversed\n    ? orientation === 'vertical'\n      ? trackLayout.height - trackLayout.height * state.getThumbPercent(0)\n      : trackLayout.width - trackLayout.width * state.getThumbPercent(0)\n    : state.getThumbPercent(0) * 100 + '%';\n\n  const resolvedProps = usePropsResolution(\n    'SliderFilledTrack',\n    {\n      size: sliderSize,\n      colorScheme,\n      isReversed,\n      orientation,\n      sliderTrackPosition,\n      ...props,\n    },\n    { isDisabled, isReadOnly }\n  );\n\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n\n  return (\n    <Box\n      position=\"absolute\"\n      {...resolvedProps}\n      ref={ref}\n      // {...(isReadOnly && _readOnly)}\n      // {...(isDisabled && _disabled)}\n    />\n  );\n};\n\nexport default React.forwardRef(SliderFilledTrack);\n"
  },
  {
    "path": "src/components/primitives/Slider/SliderThumb.tsx",
    "content": "import React, { forwardRef } from 'react';\nimport { Platform } from 'react-native';\nimport { useSliderThumb } from '@react-native-aria/slider';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { useToken } from '../../../hooks';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport type { ISliderThumbProps } from './types';\nimport Box from '../Box';\nimport { SliderContext } from './Context';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nimport { useHover } from '@react-native-aria/interactions';\nimport { mergeRefs } from '../../../utils';\nimport { extractInObject, stylingProps } from '../../../theme/tools/utils';\nimport { Stack } from '../Stack';\nimport { Center } from '../../composites/Center';\n\nfunction SliderThumb(props: ISliderThumbProps, ref: any) {\n  const [isPressed, setIsPressed] = React.useState(false);\n\n  const [isFocused, setIsFocused] = React.useState(false);\n  const handleFocus = (focusState: boolean, callback: any) => {\n    setIsFocused(focusState);\n    callback();\n  };\n\n  const _ref = React.useRef(null);\n  const { isHovered } = useHover({}, _ref);\n\n  const {\n    state,\n    trackLayout,\n    orientation,\n    colorScheme,\n    thumbSize,\n    isReadOnly,\n    isDisabled,\n    _interactionBox: interactionBoxContext,\n  } = React.useContext(SliderContext);\n  const {\n    onFocus,\n    onBlur,\n    _stack,\n    _interactionBox,\n    ...resolvedProps\n  } = usePropsResolution(\n    'SliderThumb',\n    {\n      size: thumbSize,\n      _interactionBox: interactionBoxContext,\n      colorScheme,\n      ...props,\n    },\n    {\n      isDisabled,\n      isReadOnly,\n      isPressed,\n      isFocused,\n      isHovered,\n    }\n  );\n\n  const inputRef = React.useRef(null);\n  const { thumbProps, inputProps } = useSliderThumb(\n    {\n      index: 0,\n      trackLayout,\n      inputRef,\n      orientation,\n    },\n    state\n  );\n\n  React.useEffect(() => {\n    setIsPressed(state.isThumbDragging(0));\n  }, [state]);\n\n  const thumbAbsoluteSize = useToken('sizes', resolvedProps.size);\n\n  const thumbStyles: any = {\n    bottom:\n      orientation === 'vertical'\n        ? `${state.getThumbPercent(0) * 100}%`\n        : undefined,\n    left:\n      orientation !== 'vertical'\n        ? `${state.getThumbPercent(0) * 100}%`\n        : undefined,\n    transform:\n      orientation === 'vertical'\n        ? [{ translateY: parseInt(thumbAbsoluteSize) / 2 }]\n        : [{ translateX: -parseInt(thumbAbsoluteSize) / 2 }],\n  };\n\n  thumbStyles.transform.push({\n    scale: state.isThumbDragging(0) ? resolvedProps.scaleOnPressed : 1,\n  });\n\n  const [layoutProps, nonLayoutProps] = extractInObject(resolvedProps, [\n    ...stylingProps.margin,\n    ...stylingProps.layout,\n    ...stylingProps.flexbox,\n    ...stylingProps.position,\n    ...stylingProps.outline,\n  ]);\n\n  const [\n    accessibilityProps,\n    nonAccessibilityProps,\n  ] = extractInObject(nonLayoutProps, [\n    'accessibilityRole',\n    'accessibilityState',\n  ]);\n\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n\n  return (\n    <Box\n      position=\"absolute\"\n      {...thumbProps}\n      {...resolvedProps}\n      {...accessibilityProps}\n      {...layoutProps}\n      style={[thumbStyles, resolvedProps.style]}\n      onFocus={(e: any) => {\n        handleFocus(true, onFocus ? () => onFocus(e) : () => {});\n      }}\n      onBlur={(e: any) => {\n        handleFocus(false, onBlur ? () => onBlur(e) : () => {});\n      }}\n      // {...(isReadOnly && _readOnly)}\n      // {...(isDisabled && _disabled)}\n      ref={mergeRefs([_ref, ref])}\n    >\n      <Stack {..._stack}>\n        <Box {..._interactionBox} />\n        <Center {...nonAccessibilityProps}>\n          {props.children}\n          {Platform.OS === 'web' && (\n            <VisuallyHidden>\n              <input ref={inputRef} {...inputProps} />\n            </VisuallyHidden>\n          )}\n        </Center>\n      </Stack>\n    </Box>\n  );\n}\n\nSliderThumb.displayName = 'SliderThumb';\n\nexport default forwardRef(SliderThumb);\n"
  },
  {
    "path": "src/components/primitives/Slider/SliderTrack.tsx",
    "content": "import React from 'react';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport { Pressable } from '../Pressable';\nimport Box from '../Box';\nimport { SliderContext } from './Context';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nimport type { ISliderTrackProps } from './types';\n\nconst SliderTrack = ({ children, ...props }: ISliderTrackProps, ref?: any) => {\n  const {\n    orientation,\n    trackProps,\n    onTrackLayout,\n    colorScheme,\n    sliderSize,\n    isReadOnly,\n    isDisabled,\n  } = React.useContext(SliderContext);\n\n  const isVertical = orientation === 'vertical';\n\n  const { _pressable, ...resolvedProps } = usePropsResolution(\n    'SliderTrack',\n    {\n      size: sliderSize,\n      colorScheme,\n      isVertical,\n      ...props,\n    },\n    { isReadOnly, isDisabled }\n  );\n\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n\n  return (\n    <Pressable\n      onLayout={onTrackLayout}\n      ref={ref}\n      {...trackProps}\n      {..._pressable}\n    >\n      <Box {...resolvedProps}>{children}</Box>\n    </Pressable>\n  );\n};\n\nexport default React.forwardRef(SliderTrack);\n"
  },
  {
    "path": "src/components/primitives/Slider/index.tsx",
    "content": "import SliderMain from './Slider';\nimport SliderThumb from './SliderThumb';\nimport SliderTrack from './SliderTrack';\nimport SliderFilledTrack from './SliderFilledTrack';\nimport type { ISliderComponentType } from './types';\n\nconst SliderTemp: any = SliderMain;\nSliderTemp.Thumb = SliderThumb;\nSliderTemp.Track = SliderTrack;\nSliderTemp.FilledTrack = SliderFilledTrack;\n\n// To add typings\nconst Slider = SliderTemp as ISliderComponentType;\n\nexport { Slider };\nexport { SliderContext } from './Context';\n\nexport type { ISliderProps } from './types';\n"
  },
  {
    "path": "src/components/primitives/Slider/types.tsx",
    "content": "import type { MutableRefObject } from 'react';\nimport type { CustomProps } from '../../../components/types';\nimport type { InterfaceBoxProps } from '../Box';\nimport type { ColorSchemeType } from '../../../components/types';\nimport type { ResponsiveValue } from '../../types';\nimport type { ISizes } from '../../../theme/base/sizes';\n\nexport interface InterfaceSliderProps extends InterfaceBoxProps<ISliderProps> {\n  /** The current value of the Slider */\n  value?: number;\n  /** The default value (uncontrolled). */\n  defaultValue?: number;\n  /** Handler that is called when the value changes. */\n  onChange?: (value: number) => void;\n  /**\n   * Color scheme of the slider\n   */\n  colorScheme?: ColorSchemeType;\n  /**\n   * Text description of slider. This will be announced by screen reader/\n   */\n  accessibilityLabel?: string;\n  /**\n   * If true, the value will be incremented or decremented in reverse.\n   */\n  isReversed?: boolean;\n  /**\n   * The orientation of the Slider.\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /** Whether the whole Slider is disabled. */\n  isDisabled?: boolean;\n  /** Fired when the slider stops moving, due to being let go. */\n  onChangeEnd?: (value: number) => void;\n  /**\n   * The slider's minimum value.\n   * @default 0\n   */\n  minValue?: number;\n  /**\n   * The slider's maximum value.\n   * @default 100\n   */\n  maxValue?: number;\n  /**\n   * The slider's step value.\n   * @default 1\n   */\n  step?: number;\n  /** Whether the whole Slider is readonly. */\n  isReadOnly?: boolean;\n  /** Props applied if isDisabled is true. */\n  _disabled?: any;\n  /** Props applied if isReadOnly is true. */\n  _readOnly?: any;\n  /** Prop applied to change slider track height */\n  sliderTrackHeight?: ResponsiveValue<ISizes | (string & {}) | number>;\n  /**Prop applied to change size of slider thumb */\n  thumbSize?: ResponsiveValue<ISizes | (string & {}) | number>;\n  /**\n   * You can style interaction box around the checkbox using this.\n   */\n  _interactionBox?: Omit<Partial<ISliderThumbProps>, '_interactionBox'>;\n}\n\nexport interface ISliderTrackProps\n  extends InterfaceBoxProps<ISliderTrackProps> {\n  /** Whether the whole Slider is readonly. */\n  isReadOnly?: boolean;\n  /** Props applied if isDisabled is true. */\n  _disabled?: any;\n  /** Props applied if isReadOnly is true. */\n  _readOnly?: any;\n  /** Wrapper style for SliderTrack */\n  _pressable?: {};\n}\n\nexport interface ISliderTrackFilledProps\n  extends InterfaceBoxProps<ISliderTrackFilledProps> {\n  /** Whether the whole Slider is readonly. */\n  isReadOnly?: boolean;\n  /** Props applied if isDisabled is true. */\n  _disabled?: any;\n  /** Props applied if isReadOnly is true. */\n  _readOnly?: any;\n}\n\nexport interface ISliderThumbProps\n  extends InterfaceBoxProps<ISliderThumbProps> {\n  /**\n   * The orientation of the Slider.\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /** Whether the Thumb is disabled. */\n  isDisabled?: boolean;\n  /** Whether the whole Slider is readonly. */\n  isReadOnly?: boolean;\n  /** Props applied if isDisabled is true. */\n  _disabled?: any;\n  /** Props applied if isReadOnly is true. */\n  _readOnly?: any;\n  /**\n   * Props to be passed to the slider thumb when button is hovered.\n   */\n  _hover?: Omit<Partial<ISliderThumbProps>, '_hover'>;\n  /**\n   * Props to be passed to the slider thumb when button is pressed.\n   */\n  _pressed?: Omit<Partial<ISliderThumbProps>, '_pressed'>;\n  /**\n   * Props to be passed to the slider thumb when button is focused.\n   */\n  _focus?: Omit<Partial<ISliderThumbProps>, '_focus'>;\n}\n\nexport type ISliderComponentType = ((\n  props: ISliderProps & { ref?: MutableRefObject<any> }\n) => JSX.Element) & {\n  Thumb: React.MemoExoticComponent<\n    (props: ISliderThumbProps & { ref?: MutableRefObject<any> }) => JSX.Element\n  >;\n  Track: React.MemoExoticComponent<\n    (props: ISliderTrackProps & { ref?: MutableRefObject<any> }) => JSX.Element\n  >;\n  FilledTrack: React.MemoExoticComponent<\n    (\n      props: ISliderTrackFilledProps & { ref?: MutableRefObject<any> }\n    ) => JSX.Element\n  >;\n};\n\nexport type ISliderProps = InterfaceSliderProps & CustomProps<'Slider'>;\n"
  },
  {
    "path": "src/components/primitives/Spinner/index.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport { ActivityIndicator } from 'react-native';\nimport {\n  usePropsResolution,\n  useStyledSystemPropsResolver,\n} from '../../../hooks';\nimport { getColor } from '../../../theme';\nimport type { ISpinnerProps } from './types';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nimport { useTheme } from '../../../hooks';\n\nconst Spinner = (props: ISpinnerProps, ref: any) => {\n  const { color, size, style, testID, ...resolvedProps } = usePropsResolution(\n    'Spinner',\n    props\n  );\n  const resolvedColor = getColor(color, useTheme().colors, useTheme());\n  const resolvedStyle = useStyledSystemPropsResolver(resolvedProps);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n\n  return (\n    <ActivityIndicator\n      testID={testID}\n      accessible\n      accessibilityLabel=\"loading\"\n      color={resolvedColor}\n      ref={ref}\n      size={size}\n      style={[resolvedStyle, style]}\n    />\n  );\n};\n\nexport default memo(forwardRef(Spinner));\nexport type { ISpinnerProps };\n"
  },
  {
    "path": "src/components/primitives/Spinner/types.tsx",
    "content": "import type { ActivityIndicatorProps } from 'react-native';\nimport type { StyledProps } from '../../../theme/types';\nimport type {\n  CustomProps,\n  ThemeComponentSizeType,\n} from '../../../components/types';\nexport interface InterfaceSpinnerProps\n  extends Omit<ActivityIndicatorProps, 'size'>,\n    Omit<StyledProps, 'size' | 'color'> {\n  /**\n   * Size of Spinner\n   */\n  size?: ThemeComponentSizeType<'Spinner'>;\n\n  // variant?:\n  //   | 'custom'\n  //   | 'dotted'\n  //   | 'multiColorDotted'\n  //   | 'stroked'\n  //   | 'squareDotted';\n  // duration?: number;\n  // renderProp?: JSX.Element | JSX.Element[];\n}\n\nexport type ISpinnerProps = InterfaceSpinnerProps & CustomProps<'Spinner'>;\n"
  },
  {
    "path": "src/components/primitives/Spinner/useSpinner.tsx",
    "content": "import type { ISpinnerProps } from './types';\n\nexport function useSpinner(props: ISpinnerProps) {\n  return {\n    spinnerProps: {\n      accessible: true,\n      accessibilityLabel: props.accessibilityLabel ?? 'loading',\n    },\n  };\n}\n"
  },
  {
    "path": "src/components/primitives/Spinner/variants/default.tsx",
    "content": "import React from 'react';\nimport { Icon } from '../../../primitives/Icon';\nimport { Circle, G } from 'react-native-svg';\n\nexport function Default(props: any) {\n  return (\n    <Icon color={props.color} viewBox=\"0 0 64 64\" size={props.size}>\n      <G id=\"Group_182\" data-name=\"Group 182\" transform=\"translate(-258 -488)\">\n        <G\n          id=\"Ellipse_8\"\n          data-name=\"Ellipse 8\"\n          transform=\"translate(258 488)\"\n          fill=\"none\"\n          stroke=\"#e8edfb\"\n          strokeWidth=\"6\"\n        >\n          <Circle cx=\"32\" cy=\"32\" r=\"32\" stroke=\"none\" />\n          <Circle cx=\"32\" cy=\"32\" r=\"29\" fill=\"none\" />\n        </G>\n        <G\n          id=\"Ellipse_10\"\n          data-name=\"Ellipse 10\"\n          transform=\"translate(258 488)\"\n          fill=\"none\"\n          stroke={props.color}\n          strokeLinecap=\"square\"\n          strokeWidth=\"6\"\n          strokeDasharray=\"90 10000\"\n        >\n          <Circle cx=\"32\" cy=\"32\" r=\"32\" stroke=\"none\" />\n          <Circle cx=\"32\" cy=\"32\" r=\"29\" fill=\"none\" />\n        </G>\n      </G>\n    </Icon>\n  );\n}\n"
  },
  {
    "path": "src/components/primitives/Spinner/variants/dotted.tsx",
    "content": "import React from 'react';\nimport { Icon } from '../../../primitives/Icon';\nimport { Path } from 'react-native-svg';\n\nexport function Dotted(props: any) {\n  return (\n    <Icon color={props.color} viewBox=\"0 0 66.238 69\" size={props.size}>\n      <Path\n        id=\"Path_33\"\n        data-name=\"Path 33\"\n        d=\"M74.735,324.332a6.22,6.22,0,1,0,4.377,1.811A5.989,5.989,0,0,0,74.735,324.332Z\"\n        transform=\"translate(-59.556 -275.343)\"\n      />\n      <Path\n        id=\"Path_34\"\n        data-name=\"Path 34\"\n        d=\"M22.942,198.757a6.92,6.92,0,0,0-6.9-6.9,6.645,6.645,0,0,0-4.873,2.027,6.872,6.872,0,0,0,0,9.746,6.643,6.643,0,0,0,4.873,2.027,6.643,6.643,0,0,0,4.873-2.027A6.642,6.642,0,0,0,22.942,198.757Z\"\n        transform=\"translate(-9.142 -162.878)\"\n      />\n      <Path\n        id=\"Path_35\"\n        data-name=\"Path 35\"\n        d=\"M346.061,93.695a3.46,3.46,0,1,0-2.437-1.014A3.323,3.323,0,0,0,346.061,93.695Z\"\n        transform=\"translate(-292.242 -73.684)\"\n      />\n      <Path\n        id=\"Path_36\"\n        data-name=\"Path 36\"\n        d=\"M66.983,59.388a7.582,7.582,0,1,0,5.369,2.221A7.315,7.315,0,0,0,66.983,59.388Z\"\n        transform=\"translate(-51.803 -50.418)\"\n      />\n      <Path\n        id=\"Path_37\"\n        data-name=\"Path 37\"\n        d=\"M399.941,211.34a4.166,4.166,0,1,0,1.207,2.933A3.99,3.99,0,0,0,399.941,211.34Z\"\n        transform=\"translate(-334.91 -178.393)\"\n      />\n      <Path\n        id=\"Path_38\"\n        data-name=\"Path 38\"\n        d=\"M338.3,333.473a4.859,4.859,0,1,0,3.407,1.423A4.648,4.648,0,0,0,338.3,333.473Z\"\n        transform=\"translate(-284.485 -283.104)\"\n      />\n      <Path\n        id=\"Path_39\"\n        data-name=\"Path 39\"\n        d=\"M206.519,383.717a5.524,5.524,0,1,0,3.9,1.618A5.322,5.322,0,0,0,206.519,383.717Z\"\n        transform=\"translate(-172.019 -325.759)\"\n      />\n      <Path\n        id=\"Path_40\"\n        data-name=\"Path 40\"\n        d=\"M191.007,0a7.987,7.987,0,0,0-5.866,2.415,7.987,7.987,0,0,0-2.415,5.865,7.985,7.985,0,0,0,2.415,5.865,8.33,8.33,0,0,0,11.73,0,7.985,7.985,0,0,0,2.414-5.865,7.989,7.989,0,0,0-2.414-5.865A7.984,7.984,0,0,0,191.007,0Z\"\n        transform=\"translate(-156.508 0)\"\n      />\n    </Icon>\n  );\n}\n"
  },
  {
    "path": "src/components/primitives/Spinner/variants/index.ts",
    "content": "export * from './default';\nexport * from './dotted';\nexport * from './squareDotted';\nexport * from './stroked';\nexport * from './multiColorDotted';\n"
  },
  {
    "path": "src/components/primitives/Spinner/variants/multiColorDotted.tsx",
    "content": "import React from 'react';\nimport { Icon } from '../../../primitives/Icon';\nimport { Circle, Ellipse } from 'react-native-svg';\n\nexport function MultiColorDotted(props: any) {\n  return (\n    <Icon color={props.color} viewBox=\"0 0 74.072 74.072\" size={props.size}>\n      <Circle\n        id=\"Ellipse_24\"\n        data-name=\"Ellipse 24\"\n        cx=\"7.622\"\n        cy=\"7.622\"\n        r=\"7.622\"\n        transform=\"translate(7.037 48.382)\"\n        fillOpacity=\"0.7\"\n      />\n      <Ellipse\n        id=\"Ellipse_25\"\n        data-name=\"Ellipse 25\"\n        cx=\"6.628\"\n        cy=\"6.959\"\n        rx=\"6.628\"\n        ry=\"6.959\"\n        transform=\"translate(58.733 43.08)\"\n        fillOpacity=\"0.4\"\n      />\n      <Circle\n        id=\"Ellipse_26\"\n        data-name=\"Ellipse 26\"\n        cx=\"5.634\"\n        cy=\"5.634\"\n        r=\"5.634\"\n        transform=\"translate(53.431 11.267)\"\n        fillOpacity=\"0.2\"\n      />\n      <Ellipse\n        id=\"Ellipse_27\"\n        data-name=\"Ellipse 27\"\n        cx=\"8.383\"\n        cy=\"8.178\"\n        rx=\"8.383\"\n        ry=\"8.178\"\n        transform=\"translate(0 28.299)\"\n        fillOpacity=\"0.8\"\n      />\n      <Ellipse\n        id=\"Ellipse_28\"\n        data-name=\"Ellipse 28\"\n        cx=\"7.621\"\n        cy=\"7.426\"\n        rx=\"7.621\"\n        ry=\"7.426\"\n        transform=\"translate(24.843 59.221)\"\n        fillOpacity=\"0.6\"\n      />\n      <Ellipse\n        id=\"Ellipse_29\"\n        data-name=\"Ellipse 29\"\n        cx=\"7.24\"\n        cy=\"7.049\"\n        rx=\"7.24\"\n        ry=\"7.049\"\n        transform=\"translate(44.809 56.721)\"\n        fillOpacity=\"0.5\"\n      />\n      <Ellipse\n        id=\"Ellipse_30\"\n        data-name=\"Ellipse 30\"\n        cx=\"8.764\"\n        cy=\"8.554\"\n        rx=\"8.764\"\n        ry=\"8.554\"\n        transform=\"translate(8.688 8.554)\"\n        fillOpacity=\"0.9\"\n      />\n      <Ellipse\n        id=\"Ellipse_31\"\n        data-name=\"Ellipse 31\"\n        cx=\"6.478\"\n        cy=\"6.357\"\n        rx=\"6.478\"\n        ry=\"6.357\"\n        transform=\"translate(61.117 25.906)\"\n        fillOpacity=\"0.3\"\n      />\n      <Ellipse\n        id=\"Ellipse_32\"\n        data-name=\"Ellipse 32\"\n        cx=\"8.947\"\n        cy=\"9.279\"\n        rx=\"8.947\"\n        ry=\"9.279\"\n        transform=\"translate(30.234)\"\n        fillOpacity=\"1\"\n      />\n    </Icon>\n  );\n}\n"
  },
  {
    "path": "src/components/primitives/Spinner/variants/squareDotted.tsx",
    "content": "import React from 'react';\nimport { Icon } from '../../../primitives/Icon';\nimport { Circle, G } from 'react-native-svg';\n\nexport function SquareDotted(props: any) {\n  return (\n    <Icon color={props.color} viewBox=\"0 0 50 50\" size={props.size}>\n      <G id=\"Group_264\" data-name=\"Group 264\" transform=\"translate(-172 -330)\">\n        <Circle\n          id=\"Ellipse_33\"\n          data-name=\"Ellipse 33\"\n          cx=\"9\"\n          cy=\"9\"\n          r=\"9\"\n          transform=\"translate(172 330)\"\n          fill={props.color}\n        />\n        <Circle\n          id=\"Ellipse_36\"\n          data-name=\"Ellipse 36\"\n          cx=\"9\"\n          cy=\"9\"\n          r=\"9\"\n          transform=\"translate(204 330)\"\n          fill={props.color}\n        />\n        <Circle\n          id=\"Ellipse_35\"\n          data-name=\"Ellipse 35\"\n          cx=\"9\"\n          cy=\"9\"\n          r=\"9\"\n          transform=\"translate(172 362)\"\n          fill={props.color}\n        />\n        <Circle\n          id=\"Ellipse_37\"\n          data-name=\"Ellipse 37\"\n          cx=\"9\"\n          cy=\"9\"\n          r=\"9\"\n          transform=\"translate(204 362)\"\n          fill={props.color}\n        />\n      </G>\n    </Icon>\n  );\n}\n"
  },
  {
    "path": "src/components/primitives/Spinner/variants/stroked.tsx",
    "content": "import React from 'react';\nimport { Icon } from '../../../primitives/Icon';\nimport { Path, G } from 'react-native-svg';\n\nexport function Stroked(props: any) {\n  return (\n    <Icon color={props.color} viewBox=\"0 0 69.672 69.672\" size={props.size}>\n      <G id=\"Group_252\" data-name=\"Group 252\" transform=\"translate(32.661)\">\n        <Path\n          id=\"Path_17\"\n          data-name=\"Path 17\"\n          d=\"M242.194,8.958a2.175,2.175,0,0,1-2.175-2.175V2.175a2.175,2.175,0,1,1,4.349,0V6.783A2.175,2.175,0,0,1,242.194,8.958Z\"\n          transform=\"translate(-240.019 0)\"\n          fill={props.color}\n        />\n        <Path\n          id=\"Path_18\"\n          data-name=\"Path 18\"\n          d=\"M242.194,455.127a2.175,2.175,0,0,1-2.175-2.175v-4.609a2.175,2.175,0,1,1,4.349,0v4.609A2.175,2.175,0,0,1,242.194,455.127Z\"\n          transform=\"translate(-240.019 -385.455)\"\n          fill={props.color}\n        />\n      </G>\n      <G\n        id=\"Group_253\"\n        data-name=\"Group 253\"\n        transform=\"translate(16.33 4.376)\"\n      >\n        <Path\n          id=\"Path_19\"\n          data-name=\"Path 19\"\n          d=\"M125.574,40.2a2.175,2.175,0,0,1-2.971-.8l-2.3-3.991a2.175,2.175,0,0,1,3.766-2.175l2.3,3.991a2.174,2.174,0,0,1-.8,2.971Z\"\n          transform=\"translate(-120.007 -32.155)\"\n          fill={props.color}\n        />\n        <Path\n          id=\"Path_20\"\n          data-name=\"Path 20\"\n          d=\"M348.658,426.6a2.175,2.175,0,0,1-2.971-.8l-2.3-3.991a2.175,2.175,0,1,1,3.767-2.175l2.3,3.991A2.174,2.174,0,0,1,348.658,426.6Z\"\n          transform=\"translate(-312.735 -365.968)\"\n          fill={props.color}\n        />\n      </G>\n      <G\n        id=\"Group_254\"\n        data-name=\"Group 254\"\n        transform=\"translate(4.375 16.33)\"\n      >\n        <Path\n          id=\"Path_21\"\n          data-name=\"Path 21\"\n          d=\"M40.2,125.574a2.175,2.175,0,0,1-2.971.8l-3.991-2.3a2.175,2.175,0,0,1,2.175-3.767l3.991,2.3A2.175,2.175,0,0,1,40.2,125.574Z\"\n          transform=\"translate(-32.154 -120.007)\"\n          fill={props.color}\n        />\n        <Path\n          id=\"Path_22\"\n          data-name=\"Path 22\"\n          d=\"M426.6,348.658a2.175,2.175,0,0,1-2.971.8l-3.991-2.3a2.175,2.175,0,1,1,2.175-3.766l3.991,2.3A2.174,2.174,0,0,1,426.6,348.658Z\"\n          transform=\"translate(-365.968 -312.735)\"\n          fill={props.color}\n        />\n      </G>\n      <G id=\"Group_255\" data-name=\"Group 255\" transform=\"translate(0 32.661)\">\n        <Path\n          id=\"Path_23\"\n          data-name=\"Path 23\"\n          d=\"M8.958,242.194a2.175,2.175,0,0,1-2.175,2.175H2.175a2.175,2.175,0,1,1,0-4.349H6.783A2.175,2.175,0,0,1,8.958,242.194Z\"\n          transform=\"translate(0 -240.019)\"\n          fill={props.color}\n        />\n        <Path\n          id=\"Path_24\"\n          data-name=\"Path 24\"\n          d=\"M455.127,242.194a2.175,2.175,0,0,1-2.175,2.175h-4.609a2.175,2.175,0,1,1,0-4.349h4.609A2.175,2.175,0,0,1,455.127,242.194Z\"\n          transform=\"translate(-385.455 -240.019)\"\n          fill={props.color}\n        />\n      </G>\n      <G\n        id=\"Group_256\"\n        data-name=\"Group 256\"\n        transform=\"translate(4.376 16.33)\"\n      >\n        <Path\n          id=\"Path_25\"\n          data-name=\"Path 25\"\n          d=\"M40.2,344.179a2.175,2.175,0,0,1-.8,2.971l-3.991,2.3a2.175,2.175,0,0,1-2.175-3.766l3.991-2.3A2.175,2.175,0,0,1,40.2,344.179Z\"\n          transform=\"translate(-32.155 -312.735)\"\n          fill={props.color}\n        />\n        <Path\n          id=\"Path_26\"\n          data-name=\"Path 26\"\n          d=\"M426.6,121.1a2.175,2.175,0,0,1-.8,2.971l-3.991,2.3a2.175,2.175,0,0,1-2.175-3.766l3.991-2.3A2.174,2.174,0,0,1,426.6,121.1Z\"\n          transform=\"translate(-365.97 -120.007)\"\n          fill={props.color}\n        />\n      </G>\n      <G\n        id=\"Group_257\"\n        data-name=\"Group 257\"\n        transform=\"translate(16.33 4.375)\"\n      >\n        <Path\n          id=\"Path_27\"\n          data-name=\"Path 27\"\n          d=\"M125.574,418.839a2.175,2.175,0,0,1,.8,2.971l-2.3,3.991a2.175,2.175,0,0,1-3.767-2.175l2.3-3.991A2.175,2.175,0,0,1,125.574,418.839Z\"\n          transform=\"translate(-120.007 -365.968)\"\n          fill={props.color}\n        />\n        <Path\n          id=\"Path_28\"\n          data-name=\"Path 28\"\n          d=\"M348.658,32.445a2.175,2.175,0,0,1,.8,2.971l-2.3,3.991a2.175,2.175,0,1,1-3.766-2.175l2.3-3.991A2.174,2.174,0,0,1,348.658,32.445Z\"\n          transform=\"translate(-312.735 -32.154)\"\n          fill={props.color}\n        />\n      </G>\n    </Icon>\n  );\n}\n"
  },
  {
    "path": "src/components/primitives/Stack/HStack.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport StackMain, { InterfaceStackProps } from './Stack';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport type {\n  CustomProps,\n  ResponsiveValue,\n  // ThemeComponentSizeType,\n} from '../../types';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nexport interface InterfaceHStackProps extends InterfaceStackProps {\n  /**\n   * The direction of the Stack Items.\n   * @default row\n   */\n  direction?: ResponsiveValue<\n    'column' | 'row' | 'column-reverse' | 'row-reverse'\n  >;\n}\n\nexport type IHStackProps = InterfaceHStackProps & CustomProps<'HStack'>;\n\nconst HStack = (props: IHStackProps, ref?: any) => {\n  const resolvedProps = usePropsResolution('HStack', props);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return <StackMain ref={ref} direction=\"row\" {...resolvedProps} />;\n};\n\nexport default memo(forwardRef(HStack));\n"
  },
  {
    "path": "src/components/primitives/Stack/Stack.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport { default as Box, InterfaceBoxProps } from '../Box';\nimport { getSpacedChildren } from '../../../utils';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nimport type { CustomProps, ResponsiveValue, SpaceType } from '../../types';\nimport { ResponsiveQueryContext } from '../../../utils/useResponsiveQuery/ResponsiveQueryProvider';\n\nexport interface InterfaceStackProps extends InterfaceBoxProps<IStackProps> {\n  /**\n   * The divider element to use between elements.\n   */\n  divider?: JSX.Element;\n  /**\n   * The space between each stack item. Accepts Responsive values\n   */\n  space?: ResponsiveValue<\n    'gutter' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | SpaceType\n  >;\n  /**\n   * Determines whether to reverse the direction of Stack Items.\n   */\n  reversed?: boolean;\n  /**\n   * The direction of the Stack Items.\n   * @default column\n   */\n  direction?: ResponsiveValue<\n    'column' | 'row' | 'column-reverse' | 'row-reverse'\n  >;\n  /**\n   * If true, the Stack will be in hovered state.\n   */\n  isHovered?: boolean;\n  /**\n   * If true, the Stack will be focused.\n   */\n  isFocused?: boolean;\n  /**\n   * If true, the Stack will be disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * If true, the Stack will be invalid.\n   */\n  isInvalid?: boolean;\n  /**\n   * If true, prevents the value of the children from being edited. Used with FormControls.\n   */\n  isReadOnly?: boolean;\n}\n\nexport type IStackProps = InterfaceStackProps & CustomProps<'Stack'>;\n\nconst Stack = ({ space, ...props }: IStackProps, ref?: any) => {\n  const dir = props.direction;\n  const {\n    children,\n    direction,\n    reversed,\n    divider,\n    size,\n    ...resolvedProps\n  }: any = usePropsResolution(\n    'Stack',\n    { ...props, size: space },\n    {\n      isDisabled: props.isDisabled,\n      isHovered: props.isHovered,\n      isFocused: props.isFocused,\n      isInvalid: props.isInvalid,\n      isReadOnly: props.isReadOnly,\n    },\n    { resolveResponsively: ['space', 'direction'] }\n  );\n\n  const responsiveQueryContext = React.useContext(ResponsiveQueryContext);\n  const disableCSSMediaQueries = responsiveQueryContext.disableCSSMediaQueries;\n\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n\n  return (\n    <Box\n      flexDirection={dir}\n      {...resolvedProps}\n      ref={ref}\n      // @ts-ignore\n      gap={disableCSSMediaQueries ? undefined : size}\n    >\n      {getSpacedChildren(\n        children,\n        size,\n        direction === 'row' ? 'X' : 'Y',\n        reversed ? 'reverse' : 'normal',\n        divider\n      )}\n    </Box>\n  );\n};\n\nexport default memo(forwardRef(Stack));\n"
  },
  {
    "path": "src/components/primitives/Stack/VStack.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport StackMain, { InterfaceStackProps } from './Stack';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport type { CustomProps, ResponsiveValue } from '../../types';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nexport interface InterfaceVStackProps extends InterfaceStackProps {\n  /**\n   * The direction of the Stack Items.\n   * @default column\n   */\n  direction?: ResponsiveValue<\n    'column' | 'row' | 'column-reverse' | 'row-reverse'\n  >;\n}\n\nexport type IVStackProps = InterfaceVStackProps & CustomProps<'VStack'>;\n\nconst VStack = (props: IVStackProps, ref?: any) => {\n  const resolvedProps = usePropsResolution('VStack', props);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return <StackMain ref={ref} {...resolvedProps} />;\n};\n\nexport default memo(forwardRef(VStack));\n"
  },
  {
    "path": "src/components/primitives/Stack/index.tsx",
    "content": "export { default as Stack } from './Stack';\nexport { default as HStack } from './HStack';\nexport { default as VStack } from './VStack';\n\nexport type { IStackProps } from './Stack';\n"
  },
  {
    "path": "src/components/primitives/Switch/index.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport { useToggleState } from '@react-stately/toggle';\nimport { Switch as RNSwitch } from 'react-native';\nimport isNil from 'lodash.isnil';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport { useToken } from '../../../hooks';\nimport { makeStyledComponent } from '../../../utils/styled';\nimport type { ISwitchProps } from './types';\nimport { mergeRefs } from '../../../utils';\nimport { useHover } from '@react-native-aria/interactions';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nimport { useFormControlContext } from '../../composites/FormControl';\nimport { combineContextAndProps } from '../../../utils';\n\nconst StyledNBSwitch = makeStyledComponent(RNSwitch);\n\n// TODO: Needs proper refactor\nconst Switch = (\n  {\n    disabled,\n    isDisabled,\n    isInvalid,\n    isChecked,\n    defaultIsChecked,\n    accessibilityLabel,\n    accessibilityHint,\n    onToggle,\n    value,\n    onValueChange,\n    isHovered: isHoveredProp,\n    ...props\n  }: ISwitchProps,\n  ref: any\n) => {\n  const formControlContext = useFormControlContext();\n\n  const combinedProps = combineContextAndProps(formControlContext, props);\n\n  const state = useToggleState({\n    defaultSelected: !isNil(defaultIsChecked) ? defaultIsChecked : false,\n  });\n  const checked = !isNil(isChecked) ? isChecked : state.isSelected;\n  const _ref = React.useRef(null);\n  const { isHovered } = useHover({}, _ref);\n\n  const {\n    onTrackColor: _onTrackColor,\n    offTrackColor: _offTrackColor,\n    onThumbColor: _onThumbColor,\n    offThumbColor: _offThumbColor,\n    ...resolvedProps\n  } = usePropsResolution('Switch', props, {\n    isHovered: isHoveredProp || isHovered,\n    isDisabled: disabled || isDisabled || combinedProps.isDisabled,\n    isInvalid: isInvalid || combinedProps.isInvalid,\n    isChecked: checked,\n  });\n\n  const onTrackColor = useToken('colors', _onTrackColor);\n  const offTrackColor = useToken('colors', _offTrackColor);\n  const onThumbColor = useToken('colors', _onThumbColor);\n  const offThumbColor = useToken('colors', _offThumbColor);\n\n  //TODO: refactor for responsive prop\n  if (\n    useHasResponsiveProps({\n      ...props,\n      isDisabled,\n      isInvalid,\n      isChecked,\n      defaultIsChecked,\n      accessibilityLabel,\n      accessibilityHint,\n    })\n  ) {\n    return null;\n  }\n  return (\n    <StyledNBSwitch\n      accessibilityLabel={accessibilityLabel}\n      accessibilityHint={accessibilityHint}\n      trackColor={{ false: offTrackColor, true: onTrackColor }}\n      thumbColor={checked ? onThumbColor : offThumbColor}\n      activeThumbColor={onThumbColor} // react-native-web prop for active thumbColor\n      ios_backgroundColor={offTrackColor}\n      {...resolvedProps}\n      disabled={disabled || isDisabled || combinedProps.isDisabled}\n      onValueChange={(val: boolean) => {\n        onValueChange && onValueChange(val);\n        onToggle ? onToggle(val) : state.toggle();\n      }}\n      value={value || checked}\n      ref={mergeRefs([ref, _ref])}\n    />\n  );\n};\n\nexport default memo(forwardRef(Switch));\nexport type { ISwitchProps };\n"
  },
  {
    "path": "src/components/primitives/Switch/test/switch.test.tsx",
    "content": "import React from 'react';\nimport { render } from '@testing-library/react-native';\nimport { NativeBaseProvider } from '../../../../core/NativeBaseProvider';\n\nimport Switch from '../index';\n\njest.useFakeTimers();\ndescribe('Switch', () => {\n  it('can be default checked', () => {\n    let { getAllByRole } = render(\n      <NativeBaseProvider\n        initialWindowMetrics={{\n          frame: { x: 0, y: 0, width: 0, height: 0 },\n          insets: { top: 0, left: 0, right: 0, bottom: 0 },\n        }}\n      >\n        <Switch defaultIsChecked />\n      </NativeBaseProvider>\n    );\n    let switches = getAllByRole('switch');\n    expect(switches[0].props.value).toBe(true);\n  });\n\n  it('can be disabled', () => {\n    let { getAllByRole } = render(\n      <NativeBaseProvider\n        initialWindowMetrics={{\n          frame: { x: 0, y: 0, width: 0, height: 0 },\n          insets: { top: 0, left: 0, right: 0, bottom: 0 },\n        }}\n      >\n        <Switch isDisabled />\n      </NativeBaseProvider>\n    );\n    let switches = getAllByRole('switch');\n    expect(switches[0].props.disabled).toBe(true);\n  });\n});\n"
  },
  {
    "path": "src/components/primitives/Switch/types.ts",
    "content": "import type { SwitchProps } from 'react-native';\nimport type {\n  CustomProps,\n  ThemeComponentSizeType,\n  ResponsiveValue,\n} from '../../../components/types';\nimport type { IColors } from '../../../theme/base/colors';\nimport type { InterfaceBoxProps } from '../Box';\nimport type { ColorSchemeType } from '../../../components/types';\n\nexport interface InterfaceSwitchProps\n  extends Omit<SwitchProps, 'tintColor'>,\n    InterfaceBoxProps<ISwitchProps> {\n  /**\n   * The size (width and height) of the switch.\n   * @default md\n   */\n  size?: ThemeComponentSizeType<'Switch'>;\n  /**\n   * If true, set the disabled to the invalid state.\n   */\n  isDisabled?: boolean;\n  /**\n   * If true, set the hovered state.\n   */\n  isHovered?: boolean;\n  /**\n   * The input name of the Switch when used in a form.\n   */\n  name?: string;\n  /**\n   * Function called when the state of the Switch changes.\n   */\n  onToggle?: (...args: any) => void;\n  /**\n   * If true, set the Switch to the checked state.\n   */\n  isChecked?: boolean;\n  /**\n   * If true, the checkbox will be initially checked.\n   */\n  defaultIsChecked?: boolean;\n  /**\n   * If true, set the switch to the invalid state.\n   */\n  isInvalid?: boolean;\n  /**\n   * The track color of the Switch when on.\n   */\n  onTrackColor?: ResponsiveValue<IColors | (string & {})>;\n  /**\n   * The track color of the Switch when off.\n   */\n  offTrackColor?: ResponsiveValue<IColors | (string & {})>;\n  /**\n   * The thumb color of the Switch when on.\n   */\n  onThumbColor?: ResponsiveValue<IColors | (string & {})>;\n  /**\n   * The thumb color of the Switch when off.\n   */\n  offThumbColor?: ResponsiveValue<IColors | (string & {})>;\n  /**\n   * Color scheme to be used for the Switch\n   */\n  colorScheme?: ColorSchemeType;\n  /**\n   * Props when Switch is hovered. Accepts all the Switch props.\n   */\n  _hover?: Omit<Partial<ISwitchProps>, '_hover'>;\n}\n\nexport type ISwitchProps = InterfaceSwitchProps & CustomProps<'Switch'>;\n"
  },
  {
    "path": "src/components/primitives/Text/__test__/Text.test.tsx",
    "content": "/** * @jest-environment jsdom */\n//@ts-nocheck\nimport React from 'react';\nimport { render } from '@testing-library/react-native';\nimport Text from '../../Text';\nimport { NativeBaseProvider } from '../../../../core/NativeBaseProvider';\nimport { theme as defaultTheme } from '../../../../theme';\nimport { Platform } from 'react-native';\n\njest.useFakeTimers();\n\nconst theme = {\n  ...defaultTheme,\n  fontConfig: {\n    Roboto: {\n      100: 'Roboto-Light',\n      200: 'Roboto-Light',\n      300: 'Roboto-Light',\n      400: {\n        normal: 'Roboto-Regular',\n        italic: 'Roboto-Italic',\n      },\n      500: 'Roboto-Medium',\n      600: 'Roboto-Medium',\n      700: {\n        normal: 'Roboto-Bold',\n        italic: 'Roboto-BoldItalic',\n      },\n      800: 'Roboto-Bold',\n      900: 'Roboto-Black',\n    },\n  },\n  fonts: {\n    ...defaultTheme.fonts,\n    heading: 'Roboto',\n    body: 'Roboto',\n  },\n};\n\nconst Provider = (props: any) => {\n  return (\n    <NativeBaseProvider\n      theme={theme}\n      {...props}\n      initialWindowMetrics={{\n        frame: { x: 0, y: 0, width: 0, height: 0 },\n        insets: { top: 0, left: 0, right: 0, bottom: 0 },\n      }}\n    />\n  );\n};\n\ndescribe('Text component', () => {\n  it('resolves default custom fonts', () => {\n    const { getByTestId } = render(\n      <Provider>\n        <Text testID=\"my-text\">hello world</Text>\n      </Provider>\n    );\n    const text = getByTestId('my-text');\n    expect(text.props.style.fontFamily).toBe('Roboto-Regular');\n  });\n\n  it('resolves custom font variants', () => {\n    const { getByTestId } = render(\n      <Provider>\n        <Text testID=\"my-text\" fontStyle=\"italic\">\n          hello world\n        </Text>\n      </Provider>\n    );\n    const text = getByTestId('my-text');\n    expect(text.props.style.fontFamily).toBe('Roboto-Italic');\n  });\n\n  it('resolves to bold italic font', () => {\n    const { getByTestId } = render(\n      <Provider>\n        <Text testID=\"my-text\" fontWeight=\"bold\" fontStyle=\"italic\">\n          hello world\n        </Text>\n      </Provider>\n    );\n    const text = getByTestId('my-text');\n    expect(text.props.style.fontFamily).toBe('Roboto-BoldItalic');\n  });\n\n  it('resolves to medium font when fontWeight is 500', () => {\n    const { getByTestId } = render(\n      <Provider>\n        <Text testID=\"my-text\" fontWeight={500}>\n          hello world\n        </Text>\n      </Provider>\n    );\n    const text = getByTestId('my-text');\n    expect(text.props.style.fontFamily).toBe('Roboto-Medium');\n  });\n\n  it('resolves to medium font when fontWeight is medium', () => {\n    const { getByTestId } = render(\n      <Provider>\n        <Text testID=\"my-text\" fontWeight={'medium'}>\n          hello world\n        </Text>\n      </Provider>\n    );\n    const text = getByTestId('my-text');\n    expect(text.props.style.fontFamily).toBe('Roboto-Medium');\n  });\n\n  it('respects fontFamily property', () => {\n    const { getByTestId } = render(\n      <Provider>\n        <Text testID=\"my-text\" fontFamily=\"Merriweather-Italic\">\n          hello world\n        </Text>\n      </Provider>\n    );\n    const text = getByTestId('my-text');\n    expect(text.props.style.fontFamily).toBe('Merriweather-Italic');\n  });\n\n  it(\"doesn't break if custom font is not specified\", () => {\n    const newTheme = JSON.parse(JSON.stringify(defaultTheme));\n    delete newTheme.fontConfig;\n    const { getByTestId } = render(\n      <Provider theme={newTheme}>\n        <Text testID=\"my-text\" fontWeight={400}>\n          hello world\n        </Text>\n      </Provider>\n    );\n    const text = getByTestId('my-text');\n    expect(text.props.style.fontFamily).toBe(undefined);\n  });\n\n  it(\"doesn't pass fontWeight and fontStyle if a custom fontFamily is resolved\", () => {\n    const { getByTestId } = render(\n      <Provider>\n        <Text testID=\"my-text\" fontWeight={400}>\n          hello world\n        </Text>\n      </Provider>\n    );\n    const text = getByTestId('my-text');\n    expect(text.props.style.fontWeight).toBe(undefined);\n    expect(text.props.style.fontStyle).toBe(undefined);\n    expect(text.props.style.fontFamily).toBe('Roboto-Regular');\n  });\n\n  it('tests lineHeight from token in text ', () => {\n    const { getByTestId } = render(\n      <Provider>\n        <Text lineHeight=\"md\" testID=\"test\">\n          This is a text\n        </Text>\n      </Provider>\n    );\n    const text = getByTestId('test');\n    expect(text.props.style.lineHeight).toBe(\n      defaultTheme.fontSizes.sm * parseFloat(defaultTheme.lineHeights.md)\n    );\n  });\n\n  it('tests absolute lineHeight in text ', () => {\n    const { getByTestId } = render(\n      <Provider>\n        <Text lineHeight={5} testID=\"test\">\n          This is a text\n        </Text>\n      </Provider>\n    );\n    const text = getByTestId('test');\n    expect(text.props.style.lineHeight).toBe(5);\n  });\n\n  it('tests em non token lineHeight in text ', () => {\n    const { getByTestId } = render(\n      <Provider>\n        <Text lineHeight=\"13em\" testID=\"test\">\n          This is a text\n        </Text>\n      </Provider>\n    );\n    const text = getByTestId('test');\n    expect(text.props.style.lineHeight).toBe(defaultTheme.fontSizes.sm * 13);\n  });\n\n  it('tests letterSpacing from token in text ', () => {\n    const { getByTestId } = render(\n      <Provider>\n        <Text letterSpacing=\"2xl\" testID=\"test\">\n          This is a text\n        </Text>\n      </Provider>\n    );\n    const text = getByTestId('test');\n    expect(text.props.style.letterSpacing).toBe(\n      defaultTheme.fontSizes.sm * parseFloat(defaultTheme.letterSpacings['2xl'])\n    );\n  });\n\n  it('tests letterSpacing in em from token in text ', () => {\n    Platform.OS = 'web';\n    try {\n      render(\n        <Provider>\n          <Text letterSpacing=\"2xl\" testID=\"test\">\n            This is a text\n          </Text>\n        </Provider>\n      );\n    } catch (e) {\n      expect(e.message).toContain(`\"letterSpacing\": \"0.1em\"`);\n    } finally {\n      Platform.OS = 'ios';\n    }\n  });\n\n  it('tests lineHeight and letterSpacing in px', () => {\n    const { getByTestId } = render(\n      <Provider>\n        <Text lineHeight=\"24px\" letterSpacing=\"12px\" testID=\"test\">\n          This is a text\n        </Text>\n      </Provider>\n    );\n    const text = getByTestId('test');\n    expect(text.props.style.lineHeight).toBe(24);\n    expect(text.props.style.letterSpacing).toBe(12);\n  });\n});\n"
  },
  {
    "path": "src/components/primitives/Text/index.tsx",
    "content": "import React, { memo, forwardRef, useRef } from 'react';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport type { ITextProps } from './types';\nimport { useHover } from '@react-native-aria/interactions';\nimport { mergeRefs } from '../../../utils/mergeRefs';\nimport { makeStyledComponent } from '../../../utils/styled';\nimport { useResolvedFontFamily } from '../../../hooks/useResolvedFontFamily';\nimport { Platform, Text as NativeText } from 'react-native';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\n\nconst StyledText = makeStyledComponent(NativeText);\n// To have a RN compatible behaviour, we'll inherit parent text styles as base style\nconst TextAncestorContext = React.createContext(false);\n\nconst Text = ({ children, ...props }: ITextProps, ref: any) => {\n  const hasTextAncestor = React.useContext(TextAncestorContext);\n\n  const {\n    isTruncated,\n    noOfLines,\n    bold,\n    italic,\n    sub,\n    highlight,\n    underline,\n    strikeThrough,\n    fontFamily: propFontFamily,\n    fontWeight: propFontWeight,\n    fontStyle: propFontStyle,\n    _hover,\n    fontSize,\n    numberOfLines,\n    ...resolvedProps\n  } = usePropsResolution(\n    'Text',\n    props,\n    {},\n    {\n      resolveResponsively: ['noOfLines', 'numberOfLines'],\n      // We override the component base theme if text has an ancestor.\n      componentTheme: hasTextAncestor ? {} : undefined,\n    }\n  );\n\n  const _ref = useRef(null);\n  // TODO: might have to add this condition\n  const { isHovered } = useHover({}, _hover ? _ref : null);\n  // const { isHovered } = useHover({}, _ref);\n  let fontFamily = propFontFamily;\n  const fontStyle = italic ? 'italic' : propFontStyle;\n  const fontWeight = bold ? 'bold' : propFontWeight;\n  let resolvedFontFamily;\n\n  resolvedFontFamily = useResolvedFontFamily({\n    fontFamily,\n    fontWeight: fontWeight ?? (hasTextAncestor ? undefined : 400),\n    fontStyle: fontStyle ?? (hasTextAncestor ? undefined : 'normal'),\n  });\n\n  if (resolvedFontFamily) {\n    fontFamily = resolvedFontFamily;\n  }\n  // Need to apply fontWeight & fontStyle on web\n  if (Platform.OS === 'web') {\n    if (resolvedFontFamily) {\n      fontFamily = resolvedFontFamily.fontFamily;\n    }\n\n    resolvedFontFamily = {\n      fontFamily,\n      fontWeight: fontWeight ?? (hasTextAncestor ? undefined : 400),\n      fontStyle: fontStyle ?? (hasTextAncestor ? undefined : 'normal'),\n    };\n  }\n\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n\n  const propsToSpread = {\n    ...resolvedProps,\n    numberOfLines:\n      numberOfLines || noOfLines\n        ? numberOfLines || noOfLines\n        : isTruncated\n        ? 1\n        : undefined,\n    ...resolvedFontFamily,\n    bg: highlight ? 'warning.300' : resolvedProps.bg,\n    textDecorationLine:\n      underline && strikeThrough\n        ? 'underline line-through'\n        : underline\n        ? 'underline'\n        : strikeThrough\n        ? 'line-through'\n        : resolvedProps.textDecorationLine,\n    fontSize: sub ? 10 : fontSize,\n    ref: mergeRefs([ref, _ref]),\n    ...(isHovered && _hover),\n  };\n\n  return hasTextAncestor ? (\n    <StyledText {...propsToSpread}>{children}</StyledText>\n  ) : (\n    <TextAncestorContext.Provider value={true}>\n      <StyledText {...propsToSpread}>{children}</StyledText>\n    </TextAncestorContext.Provider>\n  );\n};\n\nexport default memo(forwardRef(Text));\nexport type { ITextProps };\n"
  },
  {
    "path": "src/components/primitives/Text/types.tsx",
    "content": "import type { TextProps } from 'react-native';\nimport type { StyledProps } from '../../../theme/types';\nimport type {\n  IFont,\n  IFontSize,\n  IFontWeight,\n  ILetterSpacing,\n  ILineHeight,\n} from '../../../theme/base/typography';\nimport type { CustomProps, PlatformProps, ResponsiveValue } from '../../types';\n\nexport interface InterfaceTextProps<T = ITextProps>\n  extends PlatformProps<T>,\n    StyledProps,\n    TextProps {\n  /**\n   *  Renders components as Text children. Accepts a JSX.Element or an array of JSX.Element.\n   */\n  children?: React.ReactNode | string;\n  /**\n   * The size of font\n   */\n\n  fontSize?: ResponsiveValue<IFontSize | number | (string & {})>;\n\n  /**\n   * Letter spacing\n   */\n\n  letterSpacing?: ResponsiveValue<ILetterSpacing | number | (string & {})>;\n\n  /**\n   * Line height\n   */\n\n  lineHeight?: ResponsiveValue<ILineHeight | number | (string & {})>;\n  /**\n   * Font weight\n   */\n\n  fontWeight?: ResponsiveValue<IFontWeight | number | (string & {})>;\n  /**\n   * Fonts\n   */\n\n  font?: ResponsiveValue<IFont>;\n\n  /**\n   * Used to truncate text at a specific number of lines\n   */\n  noOfLines?: number;\n  /**\n   * Used to make the text bold.\n   */\n  bold?: boolean;\n  /**\n   * If true, it will render an ellipsis when the text exceeds the width of the viewport or maxWidth set.\n   */\n  isTruncated?: boolean;\n  /**\n   * Used to make the text italic.\n   */\n  italic?: boolean;\n  /**\n   * Used to underline the text.\n   */\n  underline?: boolean;\n  /**\n   * A horizontal line through the center of the text.\n   */\n  strikeThrough?: boolean;\n  /**\n   * Text will have smaller font size.\n   */\n  sub?: boolean;\n  /**\n   * Used to highlight the text with a yellow background.\n   */\n  highlight?: boolean;\n}\n\nexport type ITextProps = InterfaceTextProps & CustomProps<'Text'>;\n"
  },
  {
    "path": "src/components/primitives/TextArea/index.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport { Input } from '../Input';\nimport type { InterfaceInputProps } from '../Input/types';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nimport { useHover } from '@react-native-aria/interactions';\nimport { mergeRefs } from '../../../utils';\nimport type { PlatformProps } from '../../../components/types';\nexport interface ITextAreaProps\n  extends Omit<\n      InterfaceInputProps,\n      '_web' | '_android' | '_ios' | '_light' | '_dark' | '_important'\n    >,\n    PlatformProps<ITextAreaProps> {\n  /**\n   * Maps to react-native TextInput's numberOfLines.\n   */\n  totalLines?: number;\n}\n\nconst TextArea = (\n  {\n    wrapperRef,\n    isDisabled,\n    isInvalid,\n    isReadOnly,\n    isFocused: isFocusedProp,\n    isHovered: isHoveredProp,\n    ...props\n  }: ITextAreaProps,\n  ref: any\n) => {\n  const _ref = React.useRef(null);\n  const { isHovered } = useHover({}, _ref);\n  const [isFocused, setIsFocused] = React.useState(isFocusedProp);\n  const handleFocus = (focusState: boolean, callback: any) => {\n    setIsFocused(focusState);\n    callback();\n  };\n  const { totalLines, onFocus, onBlur, ...newProps } = usePropsResolution(\n    'TextArea',\n    props,\n    {\n      isHovered: isHoveredProp || isHovered,\n      isDisabled,\n      isFocused,\n      isInvalid,\n      isReadOnly,\n    },\n    { extendTheme: ['Input'] }\n  );\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <Input\n      {...newProps}\n      INTERNAL_notResolveThemeAndPseudoProps\n      numberOfLines={totalLines}\n      wrapperRef={wrapperRef}\n      ref={mergeRefs([_ref, ref])}\n      onFocus={(e) => {\n        handleFocus(true, onFocus ? () => onFocus(e) : () => {});\n      }}\n      onBlur={(e) => {\n        handleFocus(false, onBlur ? () => onBlur(e) : () => {});\n      }}\n      isDisabled={isDisabled}\n      isInvalid={isInvalid}\n      isReadOnly={isReadOnly}\n    />\n  );\n};\n\nexport default memo(forwardRef(TextArea));\n"
  },
  {
    "path": "src/components/primitives/TouchableItem/index.tsx",
    "content": "import React from 'react';\nimport { makeStyledComponent } from '../../../utils/styled';\nimport { TouchableHighlight } from 'react-native';\n\nconst TouchableItem = makeStyledComponent(TouchableHighlight);\nexport default React.memo(TouchableItem);\n"
  },
  {
    "path": "src/components/primitives/View/index.tsx",
    "content": "import React from 'react';\nimport { makeStyledComponent } from '../../../utils/styled';\nimport { View as RNView } from 'react-native';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nimport { useThemeProps } from '../../../hooks/useThemeProps';\nimport { useSafeArea } from '../../../hooks/useSafeArea';\nimport type { IViewProps } from './types';\nconst StyledView: any = makeStyledComponent(RNView);\n\nconst View = (props: IViewProps, ref: any) => {\n  const viewProps = useThemeProps('View', props);\n  const safeAreaProps = useSafeArea(viewProps);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return <StyledView {...safeAreaProps} ref={ref} />;\n};\nexport default React.memo(React.forwardRef(View));\nexport type { IViewProps };\n"
  },
  {
    "path": "src/components/primitives/View/types.ts",
    "content": "import type { ViewProps } from 'react-native';\nimport type { CustomProps, SafeAreaProps } from '../../../components/types';\nimport type { StyledProps } from '../../../theme/types';\n\nexport type IViewProps = (ViewProps &\n  StyledProps &\n  SafeAreaProps & {\n    children?: any;\n  }) &\n  CustomProps<'View'>;\n"
  },
  {
    "path": "src/components/primitives/VisuallyHidden/index.tsx",
    "content": "import type React from 'react';\nimport { useScreenReaderEnabled } from '../../../hooks';\n\nexport function VisuallyHidden({\n  children,\n}: {\n  children: React.ReactElement;\n}): React.ReactElement | null {\n  const screenReaderEnabled = useScreenReaderEnabled();\n\n  return screenReaderEnabled ? children : null;\n}\n"
  },
  {
    "path": "src/components/primitives/ZStack/index.tsx",
    "content": "import React, { memo, forwardRef } from 'react';\nimport { default as Box, InterfaceBoxProps } from '../Box';\nimport { getAbsoluteChildren } from '../../../utils';\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\nimport type { CustomProps } from '../../../components/types';\n\nexport interface InterfaceZStackProps extends InterfaceBoxProps<IZStackProps> {\n  /**\n   * The direction to stack the elements.\n   */\n  reversed?: boolean;\n}\n\nexport type IZStackProps = InterfaceZStackProps & CustomProps<'ZStack'>;\nconst ZStack = ({ children, reversed, ...props }: IZStackProps, ref?: any) => {\n  const resolvedProps = usePropsResolution('ZStack', props);\n  //TODO: refactor for responsive prop\n  if (useHasResponsiveProps(props)) {\n    return null;\n  }\n  return (\n    <Box {...resolvedProps} ref={ref}>\n      {getAbsoluteChildren(children, reversed)}\n    </Box>\n  );\n};\n\nexport default memo(forwardRef(ZStack));\n"
  },
  {
    "path": "src/components/primitives/index.ts",
    "content": "export { default as Box } from './Box';\nexport type { IBoxProps } from './Box';\n\nexport { default as Text } from './Text';\nexport type { ITextProps } from './Text';\n\nexport { Input, InputGroup, InputLeftAddon, InputRightAddon } from './Input';\nexport type { IInputProps } from './Input';\n\n// export { default as View } from './View';\n\nexport { Checkbox } from './Checkbox';\nexport type { ICheckboxProps, ICheckboxGroupProps } from './Checkbox';\n\nexport { Radio, RadioContext } from './Radio';\nexport type {\n  IRadioProps,\n  IRadioGroupProps,\n  IRadioValue,\n  IRadioContext,\n  IRadioComponentType,\n} from './Radio';\n\nexport { Icon, createIcon } from './Icon';\nexport type { IIconProps } from './Icon';\n\nexport { Column } from './Column';\nexport { Row } from './Row';\n\nexport { Button } from './Button';\nexport type { IButtonProps } from './Button';\n\nexport { Slider } from './Slider';\nexport type { ISliderProps } from './Slider';\n\nexport { Stack, VStack, HStack } from './Stack';\nexport type { IStackProps } from './Stack';\n\nexport { default as Image } from './Image';\nexport type { IImageProps } from './Image';\n\nexport { default as Select } from './Select';\nexport type { ISelectProps, ISelectItemProps } from './Select';\n\nexport { default as Spinner } from './Spinner';\nexport type { ISpinnerProps } from './Spinner';\n\nexport { default as Heading } from './Heading';\nexport type { IHeadingProps } from './Heading';\n\nexport { useFocus, useHover, useIsPressed, Pressable } from './Pressable';\nexport type { IPressableProps } from './Pressable';\n\nexport { default as Flex, Spacer } from './Flex';\nexport type { IFlexProps } from './Flex';\n\nexport { default as Switch } from './Switch';\nexport type { ISwitchProps } from './Switch';\n\nexport { default as TextArea } from './TextArea';\nexport type { ITextAreaProps } from './TextArea';\n\nexport { default as Link } from './Link';\nexport type { ILinkProps } from './Link';\n\nexport { List } from './List';\nexport type { IListProps, IListItemProps } from './List';\n\nexport { Hidden } from './Hidden';\nexport type { IHiddenProps } from './Hidden';\n\nexport { VisuallyHidden } from './VisuallyHidden';\n\nexport { default as ZStack } from './ZStack';\nexport type { IZStackProps } from './ZStack';\n\nexport { Overlay } from './Overlay';\n\nexport type { IOverlayProps } from './Overlay';\n"
  },
  {
    "path": "src/components/types/ExtraProps.ts",
    "content": "export interface SafeAreaProps {\n  safeArea?: boolean | number;\n  safeAreaX?: boolean | number;\n  safeAreaY?: boolean | number;\n  safeAreaTop?: boolean | number;\n  safeAreaBottom?: boolean | number;\n  safeAreaLeft?: boolean | number;\n  safeAreaRight?: boolean | number;\n}\n"
  },
  {
    "path": "src/components/types/PlatformProps.ts",
    "content": "//@ts-ignore\nexport interface PlatformProps<T> {\n  /**\n   * Props only for web\n   */\n  _web?: Partial<T>;\n  /**\n   * Props only for ios\n   */\n  _ios?: Partial<T>;\n  /**\n   * Props only for android\n   */\n  _android?: Partial<T>;\n  /**\n   * Props only for light mode\n   */\n  _light?: Partial<T>;\n  /**\n   * Props only for dark mode\n   */\n  _dark?: Partial<T>;\n  /**\n   * Props with highest specificity\n   */\n  _important?: Partial<T>;\n}\n"
  },
  {
    "path": "src/components/types/index.tsx",
    "content": "export * from './ExtraProps';\nexport * from './PlatformProps';\nexport * from './responsiveValue';\nexport * from './utils';\n"
  },
  {
    "path": "src/components/types/responsiveValue.ts",
    "content": "import type { ITheme } from '../../theme/index';\n\nexport type ResponsiveValue<T> =\n  | T\n  | null\n  | undefined\n  | Array<T | null>\n  | { [key in keyof ITheme['breakpoints']]?: T };\n"
  },
  {
    "path": "src/components/types/utils.ts",
    "content": "import type { Leaves } from '../../theme/base/types';\nimport type { ComponentTheme, ITheme } from '../../theme';\nimport type { ResponsiveValue } from './responsiveValue';\n\nexport type VariantType<\n  Component extends keyof ITheme['components']\n> = 'variants' extends keyof ITheme['components'][Component]\n  ? ResponsiveValue<\n      keyof ITheme['components'][Component]['variants'] | (string & {})\n    >\n  : unknown;\n\nexport type SpaceType = ResponsiveValue<\n  keyof ITheme['space'] | (string & {}) | number\n>;\n\nexport type SizeType = ResponsiveValue<\n  keyof ITheme['sizes'] | (string & {}) | number\n>;\n\nexport type ThemeComponentSizeType<\n  Component extends keyof ITheme['components']\n> = ResponsiveValue<\n  'sizes' extends keyof ITheme['components'][Component]\n    ? keyof ITheme['components'][Component]['sizes'] | (string & {}) | number\n    : unknown\n>;\n\nexport type CombinedSizeType<Component extends keyof ITheme['components']> =\n  | SizeType\n  | ThemeComponentSizeType<Component>;\n\nexport type ColorType = ResponsiveValue<\n  Leaves<ITheme['colors']> | (string & {})\n>;\n\nexport type ColorSchemeType = ResponsiveValue<\n  Exclude<keyof ITheme['colors'], 'contrastThreshold'> | (string & {})\n>;\n\ntype ComponentType<T extends keyof ITheme['components']> = {\n  [Property in keyof ITheme['components'][T]]: ITheme['components'][T][Property];\n};\n\ntype ParametersOf<T> = {\n  [Key in keyof T]: T[Key] extends (...args: any) => void\n    ? Parameters<T[Key]>[0] extends {}\n      ? Parameters<T[Key]>[0]\n      : {}\n    : {};\n}[keyof T];\n\n// type VariantParams<T extends keyof ITheme['components']> = ParametersOf<\n//   //@ts-ignore\n//   ComponentType<T>['variants']\n// >;\n\n// type PickedVariantParams<T extends keyof ITheme['components']> = Pick<\n//   VariantParams<T>,\n//   keyof VariantParams<T>\n// >;\ntype ParameterType<T, Key> = ParametersOf<\n  //@ts-ignore\n  ComponentType<T>[Key]\n>;\ntype CustomPropType<T extends keyof ITheme['components'], Key> = Extract<\n  ParameterType<T, Key>,\n  Pick<ParameterType<T, Key>, keyof ParameterType<T, Key>>\n>;\n\n// export type CustomProps<T extends keyof ITheme['components']> =\n//   | CustomPropType<T, 'variants'>\n//   | CustomPropType<T, 'baseStyle'>\n//   | CustomPropType<T, 'sizes'>\n//   | CustomPropType<T, 'defaultProps'>;\n\nexport type CustomComponentProps<\n  T extends keyof ITheme['components']\n> = Partial<\n  Exclude<\n    {\n      [Key in keyof ComponentTheme]: CustomPropType<T, Key>;\n    }[keyof ComponentTheme],\n    undefined\n  >\n>;\nexport type CustomPropsTemp<\n  T extends keyof ITheme['components']\n> = CustomComponentProps<T> extends never\n  ? {}\n  : // : CustomComponentProps<T> extends Record<string, any>\n    // ? {}\n    UnionToIntersection<CustomComponentProps<T>> & {};\n\nexport type UnionToIntersection<U> = (\n  U extends any ? (k: U) => void : never\n) extends (k: infer I) => void\n  ? I\n  : never;\n\ntype VariantSizeColorScheme<T extends keyof ITheme['components']> = {\n  variant?: VariantType<T>;\n  size?: ThemeComponentSizeType<T>;\n  colorScheme?: ColorSchemeType;\n};\n// export type CustomProps<\n//   T extends keyof ITheme['components']\n// > = CustomComponentProps<T> extends never\n//   ? {} | VariantSizeColorScheme<T>\n//   : // : CustomComponentProps<T> extends Record<string, any>\n//     // ? {}\n//     | (UnionToIntersection<CustomComponentProps<T>> & {})\n//       | VariantSizeColorScheme<T>;\n\nexport type CustomProps<\n  T extends keyof ITheme['components']\n> = UnionToIntersection<CustomPropsTemp<T> | VariantSizeColorScheme<T>>;\n\n// export type CustomProps<\n//   T extends keyof ITheme['components']\n// > = CustomPropsTemp<T>;\n// | CustomPropsTemp<T>\n// | { a: string };\n// | { size?: ThemeComponentSizeType<T> };\n"
  },
  {
    "path": "src/core/NativeBaseContext.ts",
    "content": "import { createContext } from '../utils/createContext';\nimport type { ITheme } from './../theme';\nimport type { IModeType } from './StrictMode';\n\nexport interface INativebaseConfig {\n  theme?: ITheme;\n  suppressColorAccessibilityWarning?: boolean;\n  dependencies?: {\n    'linear-gradient': any;\n  };\n  enableRem?: boolean;\n  strictMode?: IModeType;\n  disableContrastText?: boolean;\n}\n\nexport const defaultConfig: INativebaseConfig = {\n  strictMode: 'off',\n};\n\nexport const [NativeBaseConfigProvider, useNativeBaseConfig] = createContext<{\n  config: INativebaseConfig;\n  currentBreakpoint: number;\n  isSSR?: boolean;\n  theme?: ITheme;\n  disableContrastText?: boolean;\n}>('NativeBaseConfigProvider');\n"
  },
  {
    "path": "src/core/NativeBaseProvider.tsx",
    "content": "import React from 'react';\nimport {\n  SafeAreaProvider,\n  Metrics,\n  initialWindowMetrics as defaultInitialWindowMetrics,\n} from 'react-native-safe-area-context';\nimport { SSRProvider } from '@react-native-aria/utils';\nimport { theme as defaultTheme, ITheme } from './../theme';\nimport type { IColorModeProviderProps } from './color-mode';\nimport HybridProvider from './hybrid-overlay/HybridProvider';\nimport { OverlayProvider } from '@react-native-aria/overlays';\nimport { ToastProvider, ToastRef } from '../components/composites/Toast';\nimport {\n  defaultConfig,\n  INativebaseConfig,\n  NativeBaseConfigProvider,\n} from './NativeBaseContext';\nimport { useToast } from '../components/composites/Toast';\nimport { Platform, useWindowDimensions } from 'react-native';\nimport {\n  getClosestBreakpoint,\n  platformSpecificSpaceUnits,\n} from '../theme/tools/utils';\nimport { ResponsiveQueryProvider } from '../utils/useResponsiveQuery';\n\n// For SSR to work, we need to pass initial insets as 0 values on web.\n\n// https://github.com/th3rdwave/react-native-safe-area-context/issues/132\nconst defaultInitialWindowMetricsBasedOnPlatform: Metrics | null = Platform.select(\n  {\n    web: {\n      frame: { x: 0, y: 0, width: 0, height: 0 },\n      insets: { top: 0, left: 0, right: 0, bottom: 0 },\n    },\n    default: defaultInitialWindowMetrics,\n  }\n);\n\nexport interface NativeBaseProviderProps {\n  theme?: ITheme;\n  colorModeManager?: IColorModeProviderProps['colorModeManager'];\n  children?: React.ReactNode;\n  initialWindowMetrics?: any;\n  config?: INativebaseConfig;\n  isSSR?: boolean;\n  disableContrastText?: boolean;\n  // Refer https://github.com/th3rdwave/react-native-safe-area-context#testing\n}\n\nconst NativeBaseProvider = (props: NativeBaseProviderProps) => {\n  const {\n    colorModeManager,\n    config = defaultConfig,\n    children,\n    theme: propsTheme = defaultTheme,\n    initialWindowMetrics,\n    isSSR,\n    disableContrastText,\n  } = props;\n  const theme = config.theme ?? propsTheme;\n\n  const newTheme = React.useMemo(() => {\n    if (config.enableRem) {\n      return platformSpecificSpaceUnits(theme);\n    }\n    return theme;\n  }, [config.enableRem, theme]);\n\n  const windowWidth = useWindowDimensions()?.width;\n\n  const currentBreakpoint = React.useMemo(\n    () => getClosestBreakpoint(newTheme.breakpoints, windowWidth),\n    [windowWidth, newTheme.breakpoints]\n  );\n\n  return (\n    <NativeBaseConfigProvider\n      theme={newTheme}\n      config={config}\n      currentBreakpoint={currentBreakpoint}\n      isSSR={isSSR}\n      disableContrastText={disableContrastText}\n    >\n      <SafeAreaProvider\n        initialMetrics={\n          initialWindowMetrics ?? defaultInitialWindowMetricsBasedOnPlatform\n        }\n      >\n        <ResponsiveQueryProvider disableCSSMediaQueries={!isSSR}>\n          <HybridProvider\n            colorModeManager={colorModeManager}\n            options={theme.config}\n          >\n            <OverlayProvider isSSR>\n              <ToastProvider>\n                <InitializeToastRef />\n                <SSRProvider>{children}</SSRProvider>\n              </ToastProvider>\n            </OverlayProvider>\n          </HybridProvider>\n        </ResponsiveQueryProvider>\n      </SafeAreaProvider>\n    </NativeBaseConfigProvider>\n  );\n};\n\nconst InitializeToastRef = () => {\n  const toast = useToast();\n  ToastRef.current = toast;\n  return null;\n};\n\nexport { NativeBaseProvider };\n"
  },
  {
    "path": "src/core/StrictMode.ts",
    "content": "export type IModeType = 'off' | 'warn' | 'error';\n\nconst tokenNotString = 'tokenNotString';\nconst tokenNotFound = 'tokenNotFound';\n\nexport const strictModeLogger = ({\n  token,\n  scale,\n  mode,\n  type,\n}: {\n  token: string;\n  scale: string;\n  mode: IModeType;\n  type: typeof tokenNotString | typeof tokenNotFound;\n}) => {\n  if (!mode) {\n    mode = 'off';\n  }\n\n  if (mode === 'off') return;\n\n  // eslint-disable-next-line no-console\n  const log = console[mode];\n\n  switch (type) {\n    case tokenNotFound:\n      log(\n        `Token ${token} not found in theme scale of ${scale}. Please use extendTheme function to add this token in your theme`\n      );\n      return;\n    case tokenNotString:\n      log(`Token ${token} should be passed as a string.`);\n      return;\n    default:\n      return;\n  }\n};\n"
  },
  {
    "path": "src/core/color-mode/hooks.tsx",
    "content": "import React, { useState, useEffect } from 'react';\nimport type {\n  ColorMode,\n  StorageManager,\n  IColorModeContextProps,\n} from './types';\nimport { HybridContext } from './../hybrid-overlay/Context';\nimport type { IHybridContextProps } from './../hybrid-overlay/types';\nimport { AppState, useColorScheme as _useColorScheme } from 'react-native';\nimport { useSyncExternalStore } from 'use-sync-external-store/shim';\n\nimport { useNativeBaseConfig } from '../NativeBaseContext';\n\nexport const useColorMode = (): IColorModeContextProps => {\n  const {\n    colorMode: colorModeContext,\n  }: {\n    colorMode: IColorModeContextProps;\n  } = React.useContext<IHybridContextProps>(HybridContext);\n  if (colorModeContext === undefined) {\n    throw new Error('useColorMode must be used within a NativeBaseProvider');\n  }\n  return colorModeContext;\n};\n\nexport function useColorModeValue(light: any, dark: any) {\n  const { colorMode } = useColorMode();\n  return colorMode === 'dark' ? dark : light;\n}\n\nexport const useAppState = () => {\n  const subscription = React.useMemo(\n    () => ({\n      getCurrentValue: () => AppState.currentState,\n      subscribe: (callback: () => void) => {\n        const subsription = AppState.addEventListener('change', callback);\n        return () => {\n          if (AppState.removeEventListener) {\n            // React Native < 0.65\n            AppState.removeEventListener('change', callback);\n          } else {\n            // React Native >= 0.65\n            // @ts-ignore:next-line ignoring ts error as devDependency contains \"@types/react-native\" < 0.65\n            subsription.remove();\n          }\n        };\n      },\n    }),\n    []\n  );\n\n  const isSSR = useNativeBaseConfig('useBreakpointResolvedProps').isSSR;\n\n  if (isSSR) {\n    return 'unknown';\n  } else {\n    // This if statement technically breaks the rules of hooks, but is safe\n    // because the condition never changes after mounting.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    return useSyncExternalStore(\n      subscription.subscribe,\n      subscription.getCurrentValue,\n      subscription.getCurrentValue\n    );\n  }\n};\n\nexport const useColorScheme = () => {\n  const colorScheme = _useColorScheme();\n  const [currentScheme, setCurrentScheme] = useState(colorScheme);\n  const appState = useAppState();\n\n  useEffect(() => {\n    if (appState === 'active') {\n      setCurrentScheme(colorScheme);\n    }\n  }, [appState, colorScheme]);\n\n  return currentScheme;\n};\n\nexport function useModeManager(\n  initialColorMode: ColorMode,\n  useSystemColorMode: boolean | undefined,\n  colorModeManager?: StorageManager\n) {\n  const systemColorMode = useColorScheme();\n\n  if (useSystemColorMode) {\n    initialColorMode = systemColorMode;\n  }\n\n  const [colorMode, setRawMode] = useState<ColorMode>(initialColorMode);\n  const setColorMode = React.useCallback(\n    async (val: ColorMode) => {\n      if (colorModeManager) {\n        await colorModeManager.set(val);\n      }\n      setRawMode(val);\n    },\n    [colorModeManager]\n  );\n\n  // For initial setting initial color mode from storage\n  useEffect(() => {\n    if (colorModeManager) {\n      (async function getMode() {\n        const value = await colorModeManager.get(initialColorMode);\n        if (value && value !== colorMode) {\n          setRawMode(value);\n        }\n      })();\n    }\n  }, [colorMode, initialColorMode, colorModeManager]);\n\n  // Set system color mode only when user has not passed a colorModeManager\n  useEffect(() => {\n    if (!colorModeManager && useSystemColorMode) {\n      setRawMode(systemColorMode);\n    }\n  }, [systemColorMode, colorModeManager, useSystemColorMode, setRawMode]);\n\n  return { colorMode, setColorMode };\n}\n\nexport function useAccessibleColors(): [\n  boolean,\n  (val: boolean) => void,\n  () => void\n] {\n  const {\n    colorMode: colorModeContext,\n  }: {\n    colorMode: IColorModeContextProps;\n  } = React.useContext<IHybridContextProps>(HybridContext);\n  const toggleAccessibleColors = () =>\n    colorModeContext.setAccessibleColors(!colorModeContext.accessibleColors);\n  return [\n    colorModeContext.accessibleColors,\n    colorModeContext.setAccessibleColors,\n    toggleAccessibleColors,\n  ];\n}\n"
  },
  {
    "path": "src/core/color-mode/index.tsx",
    "content": "export { useColorMode, useColorModeValue, useAccessibleColors } from './hooks';\n\nexport type {\n  StorageManager,\n  ColorMode,\n  ColorModeOptions,\n  IColorModeProviderProps,\n  IColorModeContextProps,\n} from './types';\n"
  },
  {
    "path": "src/core/color-mode/types.ts",
    "content": "export type ColorMode = 'light' | 'dark' | null | undefined;\nexport interface StorageManager {\n  get(init?: ColorMode): Promise<ColorMode | undefined>;\n  set(value: ColorMode): void;\n}\n\nexport interface ColorModeOptions {\n  initialColorMode?: ColorMode;\n  useSystemColorMode?: boolean;\n  accessibleColors?: boolean;\n}\n\nexport type IColorModeProviderProps = {\n  children?: React.ReactNode;\n  options: ColorModeOptions;\n  colorModeManager?: StorageManager;\n};\n\nexport interface IColorModeContextProps {\n  colorMode: ColorMode;\n  toggleColorMode: () => void;\n  setColorMode: (value: any) => void;\n  accessibleColors: boolean;\n  setAccessibleColors: (value: boolean) => void;\n}\n"
  },
  {
    "path": "src/core/extendTheme.tsx",
    "content": "import { theme as defaultTheme, Theme } from './../theme';\nimport mergeWith from 'lodash.mergewith';\n\nfunction isFunction(value: any): boolean {\n  return typeof value === 'function';\n}\n\ntype ThemeUtil = Theme | (Record<string, any> & {});\n\nexport function extendTheme<T extends ThemeUtil>(\n  overrides: T,\n  ...restOverrides: T[]\n) {\n  function customizer(source: any, override: any) {\n    if (isFunction(source)) {\n      return (...args: any[]) => {\n        const sourceValue = source(...args);\n        const overrideValue = isFunction(override)\n          ? override(...args)\n          : override;\n        return mergeWith({}, sourceValue, overrideValue, customizer);\n      };\n    }\n    return undefined;\n  }\n\n  const finalOverrides = [overrides, ...restOverrides].reduce(\n    (prevValue, currentValue) => {\n      return mergeWith({}, prevValue, currentValue, customizer);\n    },\n    defaultTheme\n  );\n\n  return finalOverrides as T & Theme;\n}\n"
  },
  {
    "path": "src/core/hybrid-overlay/Context.ts",
    "content": "import { createContext } from 'react';\nimport type { IHybridContextProps } from './types';\n\nexport const HybridContext = createContext<IHybridContextProps>({\n  colorMode: {\n    colorMode: 'light',\n    toggleColorMode: () => {},\n    setColorMode: () => {},\n    accessibleColors: false,\n    setAccessibleColors: () => {},\n  },\n});\n"
  },
  {
    "path": "src/core/hybrid-overlay/HybridProvider.tsx",
    "content": "import React, { useMemo } from 'react';\nimport { Platform } from 'react-native';\nimport { HybridContext } from './Context';\nimport { useModeManager } from './../color-mode/hooks';\nimport type { IColorModeProviderProps } from './../color-mode';\nimport { keyboardDismissHandlerManager } from '../../hooks';\n\nconst HybridProvider = ({\n  children,\n  options: {\n    initialColorMode = 'light',\n    accessibleColors: isTextColorAccessible = false,\n    useSystemColorMode,\n  },\n  colorModeManager,\n}: IColorModeProviderProps) => {\n  // Color-mode content\n  const { colorMode, setColorMode } = useModeManager(\n    initialColorMode,\n    useSystemColorMode,\n    colorModeManager\n  );\n\n  const toggleColorMode = React.useCallback(() => {\n    setColorMode(colorMode === 'light' ? 'dark' : 'light');\n  }, [colorMode, setColorMode]);\n\n  // Accessible color hook\n  const [accessibleColors, setAccessibleColors] = React.useState<boolean>(\n    isTextColorAccessible\n  );\n\n  const contextValue = useMemo(() => {\n    return {\n      colorMode: {\n        colorMode,\n        toggleColorMode,\n        setColorMode,\n        accessibleColors,\n        setAccessibleColors,\n      },\n    };\n  }, [\n    colorMode,\n    toggleColorMode,\n    setColorMode,\n    accessibleColors,\n    setAccessibleColors,\n  ]);\n\n  React.useEffect(() => {\n    let escapeKeyListener: any = null;\n\n    if (Platform.OS === 'web') {\n      escapeKeyListener = (e: KeyboardEvent) => {\n        if (e.key === 'Escape') {\n          if (keyboardDismissHandlerManager.length() > 0) {\n            const lastHandler: any = keyboardDismissHandlerManager.pop();\n            lastHandler();\n          }\n        }\n      };\n      document.addEventListener('keydown', escapeKeyListener);\n    }\n\n    return () => {\n      if (Platform.OS === 'web') {\n        document.removeEventListener('keydown', escapeKeyListener);\n      }\n    };\n  }, []);\n\n  return (\n    <HybridContext.Provider value={contextValue}>\n      {children}\n    </HybridContext.Provider>\n  );\n};\n\nexport default HybridProvider;\n"
  },
  {
    "path": "src/core/hybrid-overlay/index.ts",
    "content": "export { HybridContext } from './Context';\nexport { default as HybridProvider } from './HybridProvider';\nexport type { IHybridContextProps } from './types';\n"
  },
  {
    "path": "src/core/hybrid-overlay/types.ts",
    "content": "import type { IColorModeContextProps } from './../color-mode/types';\n\nexport type IHybridContextProps = {\n  colorMode: IColorModeContextProps;\n};\n"
  },
  {
    "path": "src/core/index.ts",
    "content": "export * from './NativeBaseProvider';\nexport * from './extendTheme';\n\nexport {\n  useColorMode,\n  useColorModeValue,\n  useAccessibleColors,\n} from './color-mode';\n\nexport type { INativebaseConfig } from './NativeBaseContext';\n\nexport type {\n  StorageManager,\n  ColorMode,\n  ColorModeOptions,\n  IColorModeProviderProps,\n  IColorModeContextProps,\n} from './color-mode';\n\nexport { ToastProvider } from '../components/composites/Toast';\n"
  },
  {
    "path": "src/factory/component.tsx",
    "content": "import React, { useMemo } from 'react';\nimport { usePropsWithComponentTheme } from '../hooks/useThemeProps/usePropsWithComponentTheme';\nimport type { ComponentTheme } from '../theme';\nimport type { FactoryComponentProps } from './types';\nimport { makeStyledComponent } from '../utils/styled';\n\nexport default function Factory<P>(\n  Component: React.ComponentType<P>,\n  componentTheme?: ComponentTheme\n) {\n  return React.forwardRef(\n    ({ children, _state, ...props }: P & FactoryComponentProps, ref: any) => {\n      const StyledComponent = useMemo(() => makeStyledComponent(Component), []);\n      const calculatedProps = usePropsWithComponentTheme(\n        componentTheme ?? {},\n        props,\n        _state\n      );\n      return (\n        <StyledComponent {...(calculatedProps as P)} ref={ref}>\n          {children}\n        </StyledComponent>\n      );\n    }\n  );\n}\n"
  },
  {
    "path": "src/factory/index.tsx",
    "content": "export { default as Factory } from './component';\nexport type { FactoryComponentProps } from './types';\n"
  },
  {
    "path": "src/factory/types.ts",
    "content": "import type { PlatformProps } from '../components/types';\nimport type { StyledProps } from '../theme/types';\nimport type { IStateProps } from '../hooks/useThemeProps/propsFlattener';\n\nexport type FactoryComponentProps = StyledProps &\n  PlatformProps<StyledProps> & {\n    children?: string | JSX.Element | JSX.Element[];\n    _state?: IStateProps;\n  };\n"
  },
  {
    "path": "src/hooks/index.ts",
    "content": "export { useClipboard } from './useClipboard';\nexport { useDisclose } from './useDisclose';\nexport { useNativeBase } from './useNativeBase';\nexport { useMediaQuery } from './useMediaQuery';\nexport { useBreakpointValue } from './useBreakpointValue';\nexport { useBreakpointResolvedProps } from './useBreakpointResolvedProps';\nexport { usePlatformProps } from './usePlatformProps';\nexport { useStyledSystemPropsResolver } from './useStyledSystemPropsResolver';\nexport {\n  useControllableProp,\n  useControllableState,\n} from './useControllableProp';\n// TODO: Have to properly remove these as we're no longer using them internally.\nexport { useThemeProps, usePropsWithComponentTheme } from './useThemeProps';\n// TODO: instead export only this.\nexport { usePropsResolution } from './useThemeProps';\nexport { usePropsResolutionTest } from './useThemeProps/usePropsResolutionTest';\nexport { useTheme } from './useTheme';\nexport { useToken } from './useToken';\nexport { useSafeArea } from './useSafeArea';\nexport { useContrastText } from './useContrastText';\nexport { useScreenReaderEnabled } from './useScreenReaderEnabled';\nexport {\n  useKeyboardDismissable,\n  keyboardDismissHandlerManager,\n} from './useKeyboardDismissable';\nexport { useLayout } from './useLayout';\nexport { useSx } from './useSx';\n"
  },
  {
    "path": "src/hooks/tests/useBreakpointValue.test.tsx",
    "content": "import React from 'react';\nimport { useBreakpointValue } from '../../hooks/useBreakpointValue';\nimport { NativeBaseProvider } from '../../core/NativeBaseProvider';\nimport { renderHook } from '@testing-library/react-hooks';\n\ndescribe('useBreakpointValue', () => {\n  const wrapper = ({ children }: any) => (\n    <NativeBaseProvider\n      initialWindowMetrics={{\n        frame: { x: 0, y: 0, width: 0, height: 0 },\n        insets: { top: 0, left: 0, right: 0, bottom: 0 },\n      }}\n    >\n      {children}\n    </NativeBaseProvider>\n  );\n  test('Empty array', () => {\n    const { result } = renderHook(() => useBreakpointValue([]), {\n      wrapper,\n    });\n    expect(result.current).toEqual([]);\n  });\n  test('Empty object', () => {\n    const { result } = renderHook(() => useBreakpointValue({}), {\n      wrapper,\n    });\n    expect(result.current).toEqual(undefined);\n  });\n  test('Basic array', () => {\n    const { result } = renderHook(() => useBreakpointValue([1, 2, 3]), {\n      wrapper,\n    });\n    expect(result.current).toEqual(2);\n  });\n  test('Basic Object', () => {\n    const { result } = renderHook(\n      () => useBreakpointValue({ base: 0, sm: 1, md: 2 }),\n      {\n        wrapper,\n      }\n    );\n    expect(result.current).toEqual(1);\n  });\n});\n"
  },
  {
    "path": "src/hooks/useBreakpointResolvedProps.ts",
    "content": "import React from 'react';\nimport type { ResponsiveValue } from '../components/types';\nimport { useNativeBaseConfig } from '../core/NativeBaseContext';\nimport { resolveValueWithBreakpoint } from './useThemeProps/utils';\nimport { useTheme } from './../hooks/useTheme';\n\ntype IProps = {\n  [key: string]: ResponsiveValue<number | string>;\n};\n\ntype INewProps = {\n  [key: string]: number | string;\n};\n\nexport const useBreakpointResolvedProps = (props: IProps) => {\n  const currentBreakpoint = useNativeBaseConfig('useBreakpointResolvedProps')\n    .currentBreakpoint;\n  const theme = useTheme();\n  const newProps: INewProps = React.useMemo(() => {\n    let newProps: INewProps = {};\n    for (let key in props) {\n      const rawValue = props[key];\n      const value = resolveValueWithBreakpoint(\n        rawValue,\n        theme.breakpoints,\n        currentBreakpoint,\n        key\n      );\n      newProps[key] = value;\n    }\n    return newProps;\n  }, [props, currentBreakpoint, theme.breakpoints]);\n\n  return newProps;\n};\n"
  },
  {
    "path": "src/hooks/useBreakpointValue.ts",
    "content": "import { useWindowDimensions } from 'react-native';\nimport {\n  getClosestBreakpoint,\n  hasValidBreakpointFormat,\n  findLastValidBreakpoint,\n} from '../theme/tools';\nimport { useTheme } from './../hooks/useTheme';\nimport type { ITheme } from '../theme/index';\n\ntype UseBreakpointValueParam =\n  | { [key in keyof ITheme['breakpoints']]?: any }\n  | Array<any>;\n\nexport function useBreakpointValue(values: UseBreakpointValueParam) {\n  let windowWidth = useWindowDimensions()?.width;\n  const theme = useTheme();\n\n  if (hasValidBreakpointFormat(values, theme.breakpoints)) {\n    let currentBreakpoint = getClosestBreakpoint(\n      theme.breakpoints,\n      windowWidth\n    );\n    return findLastValidBreakpoint(\n      values,\n      theme.breakpoints,\n      currentBreakpoint\n    );\n  } else {\n    return values;\n  }\n}\n"
  },
  {
    "path": "src/hooks/useClipboard.ts",
    "content": "import React from 'react';\nimport { Clipboard } from 'react-native';\n\nexport function useClipboard() {\n  const [hasCopied, setHasCopied] = React.useState(false);\n  const [value, setValue] = React.useState<string>('');\n  const onCopy = async (copiedValue: string) => {\n    if (Clipboard) {\n      await Clipboard.setString(copiedValue);\n    }\n    setValue(copiedValue);\n    setHasCopied(true);\n  };\n  return {\n    value,\n    onCopy,\n    hasCopied,\n  };\n}\n"
  },
  {
    "path": "src/hooks/useColorModeProps.ts",
    "content": "import merge from 'lodash.merge';\nimport { useColorMode } from '../core/color-mode';\n\nexport const useColorModeProps = (props: any) => {\n  const { _light, _dark, ...remainingProps } = props;\n  const { colorMode } = useColorMode();\n  const colorModeProps = () => {\n    switch (colorMode) {\n      case 'light':\n        return _light;\n      case 'dark':\n        return _dark;\n      default:\n        return {};\n    }\n  };\n  return merge(remainingProps, colorModeProps());\n};\n"
  },
  {
    "path": "src/hooks/useContrastText.ts",
    "content": "import Color from 'tinycolor2';\nimport { useToken } from './useToken';\nimport { useAccessibleColors } from '../core/color-mode/hooks';\nimport { useNativeBaseConfig } from '../core/NativeBaseContext';\n\nexport function useContrastText(bg: string, color?: string) {\n  const [\n    contrastThreshold,\n    trueDarkText,\n    trueLightText,\n    trueBg,\n    trueColor,\n  ] = useToken('colors', [\n    'contrastThreshold',\n    'darkText',\n    'lightText',\n    bg,\n    color ?? '',\n  ]);\n\n  const suppressColorAccessibilityWarning = useNativeBaseConfig(\n    'NativeBaseConfigProvider'\n  ).config.suppressColorAccessibilityWarning;\n\n  const [accessibleColors] = useAccessibleColors();\n\n  if (useNativeBaseConfig('NativeBaseConfigProvider').disableContrastText) {\n    return trueColor;\n  }\n  if (typeof bg !== 'string') {\n    return;\n  }\n\n  const [bgThemeColorVariant, bgShade] = bg.split('.');\n\n  const textColor =\n    !accessibleColors &&\n    bgThemeColorVariant &&\n    themeColorsThresholdShades[bgThemeColorVariant]\n      ? getContrastThemeColor(bgThemeColorVariant, bgShade)\n      : getAccessibleContrastColor(\n          contrastThreshold,\n          trueDarkText,\n          trueLightText,\n          trueBg,\n          trueColor,\n          bg,\n          color,\n          suppressColorAccessibilityWarning\n        );\n\n  return textColor;\n}\n\nfunction getContrastThemeColor(bgThemeColorVariant: string, bgShade: string) {\n  const shadeThreshold = themeColorsThresholdShades[bgThemeColorVariant];\n  if (\n    bgShade &&\n    shadeThreshold &&\n    ((bgShade >= shadeThreshold && bgThemeColorVariant !== 'dark') ||\n      (bgThemeColorVariant === 'dark' && bgShade < shadeThreshold))\n  ) {\n    return 'lightText';\n  }\n  return 'darkText';\n}\nfunction getAccessibleContrastColor(\n  contrastThreshold: number,\n  trueDarkText: string,\n  trueLightText: string,\n  trueBg: string,\n  trueColor: string,\n  bg: string,\n  color?: string,\n  suppressColorAccessibilityWarning?: boolean\n) {\n  if (typeof trueBg !== 'string') {\n    trueBg = bg;\n  }\n  let trueContrastColor;\n  let contrastColorToken;\n  const darkTextConstrast = getContrastRatio(trueBg, trueDarkText);\n  const lightTextConstrast = getContrastRatio(trueBg, trueLightText);\n\n  if (\n    darkTextConstrast >= contrastThreshold ||\n    darkTextConstrast > lightTextConstrast\n  ) {\n    trueContrastColor = trueDarkText;\n    contrastColorToken = 'darkText';\n  } else {\n    trueContrastColor = trueLightText;\n    contrastColorToken = 'lightText';\n  }\n\n  if (process.env.NODE_ENV !== 'production') {\n    const contrast = getContrastRatio(\n      trueBg,\n      trueColor ? trueColor : trueContrastColor\n    );\n    if (contrast < 3 && !suppressColorAccessibilityWarning) {\n      console.warn(\n        [\n          `NativeBase: The contrast ratio of ${contrast}:1 for ${\n            color ? color : contrastColorToken\n          } on ${bg}`,\n          'falls below the WCAG recommended absolute minimum contrast ratio of 3:1.',\n          'https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast',\n        ].join('\\n')\n      );\n    }\n  }\n  return contrastColorToken;\n}\nfunction getContrastRatio(foreground: string, background: string) {\n  const lumA = Color(foreground).getLuminance();\n  const lumB = Color(background).getLuminance();\n  return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);\n}\n\nconst themeColorsThresholdShades: any = {\n  rose: 500,\n  pink: 500,\n  fuchsia: 800,\n  purple: 700,\n  violet: 600,\n  indigo: 500,\n  blue: 400,\n  lightBlue: 400,\n  cyan: 300,\n  teal: 300,\n  emerald: 300,\n  tertiary: 300,\n  green: 400,\n  lime: 600,\n  yellow: 800,\n  amber: 500,\n  orange: 500,\n  red: 500,\n  warmGray: 500,\n  trueGray: 500,\n  gray: 500,\n  coolGray: 500,\n  blueGray: 500,\n  dark: 500,\n  danger: 500,\n  error: 500,\n  success: 400,\n  warning: 500,\n  muted: 500,\n  primary: 500,\n  info: 400,\n  secondary: 500,\n  light: 500,\n};\n"
  },
  {
    "path": "src/hooks/useControllableProp.ts",
    "content": "import React from 'react';\n\nexport function useControllableProp<T>(prop: T | undefined, state: T) {\n  const { current: isControlled } = React.useRef(prop !== undefined);\n  const value = isControlled && typeof prop !== 'undefined' ? prop : state;\n  return [isControlled, value] as const;\n}\n\nexport interface UseControllableStateProps<T> {\n  /**\n   * The value to used in controlled mode\n   */\n  value?: T;\n  /**\n   * The initial value to be used, in uncontrolled mode\n   */\n  defaultValue?: T | (() => T);\n  /**\n   * The callback fired when the value changes\n   */\n  onChange?: (value: T) => void;\n  /**\n   * The component name (for warnings)\n   */\n  name?: string;\n}\n\n/**\n * React hook for using controlling component state.\n * @param props\n */\nexport function useControllableState<T>(props: UseControllableStateProps<T>) {\n  const { value: valueProp, defaultValue, onChange } = props;\n\n  const [valueState, setValue] = React.useState(defaultValue as T);\n  const isControlled = valueProp !== undefined;\n\n  const value = isControlled ? (valueProp as T) : valueState;\n\n  const updateValue = React.useCallback(\n    (next: any) => {\n      const nextValue = typeof next === 'function' ? next(value) : next;\n      if (!isControlled) {\n        setValue(nextValue);\n      }\n      onChange && onChange(nextValue);\n    },\n    [isControlled, onChange, value]\n  );\n\n  return [value, updateValue] as [T, React.Dispatch<React.SetStateAction<T>>];\n}\n"
  },
  {
    "path": "src/hooks/useDisclose.ts",
    "content": "import React from 'react';\n\nexport function useDisclose(initState?: boolean) {\n  const [isOpen, setIsOpen] = React.useState(initState || false);\n  const onOpen = () => {\n    setIsOpen(true);\n  };\n  const onClose = () => {\n    setIsOpen(false);\n  };\n  const onToggle = () => {\n    setIsOpen(!isOpen);\n  };\n  return {\n    isOpen,\n    onOpen,\n    onClose,\n    onToggle,\n  };\n}\n"
  },
  {
    "path": "src/hooks/useHasResponsiveProps.ts",
    "content": "// import { useWindowDimensions } from 'react-native';\n// import { isResponsiveAnyProp } from '../theme/tools';\n\n//  @ts-ignore eslint-disable-next-line\nexport function useHasResponsiveProps(props: any) {\n  if (props) {\n    //\n  }\n  return false;\n  //   const windowDimensions = useWindowDimensions();\n\n  //   if (!windowDimensions.width || !windowDimensions.height) {\n  //     const responsivePropsExists = isResponsiveAnyProp(props);\n  //     if (responsivePropsExists) {\n  //       return true;\n  //     }\n  //   }\n  //   return false;\n}\n"
  },
  {
    "path": "src/hooks/useKeyboardDismissable.ts",
    "content": "import React from 'react';\nimport { useEffect } from 'react';\nimport { BackHandler } from 'react-native';\n\ntype IParams = {\n  enabled?: boolean;\n  callback: () => any;\n};\n\nlet keyboardDismissHandlers: Array<() => any> = [];\nexport const keyboardDismissHandlerManager = {\n  push: (handler: () => any) => {\n    keyboardDismissHandlers.push(handler);\n    return () => {\n      keyboardDismissHandlers = keyboardDismissHandlers.filter(\n        (h) => h !== handler\n      );\n    };\n  },\n  length: () => keyboardDismissHandlers.length,\n  pop: () => {\n    return keyboardDismissHandlers.pop();\n  },\n};\n\n/**\n * Handles attaching callback for Escape key listener on web and Back button listener on Android\n */\nexport const useKeyboardDismissable = ({ enabled, callback }: IParams) => {\n  React.useEffect(() => {\n    let cleanupFn = () => {};\n    if (enabled) {\n      cleanupFn = keyboardDismissHandlerManager.push(callback);\n    } else {\n      cleanupFn();\n    }\n    return () => {\n      cleanupFn();\n    };\n  }, [enabled, callback]);\n\n  useBackHandler({ enabled, callback });\n};\n\nexport function useBackHandler({ enabled, callback }: IParams) {\n  useEffect(() => {\n    let backHandler = () => {\n      callback();\n      return true;\n    };\n    if (enabled) {\n      BackHandler.addEventListener('hardwareBackPress', backHandler);\n    } else {\n      BackHandler.removeEventListener('hardwareBackPress', backHandler);\n    }\n    return () =>\n      BackHandler.removeEventListener('hardwareBackPress', backHandler);\n  }, [enabled, callback]);\n}\n"
  },
  {
    "path": "src/hooks/useLayout.tsx",
    "content": "import React from 'react';\nimport type { LayoutChangeEvent } from 'react-native';\n\nexport const useLayout = () => {\n  const [layout, setLayout] = React.useState({\n    width: 0,\n    height: 0,\n  });\n  return {\n    onLayout: (e: LayoutChangeEvent) => {\n      setLayout(e.nativeEvent.layout);\n    },\n    layout,\n  };\n};\n"
  },
  {
    "path": "src/hooks/useMediaQuery.ts",
    "content": "import { useWindowDimensions } from 'react-native';\nimport isNil from 'lodash.isnil';\n\ntype QueryKeys =\n  | 'maxWidth'\n  | 'minWidth'\n  | 'maxHeight'\n  | 'minHeight'\n  | 'orientation';\n\ntype SubQuery = {\n  [queryKey in QueryKeys]?: number | string;\n};\ntype Query = Array<SubQuery>;\n\nexport function useMediaQuery(query: SubQuery | Query) {\n  const dims = useWindowDimensions();\n  const height = dims?.height;\n  const width = dims?.width;\n\n  return iterateQuery(query, height, width);\n}\n\nfunction queryResolver(query: any, width?: number, height?: number) {\n  for (const queryKey in query) {\n    if (!calculateQuery(queryKey, query[queryKey], height, width)) {\n      return false;\n    }\n  }\n  return true;\n}\n\nfunction iterateQuery(\n  query: SubQuery | Query,\n  height?: number,\n  width?: number\n) {\n  const queryResults = [];\n  if (Array.isArray(query)) {\n    query.forEach((subQuery: SubQuery) => {\n      queryResults.push(queryResolver(subQuery, width, height));\n    });\n  } else {\n    queryResults.push(queryResolver(query, width, height));\n  }\n  return queryResults;\n}\n\nfunction calculateQuery(\n  key: string,\n  val?: number | string,\n  height?: number,\n  width?: number\n) {\n  let retval;\n  if (isNil(width) || isNil(height) || isNil(val)) {\n    return;\n  }\n  switch (key) {\n    case 'maxWidth':\n      retval = !isNil(val) ? width <= val : undefined;\n      break;\n    case 'minWidth':\n      retval = !isNil(val) ? width >= val : undefined;\n      break;\n    case 'maxHeight':\n      retval = !isNil(val) ? height <= val : undefined;\n      break;\n    case 'minHeight':\n      retval = !isNil(val) ? height >= val : undefined;\n      break;\n    case 'orientation':\n      if (!isNil(val)) {\n        if (width > height) {\n          retval = val === 'landscape';\n        } else {\n          retval = val === 'portrait';\n        }\n      }\n      break;\n    default:\n      break;\n  }\n  return retval;\n}\n"
  },
  {
    "path": "src/hooks/useNativeBase.tsx",
    "content": "import { useColorMode } from './../core/color-mode';\nimport { useTheme } from './useTheme';\n\n/**\n *\n * @returns object containing `colorMode` information and `theme` object\n */\nexport function useNativeBase() {\n  const colorModeResult = useColorMode();\n  const theme = useTheme();\n  return { ...colorModeResult, theme };\n}\n"
  },
  {
    "path": "src/hooks/usePlatformProps.ts",
    "content": "import merge from 'lodash.merge';\nimport { Platform } from 'react-native';\n\nexport const usePlatformProps = (props: any) => {\n  const { _web, _ios, _android, ...remainingProps } = props;\n  const platformProps = () => {\n    switch (Platform.OS) {\n      case 'web':\n        return _web;\n      case 'ios':\n        return _ios;\n      case 'android':\n        return _android;\n      default:\n        return {};\n    }\n  };\n  return merge(remainingProps, platformProps());\n};\n"
  },
  {
    "path": "src/hooks/useResolvedFontFamily.ts",
    "content": "import { useTheme } from './useTheme';\nimport type { ITheme } from '../theme';\n/**\n *\n * @param props\n * @returns resolved fontFamily\n * @description Combination of fontWeight, fontStyle and font family is fully supported on web but on Android we need to pass the exact font family.\n * for e.g. If we load Roboto-Light-Italic.ttf using css, we can use fontFamily: Roboto, fontWeight: 300, fontStyle: italic on web, but same may not work on all the platforms. Other platform needs to set fontFamily: Roboto-Light-Italic in order to work.\n * So this function's purpose is to intake styles like fontFamily: Roboto, fontWeight: 300, fontStyle: Italic and return fontFamily: Roboto-Light-Italic depending upon the fontConfig token in typography theme.\n * This function depends upon fontConfig token in typography for mapping.\n */\nexport function useResolvedFontFamily(props: {\n  fontFamily?: keyof ITheme['fonts'];\n  fontStyle?: string;\n  fontWeight?: keyof ITheme['fontWeights'];\n}) {\n  const { fontFamily, fontStyle, fontWeight } = props;\n  let newFontFamily = fontFamily;\n  let newFontStyle = fontStyle;\n  let newFontWeight = fontWeight;\n\n  const { fontConfig, fontWeights, fonts } = useTheme();\n  if (fontWeight && fontStyle && fontFamily && fontFamily in fonts) {\n    // TODO: Fix typing remove any.\n    const fontToken: any = fonts[fontFamily];\n    if (fontConfig && fontConfig[fontToken]) {\n      // If a custom font family is resolved, set fontWeight and fontStyle to undefined.\n      // https://github.com/GeekyAnts/NativeBase/issues/3811\n      // On Android, If a fontFamily and fontWeight both are passed, it behaves in a weird way and applies system fonts with passed fontWeight. This happens only for some fontWeights e.g. '700' or 'bold'. So, if we find a custom fontFamily, we remove fontWeight and fontStyle\n      //@ts-ignore\n      newFontWeight = undefined;\n      //@ts-ignore\n      newFontStyle = undefined;\n\n      let fontWeightNumber =\n        fontWeight in fontWeights ? fontWeights[fontWeight] : fontWeight;\n      let fontVariant = fontConfig[fontToken][fontWeightNumber];\n\n      if (typeof fontVariant === 'object') {\n        if (fontVariant[fontStyle]) newFontFamily = fontVariant[fontStyle];\n      } else {\n        newFontFamily = fontVariant;\n      }\n    } else {\n      newFontFamily = fonts[fontFamily];\n    }\n  }\n\n  return {\n    fontFamily: newFontFamily,\n    fontWeight: newFontWeight,\n    fontStyle: newFontStyle,\n  };\n}\n"
  },
  {
    "path": "src/hooks/useResponsiveSSRProps.ts",
    "content": "import { useEffect, useState } from 'react';\nimport { useTheme } from '../hooks/useTheme';\nimport { useNativeBaseConfig } from '../core/NativeBaseContext';\nimport { isResponsiveAnyProp } from '../theme/tools';\n\nexport function useResponsiveSSRProps(incomingProps: any) {\n  const [modified, setModified] = useState(false);\n  const theme = useTheme();\n\n  const responsivePropsExists = isResponsiveAnyProp(incomingProps, theme);\n  const isSSR = useNativeBaseConfig('useBreakpointResolvedProps').isSSR;\n\n  let modifiedProps = incomingProps;\n  if (responsivePropsExists && isSSR && !modified) {\n    modifiedProps = { ...modifiedProps, key: Math.random() };\n  }\n  useEffect((): any => {\n    if (responsivePropsExists && isSSR) {\n      setModified(true);\n    }\n  }, [responsivePropsExists, isSSR]);\n\n  return modifiedProps;\n}\n"
  },
  {
    "path": "src/hooks/useSafeArea/index.ts",
    "content": "import { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { getSortedProps, calculatePaddingProps } from './utils';\nimport { useTheme } from './../useTheme';\n\nexport function useSafeArea(props: any) {\n  const insets = useSafeAreaInsets();\n  const sizes = useTheme().sizes;\n  const { safeAreaProps, paddingProps, sansPaddingProps } = getSortedProps(\n    props\n  );\n  if (!Object.keys(safeAreaProps).length) {\n    return props;\n  }\n  let calcualtedPaddingProps = calculatePaddingProps(\n    safeAreaProps,\n    paddingProps,\n    insets,\n    sizes\n  );\n  return { ...sansPaddingProps, ...paddingProps, ...calcualtedPaddingProps };\n}\n"
  },
  {
    "path": "src/hooks/useSafeArea/utils.ts",
    "content": "import { themeTools } from '../../theme';\nimport { baseFontSize } from '../../theme/tools/utils';\nimport type { SafeAreaProps } from './../../components/types/ExtraProps';\nimport isNil from 'lodash.isnil';\n\nexport function calculatePaddingProps(\n  safeAreaProps: SafeAreaProps,\n  paddingProps: any,\n  insets: any,\n  sizes: any\n) {\n  return themeTools.omitUndefined({\n    pt: calculatePaddingTop(safeAreaProps, paddingProps, insets, sizes),\n    pb: calculatePaddingBottom(safeAreaProps, paddingProps, insets, sizes),\n    pl: calculatePaddingLeft(safeAreaProps, paddingProps, insets, sizes),\n    pr: calculatePaddingRight(safeAreaProps, paddingProps, insets, sizes),\n  });\n}\nfunction getValueInPixels(\n  paddingProps: any,\n  paddingKeys: any,\n  sizes: any,\n  inset: any,\n  manualInset: number | string\n) {\n  let appliedInset: any = 0;\n  let originalValue = paddingKeys.length\n    ? sizes[paddingProps[paddingKeys[paddingKeys.length - 1]]]\n    : 0;\n\n  if (!isNil(manualInset) && typeof manualInset !== 'boolean') {\n    // DOC: Handles case of manually passed inset\n    appliedInset =\n      typeof manualInset === 'string' && manualInset.includes('px')\n        ? parseInt(manualInset, 10)\n        : sizes[manualInset];\n  } else {\n    // DOC: Handles case of auto inset\n    appliedInset = inset;\n  }\n\n  if (typeof originalValue === 'string') {\n    if (originalValue.endsWith('px')) {\n      return parseInt(originalValue, 10) + parseInt(appliedInset, 10) + 'px';\n    } else if (originalValue.endsWith('rem')) {\n      return (\n        parseFloat(originalValue) * baseFontSize +\n        parseInt(appliedInset, 10) +\n        'px'\n      );\n    }\n  }\n\n  return originalValue\n    ? parseInt(originalValue, 10) + parseInt(appliedInset, 10) + 'px'\n    : parseInt(appliedInset, 10) + 'px';\n}\n\nexport function calculatePaddingTop(\n  safeAreaProps: SafeAreaProps,\n  paddingProps: any,\n  insets: any,\n  sizes: any\n) {\n  if (\n    isNil(safeAreaProps.safeArea) &&\n    isNil(safeAreaProps.safeAreaTop) &&\n    isNil(safeAreaProps.safeAreaY)\n  ) {\n    return;\n  }\n\n  // DOC: Adding it for manual inset passed by the user\n  let [topSafeAreaProps] = themeTools.orderedExtractInObject(safeAreaProps, [\n    'safeArea',\n    'safeAreaY',\n    'safeAreaTop',\n  ]);\n  let topSafeAreaArray = Object.keys(topSafeAreaProps);\n  const manualInset = topSafeAreaArray.length\n    ? topSafeAreaProps[topSafeAreaArray[topSafeAreaArray.length - 1]]\n    : undefined;\n  if (!insets.top && (typeof manualInset === 'boolean' || !manualInset)) {\n    return;\n  }\n  const propKeys = getRelatedPaddingProps(paddingProps, [\n    'p',\n    'padding',\n    'pt',\n    'paddingTop',\n    'py',\n    'paddingY',\n  ]);\n  return getValueInPixels(\n    paddingProps,\n    propKeys,\n    sizes,\n    insets.top,\n    manualInset\n  );\n}\nexport function calculatePaddingBottom(\n  safeAreaProps: SafeAreaProps,\n  paddingProps: any,\n  insets: any,\n  sizes: any\n) {\n  if (\n    isNil(safeAreaProps.safeArea) &&\n    isNil(safeAreaProps.safeAreaBottom) &&\n    isNil(safeAreaProps.safeAreaY)\n  ) {\n    return;\n  }\n  let [bottomSafeAreaProps] = themeTools.orderedExtractInObject(safeAreaProps, [\n    'safeArea',\n    'safeAreaY',\n    'safeAreaBottom',\n  ]);\n  let bottomSafeAreaArray = Object.keys(bottomSafeAreaProps);\n  const manualInset = bottomSafeAreaArray.length\n    ? bottomSafeAreaProps[bottomSafeAreaArray[bottomSafeAreaArray.length - 1]]\n    : undefined;\n  if (!insets.bottom && (!manualInset || typeof manualInset === 'boolean')) {\n    return;\n  }\n\n  const propKeys = getRelatedPaddingProps(paddingProps, [\n    'p',\n    'padding',\n    'pb',\n    'paddingBottom',\n    'py',\n    'paddingY',\n  ]);\n\n  return getValueInPixels(\n    paddingProps,\n    propKeys,\n    sizes,\n    insets.bottom,\n    manualInset\n  );\n}\nexport function calculatePaddingLeft(\n  safeAreaProps: SafeAreaProps,\n  paddingProps: any,\n  insets: any,\n  sizes: any\n) {\n  if (\n    isNil(safeAreaProps.safeArea) &&\n    isNil(safeAreaProps.safeAreaLeft) &&\n    isNil(safeAreaProps.safeAreaX)\n  ) {\n    return;\n  }\n  let [leftSafeAreaProps] = themeTools.orderedExtractInObject(safeAreaProps, [\n    'safeArea',\n    'safeAreaLeft',\n    'safeAreaX',\n  ]);\n  let leftSafeAreaArray = Object.keys(leftSafeAreaProps);\n  // DOC: Since last value takes precedence so, directly takes last value\n  const manualInset = leftSafeAreaArray.length\n    ? leftSafeAreaProps[leftSafeAreaArray[leftSafeAreaArray.length - 1]]\n    : undefined;\n  if (!insets.left && (!manualInset || typeof manualInset === 'boolean')) {\n    return;\n  }\n  const propKeys = getRelatedPaddingProps(paddingProps, [\n    'p',\n    'padding',\n    'pl',\n    'paddingLeft',\n    'px',\n    'paddingX',\n  ]);\n\n  return getValueInPixels(\n    paddingProps,\n    propKeys,\n    sizes,\n    insets.left,\n    manualInset\n  );\n}\nexport function calculatePaddingRight(\n  safeAreaProps: SafeAreaProps,\n  paddingProps: any,\n  insets: any,\n  sizes: any\n) {\n  if (\n    isNil(safeAreaProps.safeArea) &&\n    isNil(safeAreaProps.safeAreaRight) &&\n    isNil(safeAreaProps.safeAreaX)\n  ) {\n    return;\n  }\n  // DOC: Adding it for manual inset passed by the user\n  let [rightSafeAreaProps] = themeTools.orderedExtractInObject(safeAreaProps, [\n    'safeArea',\n    'safeAreaX',\n    'safeAreaRight',\n  ]);\n  let rightSafeAreaArray = Object.keys(rightSafeAreaProps);\n  const manualInset = rightSafeAreaArray.length\n    ? rightSafeAreaProps[rightSafeAreaArray[rightSafeAreaArray.length - 1]]\n    : undefined;\n\n  if (!insets.right && (!manualInset || typeof manualInset === 'boolean')) {\n    return;\n  }\n  const propKeys = getRelatedPaddingProps(paddingProps, [\n    'p',\n    'padding',\n    'pr',\n    'paddingRight',\n    'px',\n    'paddingX',\n  ]);\n\n  return getValueInPixels(\n    paddingProps,\n    propKeys,\n    sizes,\n    insets.right,\n    manualInset\n  );\n}\n\nfunction getRelatedPaddingProps(props: any, relatedKeys: Array<any>) {\n  return Object.keys(props).filter((key) => relatedKeys.includes(key));\n}\nexport function getSortedProps(props: any) {\n  let [\n    safeAreaProps,\n    sansSafeAreaProps,\n  ] = themeTools.orderedExtractInObject(props, [\n    'safeArea',\n    'safeAreaX',\n    'safeAreaY',\n    'safeAreaTop',\n    'safeAreaBottom',\n    'safeAreaLeft',\n    'safeAreaRight',\n  ]);\n  let [\n    paddingProps,\n    sansPaddingProps,\n  ] = themeTools.orderedExtractInObject(sansSafeAreaProps, [\n    'p',\n    'padding',\n    'pt',\n    'paddingTop',\n    'pr',\n    'paddingRight',\n    'pb',\n    'paddingBottom',\n    'pl',\n    'paddingLeft',\n    'px',\n    'paddingX',\n    'py',\n    'paddingY',\n  ]);\n  return { safeAreaProps, paddingProps, sansPaddingProps };\n}\n"
  },
  {
    "path": "src/hooks/useScreenReaderEnabled.ts",
    "content": "import React from 'react';\nimport { AccessibilityInfo } from 'react-native';\n\nexport function useScreenReaderEnabled() {\n  const [enabled, setEnabled] = React.useState(false);\n  const mountedRef = React.useRef(false);\n\n  const handleSetEnabled = (value: boolean) => {\n    if (mountedRef.current) {\n      setEnabled(value);\n    }\n  };\n\n  React.useEffect(() => {\n    mountedRef.current = true;\n    async function setInitialValue() {\n      const res = await AccessibilityInfo.isScreenReaderEnabled();\n      handleSetEnabled(res);\n    }\n\n    let handler: any = AccessibilityInfo.addEventListener(\n      'screenReaderChanged',\n      (event: any) => {\n        handleSetEnabled(event);\n      }\n    );\n\n    setInitialValue();\n    return () => {\n      mountedRef.current = false;\n      AccessibilityInfo.removeEventListener('screenReaderChanged', handler);\n    };\n  });\n\n  return enabled;\n}\n"
  },
  {
    "path": "src/hooks/useStyledSystemPropsResolver.ts",
    "content": "import { getStyleAndFilteredProps } from '../theme/styled-system';\nimport { useTheme } from './useTheme';\nimport React from 'react';\nimport { useNativeBaseConfig } from '../core/NativeBaseContext';\nimport { useResponsiveQuery } from '../utils/useResponsiveQuery';\nimport { getStyledSystemPropsAndRestProps } from '../utils/getStyledSystemPropsAndRestProps';\n//@ts-ignore\nimport stableHash from 'stable-hash';\n\nexport const useStyledSystemPropsResolver = ({\n  style: propStyle,\n  debug,\n  ...props\n}: any) => {\n  const theme = useTheme();\n  const { currentBreakpoint, config } = useNativeBaseConfig(\n    'makeStyledComponent'\n  );\n  const strictMode = config.strictMode;\n\n  const { getResponsiveStyles } = useResponsiveQuery();\n\n  const { styledSystemProps, restProps } = getStyledSystemPropsAndRestProps(\n    props\n  );\n\n  const { style, dataSet, styleFromProps } = React.useMemo(() => {\n    const { styleSheet, dataSet, styleFromProps } = getStyleAndFilteredProps({\n      styledSystemProps,\n      theme,\n      debug,\n      currentBreakpoint,\n      strictMode,\n      getResponsiveStyles,\n    });\n    if (propStyle) {\n      return { style: [styleSheet.box, propStyle], dataSet, styleFromProps };\n    } else {\n      return { style: styleSheet.box, dataSet, styleFromProps };\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    stableHash(styledSystemProps),\n    theme,\n    debug,\n    currentBreakpoint,\n    strictMode,\n    propStyle,\n    getResponsiveStyles,\n    props,\n  ]);\n  if (process.env.NODE_ENV === 'development' && debug) {\n    /* eslint-disable-next-line */\n    console.log('style,resprops', currentBreakpoint);\n  }\n\n  restProps.dataSet = { ...restProps.dataSet, ...dataSet };\n\n  return [style, restProps, styleFromProps];\n};\n"
  },
  {
    "path": "src/hooks/useSx/index.ts",
    "content": "import { useStyledSystemPropsResolver } from '../useStyledSystemPropsResolver';\nimport { useNativeBaseConfig } from '../../core/NativeBaseContext';\nimport { isResponsiveAnyProp } from '../../theme/tools';\nimport { useTheme } from '../useTheme';\nimport { useMemo } from 'react';\n//@ts-ignore\nimport stableHash from 'stable-hash';\nimport type { StyledProps } from '../../theme/types';\n\nexport const useSx = () => {\n  const isSSR = useNativeBaseConfig('useBreakpointResolvedProps').isSSR;\n  const theme = useTheme();\n  const Sx = (query: StyledProps) => {\n    const StableHashQuery = stableHash(query);\n    const checkWarning = useMemo(() => {\n      return isResponsiveAnyProp(query, theme);\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [StableHashQuery]);\n\n    if (isSSR && checkWarning) {\n      console.warn(\"useSx prop doesn't resolve responsive prop with SSR\");\n    }\n    // eslint-disable-next-line\n    const [_style, _restProps, styleFromProps] = useStyledSystemPropsResolver(\n      query\n    );\n\n    return styleFromProps;\n  };\n  return Sx;\n};\n"
  },
  {
    "path": "src/hooks/useTheme.ts",
    "content": "import { useNativeBaseConfig } from './../core/NativeBaseContext';\n\nexport function useTheme() {\n  const theme = useNativeBaseConfig('useTheme').theme;\n  if (!theme) {\n    throw Error(\n      'useTheme: `theme` is undefined. Seems you forgot to wrap your app in `<NativeBaseProvider />`'\n    );\n  }\n\n  return theme;\n}\n"
  },
  {
    "path": "src/hooks/useThemeProps/index.ts",
    "content": "export { useThemeProps } from './useProps';\nexport { usePropsResolution } from './usePropsResolution';\nexport { usePropsWithComponentTheme } from './usePropsWithComponentTheme';\n"
  },
  {
    "path": "src/hooks/useThemeProps/propsFlattener.tsx",
    "content": "import merge from 'lodash.merge';\n\nconst SPECIFICITY_1000 = 1000;\nconst SPECIFICITY_110 = 110;\nconst SPECIFICITY_100 = 100;\nconst SPECIFICITY_70 = 70;\nconst SPECIFICITY_60 = 60;\nconst SPECIFICITY_55 = 55;\nconst SPECIFICITY_50 = 50;\nconst SPECIFICITY_40 = 40;\nconst SPECIFICITY_30 = 30;\n// SPECIFICITY_20 is being user for defferentiating between User Props and Theme Props. So any specificity less than SPECIFICITY_20 will be ovridable by user props.\nconst SPECIFICITY_20 = 20;\nconst SPECIFICITY_10 = 10;\nconst specificityPrecedence = [\n  SPECIFICITY_1000,\n  SPECIFICITY_110,\n  SPECIFICITY_100,\n  SPECIFICITY_70,\n  SPECIFICITY_60,\n  SPECIFICITY_55,\n  SPECIFICITY_50,\n  SPECIFICITY_40,\n  SPECIFICITY_30,\n  SPECIFICITY_20,\n  SPECIFICITY_10,\n];\nconst INITIAL_PROP_SPECIFICITY = {\n  [SPECIFICITY_1000]: 0,\n  [SPECIFICITY_110]: 0,\n  [SPECIFICITY_100]: 0,\n  [SPECIFICITY_70]: 0,\n  [SPECIFICITY_60]: 0,\n  [SPECIFICITY_50]: 0,\n  [SPECIFICITY_55]: 0,\n  [SPECIFICITY_40]: 0,\n  [SPECIFICITY_30]: 0,\n  [SPECIFICITY_20]: 0,\n  [SPECIFICITY_10]: 0,\n};\n\nconst pseudoPropsMap = {\n  _web: { dependentOn: 'platform', priority: SPECIFICITY_10 },\n  _ios: { dependentOn: 'platform', priority: SPECIFICITY_10 },\n  _android: { dependentOn: 'platform', priority: SPECIFICITY_10 },\n\n  _light: { dependentOn: 'colormode', priority: SPECIFICITY_10 },\n  _dark: { dependentOn: 'colormode', priority: SPECIFICITY_10 },\n\n  // TODO: have to add more interactionProps and stateProps\n  _indeterminate: {\n    dependentOn: 'state',\n    respondTo: 'isIndeterminate',\n    priority: SPECIFICITY_30,\n  },\n  _checked: {\n    dependentOn: 'state',\n    respondTo: 'isChecked',\n    priority: SPECIFICITY_30,\n  },\n  // Add new pseudeo props in between -------\n  _readOnly: {\n    dependentOn: 'state',\n    respondTo: 'isReadOnly',\n    priority: SPECIFICITY_30,\n  },\n  // Add new pseudeo props in between -------\n  _invalid: {\n    dependentOn: 'state',\n    respondTo: 'isInvalid',\n    priority: SPECIFICITY_40,\n  },\n  _focus: {\n    dependentOn: 'state',\n    respondTo: 'isFocused',\n    priority: SPECIFICITY_50,\n  },\n  _focusVisible: {\n    dependentOn: 'state',\n    respondTo: 'isFocusVisible',\n    priority: SPECIFICITY_55,\n  },\n  _hover: {\n    dependentOn: 'state',\n    respondTo: 'isHovered',\n    priority: SPECIFICITY_60,\n  },\n  _pressed: {\n    dependentOn: 'state',\n    respondTo: 'isPressed',\n    priority: SPECIFICITY_70,\n  },\n  _disabled: {\n    dependentOn: 'state',\n    respondTo: 'isDisabled',\n    priority: SPECIFICITY_100,\n  },\n  _loading: {\n    dependentOn: 'state',\n    respondTo: 'isLoading',\n    priority: SPECIFICITY_110,\n  },\n  _important: {\n    dependentOn: null,\n    priority: SPECIFICITY_1000,\n  },\n} as const;\n\ntype IPseudoPropsMap = typeof pseudoPropsMap;\ntype ExtractState<T extends IPseudoPropsMap> = {\n  // @ts-ignore\n  [P in keyof T as T[P]['respondTo']]?: boolean;\n};\nexport type IStateProps = ExtractState<IPseudoPropsMap>;\n\nexport const compareSpecificity = (\n  exisiting: any,\n  upcoming: any,\n  ignorebaseTheme?: boolean\n  // property?: any\n) => {\n  if (!exisiting) return true;\n  if (!upcoming) return false;\n  const condition = ignorebaseTheme\n    ? specificityPrecedence.length - 1\n    : specificityPrecedence.length;\n  for (let index = 0; index < condition; index++) {\n    if (\n      exisiting[specificityPrecedence[index]] >\n      upcoming[specificityPrecedence[index]]\n    ) {\n      return false;\n    } else if (\n      exisiting[specificityPrecedence[index]] <\n      upcoming[specificityPrecedence[index]]\n    ) {\n      return true;\n    }\n  }\n  return true;\n};\n\nconst shouldResolvePseudoProp = ({\n  property,\n  state,\n  platform,\n  colormode,\n}: {\n  property: keyof IPseudoPropsMap;\n  state: IStateProps;\n  platform: any;\n  colormode: any;\n}) => {\n  if (pseudoPropsMap[property].dependentOn === 'platform') {\n    return property === `_${platform}`;\n  } else if (pseudoPropsMap[property].dependentOn === 'colormode') {\n    return property === `_${colormode}`;\n  } else if (pseudoPropsMap[property].dependentOn === 'state') {\n    // @ts-ignore\n    return state[pseudoPropsMap[property].respondTo];\n  } else if (pseudoPropsMap[property].dependentOn === null) {\n    return true;\n  } else {\n    return false;\n  }\n};\n\nconst simplifyProps = (\n  {\n    props,\n    colormode,\n    platform,\n    state,\n    currentSpecificity,\n    previouslyFlattenProps,\n    cascadePseudoProps,\n  }: any,\n  flattenProps: any = {},\n  specificityMap: any = {},\n  priority: number\n) => {\n  const mergePsuedoProps = (property: string, propertySpecity: object) => {\n    if (compareSpecificity(specificityMap[property], propertySpecity, false)) {\n      if (process.env.NODE_ENV === 'development' && props.debug) {\n        /* eslint-disable-next-line */\n        console.log(\n          `%c ${property}`,\n          'color: #818cf8;',\n          'updated as internal prop with higher specificity'\n        );\n      }\n      specificityMap[property] = propertySpecity;\n      // merging internal props (like, _text, _stack ...)\n      flattenProps[property] = merge(\n        {},\n        flattenProps[property],\n        props[property]\n      );\n    } else {\n      if (process.env.NODE_ENV === 'development' && props.debug) {\n        /* eslint-disable-next-line */\n        console.log(\n          `%c ${property}`,\n          'color: #818cf8;',\n          'updated as internal prop with lower specificity'\n        );\n      }\n      flattenProps[property] = merge(\n        {},\n        props[property],\n        flattenProps[property]\n      );\n    }\n  };\n  for (const property in props) {\n    // NOTE: the order is important here. Keep in mind while specificity breakpoints.\n    const propertySpecity = currentSpecificity\n      ? { ...currentSpecificity }\n      : {\n          ...INITIAL_PROP_SPECIFICITY,\n          [SPECIFICITY_20]: priority,\n        };\n\n    if (\n      // @ts-ignore\n      state[pseudoPropsMap[property]?.respondTo] ||\n      ['_dark', '_light', '_web', '_ios', '_android', '_important'].includes(\n        property\n      )\n    ) {\n      // @ts-ignore\n      if (shouldResolvePseudoProp({ property, state, platform, colormode })) {\n        // NOTE: Handling (state driven) props like _important, _web, _ios, _android, _dark, _light, _disabled, _focus, _focusVisible, _hover, _pressed, _readOnly, _invalid, .... Only when they are true.\n        if (process.env.NODE_ENV === 'development' && props.debug) {\n          /* eslint-disable-next-line */\n          console.log(\n            `%c ${property}`,\n            'color: #818cf8;',\n            'recursively resolving'\n          );\n        }\n        // @ts-ignore\n        propertySpecity[pseudoPropsMap[property].priority]++;\n        simplifyProps(\n          {\n            props: props[property],\n            colormode,\n            platform,\n            state,\n            currentSpecificity: propertySpecity,\n            previouslyFlattenProps: previouslyFlattenProps,\n            cascadePseudoProps,\n          },\n          flattenProps,\n          specificityMap,\n          priority\n        );\n      }\n      // @ts-ignore\n    } else if (pseudoPropsMap[property] === undefined) {\n      if (property.startsWith('_')) {\n        // NOTE: Handling (internal) props like _text, _stack, ....\n        mergePsuedoProps(property, propertySpecity);\n      } else {\n        if (\n          compareSpecificity(specificityMap[property], propertySpecity, false)\n        ) {\n          if (process.env.NODE_ENV === 'development' && props.debug) {\n            /* eslint-disable-next-line */\n            console.log(\n              `%c ${property}`,\n              'color: #818cf8;',\n              'updated as simple prop'\n            );\n          }\n          specificityMap[property] = propertySpecity;\n          // replacing simple props (like, p, m, bg, color, ...)\n          flattenProps[property] = props[property];\n        } else {\n          if (process.env.NODE_ENV === 'development' && props.debug) {\n            /* eslint-disable-next-line */\n            console.log(`%c ${property}`, 'color: #818cf8;', 'ignored');\n          }\n        }\n      }\n    } else {\n      // Can delete unused props\n      if (!cascadePseudoProps) {\n        delete flattenProps[property];\n        if (process.env.NODE_ENV === 'development' && props.debug) {\n          /* eslint-disable-next-line */\n          console.log(`%c ${property}`, 'color: #818cf8;', 'deleted');\n        }\n      } else {\n        if (process.env.NODE_ENV === 'development' && props.debug) {\n          /* eslint-disable-next-line */\n          console.log(`%c ${property}`, 'color: #818cf8;', 'cascaded');\n        }\n        mergePsuedoProps(property, propertySpecity);\n      }\n    }\n  }\n};\n\nexport const propsFlattener = (\n  {\n    props,\n    colormode,\n    platform,\n    state,\n    currentSpecificityMap,\n    previouslyFlattenProps,\n    cascadePseudoProps,\n  }: any,\n  priority: number\n) => {\n  const flattenProps: any = {};\n\n  for (const property in props) {\n    if (\n      // @ts-ignore\n      state[pseudoPropsMap[property]?.respondTo] === undefined &&\n      property.startsWith('_')\n    ) {\n      flattenProps[property] = previouslyFlattenProps[property];\n    }\n  }\n\n  const specificityMap = currentSpecificityMap || {};\n\n  simplifyProps(\n    {\n      props,\n      colormode,\n      platform,\n      state,\n      currentSpecificityMap,\n      previouslyFlattenProps,\n      cascadePseudoProps,\n    },\n    flattenProps,\n    specificityMap,\n    priority\n  );\n\n  return [flattenProps, specificityMap];\n};\n"
  },
  {
    "path": "src/hooks/useThemeProps/propsFlattenerTest.tsx",
    "content": "import merge from 'lodash.merge';\n\nconst SPECIFICITY_100 = 100;\nconst SPECIFICITY_70 = 70;\nconst SPECIFICITY_60 = 60;\nconst SPECIFICITY_55 = 55;\nconst SPECIFICITY_50 = 50;\nconst SPECIFICITY_40 = 40;\nconst SPECIFICITY_30 = 30;\nconst SPECIFICITY_10 = 10;\nconst SPECIFICITY_1 = 1;\nconst specificityPrecedence = [\n  SPECIFICITY_100,\n  SPECIFICITY_70,\n  SPECIFICITY_60,\n  SPECIFICITY_55,\n  SPECIFICITY_50,\n  SPECIFICITY_40,\n  SPECIFICITY_30,\n  SPECIFICITY_10,\n  SPECIFICITY_1,\n];\nconst INITIAL_PROP_SPECIFICITY = {\n  [SPECIFICITY_100]: 0,\n  [SPECIFICITY_70]: 0,\n  [SPECIFICITY_60]: 0,\n  [SPECIFICITY_50]: 0,\n  [SPECIFICITY_55]: 0,\n  [SPECIFICITY_40]: 0,\n  [SPECIFICITY_30]: 0,\n  [SPECIFICITY_10]: 0,\n  [SPECIFICITY_1]: 0,\n};\n\nconst pseudoPropsMap: any = {\n  _web: { dependentOn: 'platform', priority: SPECIFICITY_10 },\n  _ios: { dependentOn: 'platform', priority: SPECIFICITY_10 },\n  _android: { dependentOn: 'platform', priority: SPECIFICITY_10 },\n\n  _light: { dependentOn: 'colormode', priority: SPECIFICITY_10 },\n  _dark: { dependentOn: 'colormode', priority: SPECIFICITY_10 },\n\n  // TODO: have to add more interactionProps and stateProps\n  _indeterminate: {\n    dependentOn: 'state',\n    respondTo: 'isIndeterminate',\n    priority: SPECIFICITY_30,\n  },\n  _checked: {\n    dependentOn: 'state',\n    respondTo: 'isChecked',\n    priority: SPECIFICITY_30,\n  },\n  // Add new pseudeo props in between -------\n  _readOnly: {\n    dependentOn: 'state',\n    respondTo: 'isReadOnly',\n    priority: SPECIFICITY_30,\n  },\n  // Add new pseudeo props in between -------\n  _invalid: {\n    dependentOn: 'state',\n    respondTo: 'isInvalid',\n    priority: SPECIFICITY_40,\n  },\n  _focus: {\n    dependentOn: 'state',\n    respondTo: 'isFocused',\n    priority: SPECIFICITY_50,\n  },\n  _focusVisible: {\n    dependentOn: 'state',\n    respondTo: 'isFocusVisible',\n    priority: SPECIFICITY_55,\n  },\n  _hover: {\n    dependentOn: 'state',\n    respondTo: 'isHovered',\n    priority: SPECIFICITY_60,\n  },\n  _pressed: {\n    dependentOn: 'state',\n    respondTo: 'isPressed',\n    priority: SPECIFICITY_70,\n  },\n  _disabled: {\n    dependentOn: 'state',\n    respondTo: 'isDisabled',\n    priority: SPECIFICITY_100,\n  },\n};\n\nexport const compareSpecificity = (\n  exisiting: any,\n  upcoming: any,\n  ignorebaseTheme?: boolean\n  // property?: any\n) => {\n  if (!exisiting) return true;\n  if (!upcoming) return false;\n  const condition = ignorebaseTheme\n    ? specificityPrecedence.length - 1\n    : specificityPrecedence.length;\n  for (let index = 0; index < condition; index++) {\n    if (\n      exisiting[specificityPrecedence[index]] >\n      upcoming[specificityPrecedence[index]]\n    ) {\n      return false;\n    } else if (\n      exisiting[specificityPrecedence[index]] <\n      upcoming[specificityPrecedence[index]]\n    ) {\n      return true;\n    }\n  }\n  return true;\n};\n\nconst shouldResolvePseudoProp = ({\n  property,\n  state,\n  platform,\n  colormode,\n}: any) => {\n  if (pseudoPropsMap[property].dependentOn === 'platform') {\n    return property === `_${platform}`;\n  } else if (pseudoPropsMap[property].dependentOn === 'colormode') {\n    return property === `_${colormode}`;\n  } else if (pseudoPropsMap[property].dependentOn === 'state') {\n    return state[pseudoPropsMap[property].respondTo];\n  } else {\n    return false;\n  }\n};\n\nconst simplifyProps = (\n  {\n    props,\n    colormode,\n    platform,\n    state,\n    currentSpecificity,\n    previouslyFlattenProps,\n  }: any,\n  flattenProps: any = {},\n  specificityMap: any = {},\n  priority: number\n) => {\n  for (const property in props) {\n    // NOTE: the order is important here. Keep in mind while specificity breakpoints.\n    const propertySpecity = currentSpecificity\n      ? { ...currentSpecificity }\n      : {\n          ...INITIAL_PROP_SPECIFICITY,\n          [SPECIFICITY_1]: priority,\n        };\n\n    if (\n      state[pseudoPropsMap[property]?.respondTo] ||\n      ['_dark', '_light', '_web', '_ios', '_android'].includes(property)\n    ) {\n      if (shouldResolvePseudoProp({ property, state, platform, colormode })) {\n        propertySpecity[pseudoPropsMap[property].priority]++;\n\n        simplifyProps(\n          {\n            props: props[property],\n            colormode,\n            platform,\n            state,\n            currentSpecificity: propertySpecity,\n            previouslyFlattenProps: previouslyFlattenProps,\n          },\n          flattenProps,\n          specificityMap,\n          priority\n        );\n      }\n    } else if (state[pseudoPropsMap[property]?.respondTo] === undefined) {\n      if (property.startsWith('_')) {\n        if (\n          compareSpecificity(specificityMap[property], propertySpecity, false)\n        ) {\n          specificityMap[property] = propertySpecity;\n          // merging internal props (like, _text, _checked, ...)\n          flattenProps[property] = merge(\n            {},\n            flattenProps[property],\n            props[property]\n          );\n        } else {\n          flattenProps[property] = merge(\n            {},\n            props[property],\n            flattenProps[property]\n          );\n        }\n      } else {\n        if (\n          compareSpecificity(specificityMap[property], propertySpecity, false)\n        ) {\n          specificityMap[property] = propertySpecity;\n          // replacing simple props (like, p, m, bg, color, ...)\n          flattenProps[property] = props[property];\n        }\n      }\n    }\n  }\n};\n\nexport const propsFlattener = (\n  {\n    props,\n    colormode,\n    platform,\n    state,\n    currentSpecificityMap,\n    previouslyFlattenProps,\n  }: any,\n  priority: number\n) => {\n  const flattenProps: any = {};\n\n  for (const property in props) {\n    if (\n      state[pseudoPropsMap[property]?.respondTo] === undefined &&\n      property.startsWith('_')\n    ) {\n      flattenProps[property] = previouslyFlattenProps[property];\n    }\n  }\n\n  const specificityMap = currentSpecificityMap || {};\n\n  // STEP 1.a (if): Check weather it should be recursively resolved\n  // NOTE: (when true) recursively resolved it\n  // STEP 1.b (else if): Check specificty\n  // STEP 1.b.i: Check for pseudo props\n  // NOTE: (when true) Merge it.\n  // NOTE: (when false) Replace it.\n\n  simplifyProps(\n    {\n      props,\n      colormode,\n      platform,\n      state,\n      currentSpecificityMap,\n      previouslyFlattenProps,\n    },\n    flattenProps,\n    specificityMap,\n    priority\n  );\n\n  return [flattenProps, specificityMap];\n};\n"
  },
  {
    "path": "src/hooks/useThemeProps/useProps.tsx",
    "content": "import get from 'lodash.get';\nimport omit from 'lodash.omit';\nimport { useWindowDimensions, Platform } from 'react-native';\nimport { useNativeBase } from './../useNativeBase';\nimport { omitUndefined, extractInObject } from './../../theme/tools/';\nimport { filterShadowProps } from './../../utils/filterShadowProps';\nimport { calculateProps } from './utils';\n\nconst filterAndCalculateProps = (\n  theme: any,\n  colorModeProps: any,\n  componentTheme: any,\n  propsReceived: any,\n  windowWidth: any\n) => {\n  // Extracting out children and style, as they do not contribute in props calculation\n  // This is done as these props are passed as it is later in the development\n  // Required as some of these will trigger cyclic computation which may lead to error\n  let [ignoredProps, props] = extractInObject(propsReceived, [\n    'children',\n    'style',\n    'onPress',\n    'icon',\n    'onOpen',\n    'onClose',\n  ]);\n  let newProps = calculateProps(\n    theme,\n    colorModeProps,\n    componentTheme,\n    props,\n    windowWidth\n  );\n  let mergedProps = filterShadowProps(newProps, ignoredProps, Platform.OS);\n  return omitUndefined(mergedProps);\n};\n\nexport function useThemeProps(component: string, propsReceived: any) {\n  const { theme, ...colorModeProps } = useNativeBase();\n  // console.log('THEME = ', theme);\n\n  const componentTheme = get(theme, `components.${component}`);\n  // console.log('COMPONENT THEME = ', componentTheme);\n  const windowWidth = useWindowDimensions()?.width;\n\n  // To pass the component theme props and component props seperately\n  return filterAndCalculateProps(\n    omit(theme, ['components']),\n    colorModeProps,\n    componentTheme,\n    propsReceived,\n    windowWidth\n  );\n}\n"
  },
  {
    "path": "src/hooks/useThemeProps/usePropsResolution.test.tsx",
    "content": "import React from 'react';\nimport { render } from '@testing-library/react-native';\nimport { theme as defaultTheme } from '../../theme';\nimport { NativeBaseProvider } from '../../core/NativeBaseProvider';\nimport {\n  Box,\n  Button,\n  Pressable,\n  // Select,\n  Image,\n  Spinner,\n  Text,\n  Input,\n  Checkbox,\n  Slider,\n  // Icon,\n  HStack,\n  Heading,\n} from '../../components/primitives';\n// import { Ionicons } from '@expo/vector-icons';\nimport { FormControl, Menu } from '../../components/composites';\nimport { Platform } from 'react-native';\nimport { extendTheme } from '../../core/extendTheme';\nimport { fireEvent } from '@testing-library/react-native';\n// import { InfoIcon } from '../../components/primitives/Icon/Icons';\n\nconst inset = {\n  frame: { x: 0, y: 0, width: 0, height: 0 },\n  insets: { top: 0, left: 0, right: 0, bottom: 0 },\n};\n\nconst Provider = ({ children, theme = defaultTheme }: any) => {\n  return (\n    <NativeBaseProvider initialWindowMetrics={inset} theme={theme}>\n      {children}\n    </NativeBaseProvider>\n  );\n};\n\nfunction CheckBoxGroup() {\n  const [groupValue, setGroupValue] = React.useState(['Item 1 ', 'Item 3 ']);\n  return (\n    <Checkbox.Group\n      colorScheme=\"green\"\n      defaultValue={groupValue}\n      onChange={(values) => {\n        setGroupValue(values || []);\n      }}\n    >\n      <Checkbox value=\"Item 1 \">\n        <Text mx={2}>Item 1</Text>\n      </Checkbox>\n      <Checkbox value=\"Item 2 \">\n        <Text mx={2}>Item 2</Text>\n      </Checkbox>\n      <Checkbox value=\"Item 3 \">\n        <Text mx={2}>Item 3</Text>\n      </Checkbox>\n      <Checkbox colorScheme=\"orange\" value=\"Indeterminate Item \">\n        <Text mx={2}>Indeterminate Item</Text>\n      </Checkbox>\n    </Checkbox.Group>\n  );\n}\n\ndescribe('props resolution', () => {\n  it('tests simple resolution', () => {\n    const { getByTestId } = render(\n      <Provider>\n        <Box p={2} testID=\"test\">\n          hello world\n        </Box>\n      </Provider>\n    );\n    const box = getByTestId('test');\n    expect(box.props.style.paddingLeft).toBe(defaultTheme.space['2']);\n    expect(box.props.style.paddingRight).toBe(defaultTheme.space['2']);\n    expect(box.props.style.paddingTop).toBe(defaultTheme.space['2']);\n    expect(box.props.style.paddingBottom).toBe(defaultTheme.space['2']);\n  });\n\n  it('tests simple resolution with responsive props', () => {\n    const { getByTestId } = render(\n      <Provider>\n        <Box p={[2, 4, 5]} testID=\"test\">\n          hello world\n        </Box>\n        <Box p={{ base: 1, sm: 5, lg: 10 }} testID=\"test2\">\n          hello world\n        </Box>\n      </Provider>\n    );\n\n    const box = getByTestId('test');\n    expect(box.props.style.paddingLeft).toBe(defaultTheme.space['4']);\n    expect(box.props.style.paddingRight).toBe(defaultTheme.space['4']);\n    expect(box.props.style.paddingTop).toBe(defaultTheme.space['4']);\n    expect(box.props.style.paddingBottom).toBe(defaultTheme.space['4']);\n    const box2 = getByTestId('test2');\n    expect(box2.props.style.paddingLeft).toBe(defaultTheme.space['5']);\n    expect(box2.props.style.paddingRight).toBe(defaultTheme.space['5']);\n    expect(box2.props.style.paddingTop).toBe(defaultTheme.space['5']);\n    expect(box2.props.style.paddingBottom).toBe(defaultTheme.space['5']);\n  });\n\n  it('resolves platform props', () => {\n    Platform.OS = 'android';\n    const { getByTestId } = render(\n      <Provider>\n        <Box p={5} _android={{ p: 10 }} testID=\"test\">\n          hello world\n        </Box>\n      </Provider>\n    );\n    const box = getByTestId('test');\n    expect(box.props.style.paddingLeft).toBe(defaultTheme.space['10']);\n    expect(box.props.style.paddingRight).toBe(defaultTheme.space['10']);\n    expect(box.props.style.paddingTop).toBe(defaultTheme.space['10']);\n    expect(box.props.style.paddingBottom).toBe(defaultTheme.space['10']);\n  });\n\n  it('resolves base style with props', () => {\n    const newTheme = extendTheme({\n      components: {\n        Box: {\n          baseStyle: {\n            py: 10,\n            bg: 'cyan.500',\n          },\n        },\n      },\n    });\n    const { getByTestId } = render(\n      <Provider theme={newTheme}>\n        <Box p={5} testID=\"test\">\n          hello world\n        </Box>\n      </Provider>\n    );\n    const box = getByTestId('test');\n    expect(box.props.style).toEqual({\n      paddingTop: newTheme.space['5'],\n      paddingBottom: newTheme.space['5'],\n      paddingLeft: newTheme.space['5'],\n      paddingRight: newTheme.space['5'],\n      backgroundColor: newTheme.colors.cyan['500'],\n    });\n  });\n\n  it('resolves base style and variants with props', () => {\n    const newTheme = extendTheme({\n      components: {\n        Box: {\n          baseStyle: {\n            py: 10,\n            bg: 'cyan.500',\n          },\n          variants: {\n            myBox: () => ({\n              mt: 10,\n            }),\n          },\n        },\n      },\n    });\n    const { getByTestId } = render(\n      <Provider theme={newTheme}>\n        <Box\n          p={5}\n          testID=\"test\"\n          //@ts-ignore\n          variant=\"myBox\"\n        >\n          hello world\n        </Box>\n      </Provider>\n    );\n    const box = getByTestId('test');\n    expect(box.props.style).toEqual({\n      marginTop: newTheme.space['10'],\n      paddingTop: newTheme.space['5'],\n      paddingBottom: newTheme.space['5'],\n      paddingLeft: newTheme.space['5'],\n      paddingRight: newTheme.space['5'],\n      backgroundColor: newTheme.colors.cyan['500'],\n    });\n  });\n\n  it('resolves base style, variants and sizes with props', () => {\n    const newTheme = extendTheme({\n      components: {\n        Box: {\n          baseStyle: {\n            py: 10,\n            bg: 'cyan.500',\n          },\n          variants: {\n            myBox: () => ({\n              mt: 10,\n            }),\n          },\n          sizes: {\n            xs: {\n              height: 10,\n            },\n          },\n        },\n      },\n    });\n    const { getByTestId } = render(\n      <Provider theme={newTheme}>\n        <Box\n          p={5}\n          testID=\"test\"\n          //@ts-ignore\n          variant=\"myBox\"\n          //@ts-ignore\n          // size=\"xs\"\n        >\n          hello world\n        </Box>\n      </Provider>\n    );\n    const box = getByTestId('test');\n    expect(box.props.style).toEqual({\n      marginTop: newTheme.space['10'],\n      paddingTop: newTheme.space['5'],\n      paddingBottom: newTheme.space['5'],\n      paddingLeft: newTheme.space['5'],\n      paddingRight: newTheme.space['5'],\n      height: newTheme.sizes['10'],\n      backgroundColor: newTheme.colors.cyan['500'],\n    });\n  });\n\n  it('tests component sizes resolution', () => {\n    const { getByTestId } = render(\n      <Provider>\n        <Image\n          source={{ uri: 'https://nativebase.io/img/nativebase-logo.svg' }}\n          alt=\"test-image\"\n          size=\"md\"\n          testID=\"image\"\n        />\n        <Spinner size=\"sm\" testID=\"spinner\" />\n      </Provider>\n    );\n    const image = getByTestId('image');\n    const spinner = getByTestId('spinner');\n    expect(image.props.style).toEqual({\n      height: defaultTheme.space['20'],\n      maxWidth: '100%',\n      width: defaultTheme.space['20'],\n    });\n\n    expect(spinner.props.style).toEqual([[{}, { dataSet: {} }], undefined]);\n  });\n\n  it('resolves base style and variants, sizes and default props with props', () => {\n    const newTheme = extendTheme({\n      components: {\n        Box: {\n          baseStyle: {\n            py: 10,\n            bg: 'cyan.500',\n          },\n          variants: {\n            myBox: () => ({\n              mt: 10,\n            }),\n          },\n          sizes: {\n            xs: {\n              height: 10,\n            },\n          },\n          defaultProps: {\n            size: 'xs',\n          },\n        },\n      },\n    });\n\n    const { getByTestId } = render(\n      <Provider theme={newTheme}>\n        <Box\n          p={5}\n          testID=\"test\"\n          //@ts-ignore\n          variant=\"myBox\"\n        >\n          hello world\n        </Box>\n      </Provider>\n    );\n    const box = getByTestId('test');\n    expect(box.props.style).toEqual({\n      marginTop: newTheme.space['10'],\n      paddingTop: newTheme.space['5'],\n      paddingBottom: newTheme.space['5'],\n      paddingLeft: newTheme.space['5'],\n      paddingRight: newTheme.space['5'],\n      height: newTheme.sizes['10'],\n      backgroundColor: newTheme.colors.cyan['500'],\n    });\n  });\n\n  it('tests alpha opacity resolution', () => {\n    const { getByTestId } = render(\n      <Provider>\n        <Box p={2} bg=\"primary.400:alpha.50\" testID=\"test\">\n          hello world\n        </Box>\n      </Provider>\n    );\n    const box = getByTestId('test');\n    expect(box.props.style.backgroundColor).toBe(\n      'rgba(34, 211, 238, ' + defaultTheme.opacity['50'] + ')'\n    );\n  });\n\n  it('resolves negative margins', () => {\n    const { getByTestId } = render(\n      <Provider>\n        <Box m={-5} mt={'-10'} testID=\"test\">\n          hello world\n        </Box>\n      </Provider>\n    );\n    const box = getByTestId('test');\n    expect(box.props.style).toEqual({\n      marginTop: -defaultTheme.space['10'],\n      marginRight: -defaultTheme.space['5'],\n      marginBottom: -defaultTheme.space['5'],\n      marginLeft: -defaultTheme.space['5'],\n    });\n  });\n\n  it('resolves shadow from theme', () => {\n    const { getByTestId } = render(\n      <Provider>\n        <Box shadow={9} testID=\"test\">\n          hello world\n        </Box>\n      </Provider>\n    );\n    const box = getByTestId('test');\n    expect(box.props.style).toEqual(defaultTheme.shadows[9]);\n  });\n\n  it('FormControl: pseudo props test ', () => {\n    const { getByTestId } = render(\n      <Provider>\n        <FormControl isDisabled>\n          <FormControl.HelperText\n            testID=\"test\"\n            _disabled={{\n              borderLeftWidth: 1,\n              mt: 1,\n              px: 1,\n              pl: 2,\n              borderColor: 'gray.400',\n            }}\n          />\n        </FormControl>\n      </Provider>\n    );\n    const formControl = getByTestId('test');\n    expect(formControl.props.style).toEqual({\n      borderLeftWidth: 1,\n      marginTop: defaultTheme.space['1'],\n      paddingLeft: defaultTheme.space['2'],\n      paddingRight: defaultTheme.space['1'],\n      borderColor: defaultTheme.colors.gray['400'],\n    });\n  });\n\n  it('Menu: style props test', () => {\n    const { getByTestId } = render(\n      <Provider>\n        <Menu\n          trigger={(triggerProps) => {\n            return (\n              <Pressable\n                testID=\"pressableTest\"\n                accessibilityLabel=\"More options menu\"\n                {...triggerProps}\n              >\n                Open menu\n              </Pressable>\n            );\n          }}\n        >\n          <Menu.Item>Arial</Menu.Item>\n          <Menu.Item bg=\"blue.300\" testID=\"test\">\n            Nunito Sans\n          </Menu.Item>\n          <Menu.Item testID=\"test1\" isDisabled _disabled={{ bg: 'pink.300' }}>\n            Tahoma\n          </Menu.Item>\n        </Menu>\n      </Provider>\n    );\n    const triggerElement = getByTestId('pressableTest');\n    fireEvent.press(triggerElement);\n    const menuItem = getByTestId('test');\n    const disabledMenuItem = getByTestId('test1');\n    expect(menuItem.props.style.backgroundColor).toBe(\n      defaultTheme.colors.blue['300']\n    );\n    expect(disabledMenuItem.props.style.backgroundColor).toBe(\n      defaultTheme.colors.pink['300']\n    );\n  });\n\n  it('Button: style props test', () => {\n    const { getByTestId } = render(\n      <Provider>\n        <Button\n          testID=\"test\"\n          bg=\"pink.900\"\n          _text={{ color: 'cyan.100', testID: 'test1' }}\n        >\n          PRIMARY\n        </Button>\n      </Provider>\n    );\n    const buttonElement = getByTestId('test');\n    const buttonText = getByTestId('test1');\n    expect(buttonText.props.style.color).toBe(defaultTheme.colors.cyan['100']);\n    expect(buttonElement.props.style.backgroundColor).toBe(\n      defaultTheme.colors.pink['900']\n    );\n  });\n  it('Button: style props test on ios with dark mode', () => {\n    const newTheme = extendTheme({\n      config: { initialColorMode: 'dark' },\n    });\n    Platform.OS = 'ios';\n    const { getByTestId } = render(\n      <Provider theme={newTheme}>\n        <Button\n          testID=\"test\"\n          _ios={{ _dark: { bg: 'pink.900' } }}\n          _text={{ color: 'cyan.100', testID: 'test1' }}\n        >\n          PRIMARY\n        </Button>\n      </Provider>\n    );\n    const buttonElement = getByTestId('test');\n    const buttonText = getByTestId('test1');\n    expect(buttonText.props.style.color).toBe(defaultTheme.colors.cyan['100']);\n    expect(buttonElement.props.style.backgroundColor).toBe(\n      defaultTheme.colors.pink['900']\n    );\n  });\n  it('Button: style responsive props test on ios with dark mode', () => {\n    const newTheme = extendTheme({\n      config: { initialColorMode: 'dark' },\n    });\n    Platform.OS = 'ios';\n    const { getByTestId } = render(\n      <Provider theme={newTheme}>\n        <Button\n          testID=\"test\"\n          _ios={{ _dark: { bg: ['pink.900', 'blue.900', 'cyan.900'] } }}\n          _text={{ color: 'cyan.100', testID: 'test1' }}\n        >\n          PRIMARY\n        </Button>\n      </Provider>\n    );\n    const buttonElement = getByTestId('test');\n    const buttonText = getByTestId('test1');\n    expect(buttonText.props.style.color).toBe(defaultTheme.colors.cyan['100']);\n    expect(buttonElement.props.style.backgroundColor).toBe(\n      defaultTheme.colors.blue['900']\n    );\n  });\n  it('Image: style responsive props test on ios with dark mode', () => {\n    const newTheme = extendTheme({\n      config: { initialColorMode: 'dark' },\n    });\n    Platform.OS = 'ios';\n    const { getByTestId } = render(\n      <Provider theme={newTheme}>\n        <Image\n          testID=\"test\"\n          source={{\n            uri: 'https://wallpaperaccess.com/full/317501jpg',\n          }}\n          alt=\"Alternate Text\"\n          _ios={{\n            _dark: {\n              source: {\n                uri: 'https://www.w3schools.com/css/img_lightsjpg',\n              },\n              size: ['sm', 'md', 'xl'],\n            },\n          }}\n        />\n      </Provider>\n    );\n    const imageElement = getByTestId('test');\n    expect(imageElement.props.style).toEqual({\n      height: defaultTheme.space['20'],\n      maxWidth: '100%',\n      width: defaultTheme.space['20'],\n    });\n  });\n\n  it('Input: Basic check', () => {\n    const { getByTestId } = render(\n      <Provider>\n        <Input\n          _stack={{ testID: 'StackTest' }}\n          _input={{ testID: 'test' }}\n          w=\"100%\"\n          mx={3}\n          placeholder=\"Default Input\"\n          placeholderTextColor=\"blueGray.400\"\n        />\n      </Provider>\n    );\n    const inputElement = getByTestId('test');\n    const inputElementStack = getByTestId('StackTest');\n    expect(inputElement.props.style.width).toBe('100%');\n    expect(inputElement.props.placeholderTextColor).toBe(\n      defaultTheme.colors.blueGray['400']\n    );\n    expect(inputElementStack.props.style.marginLeft).toBe(\n      defaultTheme.space['3']\n    );\n    expect(inputElementStack.props.style.marginRight).toBe(\n      defaultTheme.space['3']\n    );\n  });\n\n  it('Input: color mode', () => {\n    const newTheme = extendTheme({\n      config: { initialColorMode: 'dark' },\n    });\n    const { getByTestId } = render(\n      <Provider theme={newTheme}>\n        <Input\n          _input={{ testID: 'test' }}\n          _light={{\n            placeholderTextColor: 'blueGray.400',\n          }}\n          _dark={{\n            placeholderTextColor: 'blueGray.50',\n          }}\n        />\n      </Provider>\n    );\n    const inputElement = getByTestId('test');\n    expect(inputElement.props.placeholderTextColor).toBe(\n      defaultTheme.colors.blueGray['50']\n    );\n  });\n\n  it('Input: size', () => {\n    const newTheme = extendTheme({\n      config: { initialColorMode: 'dark' },\n    });\n    const { getByTestId } = render(\n      <Provider theme={newTheme}>\n        <Input\n          _input={{ testID: 'test' }}\n          size=\"sm\"\n          variant=\"outline\"\n          _dark={{\n            size: 'md',\n          }}\n        />\n      </Provider>\n    );\n    const inputElement = getByTestId('test');\n    expect(inputElement.props.style.fontSize).toBe(defaultTheme.fontSizes.sm);\n  });\n\n  it('Input: variant', () => {\n    const { getByTestId } = render(\n      <Provider>\n        <Input _stack={{ testID: 'test' }} variant=\"underlined\" />\n      </Provider>\n    );\n    const inputElement = getByTestId('test');\n    expect(inputElement.props.style.borderBottomWidth).toBe(1);\n  });\n\n  // it('Input: inputElements', () => {\n  //   const { getByTestId } = render(\n  //     <Provider>\n  //       <Input\n  //         testID=\"test1\"\n  //         InputLeftElement={<Button testID=\"test2\">leftIcon</Button>}\n  //         placeholder=\"Input\"\n  //       />\n  //     </Provider>\n  //   );\n  //   const inputElement = getByTestId('test1');\n  //   const iconElement = getByTestId('test2');\n  //   console.log(inputElement, '!!!!!');\n  //   console.log('===========');\n  //   console.log(inputElement.props, '!!!!!');\n  //   expect(inputElement.props.InputLeftElement).toBe(iconElement);\n  // });\n  it('Input: style props test on ios with dark mode', () => {\n    const newTheme = extendTheme({\n      config: { initialColorMode: 'dark' },\n    });\n    Platform.OS = 'ios';\n    const { getByTestId } = render(\n      <Provider theme={newTheme}>\n        <Input\n          _stack={{ testID: 'stackTest' }}\n          _input={{ testID: 'test' }}\n          _ios={{ _dark: { variant: 'underlined', size: 'sm' } }}\n          variant=\"outline\"\n          size=\"lg\"\n        />\n      </Provider>\n    );\n    const inputElement = getByTestId('test');\n    const inputElementStack = getByTestId('stackTest');\n    expect(inputElementStack.props.style.borderBottomWidth).toBe(1);\n    // as input of 'sm' size is mapped to 'xs' fontsize\n    expect(inputElement.props.style.fontSize).toBe(defaultTheme.fontSizes.xs);\n  });\n\n  // it('Input: inputElemets', () => {\n  //   const { getByTestId } = render(\n  //     <Provider>\n  //       <Input\n  //         testID=\"test1\"\n  //         InputLeftElement={<Button testID=\"test2\">leftIcon</Button>}\n  //         placeholder=\"Input\"\n  //       />\n  //     </Provider>\n  //   );\n  //   const inputElement = getByTestId('test1');\n  //   const iconElement = getByTestId('test2');\n  //   console.log(inputElement, '!!!!!');\n  //   console.log('===========');\n  //   console.log(inputElement.props, '!!!!!');\n  //   expect(inputElement.props.InputLeftElement).toBe(iconElement);\n  // });\n\n  it('Input: disabled', () => {\n    const { getByTestId } = render(\n      <Provider>\n        <Input\n          _input={{ testID: 'test' }}\n          type=\"password\"\n          isDisabled={true}\n          isRequired={true}\n        />\n      </Provider>\n    );\n    const inputElement = getByTestId('test');\n    expect(inputElement.props.disabled).toBe(true);\n    expect(inputElement.props.required).toBe(true);\n  });\n\n  // ==========================================\n\n  it('handles defaults and onChange on checkBoxGroup', () => {\n    const { getAllByRole } = render(\n      <Provider\n        initialWindowMetrics={{\n          frame: { x: 0, y: 0, width: 0, height: 0 },\n          insets: { top: 0, left: 0, right: 0, bottom: 0 },\n        }}\n      >\n        <CheckBoxGroup />\n      </Provider>\n    );\n    const checkbox = getAllByRole('checkbox');\n    expect(checkbox.length).toBe(4);\n    expect(checkbox[0].props.accessibilityState.checked).toBe(true);\n    expect(checkbox[1].props.accessibilityState.checked).toBe(false);\n    expect(checkbox[2].props.accessibilityState.checked).toBe(true);\n    expect(checkbox[3].props.accessibilityState.checked).toBe(false);\n    fireEvent.press(checkbox[1]);\n    expect(checkbox[1].props.accessibilityState.checked).toBe(true);\n  });\n\n  it('checkBox: disabled, checked', () => {\n    const { getAllByRole } = render(\n      <Provider\n        initialWindowMetrics={{\n          frame: { x: 0, y: 0, width: 0, height: 0 },\n          insets: { top: 0, left: 0, right: 0, bottom: 0 },\n        }}\n      >\n        <Checkbox value=\"Item 1 \">\n          <Text mx={2}>Item 1</Text>\n        </Checkbox>\n        <Checkbox value=\"Item 2 \" isDisabled>\n          <Text mx={2}>Item 2</Text>\n        </Checkbox>\n        <Checkbox value=\"Item 3\" isChecked>\n          <Text mx={2}>Item 3</Text>\n        </Checkbox>\n        <Checkbox colorScheme=\"orange\" value=\"Indeterminate Item\" isInvalid>\n          <Text mx={2}>Indeterminate Item</Text>\n        </Checkbox>\n      </Provider>\n    );\n    const checkbox = getAllByRole('checkbox');\n    expect(checkbox.length).toBe(4);\n    expect(checkbox[1].props.accessibilityState.disabled).toBe(true);\n    expect(checkbox[2].props.accessibilityState.checked).toBe(true);\n    // expect(checkbox[3].props.accessibilityState.invalid).toBe(true);\n  });\n\n  // it('Checkbox: style props test with dark mode', () => {\n  //   const newTheme = extendTheme({\n  //     config: { initialColorMode: 'dark' },\n  //   });\n  //   const { getAllByRole } = render(\n  //     <Provider theme={newTheme}>\n  //       <Checkbox\n  //         value=\"Item 1\"\n  //         isChecked={true}\n  //         isDisabled={false}\n  //         _dark={{\n  //           isChecked: false,\n  //           isDisabled: true,\n  //         }}\n  //       >\n  //         <Text mx={2}>Item 1</Text>\n  //       </Checkbox>\n  //     </Provider>\n  //   );\n\n  //   let checkbox = getAllByRole('checkbox');\n  //   console.log(checkbox[0].props.accessibilityState, '@@@@');\n  //   expect(checkbox[0].props.accessibilityState.checked).toBe(false);\n  //   expect(checkbox[0].props.accessibilityState.disabled).toBe(true);\n  // });\n\n  // it('Checkbox: style props test on ios with dark mode', () => {\n  //   const newTheme = extendTheme({\n  //     config: { initialColorMode: 'dark' },\n  //   });\n  //   Platform.OS = 'ios';\n  //   const { getAllByRole } = render(\n  //     <Provider theme={newTheme}>\n  //       <Checkbox\n  //         value=\"Item 1\"\n  //         isChecked={true}\n  //         isDisabled={false}\n  //         _ios={{\n  //           _dark: {\n  //             isChecked: false,\n  //             isDisabled: true,\n  //           },\n  //         }}\n  //       >\n  //         <Text mx={2}>Item 1</Text>\n  //       </Checkbox>\n  //     </Provider>\n  //   );\n\n  //   let checkbox = getAllByRole('checkbox');\n  //   console.log(checkbox[0].props.accessibilityState, '@@@@');\n  //   expect(checkbox[0].props.accessibilityState.checked).toBe(false);\n  //   expect(checkbox[0].props.accessibilityState.disabled).toBe(true);\n  // });\n\n  it('onChange on checkBox', () => {\n    const { getAllByRole } = render(\n      <Provider\n        initialWindowMetrics={{\n          frame: { x: 0, y: 0, width: 0, height: 0 },\n          insets: { top: 0, left: 0, right: 0, bottom: 0 },\n        }}\n      >\n        <Checkbox value=\"item 1\" />\n      </Provider>\n    );\n    const checkbox = getAllByRole('checkbox');\n    expect(checkbox.length).toBe(1);\n    fireEvent.press(checkbox[0]);\n    expect(checkbox[0].props.accessibilityState.checked).toBe(true);\n  });\n\n  // it('CustomIcon checkBox', () => {\n  //   let { getAllByRole, getByTestId } = render(\n  //     <Provider>\n  //       <Checkbox\n  //         value=\"orange\"\n  //         colorScheme=\"orange\"\n  //         size=\"md\"\n  //         icon={<Icon testID=\"icon\" as={<InfoIcon />} />}\n  //         defaultIsChecked\n  //       >\n  //         Info\n  //       </Checkbox>\n  //     </Provider>\n  //   );\n  //   let checkbox = getAllByRole('checkbox');\n  //   let nestedIcon = getByTestId('icon');\n\n  //   expect(checkbox[0].props.icon).toBe(nestedIcon);\n  // });\n\n  //  ==========================================\n  it('Slider: basic', () => {\n    const { getByTestId } = render(\n      <Provider>\n        <Slider\n          testID=\"slider\"\n          // Need to test\n          // defaultValue={70}\n          minValue={0}\n          maxValue={100}\n          accessibilityLabel=\"hello world\"\n          step={10}\n          colorScheme=\"red\"\n          size=\"sm\"\n        >\n          <Slider.Track>\n            <Slider.FilledTrack />\n          </Slider.Track>\n          <Slider.Thumb />\n        </Slider>\n      </Provider>\n    );\n    const sliderElement = getByTestId('slider');\n    expect(sliderElement.props.minValue).toBe(0);\n    expect(sliderElement.props.maxValue).toBe(100);\n    expect(sliderElement.props.step).toBe(10);\n    expect(sliderElement.props.thumbSize).toBe(4);\n    expect(sliderElement.props.sliderSize).toBe(4);\n    expect(sliderElement.props.colorScheme).toBe('red');\n  });\n\n  //  ==========================================\n  // it('Modal: size', () => {\n  //   const { getByTestId } = render(\n  //     <Provider>\n  //       <Modal isOpen={true} size=\"sm\">\n  //         <Modal.Content testID=\"size\">\n  //           <Modal.Header>Modal Title</Modal.Header>\n  //           <Modal.Body>\n  //             Sit nulla est ex deserunt exercitation anim occaecat. Nostrud\n  //             ullamco deserunt aute id consequat veniam incididunt duis in sint\n  //             irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit\n  //             officia tempor esse quis. Sunt ad dolore quis aute consequat.\n  //             Magna exercitation reprehenderit magna aute tempor cupidatat\n  //             consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex\n  //             incididunt cillum quis. Velit duis sit officia eiusmod Lorem\n  //             aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi\n  //             consectetur esse laborum eiusmod pariatur\n  //           </Modal.Body>\n  //         </Modal.Content>\n  //       </Modal>\n  //     </Provider>\n  //   );\n  //   const modalElement = getByTestId('size');\n  //   // console.log(modalElement, 'jdj');\n  //   expect(modalElement.props.style.width).toBe('60%');\n  // });\n  it('Slider: style props test with dark mode', () => {\n    const newTheme = extendTheme({\n      config: { initialColorMode: 'dark' },\n    });\n    const { getByTestId } = render(\n      <Provider theme={newTheme}>\n        <Slider\n          testID=\"test\"\n          _dark={{\n            minValue: 20,\n            maxValue: 120,\n            step: 25,\n            colorScheme: 'blue',\n            size: 'md',\n          }}\n          minValue={0}\n          maxValue={100}\n          accessibilityLabel=\"hello world\"\n          step={10}\n          colorScheme=\"red\"\n          size=\"sm\"\n        >\n          <Slider.Track>\n            <Slider.FilledTrack />\n          </Slider.Track>\n          <Slider.Thumb />\n        </Slider>\n      </Provider>\n    );\n\n    const sliderElement = getByTestId('test');\n    expect(sliderElement.props.minValue).toBe(20);\n    expect(sliderElement.props.maxValue).toBe(120);\n    expect(sliderElement.props.step).toBe(25);\n    expect(sliderElement.props.thumbSize).toBe(5);\n    expect(sliderElement.props.sliderSize).toBe(5);\n    expect(sliderElement.props.colorScheme).toBe('blue');\n  });\n  it('tests lineHeight & letterspacing in text ', () => {\n    const { getByTestId } = render(\n      <Provider>\n        <Text\n          /* @ts-ignore */\n          fontSize=\"20px\"\n          lineHeight=\"5xl\"\n          letterSpacing=\"xl\"\n          testID=\"test\"\n        >\n          This is a text\n        </Text>\n      </Provider>\n    );\n\n    const text = getByTestId('test');\n    expect(text.props.style.lineHeight).toBe(80);\n    expect(text.props.style.letterSpacing).toBe(1);\n  });\n\n  it('Slider: style props test on ios with dark mode', () => {\n    const newTheme = extendTheme({\n      config: { initialColorMode: 'dark' },\n    });\n    Platform.OS = 'ios';\n    const { getByTestId } = render(\n      <Provider theme={newTheme}>\n        <Slider\n          testID=\"test\"\n          _ios={{\n            _dark: {\n              minValue: 10,\n              maxValue: 110,\n              step: 15,\n              colorScheme: 'green',\n              size: 'md',\n            },\n          }}\n          minValue={0}\n          maxValue={100}\n          accessibilityLabel=\"hello world\"\n          step={10}\n          colorScheme=\"red\"\n          size=\"sm\"\n        >\n          <Slider.Track>\n            <Slider.FilledTrack />\n          </Slider.Track>\n          <Slider.Thumb />\n        </Slider>\n      </Provider>\n    );\n\n    const sliderElement = getByTestId('test');\n    expect(sliderElement.props.minValue).toBe(10);\n    expect(sliderElement.props.maxValue).toBe(110);\n    expect(sliderElement.props.step).toBe(15);\n    expect(sliderElement.props.thumbSize).toBe(5);\n    expect(sliderElement.props.sliderSize).toBe(5);\n    expect(sliderElement.props.colorScheme).toBe('green');\n  });\n\n  it('HStack: basic', () => {\n    const { getByTestId } = render(\n      <Provider>\n        <HStack testID=\"hstack\">\n          <Box>1</Box>\n          <Box>2</Box>\n          <Box>3</Box>\n        </HStack>\n      </Provider>\n    );\n    const hstackElement = getByTestId('hstack');\n    expect(hstackElement.props.style.flexDirection).toBe('row');\n  });\n\n  it('HStack: direction', () => {\n    const { getByTestId } = render(\n      <Provider>\n        <HStack testID=\"test\" direction=\"column\">\n          <Box>1</Box>\n          <Box>2</Box>\n          <Box>3</Box>\n        </HStack>\n      </Provider>\n    );\n    const hstackElement = getByTestId('test');\n    expect(hstackElement.props.style.flexDirection).toBe('column');\n  });\n\n  // it('Icon: basic', () => {\n  //   const { getByTestId } = render(\n  //     <Provider>\n  //       <Icon as={<Ionicons name=\"md-checkmark-circle\" />} />\n  //     </Provider>\n  //   );\n  //   const iconElement = getByTestId('test123');\n  //   expect(iconElement.props.style.backgroundColor).toBe(\n  //     defaultTheme.colors.red['200']\n  //   );\n  // });\n\n  // it('Icon: Nativebase icons', () => {\n  //   const { getByTestId } = render(\n  //     <Provider>\n  //       <MoonIcon testId=\"test\" />\n  //     </Provider>\n  //   );\n  //   const iconElement = getByTestId('test');\n  //   expect(pressableElement.props.style.backgroundColor).toBe(\n  //     defaultTheme.colors.red['200']\n  //   );\n  // });\n\n  it('Pressable: style props test', () => {\n    const { getByTestId } = render(\n      <Provider>\n        <Pressable testID=\"test\" bg=\"red.200\" _hover={{ bg: 'teal.300' }}>\n          <Text>hello world</Text>\n        </Pressable>\n      </Provider>\n    );\n    const pressableElement = getByTestId('test');\n    expect(pressableElement.props.style.backgroundColor).toBe(\n      defaultTheme.colors.red['200']\n    );\n  });\n\n  // it('Pressable: style props test on ios with dark mode', () => {\n  //   const newTheme = extendTheme({\n  //     config: { initialColorMode: 'dark' },\n  //   });\n\n  //   Platform.OS = 'ios';\n  //   const { getByTestId } = render(\n  //     <Provider theme={newTheme}>\n  //       <Pressable testID=\"test\" _ios={{ _dark: { bg: 'pink.900' } }}>\n  //         PRIMARY\n  //       </Pressable>\n  //     </Provider>\n  //   );\n  //   const buttonElement = getByTestId('test');\n  //   expect(buttonElement.props.style.backgroundColor).toBe(\n  //     defaultTheme.colors.pink['900']\n  //   );\n  // });\n\n  // it('Pressable: style responsive props test on ios with dark mode', () => {\n  //   const newTheme = extendTheme({\n  //     config: { initialColorMode: 'dark' },\n  //   });\n  //   Platform.OS = 'ios';\n  //   const { getByTestId } = render(\n  //     <Provider theme={newTheme}>\n  //       <Pressable\n  //         testID=\"test\"\n  //         _ios={{ _dark: { bg: ['pink.900', 'blue.900', 'cyan.900'] } }}\n  //       >\n  //         PRIMARY\n  //       </Pressable>\n  //     </Provider>\n  //   );\n  //   const buttonElement = getByTestId('test');\n  //   expect(buttonElement.props.style.backgroundColor).toBe(\n  //     defaultTheme.colors.blue['900']\n  //   );\n  // });\n  // });\n  it('HStack: style props test with dark mode', () => {\n    const newTheme = extendTheme({\n      config: { initialColorMode: 'dark' },\n    });\n    const { getByTestId } = render(\n      <Provider theme={newTheme}>\n        <HStack\n          testID=\"test\"\n          direction=\"column\"\n          _dark={{\n            direction: 'row',\n          }}\n        >\n          <Box>1</Box>\n          <Box>2</Box>\n          <Box>3</Box>\n        </HStack>\n      </Provider>\n    );\n\n    const hstackElement = getByTestId('test');\n    expect(hstackElement.props.style.flexDirection).toBe('row');\n  });\n\n  it('HStack: style props test on ios & dark mode', () => {\n    const newTheme = extendTheme({\n      config: { initialColorMode: 'dark' },\n    });\n    const { getByTestId } = render(\n      <Provider theme={newTheme}>\n        <Box>\n          <Text\n            // @ts-ignore\n            fontSize=\"12px\"\n            testID=\"test\"\n            lineHeight=\"4xl\"\n            letterSpacing=\"xl\"\n            _ios={{\n              _dark: {\n                fontSize: '15px',\n                letterSpacing: 'lg',\n                lineHeight: '3xl',\n              },\n            }}\n          >\n            This is a text\n          </Text>\n          <Text\n            testID=\"responsiveLineHeight\"\n            lineHeight=\"3xl\"\n            fontSize={['12px', '13px']}\n          >\n            hello world\n          </Text>\n        </Box>\n      </Provider>\n    );\n    const text = getByTestId('test');\n    const responsiveLineHeight = getByTestId('responsiveLineHeight');\n    expect(text.props.style.lineHeight).toBe(37.5);\n    expect(text.props.style.letterSpacing).toBe(0.375);\n    expect(responsiveLineHeight.props.style.lineHeight).toBe(32.5);\n  });\n\n  it('Heading: style props test on ios with dark mode', () => {\n    const newTheme = extendTheme({\n      config: { initialColorMode: 'dark' },\n    });\n    Platform.OS = 'ios';\n    const { getByTestId } = render(\n      <Provider theme={newTheme}>\n        <Box>\n          <Heading\n            // @ts-ignore\n            fontSize=\"12px\"\n            testID=\"test\"\n            lineHeight=\"4xl\"\n            letterSpacing=\"xl\"\n            _ios={{\n              _dark: {\n                fontSize: '15px',\n                letterSpacing: 'lg',\n                lineHeight: '3xl',\n              },\n            }}\n          >\n            This is a Heading\n          </Heading>\n        </Box>\n      </Provider>\n    );\n    const heading = getByTestId('test');\n    expect(heading.props.style.lineHeight).toBe(37.5);\n    expect(heading.props.style.letterSpacing).toBe(0.375);\n  });\n\n  it('Pseudo props test: importatnt on Button', () => {\n    const newTheme = extendTheme({\n      config: { initialColorMode: 'dark' },\n      components: {\n        Button: {\n          baseStyle: {\n            _important: {\n              bg: 'green.400',\n            },\n          },\n        },\n      },\n    });\n    const { getByTestId } = render(\n      <Provider theme={newTheme}>\n        <Button bg=\"amber.500\" testID=\"test\">\n          Button\n        </Button>\n      </Provider>\n    );\n    const button = getByTestId('test');\n    expect(button.props.style.backgroundColor).toBe(\n      defaultTheme.colors.green['400']\n    );\n  });\n\n  it('Pseudo props test: normal prop on light and dark', () => {\n    const newTheme = extendTheme({\n      config: { initialColorMode: 'dark' },\n      components: {\n        Button: {\n          baseStyle: {\n            _light: {\n              bg: 'green.700',\n            },\n            _dark: {\n              bg: 'green.100',\n            },\n          },\n        },\n      },\n    });\n    const { getByTestId } = render(\n      <Provider theme={newTheme}>\n        <Button bg=\"amber.500\" testID=\"test\">\n          Button\n        </Button>\n      </Provider>\n    );\n    const button = getByTestId('test');\n    expect(button.props.style.backgroundColor).toBe(\n      defaultTheme.colors.amber['500']\n    );\n  });\n\n  it('Pseudo props test: _important overrided', () => {\n    const newTheme = extendTheme({\n      config: { initialColorMode: 'dark' },\n      components: {\n        Button: {\n          baseStyle: {\n            _important: {\n              bg: 'green.400',\n            },\n          },\n          variants: {\n            solid: {\n              _important: {\n                bg: 'emerald.800',\n                _text: {\n                  color: 'white',\n                },\n              },\n            },\n          },\n        },\n      },\n    });\n    const { getByTestId } = render(\n      <Provider theme={newTheme}>\n        <Button bg=\"amber.500\" testID=\"test\">\n          Button\n        </Button>\n      </Provider>\n    );\n    const button = getByTestId('test');\n    expect(button.props.style.backgroundColor).toBe(\n      defaultTheme.colors.emerald['800']\n    );\n  });\n});\n\n// =========================================================\n// it('Modal: size', () => {\n//   const { getByTestId } = render(\n//     <Provider>\n//       <Modal isOpen={true} size=\"sm\">\n//         <Modal.Content testID=\"size\">\n//           <Modal.Header>Modal Title</Modal.Header>\n//           <Modal.Body>\n//             Sit nulla est ex deserunt exercitation anim occaecat. Nostrud\n//             ullamco deserunt aute id consequat veniam incididunt duis in sint\n//             irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit\n//             officia tempor esse quis. Sunt ad dolore quis aute consequat.\n//             Magna exercitation reprehenderit magna aute tempor cupidatat\n//             consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex\n//             incididunt cillum quis. Velit duis sit officia eiusmod Lorem\n//             aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi\n//             consectetur esse laborum eiusmod pariatur\n//           </Modal.Body>\n//         </Modal.Content>\n//       </Modal>\n//     </Provider>\n//   );\n//   const modalElement = getByTestId('size');\n\n//   expect(modalElement.props.style.width).toBe('60%');\n// });\n"
  },
  {
    "path": "src/hooks/useThemeProps/usePropsResolution.tsx",
    "content": "import get from 'lodash.get';\nimport merge from 'lodash.merge';\nimport isEmpty from 'lodash.isempty';\nimport { Platform } from 'react-native';\nimport { useNativeBase } from '../useNativeBase';\nimport { useColorMode } from '../../core/color-mode';\nimport { omitUndefined, extractInObject } from '../../theme/tools';\nimport { useBreakpointResolvedProps } from '../useBreakpointResolvedProps';\nimport {\n  propsFlattener,\n  compareSpecificity,\n  IStateProps,\n} from './propsFlattener';\nimport { useResponsiveSSRProps } from '../useResponsiveSSRProps';\nimport React from 'react';\nimport { ResponsiveQueryContext } from '../../utils/useResponsiveQuery/ResponsiveQueryProvider';\nimport type { ComponentTheme } from '../../theme';\n\nconst SPREAD_PROP_SPECIFICITY_ORDER = [\n  'p',\n  'padding',\n  'px',\n  'py',\n  'pt',\n  'pb',\n  'pl',\n  'pr',\n  'paddingTop',\n  'paddingBottom',\n  'paddingLeft',\n  'paddingRight',\n  'm',\n  'margin',\n  'mx',\n  'my',\n  'mt',\n  'mb',\n  'ml',\n  'mr',\n  'marginTop',\n  'marginBottom',\n  'marginLeft',\n  'marginRight',\n];\n\nconst FINAL_SPREAD_PROPS = [\n  'paddingTop',\n  'paddingBottom',\n  'paddingLeft',\n  'paddingRight',\n  'marginTop',\n  'marginBottom',\n  'marginLeft',\n  'marginRight',\n];\n\nconst MARGIN_MAP: any = {\n  mx: ['marginRight', 'marginLeft'],\n  my: ['marginTop', 'marginBottom'],\n  mt: ['marginTop'],\n  mb: ['marginBottom'],\n  mr: ['marginRight'],\n  ml: ['marginLeft'],\n};\n\nMARGIN_MAP.margin = [...MARGIN_MAP.mx, ...MARGIN_MAP.my];\nMARGIN_MAP.m = MARGIN_MAP.margin;\nMARGIN_MAP.marginTop = MARGIN_MAP.mt;\nMARGIN_MAP.marginBottom = MARGIN_MAP.mb;\nMARGIN_MAP.marginLeft = MARGIN_MAP.ml;\nMARGIN_MAP.marginRight = MARGIN_MAP.mr;\n\nconst PADDING_MAP: any = {\n  px: ['paddingRight', 'paddingLeft'],\n  py: ['paddingTop', 'paddingBottom'],\n  pt: ['paddingTop'],\n  pb: ['paddingBottom'],\n  pr: ['paddingRight'],\n  pl: ['paddingLeft'],\n};\n\nPADDING_MAP.padding = [...PADDING_MAP.px, ...PADDING_MAP.py];\nPADDING_MAP.p = PADDING_MAP.padding;\nPADDING_MAP.paddingTop = PADDING_MAP.pt;\nPADDING_MAP.paddingBottom = PADDING_MAP.pb;\nPADDING_MAP.paddingLeft = PADDING_MAP.pl;\nPADDING_MAP.paddingRight = PADDING_MAP.pr;\n\nconst SPREAD_PROP_SPECIFICITY_MAP: any = {\n  ...PADDING_MAP,\n  ...MARGIN_MAP,\n};\n\nfunction propsSpreader(incomingProps: any, incomingSpecifity: any) {\n  const flattenedDefaultProps: any = { ...incomingProps };\n  const specificity: any = {};\n\n  SPREAD_PROP_SPECIFICITY_ORDER.forEach((prop) => {\n    if (prop in flattenedDefaultProps) {\n      const val = incomingProps[prop] || flattenedDefaultProps[prop];\n      if (!FINAL_SPREAD_PROPS.includes(prop)) {\n        delete flattenedDefaultProps[prop];\n        specificity[prop] = incomingSpecifity[prop];\n      }\n\n      SPREAD_PROP_SPECIFICITY_MAP[prop].forEach((newProp: string) => {\n        if (compareSpecificity(specificity[newProp], specificity[prop])) {\n          specificity[newProp] = incomingSpecifity[prop];\n          flattenedDefaultProps[newProp] = val;\n        }\n      });\n    }\n  });\n\n  return merge({}, flattenedDefaultProps);\n}\n\n/**\n * @summary Combines provided porps with component's theme props and resloves them.\n * @arg {string} component - Name of the component.\n * @arg {object} incomingProps - Props passed by the user.\n * @arg {object} state - dependent states.\n * @arg {object} config - configuration for resolution. Accepts key like ignoreProps, resolveResponsively.\n * @returns {object} Resolved and flattened props.\n */\nexport function usePropsResolution(\n  component: string,\n  incomingProps: any,\n  state?: IStateProps,\n  config?: {\n    componentTheme?: any;\n    resolveResponsively?: string[];\n    ignoreProps?: string[];\n    cascadePseudoProps?: boolean;\n    extendTheme?: string[];\n  }\n) {\n  const { theme } = useNativeBase();\n  const componentTheme =\n    config?.componentTheme ?? get(theme, `components.${component}`, {});\n\n  if (process.env.NODE_ENV === 'development' && incomingProps.debug) {\n    /* eslint-disable-next-line */\n    console.log(\n      `%c${component}`,\n      'background: #d97706; color: #111; font-weight: 700; padding: 2px 8px;'\n    );\n    /* eslint-disable-next-line */\n    console.log(\n      `%cusePropsResolution`,\n      'background: #4b5563; color: #d97706; font-weight: 700; padding: 2px 8px;'\n    );\n    /* eslint-disable-next-line */\n    console.log(\n      '%c incomingProps: ',\n      'color: #4ade80; font-weight: 700;',\n      incomingProps\n    );\n    /* eslint-disable-next-line */\n    console.log('%c state: ', 'color: #4ade80; font-weight: 700;', state);\n    /* eslint-disable-next-line */\n    console.log(\n      '%c componentTheme: ',\n      'color: #4ade80; font-weight: 700;',\n      componentTheme\n    );\n  }\n\n  const resolvedProps = usePropsResolutionWithComponentTheme(\n    componentTheme,\n    incomingProps,\n    state,\n    config\n  );\n\n  // Not Resolve theme props and pseudo props\n  if (incomingProps?.INTERNAL_notResolveThemeAndPseudoProps) {\n    delete incomingProps.INTERNAL_notResolveThemeAndPseudoProps;\n    return incomingProps;\n  }\n\n  if (process.env.NODE_ENV === 'development' && incomingProps.debug) {\n    /* eslint-disable-next-line */\n    console.log(\n      '%c resolvedProps: ',\n      'color: #22d3ee; font-weight: 700;',\n      resolvedProps\n    );\n  }\n  return resolvedProps;\n}\n\nexport const usePropsResolutionWithComponentTheme = (\n  componentTheme: ComponentTheme,\n  incomingProps: any,\n  state?: IStateProps,\n  config?: {\n    componentTheme?: any;\n    resolveResponsively?: string[];\n    ignoreProps?: string[];\n    cascadePseudoProps?: boolean;\n    extendTheme?: string[];\n  }\n) => {\n  const modifiedPropsForSSR = useResponsiveSSRProps(incomingProps);\n\n  const [ignoredProps, cleanIncomingProps] = extractInObject(\n    modifiedPropsForSSR,\n    ['children', 'onPress', 'icon', 'onOpen', 'onClose'].concat(\n      config?.ignoreProps || []\n    )\n  );\n  const responsiveQueryContext = React.useContext(ResponsiveQueryContext);\n  const disableCSSMediaQueries = responsiveQueryContext.disableCSSMediaQueries;\n  const resolveResponsively = [\n    'colorScheme',\n    'size',\n    'variant',\n    ...(config?.resolveResponsively || []),\n  ];\n\n  const { theme } = useNativeBase();\n  const colorModeProps = useColorMode();\n\n  const extendedTheme: Array<any> = [];\n  if (config?.extendTheme) {\n    config?.extendTheme.map((componentName: string) => {\n      extendedTheme.push(get(theme, `components.${componentName}`, {}));\n    });\n  }\n  if (!isEmpty(componentTheme)) extendedTheme.push(componentTheme);\n\n  const resolveComponentTheme = (\n    themeType: Array<string>,\n    providedTheme: any\n  ): any => {\n    try {\n      if (themeType[1]) {\n        return typeof providedTheme[themeType[0]][themeType[1]] !== 'function'\n          ? providedTheme[themeType[0]][themeType[1]]\n          : providedTheme[themeType[0]][themeType[1]]({\n              theme,\n              ...incomingWithDefaultProps,\n              ...colorModeProps,\n            });\n      } else {\n        return typeof providedTheme[themeType[0]] !== 'function'\n          ? providedTheme[themeType[0]]\n          : providedTheme[themeType[0]]({\n              theme,\n              ...incomingWithDefaultProps,\n              ...colorModeProps,\n            });\n      }\n    } catch {\n      return {};\n    }\n  };\n  const callPropsFlattener = (\n    targetProps = {},\n    latestSpecifictyMap = {},\n    specificity = 1\n  ): any => {\n    return propsFlattener(\n      {\n        props:\n          process.env.NODE_ENV === 'development' && cleanIncomingProps.debug\n            ? { ...targetProps, debug: true }\n            : targetProps,\n        platform: Platform.OS,\n        colormode: colorModeProps.colorMode,\n        state: state || {},\n        currentSpecificityMap: latestSpecifictyMap,\n        previouslyFlattenProps: flattenProps || {},\n        cascadePseudoProps: config?.cascadePseudoProps,\n      },\n      specificity\n    );\n  };\n\n  // STEP 1: combine default props and incoming props\n\n  const incomingWithDefaultProps = merge(\n    {},\n    componentTheme.defaultProps || {},\n    cleanIncomingProps\n  );\n\n  // STEP 1.5: resolving component theme\n  let combinedBaseStyle = {};\n  let combinedVariantStyle = {};\n  let combinedSizeStyle = {};\n  extendedTheme.map((extededComponentTheme: any) => {\n    if (extededComponentTheme.baseStyle) {\n      combinedBaseStyle = {\n        ...combinedBaseStyle,\n        ...resolveComponentTheme(['baseStyle'], extededComponentTheme),\n      };\n    }\n    if (incomingWithDefaultProps.variant) {\n      if (extededComponentTheme.variants) {\n        combinedVariantStyle = {\n          ...combinedVariantStyle,\n          ...resolveComponentTheme(\n            ['variants', incomingWithDefaultProps.variant],\n            extededComponentTheme\n          ),\n        };\n      }\n    }\n    if (\n      incomingWithDefaultProps.size &&\n      extededComponentTheme?.sizes &&\n      extededComponentTheme?.sizes[incomingWithDefaultProps.size]\n    ) {\n      if (\n        typeof extededComponentTheme.sizes[incomingWithDefaultProps.size] ===\n          'string' ||\n        typeof extededComponentTheme.sizes[incomingWithDefaultProps.size] ===\n          'number'\n      ) {\n        incomingWithDefaultProps.size =\n          extededComponentTheme.sizes[incomingWithDefaultProps.size];\n      } else {\n        combinedSizeStyle = {\n          ...combinedSizeStyle,\n          ...resolveComponentTheme(\n            ['sizes', incomingWithDefaultProps.size],\n            extededComponentTheme\n          ),\n        };\n        incomingWithDefaultProps.size = undefined;\n      }\n    }\n  });\n\n  // STEP 2: flatten them\n  if (process.env.NODE_ENV === 'development' && cleanIncomingProps.debug) {\n    /* eslint-disable-next-line */\n    console.log(\n      `%cFlattening incoming and Default`,\n      'background: #4b5563; color: #FFF; font-weight: 700; padding: 2px 8px;'\n    );\n  }\n  //TODO: hack\n  let flattenProps: any, specificityMap;\n  [flattenProps, specificityMap] = callPropsFlattener(\n    incomingWithDefaultProps,\n    {},\n    2\n  );\n  const responsiveProps = {};\n  if (disableCSSMediaQueries) {\n    // STEP 2.5: resolving responsive props\n    resolveResponsively.map((propsName) => {\n      if (flattenProps[propsName]) {\n        // @ts-ignore\n        responsiveProps[propsName] = flattenProps[propsName];\n      }\n    });\n  }\n  if (resolveResponsively.includes('direction')) {\n    const propName = 'direction';\n    if (flattenProps[propName]) {\n      // @ts-ignore\n      responsiveProps[propName] = flattenProps[propName];\n    }\n  }\n  const responsivelyResolvedProps = useBreakpointResolvedProps(responsiveProps);\n\n  flattenProps = {\n    ...flattenProps,\n    ...responsivelyResolvedProps,\n  };\n  // STEP 3: Pass it to baseStyle, then variant and then size and resolve them.\n\n  // NOTE: Resoloving baseStyle\n  let flattenBaseStyle, baseSpecificityMap;\n  if (combinedBaseStyle) {\n    if (process.env.NODE_ENV === 'development' && cleanIncomingProps.debug) {\n      /* eslint-disable-next-line */\n      console.log(\n        `%cFlattening baseStyle`,\n        'background: #4b5563; color: #eee; font-weight: 700; padding: 2px 8px;'\n      );\n    }\n    [flattenBaseStyle, baseSpecificityMap] = callPropsFlattener(\n      combinedBaseStyle,\n      specificityMap\n    );\n  }\n\n  // NOTE: Resolving variants\n  let flattenVariantStyle, variantSpecificityMap;\n  // Extracting props from variant\n  if (combinedVariantStyle) {\n    if (process.env.NODE_ENV === 'development' && cleanIncomingProps.debug) {\n      /* eslint-disable-next-line */\n      console.log(\n        `%cFlattening variantStyle`,\n        'background: #4b5563; color: #FFF; font-weight: 700; padding: 2px 8px;'\n      );\n    }\n    [flattenVariantStyle, variantSpecificityMap] = callPropsFlattener(\n      combinedVariantStyle,\n      baseSpecificityMap || specificityMap\n    );\n\n    // We remove variant from original props if we found it in the componentTheme\n    //@ts-ignore\n    flattenProps.variant = undefined;\n  }\n\n  // NOTE: Resolving size\n\n  let flattenSizeStyle, sizeSpecificityMap;\n  // Extracting props from size\n  if (combinedSizeStyle) {\n    if (process.env.NODE_ENV === 'development' && cleanIncomingProps.debug) {\n      /* eslint-disable-next-line */\n      console.log(\n        `%cFlattening sizeStyle`,\n        'background: #4b5563; color: #FFF; font-weight: 700; padding: 2px 8px;'\n      );\n    }\n    [flattenSizeStyle, sizeSpecificityMap] = callPropsFlattener(\n      combinedSizeStyle,\n      variantSpecificityMap || baseSpecificityMap || specificityMap\n    );\n  }\n\n  // STEP 4: merge\n  const defaultStyles = merge(\n    {},\n    flattenBaseStyle,\n    flattenVariantStyle,\n    flattenSizeStyle\n  );\n\n  /*Resolve all the internal used Pseudo Props*/\n  const resolvePseudoProps = (\n    flatPseudoProp: any /** Props coming from Pseudo inside flattenProps */,\n    baseStylePseudoProp: any /** Props coming from Pseudo inside defaultStyles(baseStyle) */\n  ) => {\n    for (const prop in flatPseudoProp) {\n      baseStylePseudoProp[prop] =\n        flatPseudoProp[\n          prop\n        ]; /* Replace all the similar prop from from internal props */\n    }\n    return baseStylePseudoProp;\n  };\n\n  for (const prop in defaultStyles) {\n    if (prop.startsWith('_') && flattenProps.hasOwnProperty(prop)) {\n      /*Resolve all the internal used Pseudo Props*/\n      defaultStyles[prop] = resolvePseudoProps(\n        flattenProps[prop],\n        defaultStyles[prop]\n      );\n    }\n    delete flattenProps[prop];\n  }\n\n  const defaultSpecificity = merge(\n    {},\n    specificityMap,\n    baseSpecificityMap,\n    variantSpecificityMap,\n    sizeSpecificityMap\n  );\n\n  flattenProps = propsSpreader(\n    { ...defaultStyles, ...flattenProps },\n    defaultSpecificity\n  );\n\n  const resolvedProps = omitUndefined({\n    ...flattenProps,\n    ...ignoredProps,\n  });\n\n  // STEP 5: Return\n  return resolvedProps;\n};\n"
  },
  {
    "path": "src/hooks/useThemeProps/usePropsResolutionTest.tsx",
    "content": "import get from 'lodash.get';\nimport merge from 'lodash.merge';\nimport { Platform } from 'react-native';\nimport { useNativeBase } from '../useNativeBase';\nimport { useColorMode } from '../../core/color-mode';\nimport { omitUndefined, extractInObject } from '../../theme/tools';\nimport { useContrastText } from '../useContrastText';\nimport { useBreakpointResolvedProps } from '../useBreakpointResolvedProps';\nimport { propsFlattener, compareSpecificity } from './propsFlattenerTest';\n\nconst SPREAD_PROP_SPECIFICITY_ORDER = [\n  'p',\n  'padding',\n  'px',\n  'py',\n  'pt',\n  'pb',\n  'pl',\n  'pr',\n  'paddingTop',\n  'paddingBottom',\n  'paddingLeft',\n  'paddingRight',\n  'm',\n  'margin',\n  'mx',\n  'my',\n  'mt',\n  'mb',\n  'ml',\n  'mr',\n  'marginTop',\n  'marginBottom',\n  'marginLeft',\n  'marginRight',\n];\n\nconst FINAL_SPREAD_PROPS = [\n  'paddingTop',\n  'paddingBottom',\n  'paddingLeft',\n  'paddingRight',\n  'marginTop',\n  'marginBottom',\n  'marginLeft',\n  'marginRight',\n];\n\nconst MARGIN_MAP: any = {\n  mx: ['marginRight', 'marginLeft'],\n  my: ['marginTop', 'marginBottom'],\n  mt: ['marginTop'],\n  mb: ['marginBottom'],\n  mr: ['marginRight'],\n  ml: ['marginLeft'],\n};\n\nMARGIN_MAP.margin = [...MARGIN_MAP.mx, ...MARGIN_MAP.my];\nMARGIN_MAP.m = MARGIN_MAP.margin;\nMARGIN_MAP.marginTop = MARGIN_MAP.mt;\nMARGIN_MAP.marginBottom = MARGIN_MAP.mb;\nMARGIN_MAP.marginLeft = MARGIN_MAP.ml;\nMARGIN_MAP.marginRight = MARGIN_MAP.mr;\n\nconst PADDING_MAP: any = {\n  px: ['paddingRight', 'paddingLeft'],\n  py: ['paddingTop', 'paddingBottom'],\n  pt: ['paddingTop'],\n  pb: ['paddingBottom'],\n  pr: ['paddingRight'],\n  pl: ['paddingLeft'],\n};\n\nPADDING_MAP.padding = [...PADDING_MAP.px, ...PADDING_MAP.py];\nPADDING_MAP.p = PADDING_MAP.padding;\nPADDING_MAP.paddingTop = PADDING_MAP.pt;\nPADDING_MAP.paddingBottom = PADDING_MAP.pb;\nPADDING_MAP.paddingLeft = PADDING_MAP.pl;\nPADDING_MAP.paddingRight = PADDING_MAP.pr;\n\nconst SPREAD_PROP_SPECIFICITY_MAP: any = {\n  ...PADDING_MAP,\n  ...MARGIN_MAP,\n};\n\nfunction propsSpreader(incomingProps: any, incomingSpecifity: any) {\n  const flattenedDefaultProps: any = { ...incomingProps };\n  const specificity: any = {};\n\n  SPREAD_PROP_SPECIFICITY_ORDER.forEach((prop) => {\n    if (prop in flattenedDefaultProps) {\n      const val = incomingProps[prop] || flattenedDefaultProps[prop];\n      if (!FINAL_SPREAD_PROPS.includes(prop)) {\n        delete flattenedDefaultProps[prop];\n        specificity[prop] = incomingSpecifity[prop];\n      }\n\n      SPREAD_PROP_SPECIFICITY_MAP[prop].forEach((newProp: string) => {\n        if (compareSpecificity(specificity[newProp], specificity[prop])) {\n          specificity[newProp] = incomingSpecifity[prop];\n          flattenedDefaultProps[newProp] = val;\n        }\n      });\n    }\n  });\n\n  return merge({}, flattenedDefaultProps);\n}\n\n/**\n * @summary Combines provided porps with component's theme props and resloves them.\n * @arg {string} component - Name of the component.\n * @arg {object} incomingProps - Props passed by the user.\n * @arg {object} state - dependent states.\n * @arg {object} config - configuration for resolution. Accepts key like ignoreProps, resolveResponsively.\n * @returns {object} Resolved and flattened props.\n */\nexport function usePropsResolutionTest(\n  component: string,\n  incomingProps: any,\n  state?: any,\n  config?: any\n) {\n  const [ignoredProps, cleanIncomingProps] = extractInObject(\n    incomingProps,\n    ['children', 'onPress', 'icon', 'onOpen', 'onClose'].concat(\n      config?.ignoreProps || []\n    )\n  );\n  const resolveResponsively = [\n    'colorScheme',\n    'size',\n    'variant',\n    ...(config?.resolveResponsively || []),\n  ];\n\n  const { theme } = useNativeBase();\n  const colorModeProps = useColorMode();\n\n  const componentTheme = get(theme, `components.${component}`, {});\n\n  // STEP 1: combine default props and incoming props\n\n  const incomingWithDefaultProps = merge(\n    {},\n    componentTheme.defaultProps || {},\n    cleanIncomingProps\n  );\n  // STEP 2: flatten them\n\n  let [flattenProps, specificityMap] = propsFlattener(\n    {\n      props: incomingWithDefaultProps,\n      platform: Platform.OS,\n      colormode: colorModeProps.colorMode,\n      state: state || {},\n      previouslyFlattenProps: {},\n    },\n    2\n  );\n\n  // STEP 2.5: resolving responsive props\n  const responsiveProps = {};\n  resolveResponsively.map((propsName) => {\n    if (flattenProps[propsName]) {\n      // @ts-ignore\n      responsiveProps[propsName] = flattenProps[propsName];\n    }\n  });\n\n  const responsivelyResolvedProps = useBreakpointResolvedProps(responsiveProps);\n\n  flattenProps = {\n    ...flattenProps,\n    ...responsivelyResolvedProps,\n  };\n  // STEP 3: Pass it to baseStyle, then variant and then size and resolve them.\n\n  // NOTE: Resoloving baseStyle\n  let componentBaseStyle = {},\n    flattenBaseStyle,\n    baseSpecificityMap;\n  if (componentTheme.baseStyle) {\n    componentBaseStyle =\n      typeof componentTheme.baseStyle !== 'function'\n        ? componentTheme.baseStyle\n        : componentTheme.baseStyle({\n            theme,\n            ...flattenProps,\n            ...colorModeProps,\n          });\n\n    [flattenBaseStyle, baseSpecificityMap] = propsFlattener(\n      {\n        props: componentBaseStyle,\n        platform: Platform.OS,\n        colormode: colorModeProps.colorMode,\n        state: state || {},\n        currentSpecificityMap: specificityMap,\n        previouslyFlattenProps: flattenProps,\n      },\n      1\n    );\n  }\n\n  // NOTE: Resolving variants\n\n  const variant = flattenProps.variant;\n\n  let componentVariantProps = {},\n    flattenVariantStyle,\n    variantSpecificityMap;\n  // Extracting props from variant\n  if (variant && componentTheme.variants && componentTheme.variants[variant]) {\n    componentVariantProps =\n      typeof componentTheme.variants[variant] !== 'function'\n        ? componentTheme.variants[variant]\n        : componentTheme.variants[variant]({\n            theme,\n            ...flattenProps,\n            ...colorModeProps,\n          });\n\n    [flattenVariantStyle, variantSpecificityMap] = propsFlattener(\n      {\n        props: componentVariantProps,\n        platform: Platform.OS,\n        colormode: colorModeProps.colorMode,\n        state: state || {},\n        currentSpecificityMap: baseSpecificityMap || specificityMap,\n        // NOTE: Ideally flattenBaseStyle and flattenProps should be deeply merged to create previouslyFlattenProps.\n        previouslyFlattenProps: flattenProps,\n      },\n      1\n    );\n\n    // We remove variant from original props if we found it in the componentTheme\n    //@ts-ignore\n    flattenProps.variant = undefined;\n  }\n\n  // NOTE: Resolving size\n\n  const size = flattenProps.size;\n\n  let componentSizeProps = {},\n    flattenSizeStyle,\n    sizeSpecificityMap;\n  // Extracting props from size\n  if (size && componentTheme.sizes && componentTheme.sizes[size]) {\n    // Type - sizes: {lg: 1}. Refer icon theme\n    if (\n      typeof componentTheme.sizes[size] === 'string' ||\n      typeof componentTheme.sizes[size] === 'number'\n    ) {\n      flattenProps.size = componentTheme.sizes[size];\n      //@ts-ignore\n      // componentSizeProps.size = componentTheme.sizes[size];\n    }\n    // Type - sizes: (props) => ({lg: {px: 1}}). Refer heading theme\n    else if (typeof componentTheme.sizes[size] === 'function') {\n      flattenProps.size = undefined;\n      componentSizeProps = componentTheme.sizes[size]({\n        theme,\n        ...flattenProps,\n        ...colorModeProps,\n      });\n    }\n    // Type - sizes: {lg: {px: 1}}. Refer button theme\n    else {\n      flattenProps.size = undefined;\n      componentSizeProps = componentTheme.sizes[size];\n    }\n\n    [flattenSizeStyle, sizeSpecificityMap] = propsFlattener(\n      {\n        props: componentSizeProps,\n        platform: Platform.OS,\n        colormode: colorModeProps.colorMode,\n        state: state || {},\n        currentSpecificityMap:\n          variantSpecificityMap || baseSpecificityMap || specificityMap,\n        previouslyFlattenProps: flattenProps,\n      },\n      1\n    );\n  }\n\n  // // STEP 4: merge\n  const defaultStyles = merge(\n    {},\n    flattenBaseStyle,\n    flattenVariantStyle,\n    flattenSizeStyle\n  );\n\n  for (const prop in defaultStyles) {\n    delete flattenProps[prop];\n  }\n\n  const defaultSpecificity = merge(\n    {},\n    specificityMap,\n    baseSpecificityMap,\n    variantSpecificityMap,\n    sizeSpecificityMap\n  );\n\n  flattenProps = propsSpreader(\n    { ...defaultStyles, ...flattenProps },\n    defaultSpecificity\n  );\n\n  // // STEP 5: linear Grad and contrastText\n  let ignore: any = [];\n  if (\n    flattenProps.bg?.linearGradient ||\n    flattenProps.background?.linearGradient ||\n    flattenProps.bgColor?.linearGradient ||\n    flattenProps.backgroundColor?.linearGradient\n  ) {\n    let bgProp = 'bg';\n    if (flattenProps.background?.linearGradient) {\n      bgProp = 'background';\n    } else if (flattenProps.bgColor?.linearGradient) {\n      bgProp = 'bgColor';\n    } else if (flattenProps.backgroundColor?.linearGradient) {\n      bgProp = 'backgroundColor';\n    }\n    flattenProps[bgProp].linearGradient.colors = flattenProps[\n      bgProp\n    ].linearGradient.colors.map((color: string) => {\n      return get(theme.colors, color, color);\n    });\n    ignore = ['bg', 'background', 'backgroundColor', 'bgColor'];\n  }\n  // // NOTE: seprating bg props when linearGardiant is available\n  const [gradientProps] = extractInObject(flattenProps, ignore);\n\n  const bgColor =\n    flattenProps.bg ?? flattenProps.backgroundColor ?? flattenProps.bgColor;\n\n  const contrastTextColor = useContrastText(\n    bgColor,\n    flattenProps?._text?.color\n  );\n\n  flattenProps._text =\n    contrastTextColor && flattenProps?._text?.color === undefined\n      ? {\n          color: contrastTextColor,\n          ...flattenProps._text,\n        }\n      : flattenProps._text;\n\n  const resolvedProps = omitUndefined({\n    ...flattenProps,\n    ...ignoredProps,\n    ...gradientProps,\n  });\n  // STEP 6: Return\n\n  // flattenProps = {};\n  // propertyDepth = {};\n\n  return resolvedProps;\n}\n"
  },
  {
    "path": "src/hooks/useThemeProps/usePropsWithComponentTheme.ts",
    "content": "import { usePropsResolutionWithComponentTheme } from './usePropsResolution';\nimport type { ComponentTheme } from '../../theme';\nimport type { IStateProps } from './propsFlattener';\n\nexport function usePropsWithComponentTheme(\n  localTheme: ComponentTheme,\n  propsReceived: any,\n  _state?: IStateProps\n) {\n  return usePropsResolutionWithComponentTheme(\n    localTheme,\n    propsReceived,\n    _state\n  );\n}\n"
  },
  {
    "path": "src/hooks/useThemeProps/utils.ts",
    "content": "import get from 'lodash.get';\nimport isNil from 'lodash.isnil';\nimport mergeWith from 'lodash.mergewith';\nimport cloneDeep from 'lodash.clonedeep';\nimport { themePropertyMap } from './../../theme/base';\nimport {\n  getClosestBreakpoint,\n  findLastValidBreakpoint,\n  hasValidBreakpointFormat,\n  extractInObject,\n} from './../../theme/tools';\nimport { useContrastText } from '../useContrastText';\n\n/*\n Extract props from theme props and omit those from props\n*/\n/**\n *\n * @param props Props passed by the user\n * @param theme Theme object\n * @param colorModeProps `colorMode` object\n * @param componentTheme Theme for specific components\n * @param currentBreakpoint Current breakpoint values\n * @returns Extracting props from defaultProps while overriding the props that are already present\n */\nexport function extractProps(\n  props: any,\n  theme: any,\n  {},\n  componentTheme: any,\n  currentBreakpoint: number\n) {\n  let newProps: any = {};\n  for (let property in props) {\n    // If the property exists in themePropertyMap then get its value\n    if (themePropertyMap[property]) {\n      let propValues = extractPropertyFromFunction(\n        property,\n        props,\n        theme,\n        componentTheme\n      );\n      if (typeof propValues === 'string' || typeof propValues === 'number') {\n        newProps[property] = propValues;\n      } else if (!isNil(propValues)) {\n        for (let nestedProp in propValues) {\n          newProps[nestedProp] = get(\n            theme,\n            `${themePropertyMap[nestedProp]}.${propValues[nestedProp]}`,\n            propValues[nestedProp]\n          );\n        }\n      } else if (property === 'shadow') {\n        let shadowProps = theme[themePropertyMap[property]][props[property]];\n        if (!isNil(shadowProps)) {\n          newProps = { ...newProps, ...shadowProps };\n        }\n      } else {\n        newProps[property] = resolveValueWithBreakpoint(\n          props[property],\n          theme.breakpoints,\n          currentBreakpoint,\n          property\n        );\n      }\n    } else {\n      newProps[property] = resolveValueWithBreakpoint(\n        props[property],\n        theme.breakpoints,\n        currentBreakpoint,\n        property\n      );\n    }\n  }\n  return cloneDeep(newProps);\n}\n\n/*\nRemove props from defaultProps that are already present in props\n*/\nfunction filterDefaultProps(props: any, defaultProps: any) {\n  let [, resultProps] = extractInObject(defaultProps, Object.keys(props));\n  return resultProps;\n}\n\n/**\n * If property is functional in componentTheme, get its returned object\n *\n * @param property : name of the prop\n * @param props : all props\n * @param theme : provided theme without components\n * @param componentTheme : component specific theme\n * @returns\n */\nexport const extractPropertyFromFunction = (\n  property: string,\n  props: any,\n  theme: any,\n  componentTheme: any\n) => {\n  let propValues;\n  // Check if the entry in the theme is a function then calling it with all theme and props as params\n  if (\n    componentTheme &&\n    typeof componentTheme[themePropertyMap[property]] === 'function'\n  ) {\n    let funcProps = componentTheme[themePropertyMap[property]]({\n      theme,\n      ...props,\n    });\n    // Check if returned object from componentTheme is a nested object\n    let isNested: boolean = Object.keys(funcProps).some(function (key) {\n      return funcProps[key] && typeof funcProps[key] === 'object';\n    });\n    // If the returned value is nested object then find the property value in it, otherwise return the whole object\n    propValues = isNested\n      ? { ...get(funcProps, `${props[property]}`) }\n      : { ...funcProps };\n  } else {\n    // If the entry is any value other than function then return the whole object or value\n    propValues = get(\n      componentTheme,\n      `${themePropertyMap[property]}.${props[property]}`\n    );\n  }\n  return propValues;\n};\n\n/*\nMerge _props and apply contrastText color if not passed by theme or user\n*/\nexport function mergeUnderscoreProps(newProps: any, props: any) {\n  const _props = Object.keys(newProps).filter((propName) =>\n    propName.startsWith('_')\n  );\n  _props.forEach((propName: string) => {\n    // Adding color based on bg contrast if no color is given\n    const bg = newProps.bg ?? newProps.backgroundColor;\n    const textColor = bg\n      ? {\n          color: useContrastText(\n            bg,\n            newProps[propName]?.color ?? props[propName]?.color\n          ),\n        }\n      : {};\n    // Overriding calculated props with user added props\n    newProps[propName] = {\n      ...textColor,\n      ...newProps[propName],\n      ...props[propName],\n    };\n  });\n  return newProps;\n}\n\n/**\n *\n * Checks the property and resolves it if it has breakpoints\n * @param values : value from props\n * @param currentBreakpoint : current value for which breakpoint will be calculated\n * @param property : property name\n * @returns\n */\nexport const resolveValueWithBreakpoint = (\n  values: any,\n  breakpointTheme: any,\n  currentBreakpoint: number,\n  property: any\n) => {\n  if (hasValidBreakpointFormat(values, breakpointTheme, property)) {\n    // Check the last valid breakpoint value from all values\n    // If current breakpoint is `md` and we have `base` then `lg`, then last value will be taken(`base` in this case)\n    return findLastValidBreakpoint(values, breakpointTheme, currentBreakpoint);\n  } else {\n    return values;\n  }\n};\n\n/**\n * Takes all prop related data and returns the props that needs to be applied to the component\n *\n * @param theme Theme object\n * @param colorModeProps Color mode information\n * @param componentTheme Theme object for the specific component\n * @param props Props passed by the user\n * @param windowWidth Width of the current window\n * @returns props to be applied\n */\nexport function calculateProps(\n  theme: any,\n  colorModeProps: any,\n  componentTheme: any,\n  props: any,\n  windowWidth: any\n) {\n  let currentBreakpoint = getClosestBreakpoint(theme.breakpoints, windowWidth);\n  if (!props) {\n    props = {};\n  }\n\n  let newProps: any;\n  if (componentTheme) {\n    // Extracting props from defaultProps\n    newProps = extractProps(\n      filterDefaultProps(props, componentTheme.defaultProps),\n      theme,\n      colorModeProps,\n      componentTheme,\n      currentBreakpoint\n    );\n    // Extracting props from base style\n    let componentBaseStyle =\n      typeof componentTheme.baseStyle !== 'function'\n        ? componentTheme.baseStyle\n        : componentTheme.baseStyle({\n            theme,\n            ...newProps,\n            ...props,\n            ...colorModeProps,\n          });\n    newProps = mergeWith(\n      newProps,\n      componentBaseStyle,\n      // @ts-ignore\n      (objValue, srcValue, key) => {\n        if (!isNil(objValue)) {\n          delete newProps[key];\n        }\n      }\n    );\n\n    const variant =\n      props.variant || get(componentTheme, 'defaultProps.variant');\n    // Extracting props from variant\n    if (\n      variant &&\n      componentTheme.variants &&\n      componentTheme.variants[variant]\n    ) {\n      const colorScheme =\n        props.colorScheme || get(componentTheme, 'defaultProps.colorScheme');\n      let variantProps = componentTheme.variants[variant]({\n        ...props,\n        ...newProps,\n        colorScheme,\n        theme,\n        ...colorModeProps,\n      });\n      variantProps = extractProps(\n        variantProps,\n        theme,\n        colorModeProps,\n        componentTheme,\n        currentBreakpoint\n      );\n      // added this to handle order of props\n      newProps = mergeWith(\n        newProps,\n        variantProps,\n        // @ts-ignore\n        (objValue, srcValue, key) => {\n          if (!isNil(objValue)) {\n            delete newProps[key];\n          }\n        }\n      );\n      delete newProps.variant;\n      delete newProps.colorScheme;\n    }\n  }\n  // Extracting props from normal props\n  let extractedProps = extractProps(\n    props,\n    theme,\n    colorModeProps,\n    componentTheme,\n    currentBreakpoint\n  );\n  // added this to handle order of props\n  // @ts-ignore\n  newProps = mergeWith(newProps, extractedProps, (objValue, srcValue, key) => {\n    if (!isNil(objValue)) {\n      delete newProps[key];\n    }\n  });\n  newProps = mergeUnderscoreProps(newProps, props);\n  return newProps;\n}\n"
  },
  {
    "path": "src/hooks/useToken.ts",
    "content": "import { useTheme } from './useTheme';\nimport get from 'lodash.get';\n\nexport function useToken<T extends string | number>(\n  property: string,\n  token: T | T[],\n  fallback?: T | T[]\n) {\n  const theme = useTheme();\n  if (Array.isArray(token)) {\n    let fallbackArr: T[] = [];\n    if (fallback) {\n      fallbackArr = Array.isArray(fallback) ? fallback : [fallback];\n    }\n    return token.map((innerToken, index) => {\n      const path = `${property}.${innerToken}`;\n      return get(theme, path, fallbackArr[index] ?? innerToken);\n    });\n  }\n\n  const path = `${property}.${token}`;\n  return get(theme, path, fallback ?? token);\n}\n"
  },
  {
    "path": "src/index.tsx",
    "content": "import {\n  // AppBar,\n  Badge,\n  IBadgeProps,\n  IconButton,\n  IIconButtonProps,\n  Alert,\n  IAlertProps,\n  AspectRatio,\n  IAspectRatioProps,\n  Avatar,\n  Breadcrumb,\n  IBreadcrumbProps,\n  Card,\n  Container,\n  IContainerProps,\n  Divider,\n  IDividerProps,\n  Kbd,\n  Progress,\n  Accordion,\n  IAccordionProps,\n  IAccordionItemProps,\n  IAccordionSummaryProps,\n  IAccordionDetailsProps,\n  IAccordionIconProps,\n  IAccordionContextProps,\n  IAccordionItemContextProps,\n  Skeleton,\n  ISkeletonProps,\n  FormControl,\n  IFormControlProps,\n  IFormControlLabelProps,\n  IFormControlErrorMessageProps,\n  IFormControlHelperTextProps,\n  // Stat,\n  Tag,\n  Code,\n  Center,\n  Square,\n  Circle,\n  ICenterProps,\n  ICircleProps,\n  ISquareProps,\n  Wrap,\n  IWrapProps,\n  PinInput,\n  IPinInputProps,\n  IPinInputFieldProps,\n  Fade,\n  IFadeProps,\n  ScaleFade,\n  IScaleFadeProps,\n  PresenceTransition,\n  Stagger,\n  Slide,\n  ISlideProps,\n  SlideFade,\n  ISlideFadeProps,\n  NumberInput,\n  INumberInputProps,\n  NumberInputField,\n  INumberInputFieldProps,\n  NumberInputStepper,\n  NumberIncrementStepper,\n  NumberDecrementStepper,\n  INumberInputContext,\n  INumberInputSteppersProps,\n  INumberInputStepperProps,\n  Collapse,\n  CircularProgress,\n  Popover,\n  IPopoverProps,\n  AlertDialog,\n  // useToast,\n  Menu,\n  IMenuProps,\n  IMenuItemProps,\n  IMenuItemOptionProps,\n  IMenuGroupProps,\n  IMenuOptionGroupProps,\n  SimpleGrid,\n  ISimpleGridProps,\n  // Tabs,\n  ITagProps,\n  // ITabsProps,\n  // ITabBarProps,\n  // ITabProps,\n  // ITabViewsProps,\n  // ITabViewProps,\n  // ITabsContextProps,\n  Actionsheet,\n  IActionsheetProps,\n  IActionsheetContentProps,\n  IActionsheetItemProps,\n  Fab,\n  IFabProps,\n  useFormControlContext,\n  TextField,\n  ITextFieldProps,\n  Typeahead,\n  useTypeahead,\n  Modal,\n  IModalProps,\n  ICardProps,\n  IAvatarProps,\n  IDrawerProps,\n  useToast,\n  Toast,\n  IToastProps,\n  ITooltipProps,\n  Backdrop,\n  Drawer,\n  Tooltip,\n} from './components/composites';\nimport type { IScrollViewProps } from './components/basic';\n\nimport {\n  // View,\n  Text,\n  ITextProps,\n  Checkbox,\n  ICheckboxProps,\n  ICheckboxGroupProps,\n  Radio,\n  RadioContext,\n  IRadioProps,\n  IRadioValue,\n  IRadioGroupProps,\n  Hidden,\n  IHiddenProps,\n  Button,\n  IButtonProps,\n  Column,\n  Row,\n  Box,\n  IBoxProps,\n  Stack,\n  VStack,\n  HStack,\n  ZStack,\n  Slider,\n  ISliderProps,\n  Icon,\n  createIcon,\n  IIconProps,\n  Input,\n  InputGroup,\n  InputLeftAddon,\n  InputRightAddon,\n  IInputProps,\n  Image,\n  IImageProps,\n  Spinner,\n  ISpinnerProps,\n  Heading,\n  IHeadingProps,\n  Flex,\n  Switch,\n  ISwitchProps,\n  IFlexProps,\n  TextArea,\n  Link,\n  ILinkProps,\n  Spacer,\n  List,\n  IListProps,\n  IListItemProps,\n  Select,\n  ISelectProps,\n  ISelectItemProps,\n  Pressable,\n  IPressableProps,\n  IStackProps,\n  ITextAreaProps,\n  IZStackProps,\n  Overlay,\n  IOverlayProps,\n} from './components/primitives';\n\nexport * from './components/basic';\nexport * from './components/primitives/Icon/Icons';\nexport * from './theme';\nexport { extractInObject, stylingProps } from './theme/tools';\nexport * from './core';\nexport * from './hooks';\nexport * from './factory';\nexport * from './theme/v3-compatible-theme';\n\nexport {\n  // AppBar,\n  Alert,\n  AspectRatio,\n  Avatar,\n  Badge,\n  Button,\n  Card,\n  IconButton,\n  Heading,\n  Hidden,\n  // View,\n  Text,\n  Code,\n  Checkbox,\n  Radio,\n  RadioContext,\n  Column,\n  Row,\n  Center,\n  Square,\n  Circle,\n  Box,\n  Stack,\n  VStack,\n  HStack,\n  ZStack,\n  Slider,\n  Icon,\n  createIcon,\n  Input,\n  InputGroup,\n  InputLeftAddon,\n  InputRightAddon,\n  Spinner,\n  Image,\n  Switch,\n  Flex,\n  Kbd,\n  Breadcrumb,\n  Container,\n  Divider,\n  Link,\n  Overlay,\n  Pressable,\n  Progress,\n  Accordion,\n  Skeleton,\n  FormControl,\n  // Stat,\n  Tag,\n  TextArea,\n  TextField,\n  Wrap,\n  PinInput,\n  Fade,\n  ScaleFade,\n  Slide,\n  SlideFade,\n  PresenceTransition,\n  Stagger,\n  NumberInput,\n  NumberInputField,\n  NumberInputStepper,\n  NumberIncrementStepper,\n  NumberDecrementStepper,\n  Spacer,\n  Collapse,\n  CircularProgress,\n  List,\n  Popover,\n  AlertDialog,\n  // useToast,\n  Menu,\n  SimpleGrid,\n  // Tabs,\n  Actionsheet,\n  Fab,\n  useFormControlContext,\n  Typeahead,\n  useTypeahead,\n  Select,\n  Modal,\n  useToast,\n  Toast,\n  Backdrop,\n  Drawer,\n  Tooltip,\n};\nexport * from './utils';\nexport type {\n  IAlertProps,\n  IAspectRatioProps,\n  IHeadingProps,\n  IBadgeProps,\n  IButtonProps,\n  IIconButtonProps,\n  ITextProps,\n  ICheckboxProps,\n  ICheckboxGroupProps,\n  IHiddenProps,\n  IRadioProps,\n  IRadioValue,\n  IRadioGroupProps,\n  ICenterProps,\n  ICircleProps,\n  ISquareProps,\n  IBoxProps,\n  IBreadcrumbProps,\n  ITagProps,\n  ISliderProps,\n  IIconProps,\n  IInputProps,\n  ISpinnerProps,\n  IImageProps,\n  IContainerProps,\n  IPopoverProps,\n  IDividerProps,\n  ILinkProps,\n  IAccordionProps,\n  IAccordionItemProps,\n  IAccordionSummaryProps,\n  IAccordionDetailsProps,\n  IAccordionIconProps,\n  IAccordionContextProps,\n  IAccordionItemContextProps,\n  ISkeletonProps,\n  IFormControlProps,\n  IFormControlLabelProps,\n  IFormControlErrorMessageProps,\n  IFormControlHelperTextProps,\n  ISwitchProps,\n  IFlexProps,\n  IOverlayProps,\n  IPinInputProps,\n  IPinInputFieldProps,\n  IPressableProps,\n  IFadeProps,\n  IScaleFadeProps,\n  ISlideProps,\n  ISlideFadeProps,\n  IModalProps,\n  ICardProps,\n  IAvatarProps,\n  IDrawerProps,\n  ITextAreaProps,\n  IZStackProps,\n  INumberInputProps,\n  INumberInputFieldProps,\n  INumberInputContext,\n  INumberInputSteppersProps,\n  INumberInputStepperProps,\n  IListProps,\n  IListItemProps,\n  IMenuProps,\n  IMenuItemProps,\n  IMenuItemOptionProps,\n  IMenuGroupProps,\n  IMenuOptionGroupProps,\n  ISimpleGridProps,\n  // ITabsProps,\n  // ITabBarProps,\n  // ITabProps,\n  // ITabViewsProps,\n  // ITabViewProps,\n  // ITabsContextProps,\n  IToastProps,\n  ITooltipProps,\n  IActionsheetProps,\n  IActionsheetContentProps,\n  IActionsheetItemProps,\n  IFabProps,\n  ISelectProps,\n  ISelectItemProps,\n  ITextFieldProps,\n  IScrollViewProps,\n  IStackProps,\n  IWrapProps,\n};\n\nexport type { StyledProps } from './theme/types';\nexport type { ITheme, ICustomTheme } from './theme';\n"
  },
  {
    "path": "src/theme/base/borders.ts",
    "content": "const borderWidths = {\n  '0': 0,\n  '1': '1px',\n  '2': '2px',\n  '4': '4px',\n  '8': '8px',\n};\n\nexport type IBorderWidth = keyof typeof borderWidths;\n\nexport default borderWidths;\n"
  },
  {
    "path": "src/theme/base/breakpoints.ts",
    "content": "const breakpoints = {\n  'base': 0,\n  'sm': 480,\n  'md': 768,\n  'lg': 992,\n  'xl': 1280,\n  '2xl': 1536,\n};\nexport type IBreakpoint = keyof typeof breakpoints;\n\nexport default breakpoints;\n"
  },
  {
    "path": "src/theme/base/colors.ts",
    "content": "// import type { ITheme } from '..';\nimport type { Leaves } from './types';\n\nexport interface IColorHues {\n  50: string;\n  100: string;\n  200: string;\n  300: string;\n  400: string;\n  500: string;\n  600: string;\n  700: string;\n  800: string;\n  900: string;\n}\n\nconst colors = {\n  contrastThreshold: 7,\n  // Singleton colors\n  white: '#FFFFFF',\n  black: '#000000',\n  lightText: '#FFFFFF',\n  darkText: '#000000',\n  // Primary colors\n  rose: {\n    50: '#fff1f2',\n    100: '#ffe4e6',\n    200: '#fecdd3',\n    300: '#fda4af',\n    400: '#fb7185',\n    500: '#f43f5e',\n    600: '#e11d48',\n    700: '#be123c',\n    800: '#9f1239',\n    900: '#881337',\n  },\n  pink: {\n    50: '#fdf2f8',\n    100: '#fce7f3',\n    200: '#fbcfe8',\n    300: '#f9a8d4',\n    400: '#f472b6',\n    500: '#ec4899',\n    600: '#db2777',\n    700: '#be185d',\n    800: '#9d174d',\n    900: '#831843',\n  },\n  fuchsia: {\n    50: '#fdf4ff',\n    100: '#fae8ff',\n    200: '#f5d0fe',\n    300: '#f0abfc',\n    400: '#e879f9',\n    500: '#d946ef',\n    600: '#c026d3',\n    700: '#a21caf',\n    800: '#86198f',\n    900: '#701a75',\n  },\n  purple: {\n    50: '#faf5ff',\n    100: '#f3e8ff',\n    200: '#e9d5ff',\n    300: '#d8b4fe',\n    400: '#c084fc',\n    500: '#a855f7',\n    600: '#9333ea',\n    700: '#7e22ce',\n    800: '#6b21a8',\n    900: '#581c87',\n  },\n  violet: {\n    50: '#f5f3ff',\n    100: '#ede9fe',\n    200: '#ddd6fe',\n    300: '#c4b5fd',\n    400: '#a78bfa',\n    500: '#8b5cf6',\n    600: '#7c3aed',\n    700: '#6d28d9',\n    800: '#5b21b6',\n    900: '#4c1d95',\n  },\n  indigo: {\n    50: '#eef2ff',\n    100: '#e0e7ff',\n    200: '#c7d2fe',\n    300: '#a5b4fc',\n    400: '#818cf8',\n    500: '#6366f1',\n    600: '#4f46e5',\n    700: '#4338ca',\n    800: '#3730a3',\n    900: '#312e81',\n  },\n  blue: {\n    50: '#eff6ff',\n    100: '#dbeafe',\n    200: '#bfdbfe',\n    300: '#93c5fd',\n    400: '#60a5fa',\n    500: '#3b82f6',\n    600: '#2563eb',\n    700: '#1d4ed8',\n    800: '#1e40af',\n    900: '#1e3a8a',\n  },\n  lightBlue: {\n    50: '#f0f9ff',\n    100: '#e0f2fe',\n    200: '#bae6fd',\n    300: '#7dd3fc',\n    400: '#38bdf8',\n    500: '#0ea5e9',\n    600: '#0284c7',\n    700: '#0369a1',\n    800: '#075985',\n    900: '#0c4a6e',\n  },\n  darkBlue: {\n    50: '#dbf4ff',\n    100: '#addbff',\n    200: '#7cc2ff',\n    300: '#4aa9ff',\n    400: '#1a91ff',\n    500: '#0077e6',\n    600: '#005db4',\n    700: '#004282',\n    800: '#002851',\n    900: '#000e21',\n  },\n  cyan: {\n    50: '#ecfeff',\n    100: '#cffafe',\n    200: '#a5f3fc',\n    300: '#67e8f9',\n    400: '#22d3ee',\n    500: '#06b6d4',\n    600: '#0891b2',\n    700: '#0e7490',\n    800: '#155e75',\n    900: '#164e63',\n  },\n  teal: {\n    50: '#f0fdfa',\n    100: '#ccfbf1',\n    200: '#99f6e4',\n    300: '#5eead4',\n    400: '#2dd4bf',\n    500: '#14b8a6',\n    600: '#0d9488',\n    700: '#0f766e',\n    800: '#115e59',\n    900: '#134e4a',\n  },\n  emerald: {\n    50: '#ecfdf5',\n    100: '#d1fae5',\n    200: '#a7f3d0',\n    300: '#6ee7b7',\n    400: '#34d399',\n    500: '#10b981',\n    600: '#059669',\n    700: '#047857',\n    800: '#065f46',\n    900: '#064e3b',\n  },\n  green: {\n    50: '#f0fdf4',\n    100: '#dcfce7',\n    200: '#bbf7d0',\n    300: '#86efac',\n    400: '#4ade80',\n    500: '#22c55e',\n    600: '#16a34a',\n    700: '#15803d',\n    800: '#166534',\n    900: '#14532d',\n  },\n  lime: {\n    50: '#f7fee7',\n    100: '#ecfccb',\n    200: '#d9f99d',\n    300: '#bef264',\n    400: '#a3e635',\n    500: '#84cc16',\n    600: '#65a30d',\n    700: '#4d7c0f',\n    800: '#3f6212',\n    900: '#365314',\n  },\n  yellow: {\n    50: '#fefce8',\n    100: '#fef9c3',\n    200: '#fef08a',\n    300: '#fde047',\n    400: '#facc15',\n    500: '#eab308',\n    600: '#ca8a04',\n    700: '#a16207',\n    800: '#854d0e',\n    900: '#713f12',\n  },\n  amber: {\n    50: '#fffbeb',\n    100: '#fef3c7',\n    200: '#fde68a',\n    300: '#fcd34d',\n    400: '#fbbf24',\n    500: '#f59e0b',\n    600: '#d97706',\n    700: '#b45309',\n    800: '#92400e',\n    900: '#78350f',\n  },\n  orange: {\n    50: '#fff7ed',\n    100: '#ffedd5',\n    200: '#fed7aa',\n    300: '#fdba74',\n    400: '#fb923c',\n    500: '#f97316',\n    600: '#ea580c',\n    700: '#c2410c',\n    800: '#9a3412',\n    900: '#7c2d12',\n  },\n  red: {\n    50: '#fef2f2',\n    100: '#fee2e2',\n    200: '#fecaca',\n    300: '#fca5a5',\n    400: '#f87171',\n    500: '#ef4444',\n    600: '#dc2626',\n    700: '#b91c1c',\n    800: '#991b1b',\n    900: '#7f1d1d',\n  },\n  warmGray: {\n    50: '#fafaf9',\n    100: '#f5f5f4',\n    200: '#e7e5e4',\n    300: '#d6d3d1',\n    400: '#a8a29e',\n    500: '#78716c',\n    600: '#57534e',\n    700: '#44403c',\n    800: '#292524',\n    900: '#1c1917',\n  },\n  trueGray: {\n    50: '#fafafa',\n    100: '#f5f5f5',\n    200: '#e5e5e5',\n    300: '#d4d4d4',\n    400: '#a3a3a3',\n    500: '#737373',\n    600: '#525252',\n    700: '#404040',\n    800: '#262626',\n    900: '#171717',\n  },\n  gray: {\n    50: '#fafafa',\n    100: '#f4f4f5',\n    200: '#e4e4e7',\n    300: '#d4d4d8',\n    400: '#a1a1aa',\n    500: '#71717a',\n    600: '#52525b',\n    700: '#3f3f46',\n    800: '#27272a',\n    900: '#18181b',\n  },\n  coolGray: {\n    50: '#f9fafb',\n    100: '#f3f4f6',\n    200: '#e5e7eb',\n    300: '#d1d5db',\n    400: '#9ca3af',\n    500: '#6b7280',\n    600: '#4b5563',\n    700: '#374151',\n    800: '#1f2937',\n    900: '#111827',\n  },\n  blueGray: {\n    50: '#f8fafc',\n    100: '#f1f5f9',\n    200: '#e2e8f0',\n    300: '#cbd5e1',\n    400: '#94a3b8',\n    500: '#64748b',\n    600: '#475569',\n    700: '#334155',\n    800: '#1e293b',\n    900: '#0f172a',\n  },\n  dark: {\n    50: '#18181b',\n    100: '#27272a',\n    200: '#3f3f46',\n    300: '#52525b',\n    400: '#71717a',\n    500: '#a1a1aa',\n    600: '#d4d4d8',\n    700: '#e4e4e7',\n    800: '#f4f4f5',\n    900: '#fafafa',\n  },\n  text: {\n    50: '#fafafa',\n    100: '#f5f5f5',\n    200: '#e5e5e5',\n    300: '#d4d4d4',\n    400: '#a3a3a3',\n    500: '#737373',\n    600: '#525252',\n    700: '#404040',\n    800: '#262626',\n    900: '#171717',\n  },\n  // Derived colors\n  danger: {} as IColorHues,\n  error: {} as IColorHues,\n  success: {} as IColorHues,\n  warning: {} as IColorHues,\n  muted: {} as IColorHues,\n  primary: {} as IColorHues,\n  info: {} as IColorHues,\n  secondary: {} as IColorHues,\n  light: {} as IColorHues,\n  tertiary: {} as IColorHues,\n};\n\ncolors.danger = colors.rose;\ncolors.error = colors.red;\ncolors.success = colors.green;\ncolors.warning = colors.orange;\ncolors.muted = colors.trueGray;\ncolors.primary = colors.cyan;\ncolors.secondary = colors.pink;\ncolors.tertiary = colors.emerald;\ncolors.info = colors.lightBlue;\ncolors.light = colors.warmGray;\n\nexport default colors;\n// export type IColors = Leaves<ITheme['colors']>;\nexport type IColors = Leaves<typeof colors>;\n"
  },
  {
    "path": "src/theme/base/index.ts",
    "content": "import borderWidths from './borders';\nimport breakpoints from './breakpoints';\nimport colors from './colors';\nimport radii from './radius';\nimport shadows from './shadows';\nimport sizes from './sizes';\nimport { spacing } from './space';\nimport typography from './typography';\nimport opacity from './opacity';\n\nconst theme = {\n  borderWidths,\n  breakpoints,\n  colors,\n  radii,\n  ...typography,\n  sizes,\n  space: spacing,\n  shadows,\n  opacity,\n};\n\nexport const themePropertyMap: any = {\n  borderRadius: 'radii',\n  color: 'colors',\n  letterSpacing: 'letterSpacings',\n  lineHeight: 'lineHeights',\n  fontFamily: 'fonts',\n  fontSize: 'fontSizes',\n  fontWeight: 'fontWeights',\n  size: 'sizes',\n  space: 'space',\n  border: 'borders',\n  shadow: 'shadows',\n};\n\nexport default theme;\n"
  },
  {
    "path": "src/theme/base/opacity.ts",
    "content": "const opacity = {\n  0: 0,\n  5: 0.05,\n  10: 0.1,\n  20: 0.2,\n  25: 0.25,\n  30: 0.3,\n  40: 0.4,\n  50: 0.5,\n  60: 0.6,\n  70: 0.7,\n  75: 0.75,\n  80: 0.8,\n  90: 0.9,\n  95: 0.95,\n  100: 1,\n};\nexport type IOpacity = keyof typeof opacity;\n\nexport default opacity;\n"
  },
  {
    "path": "src/theme/base/radius.ts",
    "content": "const radii = {\n  'none': 0,\n  'xs': 2,\n  'sm': 4,\n  'md': 6,\n  'lg': 8,\n  'xl': 12,\n  '2xl': 16,\n  '3xl': 24,\n  'full': 9999,\n};\n\nexport type IRadii = keyof typeof radii;\n\nexport default radii;\n"
  },
  {
    "path": "src/theme/base/shadows.ts",
    "content": "import colors from './colors';\nconst shadow = {\n  'none': {\n    shadowColor: 'transparent',\n    shadowOffset: {\n      width: 0,\n      height: 0,\n    },\n    shadowOpacity: 0,\n    shadowRadius: 0,\n    elevation: 0,\n  },\n  '0': {\n    shadowColor: colors.black,\n    shadowOffset: {\n      width: 0,\n      height: 1,\n    },\n    shadowOpacity: 0.18,\n    shadowRadius: 1.0,\n    elevation: 1,\n  },\n  '1': {\n    shadowColor: colors.black,\n    shadowOffset: {\n      width: 0,\n      height: 1,\n    },\n    shadowOpacity: 0.2,\n    shadowRadius: 1.41,\n    elevation: 2,\n  },\n  '2': {\n    shadowColor: colors.black,\n    shadowOffset: {\n      width: 0,\n      height: 1,\n    },\n    shadowOpacity: 0.22,\n    shadowRadius: 2.22,\n    elevation: 3,\n  },\n  '3': {\n    shadowColor: colors.black,\n    shadowOffset: {\n      width: 0,\n      height: 2,\n    },\n    shadowOpacity: 0.23,\n    shadowRadius: 2.62,\n    elevation: 4,\n  },\n  '4': {\n    shadowColor: colors.black,\n    shadowOffset: {\n      width: 0,\n      height: 2,\n    },\n    shadowOpacity: 0.25,\n    shadowRadius: 3.84,\n    elevation: 5,\n  },\n  '5': {\n    shadowColor: colors.black,\n    shadowOffset: {\n      width: 0,\n      height: 3,\n    },\n    shadowOpacity: 0.27,\n    shadowRadius: 4.65,\n    elevation: 6,\n  },\n  '6': {\n    shadowColor: colors.black,\n    shadowOffset: {\n      width: 0,\n      height: 3,\n    },\n    shadowOpacity: 0.29,\n    shadowRadius: 4.65,\n    elevation: 7,\n  },\n  '7': {\n    shadowColor: colors.black,\n    shadowOffset: {\n      width: 0,\n      height: 4,\n    },\n    shadowOpacity: 0.3,\n    shadowRadius: 4.65,\n    elevation: 8,\n  },\n  '8': {\n    shadowColor: colors.black,\n    shadowOffset: {\n      width: 0,\n      height: 4,\n    },\n    shadowOpacity: 0.32,\n    shadowRadius: 5.46,\n    elevation: 9,\n  },\n  '9': {\n    shadowColor: colors.black,\n    shadowOffset: {\n      width: 0,\n      height: 5,\n    },\n    shadowOpacity: 0.34,\n    shadowRadius: 6.27,\n    elevation: 10,\n  },\n};\n\nexport type IShadow = keyof typeof shadow;\nexport default shadow;\n"
  },
  {
    "path": "src/theme/base/sizes.ts",
    "content": "import { spacing } from './space';\n\nconst container = {\n  sm: 640,\n  md: 768,\n  lg: 1024,\n  xl: 1280,\n};\n\nconst sizes = {\n  ...spacing,\n  ...{\n    '3xs': 224,\n    '2xs': 256,\n    'xs': 320,\n    'sm': 384,\n    'md': 448,\n    'lg': 512,\n    'xl': 576,\n    '2xl': 672,\n  },\n  container,\n};\n\nexport type ISizes = keyof typeof sizes;\nexport default sizes;\n"
  },
  {
    "path": "src/theme/base/space.ts",
    "content": "export const spacing = {\n  'px': '1px',\n  '0': 0,\n  '0.5': 2,\n  '1': 4,\n  '1.5': 6,\n  '2': 8,\n  '2.5': 10,\n  '3': 12,\n  '3.5': 14,\n  '4': 16,\n  '5': 20,\n  '6': 24,\n  '7': 28,\n  '8': 32,\n  '9': 36,\n  '10': 40,\n  '12': 48,\n  '16': 64,\n  '20': 80,\n  '24': 96,\n  '32': 128,\n  '40': 160,\n  '48': 192,\n  '56': 224,\n  '64': 256,\n  '72': 288,\n  '80': 320,\n  '96': 384,\n  '1/2': '50%',\n  '1/3': '33.333%',\n  '2/3': '66.666%',\n  '1/4': '25%',\n  '2/4': '50%',\n  '3/4': '75%',\n  '1/5': '20%',\n  '2/5': '40%',\n  '3/5': '60%',\n  '4/5': '80%',\n  '1/6': '16.666%',\n  '2/6': '33.333%',\n  '3/6': '50%',\n  '4/6': '66.666%',\n  '5/6': '83.333%',\n  'full': '100%',\n};\n\nexport type ISpacing = keyof typeof spacing;\n"
  },
  {
    "path": "src/theme/base/types.ts",
    "content": "/* eslint no-use-before-define: 0 */ // --> OFF\n// @ts-ignore\ntype Join<K, P> = K extends string | number\n  ? P extends string | number\n    ? `${K}${'' extends P ? '' : '.'}${P}`\n    : never\n  : never;\n\nexport type Leaves<T> = T extends object\n  ? { [K in keyof T]-?: Join<K, Leaves<T[K]>> }[keyof T]\n  : '';\n"
  },
  {
    "path": "src/theme/base/typography.ts",
    "content": "const typography = {\n  letterSpacings: {\n    'xs': '-0.05em',\n    'sm': '-0.025em',\n    'md': 0,\n    'lg': '0.025em',\n    'xl': '0.05em',\n    '2xl': '0.1em',\n  },\n  lineHeights: {\n    '2xs': '1em',\n    'xs': '1.125em',\n    'sm': '1.25em',\n    'md': '1.375em',\n    'lg': '1.5em',\n    'xl': '1.75em',\n    '2xl': '2em',\n    '3xl': '2.5em',\n    '4xl': '3em',\n    '5xl': '4em',\n  },\n  fontConfig: {\n    //   Roboto: {\n    //     100: {\n    //       normal: 'Roboto-Light',\n    //       italic: 'Roboto-LightItalic',\n    //     },\n    //     200: {\n    //       normal: 'Roboto-Light',\n    //       italic: 'Roboto-LightItalic',\n    //     },\n    //     300: {\n    //       normal: 'Roboto-Light',\n    //       italic: 'Roboto-LightItalic',\n    //     },\n    //     400: {\n    //       normal: 'Roboto-Regular',\n    //       italic: 'Roboto-Italic',\n    //     },\n    //     500: {\n    //       normal: 'Roboto-Medium',\n    //       italic: 'Roboto-MediumItalic',\n    //     },\n    //     600: {\n    //       normal: 'Roboto-Medium',\n    //       italic: 'Roboto-MediumItalic',\n    //     },\n    //     700: {\n    //       normal: 'Roboto-Bold',\n    //       italic: 'Roboto-BoldItalic',\n    //     },\n    //     800: {\n    //       normal: 'Roboto-Bold',\n    //       italic: 'Roboto-BoldItalic',\n    //     },\n    //     900: {\n    //       normal: 'Roboto-Bold',\n    //       italic: 'Roboto-BoldItalic',\n    //     },\n    //   },\n    //   Montserrat: {\n    //     100: {\n    //       normal: 'Montserrat-Light',\n    //       italic: 'Montserrat-LightItalic',\n    //     },\n    //     200: {\n    //       normal: 'Montserrat-Light',\n    //       italic: 'Montserrat-LightItalic',\n    //     },\n    //     300: {\n    //       normal: 'Montserrat-Light',\n    //       italic: 'Montserrat-LightItalic',\n    //     },\n    //     400: {\n    //       normal: 'Montserrat-Regular',\n    //       italic: 'Montserrat-Italic',\n    //     },\n    //     500: {\n    //       normal: 'Montserrat-Medium',\n    //       italic: 'Montserrat-MediumItalic',\n    //     },\n    //     600: {\n    //       normal: 'Montserrat-SemiBold',\n    //       italic: 'Montserrat-SemiBoldItalic',\n    //     },\n    //     700: {\n    //       normal: 'Montserrat-Bold',\n    //       italic: 'Montserrat-BoldItalic',\n    //     },\n    //     800: {\n    //       normal: 'Montserrat-ExtraBold',\n    //       italic: 'Montserrat-ExtraBoldItalic',\n    //     },\n    //     900: {\n    //       normal: 'Montserrat-Black',\n    //       italic: 'Montserrat-BlackItalic',\n    //     },\n    //   },\n  },\n  fontWeights: {\n    hairline: 100,\n    thin: 200,\n    light: 300,\n    normal: 400,\n    medium: 500,\n    semibold: 600,\n    bold: 700,\n    extrabold: 800,\n    black: 900,\n    extraBlack: 950,\n  },\n  fonts: {\n    heading: undefined,\n    body: undefined,\n    mono: undefined,\n  },\n  fontSizes: {\n    '2xs': 10,\n    'xs': 12,\n    'sm': 14,\n    'md': 16,\n    'lg': 18,\n    'xl': 20,\n    '2xl': 24,\n    '3xl': 30,\n    '4xl': 36,\n    '5xl': 48,\n    '6xl': 60,\n    '7xl': 72,\n    '8xl': 96,\n    '9xl': 128,\n  },\n};\n\nexport type ITypography = typeof typography;\nexport type IFontSize = keyof typeof typography.fontSizes;\nexport type ILetterSpacing = keyof typeof typography.letterSpacings;\nexport type ILineHeight = keyof typeof typography.lineHeights;\nexport type IFontWeight = keyof typeof typography.fontWeights;\n// export type IFont = typeof typography.fonts;\nexport interface IFont {\n  heading?: string;\n  body?: string;\n  mono?: string;\n}\n\nexport default typography;\n"
  },
  {
    "path": "src/theme/components/accordion.ts",
    "content": "import { mode } from '../tools/colors';\n\n// Accordion\nconst accordionBaseStyle = (props: Record<string, any>) => {\n  return {\n    borderWidth: 1,\n    borderColor: mode('gray.300', 'gray.600')(props),\n    borderRadius: 'lg',\n  };\n};\nexport const Accordion = {\n  baseStyle: accordionBaseStyle,\n};\n\n// AccordionItem\nexport const AccordionItem = {};\n\n// AccordionIcon\nexport const AccordionIcon = {};\n\n// AccordionSummary\nconst accordionSummaryBaseStyle = (props: Record<string, any>) => {\n  return {\n    borderTopWidth: 1,\n    borderTopColor: mode('gray.300', 'gray.600')(props),\n    p: 3,\n    _hover: {\n      bg: mode('primary.200', 'primary.300')(props),\n    },\n    _expanded: {\n      bg: 'primary.600',\n      borderBottomColor: mode('gray.300', 'gray.600')(props),\n      _text: { color: 'white' },\n    },\n    _disabled: {\n      bg: mode('gray.200', 'gray.700')(props),\n    },\n  };\n};\nexport const AccordionSummary = {\n  baseStyle: accordionSummaryBaseStyle,\n};\n\n// AccordionDetails\nconst accordionPanelBaseStyle = {\n  p: 3,\n};\n\nexport const AccordionDetails = {\n  baseStyle: accordionPanelBaseStyle,\n};\n"
  },
  {
    "path": "src/theme/components/actionsheet.ts",
    "content": "// Actionsheet\nexport const Actionsheet = {\n  defaultProps: {\n    size: 'full',\n    justifyContent: 'flex-end',\n    animationPreset: 'slide',\n  },\n};\n\n// ActionsheetContent\nexport const ActionsheetContent = {\n  baseStyle: () => ({\n    alignItems: 'center',\n    px: 2,\n    py: 2,\n    borderRadius: 'none',\n    roundedTop: 20,\n    _web: {\n      userSelect: 'none',\n    },\n    _dragIndicator: {\n      height: 1,\n      width: 10,\n      borderRadius: 2,\n      bg: 'muted.500',\n    },\n\n    _dark: {\n      _dragIndicator: {\n        bg: 'muted.400',\n      },\n    },\n\n    _dragIndicatorWrapper: {\n      pt: 3,\n      pb: 3,\n      mt: -2,\n      width: '100%',\n      alignItems: 'center',\n      collapsable: false,\n    },\n    _dragIndicatorWrapperOffSet: {\n      py: 2,\n      collapsable: false,\n    },\n  }),\n};\n\n// ActionsheetItem\nexport const ActionsheetItem = {\n  baseStyle: () => ({\n    width: '100%',\n    justifyContent: 'flex-start',\n    _stack: {\n      space: 4,\n    },\n    p: 4,\n    _text: {\n      color: 'text.900',\n      fontSize: 'md',\n      fontWeight: 'normal',\n    },\n    _disabled: {\n      opacity: 40,\n    },\n\n    bg: 'muted.50',\n    _icon: {\n      color: 'muted.500',\n    },\n\n    _hover: {\n      bg: 'muted.200',\n    },\n    _pressed: {\n      bg: 'muted.400',\n    },\n    _focusVisible: {\n      _web: {\n        outlineWidth: '0',\n        style: { boxShadow: `none` },\n        bg: 'muted.300',\n      },\n      bg: 'muted.300',\n    },\n\n    _dark: {\n      bg: 'muted.800',\n      _icon: {\n        color: 'muted.400',\n      },\n      _text: {\n        color: 'muted.50',\n      },\n      _hover: {\n        bg: 'muted.700',\n      },\n      _pressed: {\n        bg: 'muted.500',\n      },\n      _focusVisible: {\n        _web: {\n          outlineWidth: '0',\n          style: { boxShadow: `none` },\n          bg: 'muted.600',\n        },\n      },\n    },\n  }),\n};\n"
  },
  {
    "path": "src/theme/components/alert-dialog.ts",
    "content": "import { Dimensions } from 'react-native';\n\nconst sizes = {\n  xs: {\n    contentSize: {\n      width: '60%',\n      maxWidth: '280',\n    },\n  },\n  sm: {\n    contentSize: {\n      width: '65%',\n      maxWidth: '320',\n    },\n  },\n  md: {\n    contentSize: {\n      width: '75%',\n      maxWidth: '380',\n    },\n  },\n  lg: {\n    contentSize: {\n      width: '80%',\n      maxWidth: '520',\n    },\n  },\n  xl: {\n    contentSize: {\n      width: '90%',\n      maxWidth: '580',\n    },\n  },\n  full: {\n    contentSize: {\n      width: '100%',\n    },\n  },\n};\n\nexport const AlertDialog = {\n  baseStyle: {\n    width: '100%',\n    height: '100%',\n    justifyContent: 'center',\n    alignItems: 'center',\n    _web: { pointerEvents: 'box-none' },\n    _backdropFade: { exitDuration: 150, entryDuration: 200 },\n    _fade: { exitDuration: 100, entryDuration: 200 },\n    _slide: { duration: 200, overlay: false },\n    _overlay: {\n      unmountOnExit: true,\n    },\n  },\n  sizes,\n  defaultProps: {\n    size: 'md',\n    closeOnOverlayClick: true,\n  },\n};\n\nexport const AlertDialogContent = {\n  baseStyle: () => {\n    return {\n      shadow: 1,\n      rounded: 'lg',\n      maxHeight: `${Dimensions.get('window').height - 150}px`,\n      overflow: 'hidden',\n      bg: 'muted.50',\n      _text: {\n        color: 'text.900',\n      },\n\n      _dark: {\n        bg: 'muted.800',\n        color: 'text.50',\n      },\n    };\n  },\n};\nexport const AlertDialogCloseButton = {\n  baseStyle: () => {\n    return {\n      position: 'absolute',\n      right: '3',\n      top: '3',\n      zIndex: '1',\n      p: '2',\n      bg: 'transparent',\n      borderRadius: 'sm',\n      _web: {\n        outlineWidth: 0,\n        cursor: 'pointer',\n      },\n      _icon: {\n        size: '4',\n        color: 'muted.500',\n      },\n\n      _hover: {\n        bg: 'muted.200',\n      },\n      _pressed: {\n        bg: 'muted.300',\n      },\n\n      _dark: {\n        _icon: {\n          color: 'muted.400',\n        },\n        _hover: {\n          bg: 'muted.700',\n        },\n        _pressed: {\n          bg: 'muted.600',\n        },\n      },\n    };\n  },\n};\nexport const AlertDialogHeader = {\n  baseStyle: () => {\n    return {\n      p: '4',\n      borderBottomWidth: '1',\n      _text: {\n        color: 'text.900',\n        fontSize: 'md',\n        fontWeight: 'semibold',\n        lineHeight: 'sm',\n      },\n      bg: 'muted.50',\n      borderColor: 'muted.300',\n\n      _dark: {\n        bg: 'muted.800',\n        borderColor: 'muted.700',\n        _text: {\n          color: 'text.50',\n        },\n      },\n    };\n  },\n};\nexport const AlertDialogBody = {\n  baseStyle: () => {\n    return {\n      p: '4',\n\n      bg: 'muted.50',\n      _text: {\n        color: 'text.900',\n      },\n\n      _dark: {\n        bg: 'muted.800',\n        _text: {\n          color: 'text.50',\n        },\n      },\n    };\n  },\n};\nexport const AlertDialogFooter = {\n  baseStyle: () => {\n    return {\n      p: '4',\n      flexDirection: 'row',\n      justifyContent: 'flex-end',\n      flexWrap: 'wrap',\n      borderTopWidth: '1',\n      bg: 'muted.50',\n      borderColor: 'muted.300',\n\n      _dark: {\n        bg: 'muted.800',\n        borderColor: 'muted.700',\n      },\n    };\n  },\n};\nexport const AlertDialogOverlay = {\n  baseStyle: {\n    position: 'absolute',\n    left: '0',\n    top: '0',\n    opacity: '50',\n    right: '0',\n    bottom: '0',\n  },\n};\n"
  },
  {
    "path": "src/theme/components/alert.ts",
    "content": "import { getColor, getColorScheme, transparentize } from '../tools';\nimport type { InterfaceAlertProps } from '../../components/composites/Alert/types';\nfunction getBg(\n  props: InterfaceAlertProps & { theme: any } & { colorScheme: any }\n) {\n  const { theme, colorScheme: c, status, variant } = props;\n\n  const colorScheme = getColorScheme(props, !status ? c : status);\n\n  const lightBg =\n    variant === 'solid'\n      ? getColor(theme, `${colorScheme}.700`, colorScheme)\n      : getColor(theme, `${colorScheme}.200`, colorScheme);\n\n  const darkBg =\n    variant === 'solid'\n      ? getColor(theme, `${colorScheme}.600`, colorScheme)\n      : getColor(theme, `${colorScheme}.200`, colorScheme);\n\n  return { lightBg, darkBg };\n}\n\nconst variantSubtle = (\n  props: InterfaceAlertProps & { theme: any } & { colorScheme: any }\n) => {\n  let { colorScheme, status } = props;\n  const { lightBg, darkBg } = getBg(props);\n\n  colorScheme = getColorScheme(props, !status ? colorScheme : status);\n\n  return {\n    bg: lightBg,\n    _icon: { color: `${colorScheme}.700` },\n    _dark: {\n      bg: darkBg,\n      _icon: { color: `${colorScheme}.600` },\n    },\n  };\n};\n\nconst variantOutline = (props: InterfaceAlertProps & { colorScheme: any }) => {\n  let { colorScheme, status } = props;\n\n  colorScheme = getColorScheme(props, !status ? colorScheme : status);\n\n  return {\n    borderWidth: 1,\n    _icon: { color: `${colorScheme}.700` },\n    borderColor: `${colorScheme}.700`,\n    _dark: {\n      _icon: { color: `${colorScheme}.600` },\n      borderColor: `${colorScheme}.600`,\n    },\n  };\n};\n\nconst variantOutlineLight = (\n  props: InterfaceAlertProps & { theme: any } & { colorScheme: any }\n) => {\n  let { colorScheme, status, theme } = props;\n\n  colorScheme = getColorScheme(props, !status ? colorScheme : status);\n\n  return {\n    borderWidth: 1,\n    _icon: { color: `${colorScheme}.700` },\n    borderColor: transparentize(`${colorScheme}.700`, 0.4)(theme),\n    _dark: {\n      _icon: { color: `${colorScheme}.600` },\n      borderColor: transparentize(`${colorScheme}.600`, 0.4)(theme),\n    },\n  };\n};\n\nconst variantSolid = (\n  props: InterfaceAlertProps & { theme: any } & { colorScheme: any }\n) => {\n  const { lightBg, darkBg } = getBg(props);\n  return {\n    bg: lightBg,\n    _dark: {\n      bg: darkBg,\n    },\n    _icon: { color: `muted.50` },\n  };\n};\n\nconst variantLeftAccent = (\n  props: InterfaceAlertProps & { theme: any } & { colorScheme: any }\n) => {\n  let { colorScheme, status } = props;\n  const { lightBg, darkBg } = getBg(props);\n\n  colorScheme = getColorScheme(props, !status ? colorScheme : status);\n\n  return {\n    borderLeftWidth: 4,\n    bg: lightBg,\n    _icon: { color: `${colorScheme}.700` },\n    borderLeftColor: `${colorScheme}.700`,\n    _dark: {\n      bg: darkBg,\n      _icon: { color: `${colorScheme}.600` },\n      borderLeftColor: `${colorScheme}.600`,\n    },\n  };\n};\n\nconst variantTopAccent = (\n  props: InterfaceAlertProps & { theme: any } & { colorScheme: any }\n) => {\n  let { colorScheme, status } = props;\n  const { lightBg, darkBg } = getBg(props);\n\n  colorScheme = getColorScheme(props, !status ? colorScheme : status);\n\n  return {\n    borderTopWidth: 4,\n    bg: lightBg,\n    _icon: { color: `${colorScheme}.700` },\n    borderTopColor: `${colorScheme}.700`,\n    _dark: {\n      bg: darkBg,\n      _icon: { color: `${colorScheme}.600` },\n      borderTopColor: `${colorScheme}.600`,\n    },\n  };\n};\n\nconst variants = {\n  'subtle': variantSubtle as any,\n  'solid': variantSolid as any,\n  'left-accent': variantLeftAccent as any,\n  'top-accent': variantTopAccent as any,\n  'outline': variantOutline as any,\n  'outline-light': variantOutlineLight as any,\n};\n\nexport const Alert = {\n  baseStyle: {\n    alignItems: 'center',\n    justifyContent: 'flex-start',\n    p: 3,\n    space: 3,\n    borderRadius: 'sm',\n  },\n  variants,\n  defaultProps: {\n    colorScheme: 'info',\n    variant: 'subtle',\n  },\n};\n\n// AlertIcon\n\nexport const AlertIcon = {\n  baseStyle: {\n    size: 4,\n  },\n};\n"
  },
  {
    "path": "src/theme/components/app-bar.ts",
    "content": "import { mode, getColorScheme } from './../tools';\n\nconst baseStyle = (props: Record<string, any>) => {\n  let colorScheme = getColorScheme(props);\n  return {\n    bg: mode(`${colorScheme}.500`, `${colorScheme}.300`)(props),\n    px: 2,\n  };\n};\nconst defaultProps = {\n  colorScheme: 'primary',\n};\n\nexport default {\n  baseStyle,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/components/aspect-ratio.ts",
    "content": "const baseStyle = {};\nconst defaultProps = {\n  ratio: 4 / 3,\n};\nexport default {\n  baseStyle,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/components/avatar-badge.ts",
    "content": "function baseStyle() {\n  return {\n    borderRadius: 'full',\n    borderWidth: 2,\n    bg: 'success.600',\n    size: 3,\n    position: 'absolute',\n    right: 0,\n    bottom: 0,\n    _light: {\n      borderColor: 'muted.50',\n    },\n    _dark: {\n      borderColor: 'muted.900',\n    },\n  };\n}\n\nexport default { baseStyle };\n"
  },
  {
    "path": "src/theme/components/avatar-group.ts",
    "content": "import type { IAvatarGroupProps } from '../../components/composites/Avatar/types';\nfunction baseStyle({ isVertical }: IAvatarGroupProps) {\n  return {\n    flexDirection: isVertical ? 'column-reverse' : 'row-reverse',\n    space: -4,\n    _avatar: {\n      borderWidth: 2,\n    },\n    _hiddenAvatarPlaceholder: {\n      _text: {\n        color: 'text.50',\n      },\n    },\n    _light: {\n      _avatar: {\n        borderColor: 'muted.50',\n      },\n      _hiddenAvatarPlaceholder: {\n        bg: 'gray.600',\n      },\n    },\n    _dark: {\n      _avatar: {\n        borderColor: 'muted.900',\n      },\n      _hiddenAvatarPlaceholder: {\n        bg: 'gray.600',\n      },\n    },\n  };\n}\n\nexport default {\n  baseStyle,\n  defaultProps: {\n    isVertical: false,\n  },\n};\n"
  },
  {
    "path": "src/theme/components/avatar.ts",
    "content": "import { randomColor, getRandomString } from './../tools';\nimport type { InterfaceAvatarProps } from '../../components/composites/Avatar/types';\nconst baseStyle = (props: InterfaceAvatarProps & { name: string }) => {\n  const { name } = props;\n  const bg = name\n    ? randomColor({ string: getRandomString(5) + name })\n    : 'gray.400';\n  return {\n    bg,\n    position: 'relative',\n    justifyContent: 'center',\n    alignItems: 'center',\n    borderRadius: 'full',\n    _text: {\n      fontWeight: 600,\n      color: 'text.50',\n    },\n    _image: {\n      borderRadius: 'full',\n      alt: '--',\n      _alt: {\n        fontWeight: 600,\n      },\n      style: {\n        height: '100%',\n        width: '100%',\n      },\n    },\n    borderColor: 'gray.800',\n    _dark: {\n      borderColor: 'white',\n    },\n  };\n};\n\nfunction getSize(size: any, fontSize: string, badgeSize: any) {\n  return {\n    width: size,\n    height: size,\n    _text: {\n      fontSize: fontSize,\n    },\n    _badgeSize: badgeSize,\n  };\n}\n\nconst sizes = {\n  'xs': getSize('6', '2xs', '2'),\n  'sm': getSize('8', 'xs', '3'),\n  'md': getSize('12', 'md', '4'),\n  'lg': getSize('16', 'xl', '5'),\n  'xl': getSize('24', '3xl', '6'),\n  '2xl': getSize('32', '5xl', '7'),\n};\n\nconst defaultProps = {\n  size: 'md',\n};\n\nexport default {\n  baseStyle,\n  sizes,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/components/badge.ts",
    "content": "import { getColorScheme } from '../tools';\nimport type { InterfaceBadgeProps } from '../../components/composites/Badge/types';\nconst baseStyle = {\n  flexDirection: 'row',\n  justifyContent: 'center',\n  space: 1,\n  px: '2',\n  py: '0.5',\n  alignItems: 'center',\n  _text: { fontSize: 'xs', fontWeight: 'medium' },\n};\n\nfunction variantSolid(props: InterfaceBadgeProps & { colorScheme: any }) {\n  const colorScheme = getColorScheme(props);\n  return {\n    _text: {\n      color: 'text.50',\n    },\n    _icon: {\n      color: 'text.50',\n    },\n    bg: `${colorScheme}.600`,\n    borderWidth: '1',\n    borderColor: 'transparent',\n    borderRadius: '2',\n  };\n}\n\nfunction variantSubtle(props: InterfaceBadgeProps & { colorScheme: any }) {\n  const colorScheme = getColorScheme(props);\n  return {\n    _text: { color: `${colorScheme}.900` },\n    _icon: { color: `${colorScheme}.900` },\n    bg: `${colorScheme}.100`,\n    _dark: { bg: `${colorScheme}.300` },\n    borderWidth: '1',\n    borderRadius: '2',\n    borderColor: 'transparent',\n  };\n}\n\nfunction variantOutline(props: InterfaceBadgeProps & { colorScheme: any }) {\n  const colorScheme = getColorScheme(props);\n  return {\n    _text: { color: `${colorScheme}.600` },\n    _icon: { color: `${colorScheme}.600` },\n    borderColor: `${colorScheme}.600`,\n    _dark: {\n      _text: {\n        color: `${colorScheme}.300`,\n      },\n      _icon: {\n        color: `${colorScheme}.300`,\n      },\n      borderColor: `${colorScheme}.300`,\n    },\n    borderRadius: '2',\n    borderWidth: '1',\n  };\n}\n\nconst variants = {\n  solid: variantSolid as any,\n  subtle: variantSubtle as any,\n  outline: variantOutline as any,\n};\n\nconst defaultProps = {\n  variant: 'subtle',\n  colorScheme: 'muted',\n  size: 'md',\n};\n\nexport default {\n  baseStyle,\n  variants,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/components/box.ts",
    "content": "const baseStyle = {};\nconst defaultProps = {};\nexport default {\n  baseStyle,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/components/breadcrumb.ts",
    "content": "const baseStyle = {\n  width: 'auto',\n  height: 'auto',\n  display: 'flex',\n  flexDirection: 'row',\n  spacing: '2',\n};\nconst defaultProps = {\n  direction: 'row',\n  wrap: 'wrap',\n};\n\nexport const Breadcrumb = {\n  baseStyle,\n  defaultProps,\n};\n\nexport const BreadcrumbText = {\n  baseStyle: { ...baseStyle, _current: { fontWeight: 'bold' } },\n  defaultProps,\n};\n\nexport const BreadcrumbIcon = {\n  baseStyle: { ...baseStyle },\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/components/button.ts",
    "content": "import type { InterfaceButtonProps } from '../../components/primitives/Button/types';\n\nconst baseStyle = (props: InterfaceButtonProps & { theme: any }) => {\n  const { primary } = props.theme.colors;\n\n  return {\n    borderRadius: 'sm', // '4px'\n    flexDirection: 'row',\n    justifyContent: 'center',\n    alignItems: 'center',\n    _web: {\n      _disabled: {\n        cursor: 'not-allowed',\n      },\n      _loading: {\n        cursor: 'not-allowed',\n      },\n      cursor: 'pointer',\n      userSelect: 'none',\n    },\n    _focusVisible: {\n      _web: {\n        outlineWidth: '0',\n        style: { boxShadow: `${primary[400]} 0px 0px 0px 2px` },\n      },\n    },\n    _dark: {\n      _focusVisible: {\n        _web: {\n          outlineWidth: '0',\n          style: { boxShadow: `${primary[500]} 0px 0px 0px 2px` },\n        },\n      },\n    },\n    _stack: {\n      space: '1.5',\n      alignItems: 'center',\n    },\n    _loading: {\n      opacity: '40',\n    },\n    _disabled: {\n      opacity: '40',\n    },\n    _spinner: {\n      size: 'sm',\n      focusable: false,\n    },\n  };\n};\n\nfunction variantGhost({ colorScheme }: InterfaceButtonProps) {\n  return {\n    _text: {\n      color: `${colorScheme}.600`,\n    },\n    _icon: {\n      color: `${colorScheme}.600`,\n    },\n    _spinner: {\n      color: `${colorScheme}.600`,\n    },\n    _hover: {\n      bg: `${colorScheme}.600:alpha.10`,\n    },\n    _pressed: {\n      bg: `${colorScheme}.600:alpha.20`,\n    },\n\n    _dark: {\n      _text: {\n        color: `${colorScheme}.500`,\n      },\n      _icon: {\n        color: `${colorScheme}.500`,\n      },\n      _spinner: {\n        color: `${colorScheme}.500`,\n      },\n      _hover: {\n        bg: `${colorScheme}.500:alpha.10`,\n      },\n      _pressed: {\n        bg: `${colorScheme}.500:alpha.20`,\n      },\n    },\n  };\n}\n\nfunction variantOutline({ colorScheme }: InterfaceButtonProps) {\n  return {\n    borderWidth: '1px',\n    borderColor: 'muted.300',\n    _text: {\n      color: `${colorScheme}.600`,\n    },\n    _icon: {\n      color: `${colorScheme}.600`,\n    },\n    _spinner: {\n      color: `${colorScheme}.600`,\n    },\n    _hover: {\n      bg: `${colorScheme}.600:alpha.10`,\n    },\n    _pressed: {\n      bg: `${colorScheme}.600:alpha.20`,\n    },\n\n    _dark: {\n      borderColor: 'muted.700',\n      _text: {\n        color: `${colorScheme}.500`,\n      },\n      _icon: {\n        color: `${colorScheme}.500`,\n      },\n      _spinner: {\n        color: `${colorScheme}.500`,\n      },\n      _hover: {\n        bg: `${colorScheme}.500:alpha.10`,\n      },\n      _pressed: {\n        bg: `${colorScheme}.500:alpha.20`,\n      },\n    },\n  };\n}\n\nfunction variantSolid({ colorScheme }: InterfaceButtonProps) {\n  return {\n    _text: {\n      color: 'text.50',\n    },\n    _icon: {\n      color: 'text.50',\n    },\n    _spinner: {\n      color: 'text.50',\n    },\n    bg: `${colorScheme}.600`,\n    _hover: {\n      bg: `${colorScheme}.700`,\n    },\n    _pressed: {\n      bg: `${colorScheme}.800`,\n    },\n\n    _dark: {\n      bg: `${colorScheme}.600`,\n      _hover: {\n        bg: `${colorScheme}.700`,\n      },\n      _pressed: {\n        bg: `${colorScheme}.800`,\n      },\n    },\n  };\n}\n\nfunction variantSubtle({ colorScheme }: InterfaceButtonProps) {\n  return {\n    bg: `${colorScheme}.100`,\n    _text: {\n      color: `${colorScheme}.900`,\n    },\n    _icon: {\n      color: `${colorScheme}.900`,\n    },\n    _spinner: {\n      color: `${colorScheme}.900`,\n    },\n    _hover: {\n      bg: `${colorScheme}.200`,\n    },\n    _pressed: {\n      bg: `${colorScheme}.300`,\n    },\n\n    _dark: {\n      bg: `${colorScheme}.300`,\n      _hover: {\n        bg: `${colorScheme}.200`,\n      },\n      _pressed: {\n        bg: `${colorScheme}.100`,\n      },\n    },\n  };\n}\n\nfunction variantLink({ colorScheme }: InterfaceButtonProps) {\n  return {\n    _icon: {\n      color: `${colorScheme}.600`,\n    },\n    _spinner: {\n      color: `${colorScheme}.600`,\n    },\n\n    _hover: {\n      _text: {\n        textDecorationLine: 'underline',\n      },\n    },\n    _pressed: {\n      _text: {\n        color: `${colorScheme}.800`,\n        textDecorationLine: 'underline',\n      },\n    },\n\n    _text: {\n      color: `${colorScheme}.600`,\n    },\n    _dark: {\n      _text: {\n        color: `${colorScheme}.500`,\n      },\n      _pressed: {\n        _text: {\n          color: `${colorScheme}.300`,\n        },\n      },\n    },\n  };\n}\n\nconst variants = {\n  ghost: variantGhost as any,\n  outline: variantOutline as any,\n  solid: variantSolid as any,\n  subtle: variantSubtle as any,\n  link: variantLink as any,\n  unstyled: {} as any,\n};\n\nconst sizes = {\n  lg: {\n    px: '3',\n    py: '3',\n    _text: {\n      fontSize: 'md',\n    },\n    _icon: {\n      size: 'md',\n    },\n  },\n  md: {\n    px: '3',\n    py: '2.5',\n    _text: {\n      fontSize: 'sm',\n    },\n    _icon: {\n      size: 'sm',\n    },\n  },\n  sm: {\n    px: '3',\n    py: '2',\n    _text: {\n      fontSize: 'xs',\n    },\n    _icon: {\n      size: 'sm',\n    },\n  },\n  xs: {\n    px: '3',\n    py: '2',\n    _text: {\n      fontSize: '2xs',\n    },\n    _icon: {\n      size: 'xs',\n    },\n  },\n};\n\nconst defaultProps = {\n  variant: 'solid',\n  size: 'md',\n  colorScheme: 'primary',\n};\n\nexport const ButtonGroup = {\n  baseStyle: { direction: 'row' },\n  defaultProps: { space: 2 },\n};\n\nexport default {\n  baseStyle,\n  variants,\n  sizes,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/components/card.ts",
    "content": "const baseStyle = {\n  shadow: 4,\n  borderRadius: 'md',\n  padding: 4,\n  overflow: 'hidden',\n};\nconst defaultProps = {};\nexport default {\n  baseStyle,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/components/center.ts",
    "content": "// For Square and circle variation\nconst sizes = {\n  'xs': {\n    height: 10,\n    width: 10,\n  },\n  'sm': {\n    height: 12,\n    width: 12,\n  },\n  'md': {\n    height: 16,\n    width: 16,\n  },\n  'lg': {\n    height: 24,\n    width: 24,\n  },\n  'xl': {\n    height: 32,\n    width: 32,\n  },\n  '2xl': {\n    height: 40,\n    width: 40,\n  },\n};\n\nexport default {\n  baseStyle: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  sizes,\n};\n"
  },
  {
    "path": "src/theme/components/checkbox-group.ts",
    "content": "const baseStyle = () => {\n  return {\n    alignItems: 'flex-start',\n  };\n};\n\nexport default {\n  baseStyle,\n};\n"
  },
  {
    "path": "src/theme/components/checkbox.ts",
    "content": "const baseStyle = (props: Record<string, any>) => {\n  const { colorScheme: c, theme } = props;\n  const { colors } = theme;\n  return {\n    justifyContent: 'flex-start',\n    flexDirection: 'row',\n    borderWidth: 2,\n    borderRadius: 'sm',\n    opacity: 1,\n    p: 0.5,\n\n    bg: 'muted.50',\n    borderColor: 'muted.400',\n    _text: {\n      color: 'darkText',\n      ml: 2,\n    },\n    _icon: {\n      color: `muted.50`,\n    },\n    _checked: {\n      borderColor: `${c}.600`,\n      bg: `${c}.600`,\n      _hover: {\n        borderColor: `${c}.700`,\n        bg: `${c}.700`,\n        _disabled: {\n          borderColor: `${c}.600`,\n          bg: `${c}.600`,\n        },\n      },\n      _pressed: {\n        borderColor: `${c}.800`,\n        bg: `${c}.800`,\n      },\n    },\n    _hover: {\n      borderColor: 'muted.500',\n      _disabled: {\n        borderColor: 'muted.400',\n      },\n    },\n    _pressed: {\n      borderColor: 'muted.600',\n    },\n    _invalid: {\n      borderColor: 'error.600',\n    },\n\n    _dark: {\n      bg: 'muted.900',\n      borderColor: 'muted.500',\n      _text: {\n        color: 'lightText',\n      },\n      _icon: {\n        color: `muted.900`,\n      },\n      _checked: {\n        borderColor: `${c}.500`,\n        bg: `${c}.500`,\n        _hover: {\n          borderColor: `${c}.400`,\n          bg: `${c}.400`,\n          _disabled: {\n            borderColor: `${c}.500`,\n            bg: `${c}.500`,\n          },\n        },\n        _pressed: {\n          borderColor: `${c}.300`,\n          bg: `${c}.300`,\n        },\n      },\n      _hover: {\n        borderColor: 'muted.400',\n        _disabled: {\n          borderColor: 'muted.500',\n        },\n      },\n      _pressed: {\n        borderColor: 'muted.300',\n      },\n      _invalid: {\n        borderColor: 'error.500',\n      },\n    },\n\n    _stack: {\n      direction: 'row',\n      alignItems: 'center',\n      space: 2,\n      _web: {\n        cursor: props.isDisabled ? 'not-allowed' : 'pointer',\n      },\n    },\n\n    _focusVisible: {\n      _web: {\n        style: {\n          outlineWidth: '2px',\n          outlineColor: colors[c][400],\n          outlineStyle: 'solid',\n        },\n      },\n    },\n\n    _disabled: {\n      _web: {\n        cursor: 'not-allowed',\n      },\n      opacity: 0.4,\n    },\n  };\n};\n\nconst sizes = {\n  lg: { _icon: { size: 5 }, _text: { fontSize: 'xl' } },\n  md: { _icon: { size: 4 }, _text: { fontSize: 'lg' } },\n  sm: { _icon: { size: 3 }, _text: { fontSize: 'md' } },\n};\n\nconst defaultProps = {\n  defaultIsChecked: false,\n  size: 'sm',\n  colorScheme: 'primary',\n};\n\nexport default {\n  baseStyle,\n  sizes,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/components/circle.ts",
    "content": "const sizes = {\n  'xs': {\n    height: 10,\n    width: 10,\n  },\n  'sm': {\n    height: 12,\n    width: 12,\n  },\n  'md': {\n    height: 16,\n    width: 16,\n  },\n  'lg': {\n    height: 24,\n    width: 24,\n  },\n  'xl': {\n    height: 32,\n    width: 32,\n  },\n  '2xl': {\n    height: 40,\n    width: 40,\n  },\n};\n\nconst baseStyle = {\n  rounded: 'full',\n  alignItems: 'center',\n  justifyContent: 'center',\n};\n\nexport default {\n  baseStyle,\n  sizes,\n};\n"
  },
  {
    "path": "src/theme/components/circular-progress.ts",
    "content": "import { mode, getColorScheme } from '../tools';\n\nconst sizes = {\n  'xs': {\n    height: 6,\n    width: 6,\n  },\n  'sm': {\n    height: 8,\n    width: 8,\n  },\n  'md': {\n    height: 16,\n    width: 16,\n  },\n  'lg': {\n    height: 20,\n    width: 20,\n  },\n  'xl': {\n    height: 24,\n    width: 24,\n  },\n  '2xl': {\n    height: 32,\n    width: 32,\n  },\n};\nconst defaultProps = {\n  thickness: 8,\n  colorScheme: 'primary',\n  size: 'lg',\n};\n\nfunction baseStyle(props: Record<string, any>) {\n  const colorScheme = getColorScheme(props);\n  return {\n    color: mode(`${colorScheme}.600`, `${colorScheme}.500`)(props),\n    trackColor: mode(`${colorScheme}.200`, `${colorScheme}.800`)(props),\n  };\n}\n\nexport default { baseStyle, sizes, defaultProps };\n"
  },
  {
    "path": "src/theme/components/code.ts",
    "content": "import Badge from './badge';\nimport { Platform } from 'react-native';\n\nconst { variants, defaultProps } = Badge;\n\nconst baseStyle = {\n  _text: {\n    fontFamily: Platform.OS === 'ios' ? 'Courier' : 'monospace',\n    fontSize: 'sm',\n  },\n  borderRadius: 'sm',\n  px: 2,\n  py: 1,\n};\n\nexport default {\n  baseStyle,\n  variants,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/components/container.ts",
    "content": "import type { Dict } from './../tools';\n\nconst baseStyle = (props: Dict) => {\n  const { centerContent } = props;\n\n  return {\n    maxWidth: '80%',\n    alignItems: centerContent ? 'center' : 'flex-start',\n    _text: { textAlign: centerContent ? 'center' : 'left' },\n  };\n};\n\nexport default {\n  baseStyle,\n};\n"
  },
  {
    "path": "src/theme/components/divider.ts",
    "content": "function baseStyle(props: Record<string, any>) {\n  const { orientation, thickness } = props;\n  const orientationProps =\n    orientation === 'vertical'\n      ? {\n          width: `${thickness}px`, // handle for web : To be discussed\n          height: '100%',\n        }\n      : {\n          width: '100%',\n          height: `${thickness}px`,\n        };\n\n  return {\n    bg: 'muted.300',\n    _dark: {\n      bg: 'muted.600',\n    },\n    ...orientationProps,\n  };\n}\n\nexport default {\n  baseStyle,\n  defaultProps: {\n    orientation: 'horizontal',\n    thickness: '1',\n  },\n};\n"
  },
  {
    "path": "src/theme/components/fab.ts",
    "content": "const placementProps: any = {\n  'top-right': { top: 4, right: 4, position: 'absolute' },\n  'top-left': { top: 4, left: 4, position: 'absolute' },\n  'bottom-right': { bottom: 4, right: 4, position: 'absolute' },\n  'bottom-left': { bottom: 4, left: 4, position: 'absolute' },\n};\nconst baseStyle = {\n  shadow: 7,\n  rounded: 'full',\n  zIndex: 20,\n  placementProps,\n  px: 4,\n  py: 4,\n};\nconst defaultProps = {\n  renderInPortal: true,\n  variant: 'solid',\n  colorScheme: 'primary',\n  placement: 'bottom-right',\n};\n\nexport default { baseStyle, defaultProps };\n"
  },
  {
    "path": "src/theme/components/flatList.ts",
    "content": "const baseStyle = {};\nconst defaultProps = {};\nexport default {\n  baseStyle,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/components/flex.ts",
    "content": "export const Flex = {\n  baseStyle: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n};\n\nexport const Spacer = {\n  baseStyle: {\n    flexGrow: 1,\n  },\n};\n"
  },
  {
    "path": "src/theme/components/form-control.ts",
    "content": "// FormControl\nexport const FormControl = {\n  baseStyle: {\n    width: '100%',\n  },\n};\n\n// FormControlErrorMessage\nexport const FormControlErrorMessage = {\n  baseStyle: () => {\n    return {\n      mt: '2',\n      _text: {\n        fontSize: 'xs',\n        color: 'error.600',\n      },\n      _stack: { space: 1, alignItems: 'center' },\n      _dark: {\n        _text: {\n          color: 'error.500',\n        },\n      },\n    };\n  },\n};\n\n// FormControlLabel\nexport const FormControlLabel = {\n  baseStyle: () => {\n    return {\n      flexDirection: 'row',\n      justifyContent: 'flex-start',\n      _text: {\n        fontSize: 'sm',\n        fontWeight: 'medium',\n        color: 'text.500',\n      },\n      my: '1',\n      _astrick: {\n        color: 'error.600',\n      },\n      _dark: {\n        _text: {\n          color: 'text.400',\n        },\n        _astrick: {\n          color: 'error.500',\n        },\n      },\n    };\n  },\n};\n\n// FormControlHelperText\nexport const FormControlHelperText = {\n  baseStyle: () => {\n    return {\n      mt: '2',\n      _text: {\n        fontSize: 'xs',\n        color: 'text.500',\n      },\n      _dark: {\n        _text: {\n          color: 'text.400',\n        },\n      },\n    };\n  },\n};\n"
  },
  {
    "path": "src/theme/components/heading.ts",
    "content": "const baseStyle = () => {\n  return {\n    color: 'text.900',\n    _dark: {\n      color: 'text.50',\n    },\n    fontWeight: 'bold',\n    lineHeight: 'sm',\n  };\n};\n\nconst sizes = {\n  '4xl': {\n    fontSize: { base: '6xl', md: '7xl' },\n    letterSpacing: 'xl',\n  },\n  '3xl': {\n    fontSize: { base: '5xl', md: '6xl' },\n    letterSpacing: 'xl',\n  },\n  '2xl': {\n    fontSize: { base: '4xl', md: '5xl' },\n  },\n  'xl': {\n    fontSize: { base: '3xl', md: '4xl' },\n  },\n  'lg': {\n    fontSize: { base: '2xl', md: '3xl' },\n  },\n  'md': { fontSize: 'xl' },\n  'sm': { fontSize: 'md' },\n  'xs': { fontSize: 'sm' },\n};\n\nconst defaultProps = {\n  size: 'lg',\n};\n\nexport default {\n  baseStyle,\n  sizes,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/components/hstack.ts",
    "content": "const baseStyle = {};\nconst defaultProps = {};\nconst sizes = {};\nexport default {\n  baseStyle,\n  defaultProps,\n  sizes,\n};\n"
  },
  {
    "path": "src/theme/components/icon-button.ts",
    "content": "const baseStyle = (props: any) => {\n  const { colorScheme } = props;\n  const colors = props.theme.colors;\n\n  return {\n    borderRadius: 'sm', // '4px'\n    flexDirection: 'row',\n    justifyContent: 'center',\n    alignItems: 'center',\n    _web: {\n      _disabled: {\n        cursor: 'not-allowed',\n      },\n      _loading: {\n        cursor: 'not-allowed',\n      },\n      cursor: 'pointer',\n      userSelect: 'none',\n    },\n    _focus: {\n      borderColor: `${colorScheme}.400`,\n    },\n    _focusVisible: {\n      _web: {\n        style: {\n          outlineWidth: '2px',\n          outlineColor: `${colors[colorScheme][600]}`,\n          outlineStyle: 'solid',\n        },\n      },\n    },\n    _loading: {\n      opacity: '40',\n    },\n    _disabled: {\n      opacity: '40',\n    },\n    _dark: {\n      _focusVisible: {\n        _web: {\n          style: {\n            outlineWidth: '2px',\n            outlineColor: `${colors[colorScheme][500]}`,\n            outlineStyle: 'solid',\n          },\n        },\n      },\n    },\n  };\n};\n\nfunction variantGhost({ colorScheme }: Record<string, any>) {\n  return {\n    _icon: {\n      color: `${colorScheme}.600`,\n    },\n    _hover: {\n      bg: `${colorScheme}.600:alpha.10`,\n    },\n    _pressed: {\n      bg: `${colorScheme}.600:alpha.20`,\n    },\n    _dark: {\n      _icon: {\n        color: `${colorScheme}.500`,\n      },\n      _hover: {\n        bg: `${colorScheme}.500:alpha.10`,\n      },\n      _pressed: {\n        bg: `${colorScheme}.500:alpha.20`,\n      },\n    },\n  };\n}\n\nfunction variantOutline({ colorScheme }: Record<string, any>) {\n  return {\n    borderWidth: '1px',\n    borderColor: `${colorScheme}.600`,\n    _icon: {\n      color: `${colorScheme}.600`,\n    },\n    _hover: {\n      bg: `${colorScheme}.700`,\n      _icon: {\n        color: 'muted.50',\n      },\n    },\n    _pressed: {\n      bg: `${colorScheme}.800`,\n      _icon: {\n        color: 'muted.50',\n      },\n    },\n    _focus: {\n      bg: `${colorScheme}.600`,\n      _icon: {\n        color: 'muted.50',\n      },\n    },\n    _dark: {\n      borderColor: `${colorScheme}.500`,\n      _icon: {\n        color: `${colorScheme}.500`,\n      },\n      _hover: {\n        bg: `${colorScheme}.400`,\n        _icon: {\n          color: 'muted.900',\n        },\n      },\n      _pressed: {\n        bg: `${colorScheme}.300`,\n        _icon: {\n          color: 'muted.900',\n        },\n      },\n      _focus: {\n        bg: `${colorScheme}.500`,\n        _icon: {\n          color: 'muted.900',\n        },\n      },\n    },\n  };\n}\n\nfunction variantSolid({ colorScheme }: Record<string, any>) {\n  return {\n    bg: `${colorScheme}.600`,\n    _hover: {\n      bg: `${colorScheme}.700`,\n    },\n    _pressed: {\n      bg: `${colorScheme}.800`,\n    },\n    _icon: {\n      color: 'muted.50',\n    },\n    _dark: {\n      bg: `${colorScheme}.500`,\n      _hover: {\n        bg: `${colorScheme}.400`,\n      },\n      _pressed: {\n        bg: `${colorScheme}.300`,\n        _icon: {\n          color: 'muted.900',\n        },\n      },\n      _icon: {\n        color: 'muted.900',\n      },\n    },\n  };\n}\n\nfunction variantSubtle({ colorScheme }: Record<string, any>) {\n  return {\n    _text: {\n      color: `${colorScheme}.900`,\n    },\n    _icon: {\n      color: `${colorScheme}.900`,\n    },\n    bg: `${colorScheme}.100`,\n    _hover: {\n      bg: `${colorScheme}.200`,\n    },\n    _pressed: {\n      bg: `${colorScheme}.300`,\n    },\n    _dark: {\n      bg: `${colorScheme}.300`,\n      _hover: {\n        bg: `${colorScheme}.200`,\n      },\n      _pressed: {\n        bg: `${colorScheme}.100`,\n      },\n    },\n  };\n}\n\nfunction variantLink({ colorScheme }: Record<string, any>) {\n  return {\n    _spinner: {\n      color: `${colorScheme}.600`,\n    },\n\n    _icon: {\n      color: `${colorScheme}.600`,\n    },\n    _hover: {\n      _icon: {\n        color: `${colorScheme}.700`,\n      },\n    },\n    _pressed: {\n      _icon: {\n        color: `${colorScheme}.800`,\n      },\n    },\n    _dark: {\n      _icon: {\n        color: `${colorScheme}.500`,\n      },\n      _hover: {\n        _icon: {\n          color: `${colorScheme}.400`,\n        },\n      },\n      _pressed: {\n        _icon: {\n          color: `${colorScheme}.300`,\n        },\n      },\n    },\n  };\n}\n\nfunction variantUnstyled() {\n  return {\n    _icon: {\n      color: 'muted.900',\n    },\n    _dark: {\n      _icon: {\n        color: 'muted.50',\n      },\n    },\n  };\n}\n\nconst variants = {\n  ghost: variantGhost,\n  outline: variantOutline,\n  solid: variantSolid,\n  subtle: variantSubtle,\n  link: variantLink,\n  unstyled: variantUnstyled,\n};\n\nconst sizes = {\n  lg: {\n    p: '3',\n    _icon: {\n      size: 'lg',\n    },\n  },\n  md: {\n    p: '2.5',\n    _icon: {\n      size: 'md',\n    },\n  },\n  sm: {\n    p: '2',\n    _icon: {\n      size: 'sm',\n    },\n  },\n  xs: {\n    p: '1.5',\n    _icon: {\n      size: 'xs',\n    },\n  },\n};\n\nconst defaultProps = {\n  variant: 'ghost',\n  size: 'md',\n  colorScheme: 'primary',\n};\n\nexport default {\n  baseStyle,\n  variants,\n  sizes,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/components/icon.ts",
    "content": "const baseStyle = () => {\n  return {\n    color: 'muted.500',\n    _dark: {\n      color: 'muted.400',\n    },\n  };\n};\n\nconst sizes = {\n  '2xs': 2,\n  'xs': 3,\n  'sm': 4,\n  'md': 5,\n  'lg': 6,\n  'xl': 7,\n  '2xl': 8,\n  '3xl': 9,\n  '4xl': 10,\n  '5xl': 12,\n  '6xl': 16,\n};\n\nconst defaultProps = { size: 'sm' };\nexport default { baseStyle, sizes, defaultProps };\n"
  },
  {
    "path": "src/theme/components/image.ts",
    "content": "// Image\nconst sizes = {\n  '2xs': '6',\n  'xs': '10',\n  'sm': '16',\n  'md': '20',\n  'lg': '24',\n  'xl': '32',\n  '2xl': '64',\n  'full': '100%',\n};\n\nexport const Image = {\n  baseStyle: {\n    maxWidth: '100%',\n  },\n  sizes,\n  defaultProps: {},\n};\n"
  },
  {
    "path": "src/theme/components/index.ts",
    "content": "import {\n  Accordion,\n  AccordionItem,\n  AccordionIcon,\n  AccordionSummary,\n  AccordionDetails,\n} from './accordion';\nimport {\n  Actionsheet,\n  ActionsheetContent,\n  // ActionsheetHeader,\n  // ActionsheetFooter,\n  ActionsheetItem,\n} from './actionsheet';\nimport { Select, SelectItem } from './select';\nimport { Alert, AlertIcon } from './alert';\nimport AspectRatio from './aspect-ratio';\nimport Avatar from './avatar';\nimport AvatarBadge from './avatar-badge';\nimport AvatarGroup from './avatar-group';\nimport Badge from './badge';\nimport { Breadcrumb, BreadcrumbText, BreadcrumbIcon } from './breadcrumb';\nimport Button, { ButtonGroup } from './button';\nimport Card from './card';\nimport Center from './center';\nimport Checkbox from './checkbox';\nimport CheckboxGroup from './checkbox-group';\nimport Box from './box';\nimport FlatList from './flatList';\nimport KeyboardAvoidingView from './keyboardAvoidingView';\nimport ScrollView from './scrollView';\nimport SectionList from './sectionList';\nimport StatusBar from './statusBar';\nimport CircularProgress from './circular-progress';\nimport Code from './code';\nimport Container from './container';\nimport HStack from './hstack';\nimport VStack from './vstack';\nimport Divider from './divider';\nimport Circle from './circle';\nimport SimpleGrid from './simple-grid';\nimport {\n  FormControl,\n  FormControlLabel,\n  FormControlHelperText,\n  FormControlErrorMessage,\n} from './form-control';\nimport Heading from './heading';\nimport Icon from './icon';\nimport IconButton from './icon-button';\nimport { Image } from './image';\nimport { Input } from './input';\nimport { Tooltip } from './tooltip';\nimport Kbd from './kbd';\nimport Link from './link';\nimport { default as Menu, MenuGroup, MenuItem } from './menu';\nimport {\n  Modal,\n  ModalContent,\n  ModalHeader,\n  ModalBody,\n  ModalFooter,\n  ModalOverlay,\n  ModalCloseButton,\n} from './modal';\nimport {\n  AlertDialog,\n  AlertDialogContent,\n  AlertDialogHeader,\n  AlertDialogBody,\n  AlertDialogFooter,\n  AlertDialogOverlay,\n  AlertDialogCloseButton,\n} from './alert-dialog';\nimport * as PopoverComponentTheme from './popover';\nimport { default as NumberInput, NumberInputStepper } from './number-input';\nimport PinInput from './pin-input';\nimport Pressable from './pressable';\nimport Progress from './progress';\nimport Radio from './radio';\nimport RadioGroup from './radio-group';\nimport { Skeleton, SkeletonText } from './skeleton';\nimport Spinner from './spinner';\nimport Stat from './stat';\nimport Switch from './switch';\nimport Tabs from './tabs';\nimport Tag from './tag';\nimport Text from './text';\nimport AppBar from './app-bar';\nimport TextArea from './textarea';\nimport { TextField } from './textField';\nimport { Toast } from './toast';\nimport { Fade, ScaleFade, Slide, SlideFade } from './transitions';\nimport { List, ListItem, ListIcon } from './list';\nimport { TypeAheadSearchItem } from './typeahead';\nimport { Wrap } from './wrap';\nimport { Flex, Spacer } from './flex';\nimport Stack from './stack';\nimport Square from './square';\nimport View from './view';\nimport ZStack from './zstack';\nimport FAB from './fab';\nimport { SliderTrack, Slider, SliderThumb, SliderFilledTrack } from './slider';\nimport InputLeftAddon from './inputleftaddon';\nimport InputRightAddon from './inputrightaddon';\nexport default {\n  FlatList,\n  KeyboardAvoidingView,\n  ScrollView,\n  SectionList,\n  StatusBar,\n  Accordion,\n  AccordionItem,\n  AccordionIcon,\n  AccordionSummary,\n  AccordionDetails,\n  Actionsheet,\n  ActionsheetContent,\n  // ActionsheetHeader,\n  // ActionsheetFooter,\n  ActionsheetItem,\n  Alert,\n  // AlertDescription,\n  // AlertTitle,\n  AlertIcon,\n  AspectRatio,\n  Avatar,\n  AvatarBadge,\n  AvatarGroup,\n  Badge,\n  Box,\n  Breadcrumb,\n  BreadcrumbText,\n  BreadcrumbIcon,\n  Button,\n  ButtonGroup,\n  Card,\n  Center,\n  Circle,\n  Checkbox,\n  CheckboxGroup,\n  CircularProgress,\n  Code,\n  Container,\n  Divider,\n  Fade,\n  FAB,\n  Flex,\n  Spacer,\n  FormControl,\n  FormControlLabel,\n  FormControlHelperText,\n  FormControlErrorMessage,\n  Heading,\n  HStack,\n  VStack,\n  Icon,\n  IconButton,\n  Image,\n  Input,\n  InputLeftAddon,\n  InputRightAddon,\n  Kbd,\n  Link,\n  List,\n  ListItem,\n  ListIcon,\n  Menu,\n  MenuGroup,\n  MenuItem,\n  Modal,\n  ModalContent,\n  ModalHeader,\n  ModalBody,\n  ModalFooter,\n  ModalOverlay,\n  ModalCloseButton,\n  AlertDialog,\n  AlertDialogContent,\n  AlertDialogHeader,\n  AlertDialogBody,\n  AlertDialogFooter,\n  AlertDialogOverlay,\n  AlertDialogCloseButton,\n  NumberInput,\n  NumberInputStepper,\n  PinInput,\n  Pressable,\n  ...PopoverComponentTheme,\n  Progress,\n  Radio,\n  RadioGroup,\n  ScaleFade,\n  Select,\n  SelectItem,\n  SimpleGrid,\n  Skeleton,\n  SkeletonText,\n  SliderFilledTrack,\n  SliderThumb,\n  SliderTrack,\n  Slider,\n  Slide,\n  SlideFade,\n  Spinner,\n  Square,\n  Stack,\n  Stat,\n  Switch,\n  Tabs,\n  Tag,\n  Text,\n  AppBar,\n  TextArea,\n  TextField,\n  Toast,\n  TypeAheadSearchItem,\n  View,\n  Wrap,\n  ZStack,\n  Tooltip,\n};\n"
  },
  {
    "path": "src/theme/components/input.ts",
    "content": "import { transparentize } from '../tools';\nimport type { InterfaceInputProps } from '../../components/primitives/Input/types';\nconst baseStyle = (props: InterfaceInputProps & { theme: any }) => {\n  const { primary, error } = props.theme.colors;\n\n  return {\n    fontFamily: 'body',\n    py: '2',\n    px: '3',\n    borderRadius: 'sm',\n    overflow: 'hidden',\n    _disabled: {\n      opacity: '0.4',\n      _web: {\n        disabled: true,\n        cursor: 'not-allowed',\n      },\n    },\n    _web: {\n      outlineWidth: '0',\n      overflow: 'auto',\n      lineHeight: 'lg', // Todo: Move to _web inside size so that sm and xs don't have this much height\n      style: { outline: 'none' },\n      cursor: 'auto',\n    },\n\n    _input: {\n      bg: 'transparent',\n      flex: 1,\n      w: '100%',\n      h: '100%',\n    },\n    placeholderTextColor: 'text.400',\n    color: 'text.900',\n    borderColor: 'muted.300',\n    _stack: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      // justifyContent: 'space-between',\n      overflow: 'hidden',\n    },\n    _hover: {\n      borderColor: 'primary.600',\n    },\n    _invalid: {\n      borderColor: 'error.600',\n      _hover: { borderColor: 'error.600' },\n      _stack: {\n        style: {\n          outlineWidth: '0',\n          boxShadow: `0 0 0 1px ${error[600]}`,\n        },\n      },\n    },\n    _focus: {\n      borderColor: 'primary.600',\n      _hover: { borderColor: 'primary.600' },\n      _invalid: {\n        borderColor: 'error.600',\n        _hover: { borderColor: 'error.600' },\n        _stack: {\n          style: {\n            outlineWidth: '0',\n            boxShadow: `0 0 0 1px ${error[600]}`,\n          },\n        },\n      },\n      _ios: {\n        selectionColor: 'coolGray.800',\n      },\n      _android: {\n        selectionColor: 'coolGray.800',\n      },\n      _disabled: {\n        placeholderTextColor: 'muted.700',\n        _hover: {\n          borderColor: 'muted.300',\n        },\n      },\n      _stack: {\n        style: {\n          outlineWidth: '0',\n          boxShadow: `0 0 0 1px ${primary[600]}`,\n        },\n      },\n    },\n    _dark: {\n      placeholderTextColor: 'text.600',\n      color: 'text.50',\n      borderColor: 'muted.700',\n      _hover: {\n        borderColor: 'primary.500',\n      },\n      _focus: {\n        borderColor: 'primary.500',\n        _hover: { borderColor: 'primary.500' },\n        _stack: {\n          style: {\n            outlineWidth: '0',\n            boxShadow: `0 0 0 1px ${primary[500]}`,\n          },\n        },\n      },\n      _invalid: {\n        borderColor: 'error.500',\n        _stack: {\n          style: {\n            outlineWidth: '0',\n            boxShadow: `0 0 0 1px ${error[500]}`,\n          },\n        },\n        _hover: { borderColor: 'error.500' },\n      },\n      _ios: {\n        selectionColor: 'warmGray.50',\n      },\n      _android: {\n        selectionColor: 'warmGray.50',\n      },\n      _disabled: {\n        placeholderTextColor: 'text.50',\n        _hover: {\n          borderColor: 'muted.700',\n        },\n      },\n      _stack: {\n        flexDirection: 'row',\n        alignItems: 'center',\n        // justifyContent: 'space-between',\n        overflow: 'hidden',\n      },\n    },\n  };\n};\n\nfunction roundedStyle(props: InterfaceInputProps & { theme: any }) {\n  const { theme } = props;\n  return {\n    borderRadius: 'full',\n    borderWidth: '1',\n    _focus: {\n      bg: transparentize('primary.600', 0.1)(theme),\n    },\n  };\n}\nfunction outlineStyle(props: InterfaceInputProps & { theme: any }) {\n  const { theme } = props;\n  return {\n    borderWidth: '1',\n    _focus: {\n      bg: transparentize('primary.600', 0.1)(theme),\n    },\n  };\n}\nfunction filledStyle(props: InterfaceInputProps & { theme: any }) {\n  const { theme } = props;\n  return {\n    borderWidth: '1',\n    _focus: {\n      bg: transparentize('primary.600', 0.1)(theme),\n    },\n    _hover: {\n      borderWidth: '1',\n      _disabled: {\n        borderWidth: 0,\n      },\n    },\n    bg: 'muted.100',\n    borderColor: 'muted.100',\n\n    _dark: {\n      bg: 'muted.800',\n      borderColor: 'muted.800',\n    },\n  };\n}\nfunction unstyledStyle() {\n  return {\n    borderWidth: '0',\n    _focus: {\n      bg: 'transparent',\n    },\n    _invalid: {\n      _stack: {\n        style: {\n          outlineWidth: 0,\n        },\n      },\n    },\n    _stack: {\n      _focus: {\n        style: {\n          outlineWidth: '0',\n        },\n      },\n    },\n  };\n}\nfunction underlinedStyle(props: InterfaceInputProps & { theme: any }) {\n  const { primary, error } = props.theme.colors;\n\n  return {\n    borderWidth: '0',\n    pl: '0',\n    borderBottomWidth: '1',\n    _focus: {\n      _stack: {\n        style: {\n          outlineWidth: '0',\n          boxShadow: `0 1px 0 0 ${primary[600]}`,\n        },\n      },\n    },\n    _invalid: {\n      _stack: {\n        style: {\n          outlineWidth: 0,\n          boxShadow: `0 1px 0 0 ${error[600]}`,\n        },\n      },\n    },\n\n    _dark: {\n      _focus: {\n        _stack: {\n          style: {\n            outlineWidth: '0',\n            boxShadow: `0 1px 0 0 ${primary[500]}`,\n          },\n        },\n      },\n      _invalid: {\n        _stack: {\n          style: {\n            outlineWidth: 0,\n            boxShadow: `0 1px 0 0 ${error[500]}`,\n          },\n        },\n      },\n    },\n    borderRadius: 0,\n  };\n}\n\nconst variants = {\n  outline: outlineStyle as any,\n  underlined: underlinedStyle as any,\n  rounded: roundedStyle as any,\n  filled: filledStyle as any,\n  unstyled: unstyledStyle as any,\n};\n\nconst sizes = {\n  '2xl': { fontSize: 'xl' },\n  'xl': { fontSize: 'lg' },\n  'lg': { fontSize: 'md' },\n  'md': { fontSize: 'sm' },\n  'sm': { fontSize: 'xs' },\n  'xs': { fontSize: '2xs' },\n};\n\nconst defaultProps = {\n  size: 'sm',\n  variant: 'outline',\n};\n\n// Input\nexport const Input = {\n  baseStyle,\n  defaultProps,\n  variants,\n  sizes,\n};\n\nexport default {};\n"
  },
  {
    "path": "src/theme/components/inputleftaddon.ts",
    "content": "const baseStyle = () => {\n  return {\n    // roundedLeft: '4',\n    p: '2',\n    borderWidth: '1',\n    borderRightWidth: '0',\n    borderLeftRadius: 'sm',\n    _text: {\n      color: 'text.900',\n      fontWeight: 400,\n    },\n    alignItems: 'center',\n    justifyContent: 'center',\n    bg: 'muted.50',\n    borderColor: 'muted.300',\n\n    _dark: {\n      bg: 'muted.800',\n      borderColor: 'muted.700',\n      _text: {\n        color: 'text.50',\n      },\n    },\n  };\n};\n\nexport default { baseStyle };\n"
  },
  {
    "path": "src/theme/components/inputrightaddon.ts",
    "content": "const baseStyle = () => {\n  return {\n    // roundedRight: '4',\n    p: '2',\n    borderWidth: '1',\n    borderLeftWidth: '0',\n    borderRightRadius: 'sm',\n    _text: {\n      color: 'text.900',\n      fontWeight: 400,\n    },\n    alignItems: 'center',\n    justifyContent: 'center',\n    bg: 'muted.50',\n    borderColor: 'muted.300',\n\n    _dark: {\n      bg: 'muted.800',\n      borderColor: 'muted.700',\n      _text: {\n        color: 'text.50',\n      },\n    },\n  };\n};\n\nexport default { baseStyle };\n"
  },
  {
    "path": "src/theme/components/kbd.ts",
    "content": "import { mode } from '../tools';\nimport { Platform } from 'react-native';\n\nfunction baseStyle(props: Record<string, any>) {\n  return {\n    bg: mode('muted.200', 'muted.700')(props),\n    borderColor: mode('muted.300', 'muted.600')(props),\n    borderWidth: 2,\n    borderBottomWidth: 4,\n    shadow: 1,\n    borderRadius: 'md',\n    px: 2,\n    _text: {\n      fontSize: 'sm',\n      fontWeight: 'bold',\n      fontFamily: Platform.OS === 'ios' ? 'Courier' : 'monospace',\n    },\n  };\n}\n\nconst defaultProps = {};\nexport default {\n  baseStyle,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/components/keyboardAvoidingView.ts",
    "content": "const baseStyle = {};\nconst defaultProps = {};\nexport default {\n  baseStyle,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/components/link.ts",
    "content": "const baseStyle = () => {\n  return {\n    width: 'auto',\n    height: 'auto',\n  };\n};\n\nexport default {\n  baseStyle,\n  defaultProps: {\n    isUnderlined: true,\n  },\n};\n"
  },
  {
    "path": "src/theme/components/list.ts",
    "content": "import { mode } from '../tools';\n// List\nexport const List = {\n  baseStyle: (props: Record<string, any>) => {\n    return {\n      py: 2,\n      borderWidth: 1,\n      borderColor: 'gray.300',\n      _hover: { bg: mode('primary.100', 'primary.700')(props) },\n    };\n  },\n};\n\n// ListItem\nexport const ListItem = {\n  baseStyle: {\n    // borderTopWidth: 1,\n    py: 2,\n    borderColor: 'gray.300',\n  },\n  defaultProps: {\n    start: 1,\n  },\n};\n\n// ListIcon\nexport const ListIcon = {\n  baseStyle: {\n    mr: 8,\n    size: 'md',\n  },\n};\n"
  },
  {
    "path": "src/theme/components/menu.ts",
    "content": "import { StyleSheet } from 'react-native';\n\nconst baseStyle = {\n  py: 2,\n  borderRadius: 'sm',\n  shadow: 6,\n  bg: 'muted.50',\n  _dark: {\n    bg: 'muted.800',\n  },\n  _presenceTransition: {\n    initial: { opacity: 0 },\n    animate: {\n      opacity: 1,\n      translateY: 0,\n      transition: { duration: 200 },\n    },\n    exit: { opacity: 0, transition: { duration: 150 } },\n    style: StyleSheet.absoluteFill,\n  },\n  _overlay: {\n    unmountOnExit: true,\n  },\n  _backdrop: {\n    bg: 'transparent',\n  },\n};\n\nexport default {\n  baseStyle,\n};\n\nexport const MenuGroup = {\n  baseStyle: {\n    _title: {\n      fontSize: 'xs',\n      textTransform: 'uppercase',\n      color: 'text.500',\n      _dark: {\n        color: 'text.400',\n      },\n    },\n    p: 3,\n  },\n};\nexport const MenuItem = {\n  baseStyle: {\n    px: 3,\n    py: 2,\n    _web: {\n      outlineWidth: 0,\n    },\n    _stack: {\n      alignItems: 'center',\n      px: 3,\n      space: 3,\n    },\n    _icon: {\n      size: 4,\n      opacity: 0,\n      color: 'muted.500',\n    },\n    _text: {\n      color: 'text.900',\n    },\n    _disabled: {\n      _text: {\n        color: 'text.400',\n      },\n    },\n    _hover: {\n      bg: 'muted.200',\n    },\n    _focus: {\n      bg: 'muted.300',\n    },\n    _pressed: {\n      bg: 'muted.400',\n    },\n    _focusVisible: {\n      _web: {\n        outlineWidth: '0',\n        style: { boxShadow: `none` },\n        bg: 'muted.300',\n      },\n    },\n    _dark: {\n      _text: {\n        color: 'text.50',\n      },\n      _disabled: {\n        _text: {\n          color: 'text.600',\n        },\n      },\n      _hover: {\n        bg: 'muted.700',\n      },\n      _focus: {\n        bg: 'muted.600',\n      },\n      _pressed: {\n        bg: 'muted.500',\n      },\n\n      _icon: {\n        color: 'muted.400',\n      },\n      _focusVisible: {\n        _web: {\n          outlineWidth: '0',\n          style: { boxShadow: `none` },\n          bg: 'muted.600',\n        },\n      },\n    },\n    _checked: {\n      _icon: {\n        opacity: 1,\n      },\n    },\n  },\n  defaultProps: {},\n};\n"
  },
  {
    "path": "src/theme/components/modal.ts",
    "content": "import { Dimensions } from 'react-native';\n\nconst sizes = {\n  xs: {\n    contentSize: {\n      width: '60%',\n      maxWidth: '280',\n    },\n  },\n  sm: {\n    contentSize: {\n      width: '65%',\n      maxWidth: '320',\n    },\n  },\n  md: {\n    contentSize: {\n      width: '75%',\n      maxWidth: '380',\n    },\n  },\n  lg: {\n    contentSize: {\n      width: '80%',\n      maxWidth: '520',\n    },\n  },\n  xl: {\n    contentSize: {\n      width: '90%',\n      maxWidth: '580',\n    },\n  },\n  full: {\n    contentSize: {\n      width: '100%',\n    },\n  },\n};\n\nexport const Modal = {\n  baseStyle: {\n    width: '100%',\n    height: '100%',\n    justifyContent: 'center',\n    alignItems: 'center',\n    _web: { pointerEvents: 'box-none' },\n    _backdropFade: { exitDuration: 150, entryDuration: 200 },\n    _slide: { overlay: false, duration: 200 },\n    _fade: { exitDuration: 100, entryDuration: 200 },\n  },\n  sizes,\n  defaultProps: {\n    size: 'md',\n    closeOnOverlayClick: true,\n  },\n};\n\nexport const ModalContent = {\n  baseStyle: () => {\n    return {\n      shadow: 1,\n      rounded: 'lg',\n      maxHeight: `${Dimensions.get('window').height - 150}px`,\n      overflow: 'hidden',\n      bg: 'muted.50',\n      _text: {\n        color: 'text.900',\n      },\n\n      _dark: {\n        bg: 'muted.800',\n        _text: {\n          color: 'text.50',\n        },\n      },\n    };\n  },\n};\nexport const ModalCloseButton = {\n  baseStyle: () => {\n    return {\n      position: 'absolute',\n      right: '3',\n      top: '3',\n      zIndex: '1',\n      colorScheme: 'coolGray',\n      p: '2',\n      bg: 'transparent',\n      borderRadius: 'sm',\n      _web: {\n        outlineWidth: 0,\n        cursor: 'pointer',\n      },\n      _icon: {\n        color: 'muted.500',\n        size: '4',\n      },\n\n      _hover: {\n        bg: 'muted.200',\n      },\n      _pressed: {\n        bg: 'muted.300',\n      },\n\n      _dark: {\n        _icon: {\n          color: 'muted.400',\n        },\n        _hover: {\n          bg: 'muted.700',\n        },\n        _pressed: {\n          bg: 'muted.600',\n        },\n      },\n    };\n  },\n};\nexport const ModalHeader = {\n  baseStyle: () => {\n    return {\n      p: '4',\n      borderBottomWidth: '1',\n      _text: {\n        color: 'text.900',\n        fontSize: 'md',\n        fontWeight: 'semibold',\n        lineHeight: 'sm',\n      },\n\n      bg: 'muted.50',\n      borderColor: 'muted.300',\n\n      _dark: {\n        bg: 'muted.800',\n        borderColor: 'muted.700',\n        _text: {\n          color: 'text.50',\n        },\n      },\n    };\n  },\n};\nexport const ModalBody = {\n  baseStyle: () => {\n    return {\n      p: '4',\n\n      _text: {\n        color: 'text.900',\n      },\n\n      _dark: {\n        _text: {\n          color: 'text.50',\n        },\n      },\n    };\n  },\n};\nexport const ModalFooter = {\n  baseStyle: () => {\n    return {\n      p: '4',\n      flexDirection: 'row',\n      justifyContent: 'flex-end',\n      flexWrap: 'wrap',\n      borderTopWidth: 1,\n\n      bg: 'muted.50',\n      borderColor: 'muted.300',\n\n      _dark: {\n        bg: 'muted.800',\n        borderColor: 'muted.700',\n      },\n    };\n  },\n};\nexport const ModalOverlay = {\n  baseStyle: {\n    position: 'absolute',\n    left: '0',\n    top: '0',\n    opacity: '50',\n    right: '0',\n    bottom: '0',\n  },\n};\n"
  },
  {
    "path": "src/theme/components/number-input.ts",
    "content": "import { mode } from '../tools';\n\nconst defaultProps = {\n  size: 'sm',\n  step: 1,\n  min: -Infinity,\n  max: Infinity,\n  defaultValue: '0',\n  keepWithinRange: true,\n  clampValueOnBlur: true,\n  focusInputOnChange: true,\n  getAriaValueText: true,\n};\n\nexport default {\n  defaultProps,\n};\n\n//Steppers\nconst stepperbaseStyle = (props: Record<string, any>) => {\n  return {\n    bg: mode('primary.600', 'primary.200')(props),\n    iconColor: mode('gray.50', 'gray.800')(props),\n    _active: {},\n    _disabled: {\n      // iconColor: mode('gray.50', 'gray.300')(props),\n      // bg: mode('blackAlpha.200', 'whiteAlpha.300')(props),\n      opacity: 0.5,\n    },\n  };\n};\n\nexport const NumberInputStepper = {\n  baseStyle: stepperbaseStyle,\n};\n"
  },
  {
    "path": "src/theme/components/pin-input.ts",
    "content": "const defaultProps = {\n  placeholder: '○',\n  size: 'md',\n  manageFocus: true,\n  space: 1,\n};\n\nconst sizes = {\n  '2xl': {\n    fontSize: '2xl',\n    p: 3,\n    width: '56px',\n    height: '56px',\n    textAlign: 'center',\n    borderRadius: 'lg',\n  },\n  'xl': {\n    fontSize: 'xl',\n    p: 3,\n    width: '52px',\n    height: '52px',\n    textAlign: 'center',\n    borderRadius: 'lg',\n  },\n  'lg': {\n    fontSize: 'lg',\n    p: 2,\n    width: '48px',\n    height: '48px',\n    textAlign: 'center',\n    borderRadius: 'md',\n  },\n  'md': {\n    fontSize: 'md',\n    p: 2,\n    width: '40px',\n    height: '40px',\n    textAlign: 'center',\n    borderRadius: 'md',\n  },\n  'sm': {\n    fontSize: 'sm',\n    p: 1,\n    width: '30px',\n    height: '30px',\n    textAlign: 'center',\n    borderRadius: 'md',\n  },\n  'xs': {\n    fontSize: 'xs',\n    p: 1,\n    width: '24px',\n    height: '24px',\n    textAlign: 'center',\n    borderRadius: 'md',\n  },\n};\n\nexport default {\n  sizes,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/components/popover.ts",
    "content": "export const Popover = {\n  baseStyle: () => ({\n    _overlay: {\n      unmountOnExit: true,\n    },\n  }),\n};\n\nexport const PopoverCloseButton = {\n  baseStyle: () => ({\n    position: 'absolute',\n    right: 3,\n    top: 3,\n    zIndex: 1,\n    p: '2',\n    bg: 'transparent',\n    borderRadius: 'sm',\n    _web: {\n      outlineWidth: 0,\n      cursor: 'pointer',\n    },\n    _icon: {\n      size: '4',\n    },\n    _light: {\n      _icon: {\n        color: 'muted.500',\n      },\n      _hover: {\n        bg: 'muted.200',\n      },\n      _pressed: {\n        bg: 'muted.300',\n      },\n    },\n    _dark: {\n      _icon: {\n        color: 'muted.400',\n      },\n      _hover: {\n        bg: 'muted.700',\n      },\n      _pressed: {\n        bg: 'muted.600',\n      },\n    },\n  }),\n};\n\nexport const PopoverBody = {\n  baseStyle: () => ({\n    p: '3',\n    shadow: '6',\n    bg: 'muted.50',\n    _text: {\n      color: 'text.900',\n    },\n    _dark: {\n      bg: 'muted.800',\n      _text: {\n        color: 'text.50',\n      },\n    },\n  }),\n};\n\nexport const PopoverContent = {\n  baseStyle: () => ({\n    //TODO: Box inside PopperContent is not able to resolve shadow\n    // shadow: '6',\n    borderColor: 'muted.300',\n    _text: {\n      color: 'text.900',\n    },\n    _dark: {\n      borderColor: 'muted.700',\n      _text: {\n        color: 'text.50',\n      },\n    },\n    borderWidth: 1,\n    rounded: 'md',\n    overflow: 'hidden',\n  }),\n};\n\nexport const PopoverHeader = {\n  baseStyle: () => ({\n    _web: {\n      accessibilityRole: 'header',\n    },\n    p: '4',\n    borderBottomWidth: '1',\n    _text: {\n      fontSize: 'md',\n      fontWeight: '700',\n      lineHeight: 'sm',\n      color: 'text.900',\n    },\n    bg: 'muted.50',\n    borderColor: 'muted.300',\n    _dark: {\n      bg: 'muted.800',\n      borderColor: 'muted.700',\n      _text: {\n        color: 'text.50',\n      },\n    },\n  }),\n};\n\nexport const PopoverArrow = {\n  baseStyle: () => ({\n    bg: 'muted.50',\n    borderColor: 'muted.300',\n    _dark: {\n      bg: 'muted.800',\n      borderColor: 'muted.700',\n    },\n  }),\n};\n\nexport const PopoverFooter = {\n  baseStyle: () => {\n    return {\n      p: '4',\n      shadow: '6',\n      flexDirection: 'row',\n      justifyContent: 'flex-end',\n      flexWrap: 'wrap',\n      borderTopWidth: 1,\n      bg: 'muted.50',\n      borderColor: 'muted.300',\n      _dark: {\n        bg: 'muted.800',\n        borderColor: 'muted.700',\n      },\n    };\n  },\n};\n"
  },
  {
    "path": "src/theme/components/pressable.ts",
    "content": "const baseStyle = (props: any) => {\n  const { primary } = props.theme.colors;\n\n  return {\n    _focusVisible: {\n      _web: {\n        style: {\n          outlineWidth: 0,\n          boxShadow: `${primary[400]} 0px 0px 0px 2px`,\n        },\n      },\n    },\n    _dark: {\n      _focusVisible: {\n        _web: {\n          style: {\n            outlineWidth: 0,\n            boxShadow: `${primary[500]} 0px 0px 0px 2px`,\n          },\n        },\n      },\n    },\n  };\n};\n\nexport default {\n  baseStyle,\n  defaultProps: {},\n};\n"
  },
  {
    "path": "src/theme/components/progress.ts",
    "content": "const defaultProps = {\n  colorScheme: 'primary',\n  size: 'sm',\n  rounded: 'full',\n  min: 0,\n  max: 100,\n  value: 0,\n  isIndeterminate: false,\n};\n\nfunction baseStyle(props: Record<string, any>) {\n  const { colorScheme: c } = props;\n\n  return {\n    overflow: 'hidden',\n    _filledTrack: {\n      bg: `${c}.600`,\n      shadow: 0,\n      height: '100%',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      rounded: 'full',\n      _text: {\n        color: 'white',\n        fontWeight: 'bold',\n      },\n    },\n    bg: 'muted.200',\n    _dark: {\n      bg: 'muted.700',\n      _filledTrack: {\n        bg: `${c}.400`,\n      },\n    },\n  };\n}\n\nconst sizes = {\n  'xs': {\n    height: 1,\n  },\n  'sm': {\n    height: 2,\n  },\n  'md': {\n    height: 3,\n  },\n  'lg': {\n    height: 4,\n  },\n  'xl': {\n    height: 5,\n  },\n  '2xl': {\n    height: 6,\n  },\n};\n\nexport default {\n  baseStyle,\n  defaultProps,\n  sizes,\n};\n"
  },
  {
    "path": "src/theme/components/radio-group.ts",
    "content": "const baseStyle = () => {\n  return {\n    alignItems: 'flex-start',\n  };\n};\n\nexport default {\n  baseStyle,\n};\n"
  },
  {
    "path": "src/theme/components/radio.ts",
    "content": "const baseStyle = (props: Record<string, any>) => {\n  const { colorScheme: c, theme } = props;\n  const { colors } = theme;\n  return {\n    borderWidth: 2,\n    borderRadius: 'full',\n    p: 1,\n\n    bg: 'muted.50',\n    borderColor: 'muted.400',\n\n    _checked: {\n      borderColor: `${c}.600`,\n      _icon: {\n        color: `${c}.600`,\n      },\n      _hover: {\n        borderColor: `${c}.700`,\n        _icon: { color: `${c}.700` },\n        _disabled: {\n          borderColor: `${c}.600`,\n          _icon: {\n            color: `${c}.600`,\n          },\n        },\n      },\n      _pressed: {\n        borderColor: `${c}.800`,\n        _icon: { color: `${c}.800` },\n      },\n    },\n\n    _hover: {\n      borderColor: 'muted.500',\n      _disabled: {\n        borderColor: 'muted.400',\n      },\n      _checked: { borderColor: `${c}.600` },\n    },\n\n    _pressed: {\n      borderColor: 'muted.600',\n    },\n\n    _invalid: {\n      borderColor: 'error.600',\n    },\n\n    _dark: {\n      bg: 'muted.900',\n      borderColor: 'muted.500',\n\n      _checked: {\n        borderColor: `${c}.500`,\n        _icon: {\n          color: `${c}.500`,\n        },\n        _hover: {\n          borderColor: `${c}.400`,\n          _icon: { color: `${c}.400` },\n          _disabled: {\n            borderColor: `${c}.500`,\n            _icon: {\n              color: `${c}.500`,\n            },\n          },\n        },\n        _pressed: {\n          borderColor: `${c}.300`,\n          _icon: { color: `${c}.300` },\n        },\n      },\n\n      _hover: {\n        borderColor: 'muted.400',\n        _disabled: {\n          borderColor: 'muted.500',\n        },\n        _checked: { borderColor: `${c}.600` },\n      },\n\n      _pressed: {\n        borderColor: 'muted.300',\n      },\n\n      _invalid: {\n        borderColor: 'error.500',\n      },\n    },\n\n    _stack: {\n      direction: 'row',\n      alignItems: 'center',\n      space: 2,\n      _web: {\n        cursor: props.isDisabled ? 'not-allowed' : 'pointer',\n      },\n    },\n\n    _disabled: {\n      opacity: '0.6',\n      _icon: {\n        bg: 'transparent',\n      },\n      _stack: {\n        opacity: '0.6',\n      },\n    },\n\n    _focusVisible: {\n      _web: {\n        style: {\n          outlineWidth: '2px',\n          outlineColor: colors[c][400],\n          outlineStyle: 'solid',\n        },\n      },\n    },\n  };\n};\n\nconst sizes = {\n  lg: {\n    _icon: { size: 4 },\n    _text: { fontSize: 'lg' },\n  },\n  md: {\n    _icon: { size: 3 },\n    _text: { fontSize: 'md' },\n  },\n  sm: {\n    _icon: { size: 2 },\n    _text: { fontSize: 'sm' },\n  },\n};\n\nconst defaultProps = {\n  defaultIsChecked: false,\n  size: 'md',\n  colorScheme: 'primary',\n};\n\nexport default {\n  baseStyle,\n  sizes,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/components/scrollView.ts",
    "content": "const baseStyle = {};\nconst defaultProps = {};\nexport default {\n  baseStyle,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/components/sectionList.ts",
    "content": "const baseStyle = {};\nconst defaultProps = {};\nexport default {\n  baseStyle,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/components/select.ts",
    "content": "export const Select = {\n  baseStyle: () => {\n    return {\n      selection: {\n        start: 0,\n      },\n\n      _customDropdownIconProps: {\n        color: 'muted.500',\n        mr: '3',\n        size: '6',\n        p: '1',\n      },\n      _hover: {\n        borderColor: 'primary.600',\n      },\n      _focus: {\n        borderColor: 'primary.600',\n      },\n      _disabled: {\n        bg: 'muted.100',\n        placeholderTextColor: 'muted.700',\n      },\n      _invalid: {\n        borderColor: 'error.600',\n      },\n\n      _dark: {\n        _customDropdownIconProps: { color: 'muted.400', mr: '3' },\n        _hover: {\n          borderColor: 'primary.500',\n        },\n        _focus: {\n          borderColor: 'primary.500',\n        },\n        _disabled: {\n          bg: 'muted.800',\n          opacity: '80',\n          placeholderTextColor: 'text.50',\n        },\n        _invalid: {\n          borderColor: 'error.500',\n        },\n      },\n\n      _webSelect: {\n        style: {\n          appearance: 'none',\n          WebkitAppearance: 'none',\n          MozAppearance: 'none',\n          position: 'absolute',\n          width: '100%',\n          height: '100%',\n          opacity: 0,\n          zIndex: 1,\n        },\n      },\n      _web: {\n        pointerEvents: 'none',\n      },\n\n      _actionSheetBody: {\n        w: '100%',\n      },\n      _actionSheetContent: {},\n    };\n  },\n  defaultProps: {\n    optimized: true,\n  },\n};\n\n// SelectIcon - only for custom variant\nexport const SelectItem = {\n  baseStyle: {\n    p: '1',\n    px: '2',\n    borderRadius: '0',\n    minH: '0',\n  },\n};\n"
  },
  {
    "path": "src/theme/components/simple-grid.ts",
    "content": "const baseStyle = {};\nconst defaultProps = {};\nexport default {\n  baseStyle,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/components/skeleton.ts",
    "content": "// Skeleton\nexport const Skeleton = {\n  baseStyle: () => {\n    return {\n      startColor: 'muted.200',\n      _dark: {\n        startColor: 'muted.600',\n      },\n      endColor: 'transparent',\n      overflow: 'hidden',\n      fadeDuration: 0.1,\n      speed: 1.0,\n      h: '10',\n      w: '100%',\n    };\n  },\n};\n\n// SkeletonText\nexport const SkeletonText = {\n  baseStyle: () => {\n    return {\n      startColor: 'muted.200',\n      _dark: {\n        startColor: 'muted.600',\n      },\n      endColor: 'transparent',\n      fadeDuration: 0.1,\n      w: '100%',\n      speed: 1.0,\n      flexDirection: 'column',\n      _line: {\n        h: 3,\n        rounded: 'full',\n      },\n    };\n  },\n  defaultProps: {\n    lines: 3,\n    space: 3,\n  },\n};\n"
  },
  {
    "path": "src/theme/components/slider.ts",
    "content": "export const SliderTrack = {\n  baseStyle: ({ isVertical, size }: any) => {\n    return {\n      bg: 'muted.200',\n      borderRadius: 'lg',\n      overflow: 'hidden',\n      style: {\n        height: isVertical ? '100%' : size,\n        width: !isVertical ? '100%' : size,\n      },\n      _pressable: {\n        alignItems: 'center',\n        justifyContent: 'center',\n        height: isVertical ? '100%' : size,\n        width: !isVertical ? '100%' : size,\n        py: !isVertical ? '3' : undefined,\n        px: isVertical ? '3' : undefined,\n      },\n      _dark: {\n        bg: 'muted.700',\n      },\n    };\n  },\n};\n\nexport const SliderThumb = {\n  baseStyle: (props: any) => {\n    const { colorScheme } = props;\n    const { primary } = props.theme.colors;\n    return {\n      borderRadius: 'full',\n      zIndex: 999,\n      alignItems: 'center',\n      justifyContent: 'center',\n      scaleOnPressed: 1,\n      _interactionBox: {\n        position: 'absolute',\n        borderRadius: 'full',\n        zIndex: -1,\n      },\n      _stack: {\n        direction: 'row',\n        alignItems: 'center',\n        justifyContent: 'center',\n        space: 2,\n      },\n      bg: `${colorScheme}.600`,\n      _hover: {\n        _web: {\n          outlineWidth: '4px',\n          outlineColor: primary[300],\n          outlineStyle: 'solid',\n        },\n      },\n      _focus: {\n        _web: {\n          outlineWidth: '2px',\n          outlineColor: primary[400],\n          outlineStyle: 'solid',\n        },\n      },\n      _pressed: {\n        _interactionBox: {\n          borderWidth: '8',\n          borderColor: `${colorScheme}.300`,\n        },\n      },\n\n      _dark: {\n        bg: `${colorScheme}.500`,\n        _hover: {\n          _web: {\n            outlineWidth: '4px',\n            outlineColor: primary[800],\n            outlineStyle: 'solid',\n          },\n        },\n        _focus: {\n          _web: {\n            outlineWidth: '2px',\n            outlineColor: primary[400],\n            outlineStyle: 'solid',\n          },\n        },\n        _pressed: {\n          _interactionBox: {\n            borderWidth: '8',\n            borderColor: `${colorScheme}.800`,\n          },\n        },\n      },\n      // shadow: 6,\n      _web: {\n        cursor: 'pointer',\n      },\n    };\n  },\n  defaultProps: {\n    colorScheme: 'primary',\n  },\n  sizes: {\n    lg: {\n      _interactionBox: '3',\n    },\n    md: {\n      _interactionBox: '2',\n    },\n    sm: {\n      _interactionBox: '2.5',\n    },\n  },\n};\n\nexport const SliderFilledTrack = {\n  baseStyle: ({\n    orientation,\n    isReversed,\n    sliderTrackPosition,\n    size,\n    colorScheme,\n  }: any) => {\n    return {\n      left: orientation !== 'vertical' && !isReversed ? 0 : undefined,\n      bottom: orientation === 'vertical' && !isReversed ? 0 : undefined,\n      right: orientation !== 'vertical' && isReversed ? 0 : undefined,\n      top: orientation === 'vertical' && isReversed ? 0 : undefined,\n      style:\n        orientation === 'vertical'\n          ? { height: sliderTrackPosition, width: size }\n          : { width: sliderTrackPosition, height: size },\n      bg: `${colorScheme}.600`,\n      _dark: {\n        bg: `${colorScheme}.500`,\n      },\n    };\n  },\n  defaultProps: {\n    colorScheme: 'primary',\n  },\n};\n\nconst sizes = {\n  lg: { thumbSize: 6, sliderTrackHeight: 6, _interactionBox: { p: '3' } },\n  md: { thumbSize: 5, sliderTrackHeight: 5, _interactionBox: { p: '2.5' } },\n  sm: { thumbSize: 4, sliderTrackHeight: 4, _interactionBox: { p: '2' } },\n};\n\nexport const Slider = {\n  baseStyle: (props: any) => {\n    return {\n      alignItems: 'center',\n      justifyContent: 'center',\n      height: props.orientation === 'vertical' ? '100%' : undefined,\n      width: props.orientation !== 'vertical' ? '100%' : undefined,\n      _disabled: {\n        opacity: 0.4,\n        _web: {\n          cursor: 'not-allowed',\n        },\n      },\n    };\n  },\n  defaultProps: {\n    size: 'sm',\n  },\n  sizes,\n};\n"
  },
  {
    "path": "src/theme/components/spinner.ts",
    "content": "export default {\n  baseStyle: {\n    color: 'primary.600',\n  },\n  sizes: {\n    sm: 'small',\n    lg: 'large',\n  },\n  defaultProps: {\n    size: 'small',\n  },\n};\n"
  },
  {
    "path": "src/theme/components/square.ts",
    "content": "const sizes = {\n  'xs': {\n    height: 10,\n    width: 10,\n  },\n  'sm': {\n    height: 12,\n    width: 12,\n  },\n  'md': {\n    height: 16,\n    width: 16,\n  },\n  'lg': {\n    height: 24,\n    width: 24,\n  },\n  'xl': {\n    height: 32,\n    width: 32,\n  },\n  '2xl': {\n    height: 40,\n    width: 40,\n  },\n};\n\nconst baseStyle = {\n  alignItems: 'center',\n  justifyContent: 'center',\n};\n\nexport default {\n  baseStyle,\n  sizes,\n};\n"
  },
  {
    "path": "src/theme/components/stack.ts",
    "content": "const baseStyle = {};\nconst defaultProps = {};\n// sizes in stack means the height or width of the spacer elements that get's added between the children, in other\n// words it maps to space prop that user passes.\nconst sizes = {\n  'gutter': 0,\n  '2xs': 1,\n  'xs': 2,\n  'sm': 3,\n  'md': 4,\n  'lg': 6,\n  'xl': 7,\n  '2xl': 8,\n};\nexport default {\n  baseStyle,\n  defaultProps,\n  sizes,\n};\n"
  },
  {
    "path": "src/theme/components/stat.ts",
    "content": "const defaultProps = {\n  _statLabel: {\n    fontSize: 'xl',\n  },\n  _statNumber: {\n    fontSize: '4xl',\n    fontWeight: 'bold',\n    my: 2,\n  },\n  _statHelpText: {\n    _text: {\n      color: 'gray.500',\n      fontSize: 'xl',\n    },\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n  _statGroup: {\n    flexWrap: 'wrap',\n    space: 4,\n    justifyContent: 'space-between',\n  },\n};\n\nexport default {\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/components/statusBar.ts",
    "content": "const baseStyle = {};\nconst defaultProps = {};\nexport default {\n  baseStyle,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/components/switch.ts",
    "content": "const baseStyle = (props: Record<string, any>) => {\n  const { colorScheme: c } = props;\n  return {\n    _disabled: {\n      opacity: 0.4,\n    },\n    _invalid: {\n      borderColor: 'error.600',\n      borderWidth: 2,\n      borderRadius: 12,\n    },\n    onThumbColor: 'muted.50',\n    offThumbColor: 'muted.50',\n    offTrackColor: 'muted.300',\n    onTrackColor: `${c}.600`,\n    _hover: {\n      offTrackColor: 'muted.400',\n      onTrackColor: `${c}.700`,\n    },\n\n    _dark: {\n      offTrackColor: 'muted.700',\n      onTrackColor: `${c}.500`,\n      _hover: {\n        offTrackColor: 'muted.600',\n        onTrackColor: `${c}.400`,\n      },\n      _invalid: {\n        borderColor: 'error.500',\n      },\n    },\n  };\n};\n\nconst sizes = {\n  sm: {\n    style: {\n      transform: [{ scale: 0.75 }],\n    },\n  },\n  md: {},\n  lg: {\n    style: {\n      transform: [{ scale: 1.25 }],\n    },\n    margin: 1,\n  },\n};\n\nconst defaultProps = {\n  size: 'md',\n  colorScheme: 'primary',\n};\n\nexport default {\n  baseStyle,\n  sizes,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/components/tabs.ts",
    "content": "import { getColorFormColorScheme, getColorScheme, mode } from '../tools';\n\nfunction baseStyle(props: Record<string, any>) {\n  const activeColor = getColorFormColorScheme(props);\n  return {\n    activeTabStyle: {\n      justifyContent: 'center',\n      alignItems: 'center',\n      mb: '-2px',\n      flexDirection: 'row',\n      _text: { fontSize: 'sm', fontWeight: 'bold' },\n    },\n    inactiveTabStyle: {\n      justifyContent: 'center',\n      alignItems: 'center',\n      mb: '-2px',\n      flexDirection: 'row',\n      _text: {\n        color: mode('gray.500', 'gray.400')(props),\n        fontSize: 'sm',\n        fontWeight: 'bold',\n      },\n    },\n    activeIconProps: {\n      color: activeColor,\n      name: 'home',\n      mx: 2,\n    },\n    inactiveIconProps: {\n      name: 'home',\n      mx: 2,\n    },\n  };\n}\n\nconst sizes = {\n  sm: {\n    activeTabStyle: {\n      _text: { fontSize: 'sm' },\n      py: 2,\n      px: 3,\n    },\n    inactiveTabStyle: {\n      _text: { fontSize: 'sm' },\n      py: 2,\n      px: 3,\n    },\n  },\n  md: {\n    activeTabStyle: {\n      _text: { fontSize: 'md' },\n      py: 3,\n      px: 4,\n    },\n    inactiveTabStyle: {\n      _text: { fontSize: 'md' },\n      py: 3,\n      px: 4,\n    },\n  },\n  lg: {\n    activeTabStyle: {\n      _text: { fontSize: 'lg' },\n      py: 4,\n      px: 5,\n    },\n    inactiveTabStyle: {\n      _text: { fontSize: 'lg' },\n      py: 4,\n      px: 5,\n    },\n  },\n};\n\nfunction variantOutline(props: Record<string, any>) {\n  const activeColor = getColorFormColorScheme(props);\n  let { colorScheme, status } = props;\n  colorScheme = getColorScheme(\n    props,\n    colorScheme !== 'primary' ? colorScheme : status\n  );\n  return {\n    activeTabStyle: {\n      borderColor: activeColor,\n      _text: {\n        color: mode(`${colorScheme}.600`, `${colorScheme}.200`)(props),\n      },\n      _hover: {\n        bg: mode(`${colorScheme}.50`, `${colorScheme}.800`)(props),\n      },\n      borderBottomWidth: 2,\n    },\n    inactiveTabStyle: {\n      borderColor: 'transparent',\n      borderBottomWidth: 2,\n      _hover: {\n        bg: mode(`${colorScheme}.50`, `${colorScheme}.800`)(props),\n      },\n    },\n    tabBarStyle: {\n      borderBottomWidth: 2,\n      borderColor: mode('muted.200', 'muted.500')(props),\n    },\n  };\n}\n\nfunction variantFilled(props: Record<string, any>) {\n  const activeColor = getColorFormColorScheme(props);\n  let { colorScheme, status } = props;\n  colorScheme = getColorScheme(\n    props,\n    colorScheme !== 'primary' ? colorScheme : status\n  );\n  return {\n    activeTabStyle: {\n      borderColor: activeColor,\n      _text: { color: mode(`${colorScheme}.600`, `${colorScheme}.200`)(props) },\n      _hover: {\n        bg: mode(`${colorScheme}.50`, `${colorScheme}.800`)(props),\n      },\n      borderBottomWidth: 2,\n      bg: mode(`${colorScheme}.100`, `${colorScheme}.700`)(props),\n    },\n    inactiveTabStyle: {\n      borderColor: 'transparent',\n      borderBottomWidth: 2,\n      _hover: {\n        bg: mode(`${colorScheme}.50`, `${colorScheme}.800`)(props),\n      },\n    },\n    tabBarStyle: {\n      borderBottomWidth: 2,\n      borderColor: mode('muted.200', 'muted.500')(props),\n    },\n  };\n}\n\n// function variantEnclosed(props: Record<string, any>) {\n//   const activeColor = getColorFormColorScheme(props);\n//   return {\n//     activeTabStyle: {\n//       borderTopWidth: 2,\n//       borderLeftWidth: 2,\n//       borderRightWidth: 2,\n//       borderColor: activeColor,\n//     },\n//     inactiveTabStyle: {\n//       borderColor: 'muted.200',\n//       borderBottomWidth: 2,\n//     },\n//     tabBarStyle: {},\n//   };\n// }\n\nfunction variantFilledOutline(props: Record<string, any>) {\n  const activeColor = getColorFormColorScheme(props);\n  let { colorScheme, status } = props;\n  colorScheme = getColorScheme(\n    props,\n    colorScheme !== 'primary' ? colorScheme : status\n  );\n  return {\n    activeTabStyle: {\n      borderColor: activeColor,\n      _text: { color: mode(`${colorScheme}.600`, `${colorScheme}.200`)(props) },\n      _hover: {\n        bg: mode(`${colorScheme}.50`, `${colorScheme}.800`)(props),\n      },\n      borderBottomWidth: 2,\n    },\n    inactiveTabStyle: {\n      borderColor: 'transparent',\n      borderBottomWidth: 2,\n      _hover: {\n        bg: mode(`${colorScheme}.50`, `${colorScheme}.800`)(props),\n      },\n    },\n    tabBarStyle: {\n      borderBottomWidth: 2,\n      borderColor: mode('muted.200', 'muted.500')(props),\n      bg: mode(`${colorScheme}.100`, `${colorScheme}.700`)(props),\n    },\n  };\n}\n\n// function varientSoftRounded(props: Record<string, any>) {\n//   const activeColor = getColorFormColorScheme(props);\n//   return {\n//     activeTabStyle: {\n//       borderRadius: 'full',\n//       bg: transparentize(activeColor, 0.7)(props.theme),\n//       color: 'white',\n//     },\n//     inactiveTabStyle: {},\n//     tabBarStyle: {},\n//   };\n// }\n\n// function varientSolidRounded(props: Record<string, any>) {\n//   const activeColor = getColorFormColorScheme(props);\n//   return {\n//     activeTabStyle: {\n//       borderRadius: 'full',\n//       bg: activeColor,\n//       color: 'white',\n//     },\n//     inactiveTabStyle: {},\n//     tabBarStyle: {},\n//   };\n// }\n\n// function varientSolidBox(props: Record<string, any>) {\n//   const activeColor = getColorFormColorScheme(props);\n//   return {\n//     activeTabStyle: {\n//       bg: activeColor,\n//       color: 'white',\n//     },\n//     inactiveTabStyle: {},\n//     tabBarStyle: {},\n//   };\n// }\n\nconst variants = {\n  'outline': variantOutline,\n  'filled': variantFilled,\n  'filled-outline': variantFilledOutline,\n  // 'soft-rounded': varientSoftRounded,\n  // 'solid-rounded': varientSolidRounded,\n  // 'solid-box': varientSolidBox,\n};\n\nconst defaultProps = {\n  size: 'md',\n  variant: 'outline',\n  colorScheme: 'primary',\n};\n\nexport default {\n  baseStyle,\n  variants,\n  sizes,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/components/tag.ts",
    "content": "import Badge from './badge';\n\nconst { variants } = Badge;\nconst baseStyle = {\n  _text: {\n    fontWeight: 'medium',\n    // lineHeight: 1.2,\n  },\n  alignItems: 'center',\n  justifyContent: 'center',\n  flexDirection: 'row',\n  display: 'flex',\n};\nconst sizes = {\n  sm: {\n    minH: 5,\n    minW: 5,\n    _text: {\n      fontSize: 'xs',\n    },\n    p: 1,\n    borderRadius: 'sm',\n  },\n  md: {\n    minH: 6,\n    minW: 6,\n    _text: {\n      fontSize: 'sm',\n    },\n    borderRadius: 'md',\n    p: 2,\n  },\n  lg: {\n    minH: 8,\n    minW: 8,\n    _text: {\n      fontSize: 'md',\n    },\n    borderRadius: 'md',\n    p: 3,\n  },\n};\n\nconst defaultProps = {\n  size: 'md',\n  variant: 'subtle',\n  colorScheme: 'primary',\n};\n\nexport default {\n  variants,\n  baseStyle,\n  sizes,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/components/text.ts",
    "content": "const baseStyle = () => {\n  return {\n    color: 'text.900',\n    _dark: {\n      color: 'text.50',\n    },\n    fontWeight: '400',\n    fontFamily: 'body',\n    fontStyle: 'normal',\n    fontSize: 'sm',\n    letterSpacing: 'md',\n    lineHeight: 'lg',\n  };\n};\nconst defaultProps = {};\n\nexport default { baseStyle, defaultProps };\n"
  },
  {
    "path": "src/theme/components/textField.ts",
    "content": "import { mode } from '../tools';\n\n// TextField\nconst baseStyle = (props: Record<string, any>) => {\n  return {\n    _errorMessageProps: {\n      mt: 1,\n      ml: 3,\n      fontSize: 'xs',\n      color: 'error.400',\n    },\n    _helperTextProps: {\n      mt: 1,\n      ml: 3,\n      fontSize: 'xs',\n      color: mode('muted.400', 'muted.500')(props),\n    },\n  };\n};\n\nexport const TextField = {\n  baseStyle,\n  defaultProps: {\n    component: 'input',\n  },\n};\n"
  },
  {
    "path": "src/theme/components/textarea.ts",
    "content": "const baseStyle = {\n  multiline: true,\n  p: '2',\n  textAlignVertical: 'top',\n  h: '20',\n};\n\nexport default {\n  baseStyle,\n  defaultProps: {\n    size: 'sm',\n    variant: 'outline',\n  },\n};\n"
  },
  {
    "path": "src/theme/components/toast.ts",
    "content": "import { mode } from './../tools';\nimport { Easing } from 'react-native';\n\nconst baseStyle = (props: Record<string, any>) => {\n  // NOTE: Internal pseudo props like _stack, _overlay nad _presenceTransition can only be update by the theme.\n  return {\n    bg: mode(`muted.700`, `muted.600`)(props),\n    p: '2',\n    rounded: 'sm',\n    shadow: 6,\n    // The stack in which toast are being rendered\n    _stack: {\n      margin: 'auto',\n      position: 'absolute',\n      space: 2,\n      alignItems: 'center',\n      justifyContent: 'center',\n      pointerEvents: 'box-none',\n      _web: { position: 'fixed' },\n    },\n    _overlay: {},\n    _presenceTransition: {\n      animate: {\n        opacity: 1,\n        transition: { easing: Easing.ease, duration: 250 },\n      },\n      exit: {\n        opacity: 0,\n        scale: 0.85,\n        transition: { easing: Easing.ease, duration: 100 },\n      },\n    },\n    _title: {\n      color: 'text.50',\n      fontWeight: 700,\n    },\n    _description: {\n      color: 'text.50',\n      fontWeight: 400,\n    },\n  };\n};\n\nexport const Toast = {\n  baseStyle,\n  defaultProps: {},\n};\n"
  },
  {
    "path": "src/theme/components/tooltip.ts",
    "content": "const baseStyle = () => {\n  return {\n    py: 1,\n    px: 2,\n    shadow: 6,\n    rounded: 'sm',\n    _text: {\n      fontSize: 'sm',\n      color: `text.50`,\n    },\n    bg: `muted.800`,\n    _dark: {\n      bg: `muted.50`,\n      _text: {\n        color: `text.900`,\n      },\n    },\n  };\n};\n\nexport const Tooltip = {\n  baseStyle,\n};\n"
  },
  {
    "path": "src/theme/components/transitions.ts",
    "content": "//Fade\n// const fadeDefaultProps = {\n//   entryDuration: 500,\n//   exitDuration: 500,\n// };\n\nexport const fadeBaseStyle = {\n  initial: { opacity: 0 },\n  animate: { opacity: 1, transition: { duration: 500 } },\n  exit: { opacity: 0, transition: { duration: 500 } },\n};\nexport const Fade = {\n  baseStyle: fadeBaseStyle,\n};\n\n//ScaleFade\n//Can be commented if not used anywhere else\n// const scaleFadeDefaultProps = {\n//   duration: 500,\n//   initialScale: 0.9,\n// };\n\nconst scaleBaseStyle = {\n  initial: { opacity: 0, scale: 0.9 },\n  animate: { opacity: 1, scale: 1, transition: 500 },\n  exit: { opacity: 0, scale: 0.9, transition: 500 },\n};\nexport const ScaleFade = {\n  baseStyle: scaleBaseStyle,\n};\n\n//Slide\nconst slideDefaultProps = {\n  duration: 500,\n  placement: 'bottom',\n  overlay: true,\n  _overlay: { isOpen: true },\n};\n\nexport const Slide = {\n  baseStyle: {\n    h: '100%',\n    pointerEvents: 'box-none',\n    _overlay: { style: { overflow: 'hidden' } },\n  },\n  defaultProps: slideDefaultProps,\n};\n\n//SlideFade\nconst slideFadeDefaultProps = {\n  duration: 500,\n  offsetX: 10,\n  offsetY: 10,\n};\n\nexport const SlideFade = {\n  defaultProps: slideFadeDefaultProps,\n};\n"
  },
  {
    "path": "src/theme/components/typeahead.ts",
    "content": "import { mode } from '../tools/colors';\n\nconst typeaheadSearchItemBaseStyle = (props: Record<string, any>) => {\n  return {\n    backgroundColor: mode('gray.100', 'gray.600')(props),\n    _focus: {\n      backgroundColor: mode('primary.300', 'primary.700')(props),\n    },\n    _disabled: {\n      backgroundColor: 'gray.200',\n    },\n  };\n};\n\nexport const TypeAheadSearchItem = {\n  baseStyle: typeaheadSearchItemBaseStyle,\n};\n"
  },
  {
    "path": "src/theme/components/view.ts",
    "content": "const baseStyle = {};\nconst defaultProps = {};\nexport default {\n  baseStyle,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/components/vstack.ts",
    "content": "const baseStyle = {};\nconst defaultProps = {};\nconst sizes = {};\nexport default {\n  baseStyle,\n  defaultProps,\n  sizes,\n};\n"
  },
  {
    "path": "src/theme/components/wrap.ts",
    "content": "// Wrap\nexport const Wrap = {};\n"
  },
  {
    "path": "src/theme/components/zstack.ts",
    "content": "const baseStyle = {};\nconst defaultProps = {};\nexport default {\n  baseStyle,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/index.ts",
    "content": "import base from './base';\nimport components from './components';\nimport * as tools from './tools';\nimport type { StyledProps } from '../theme/types';\n//@ts-ignore\nimport type { ColorModeOptions } from './../core/color-mode/types';\nexport interface ComponentTheme {\n  baseStyle?: ((props: any) => StyledProps) | StyledProps;\n  sizes?: Record<string, ((props: any) => StyledProps) | StyledProps>;\n  variants?: Record<string, ((props: any) => StyledProps) | StyledProps>;\n  defaultProps?: Record<string, any>;\n}\nconst config: ColorModeOptions = {\n  useSystemColorMode: false, // TODO: implement this\n  initialColorMode: 'light',\n  accessibleColors: false,\n};\n\nconst theme = {\n  ...base,\n  components,\n  config,\n};\n\nexport type Theme = typeof theme & { fontConfig: any };\n\nexport interface ICustomTheme {}\n\nexport interface ITheme extends ICustomTheme, Omit<Theme, keyof ICustomTheme> {}\n\nexport { theme, tools as themeTools };\n\nexport { getColor } from './styled-system';\nexport * from './v33x-theme';\n"
  },
  {
    "path": "src/theme/styled-system.ts",
    "content": "import { StyleSheet } from 'react-native';\nimport get from 'lodash.get';\nimport { transparentize } from './tools';\nimport type { ITheme } from '.';\nimport type { UseResponsiveQueryParams } from '../utils/useResponsiveQuery';\nimport { getStyledFromProps } from '../utils/getStyledFromProps';\nimport { convertStringNumberToNumber } from '../utils/convertStringNumberToNumber';\nconst isNumber = (n: any) => typeof n === 'number' && !isNaN(n);\n\nexport const getColor = (rawValue: any, scale: any, theme: any) => {\n  const alphaMatched =\n    typeof rawValue === 'string' ? rawValue?.match(/:alpha\\.\\d\\d?\\d?/) : false;\n\n  if (alphaMatched) {\n    const colorMatched = rawValue?.match(/^.*?(?=:alpha)/);\n    const color = colorMatched ? colorMatched[0] : colorMatched;\n    const alphaValue = alphaMatched[0].split('.')[1];\n    const alphaFromToken = get(theme.opacity, alphaValue, alphaValue);\n    const alpha = alphaFromToken ? parseFloat(alphaFromToken) : 1;\n    const newColor = transparentize(color, alpha)(theme);\n    return newColor;\n  } else {\n    return get(scale, rawValue, rawValue);\n  }\n};\n\n// To handle negative margins\nconst getMargin = (n: any, scale: any) => {\n  n = convertStringNumberToNumber('margin', n);\n  if (!isNumber(n)) {\n    return get(scale, n, n);\n  }\n\n  const isNegative = n < 0;\n  const absolute = Math.abs(n);\n  const value = get(scale, absolute, absolute);\n  if (!isNumber(value)) {\n    return isNegative ? '-' + value : value;\n  }\n  return value * (isNegative ? -1 : 1);\n};\n\nexport const layout = {\n  width: {\n    property: 'width',\n    scale: 'sizes',\n  },\n  w: {\n    property: 'width',\n    scale: 'sizes',\n  },\n  height: {\n    property: 'height',\n    scale: 'sizes',\n  },\n  h: {\n    property: 'height',\n    scale: 'sizes',\n  },\n  minWidth: {\n    property: 'minWidth',\n    scale: 'sizes',\n  },\n  minW: {\n    property: 'minWidth',\n    scale: 'sizes',\n  },\n  minHeight: {\n    property: 'minHeight',\n    scale: 'sizes',\n  },\n  minH: {\n    property: 'minHeight',\n    scale: 'sizes',\n  },\n  maxWidth: {\n    property: 'maxWidth',\n    scale: 'sizes',\n  },\n  maxW: {\n    property: 'maxWidth',\n    scale: 'sizes',\n  },\n  maxHeight: {\n    property: 'maxHeight',\n    scale: 'sizes',\n  },\n  maxH: {\n    property: 'maxHeight',\n    scale: 'sizes',\n  },\n  size: {\n    properties: ['width', 'height'],\n    scale: 'sizes',\n  },\n  boxSize: {\n    properties: ['width', 'height'],\n    scale: 'sizes',\n  },\n  overflow: true,\n  overflowX: true,\n  overflowY: true,\n  display: true,\n  verticalAlign: true,\n  textAlign: true,\n} as const;\n\nexport const flexbox = {\n  alignItems: true,\n  alignContent: true,\n  justifyItems: true,\n  justifyContent: true,\n  flexWrap: true,\n  flexDirection: true,\n  flexDir: {\n    property: 'flexDirection',\n    scale: 'flexDirection',\n  },\n  // item\n  flex: true,\n  flexGrow: true,\n  flexShrink: true,\n  flexBasis: true,\n  justifySelf: true,\n  alignSelf: true,\n  order: true,\n} as const;\n\nexport const position = {\n  position: true,\n  zIndex: {\n    property: 'zIndex',\n  },\n  top: {\n    property: 'top',\n    scale: 'space',\n  },\n  right: {\n    property: 'right',\n    scale: 'space',\n  },\n  bottom: {\n    property: 'bottom',\n    scale: 'space',\n  },\n  left: {\n    property: 'left',\n    scale: 'space',\n  },\n} as const;\n\nexport const color = {\n  color: {\n    property: 'color',\n    scale: 'colors',\n    transformer: getColor,\n  },\n  tintColor: {\n    property: 'tintColor',\n    scale: 'colors',\n    transformer: getColor,\n  },\n  backgroundColor: {\n    property: 'backgroundColor',\n    scale: 'colors',\n    transformer: getColor,\n  },\n  opacity: {\n    property: 'opacity',\n    scale: 'opacity',\n  },\n  bg: {\n    property: 'backgroundColor',\n    scale: 'colors',\n    transformer: getColor,\n  },\n  bgColor: {\n    property: 'backgroundColor',\n    scale: 'colors',\n    transformer: getColor,\n  },\n  background: {\n    property: 'backgroundColor',\n    scale: 'colors',\n    transformer: getColor,\n  },\n  textDecorationColor: {\n    property: 'textDecorationColor',\n    scale: 'colors',\n    transformer: getColor,\n  },\n} as const;\n\nexport const border = {\n  borderWidth: {\n    property: 'borderWidth',\n    scale: 'borderWidths',\n  },\n  borderStyle: {\n    property: 'borderStyle',\n    scale: 'borderStyles',\n  },\n  borderColor: {\n    property: 'borderColor',\n    scale: 'colors',\n    transformer: getColor,\n  },\n  borderRadius: {\n    property: 'borderRadius',\n    scale: 'radii',\n  },\n  borderTop: {\n    property: 'borderTop',\n    scale: 'borders',\n  },\n  borderTopRadius: {\n    properties: ['borderTopLeftRadius', 'borderTopRightRadius'],\n    scale: 'radii',\n  },\n  borderLeftRadius: {\n    properties: ['borderTopLeftRadius', 'borderBottomLeftRadius'],\n    scale: 'radii',\n  },\n  borderRightRadius: {\n    properties: ['borderTopRightRadius', 'borderBottomRightRadius'],\n    scale: 'radii',\n  },\n  borderTopLeftRadius: {\n    property: 'borderTopLeftRadius',\n    scale: 'radii',\n  },\n  borderTopRightRadius: {\n    property: 'borderTopRightRadius',\n    scale: 'radii',\n  },\n  borderRight: {\n    property: 'borderRight',\n    scale: 'borders',\n  },\n  borderBottom: {\n    property: 'borderBottom',\n    scale: 'borders',\n  },\n  borderBottomLeftRadius: {\n    property: 'borderBottomLeftRadius',\n    scale: 'radii',\n  },\n  borderBottomRightRadius: {\n    property: 'borderBottomRightRadius',\n    scale: 'radii',\n  },\n  borderLeft: {\n    property: 'borderLeft',\n    scale: 'borders',\n  },\n  borderX: {\n    properties: ['borderLeft', 'borderRight'],\n    scale: 'borders',\n  },\n  borderY: {\n    properties: ['borderTop', 'borderBottom'],\n    scale: 'borders',\n  },\n  borderTopWidth: {\n    property: 'borderTopWidth',\n    scale: 'borderWidths',\n  },\n  borderTopColor: {\n    property: 'borderTopColor',\n    scale: 'colors',\n    transformer: getColor,\n  },\n  borderTopStyle: {\n    property: 'borderTopStyle',\n    scale: 'borderStyles',\n  },\n  borderBottomWidth: {\n    property: 'borderBottomWidth',\n    scale: 'borderWidths',\n  },\n  borderBottomColor: {\n    property: 'borderBottomColor',\n    scale: 'colors',\n    transformer: getColor,\n  },\n  borderBottomStyle: {\n    property: 'borderBottomStyle',\n    scale: 'borderStyles',\n  },\n  borderLeftWidth: {\n    property: 'borderLeftWidth',\n    scale: 'borderWidths',\n  },\n  borderLeftColor: {\n    property: 'borderLeftColor',\n    scale: 'colors',\n    transformer: getColor,\n  },\n  borderLeftStyle: {\n    property: 'borderLeftStyle',\n    scale: 'borderStyles',\n  },\n  borderRightWidth: {\n    property: 'borderRightWidth',\n    scale: 'borderWidths',\n  },\n  borderRightColor: {\n    property: 'borderRightColor',\n    scale: 'colors',\n    transformer: getColor,\n  },\n  borderRightStyle: {\n    property: 'borderRightStyle',\n    scale: 'borderStyles',\n  },\n  rounded: {\n    property: 'borderRadius',\n    scale: 'radii',\n  },\n\n  roundedTopLeft: {\n    property: 'borderTopLeftRadius',\n    scale: 'radii',\n  },\n\n  roundedTopRight: {\n    property: 'borderTopRightRadius',\n    scale: 'radii',\n  },\n\n  roundedBottomLeft: {\n    property: 'borderBottomLeftRadius',\n    scale: 'radii',\n  },\n\n  roundedBottomRight: {\n    property: 'borderBottomRightRadius',\n    scale: 'radii',\n  },\n\n  roundedTop: {\n    properties: ['borderTopLeftRadius', 'borderTopRightRadius'],\n    scale: 'radii',\n  },\n  borderBottomRadius: {\n    properties: ['borderBottomLeftRadius', 'borderBottomRightRadius'],\n    scale: 'radii',\n  },\n  roundedBottom: {\n    properties: ['borderBottomLeftRadius', 'borderBottomRightRadius'],\n    scale: 'radii',\n  },\n\n  roundedLeft: {\n    properties: ['borderTopLeftRadius', 'borderBottomLeftRadius'],\n    scale: 'radii',\n  },\n\n  roundedRight: {\n    properties: ['borderTopRightRadius', 'borderBottomRightRadius'],\n    scale: 'radii',\n  },\n} as const;\n\nexport const background = {\n  backgroundSize: true,\n  backgroundPosition: true,\n  backgroundRepeat: true,\n  backgroundAttachment: true,\n  backgroundBlendMode: true,\n  bgImage: {\n    property: 'backgroundImage',\n  },\n  bgImg: {\n    property: 'backgroundImage',\n  },\n  bgBlendMode: {\n    property: 'backgroundBlendMode',\n  },\n  bgSize: {\n    property: 'backgroundSize',\n  },\n  bgPosition: {\n    property: 'backgroundPosition',\n  },\n  bgPos: {\n    property: 'backgroundPosition',\n  },\n  bgRepeat: {\n    property: 'backgroundRepeat',\n  },\n  bgAttachment: {\n    property: 'backgroundAttachment',\n  },\n} as const;\n\nexport const space = {\n  margin: {\n    property: 'margin',\n    scale: 'space',\n    transformer: getMargin,\n  },\n  m: {\n    property: 'margin',\n    scale: 'space',\n    transformer: getMargin,\n  },\n  marginTop: {\n    property: 'marginTop',\n    scale: 'space',\n    transformer: getMargin,\n  },\n  mt: {\n    property: 'marginTop',\n    scale: 'space',\n    transformer: getMargin,\n  },\n  marginRight: {\n    property: 'marginRight',\n    scale: 'space',\n    transformer: getMargin,\n  },\n  mr: {\n    property: 'marginRight',\n    scale: 'space',\n    transformer: getMargin,\n  },\n  marginBottom: {\n    property: 'marginBottom',\n    scale: 'space',\n    transformer: getMargin,\n  },\n  mb: {\n    property: 'marginBottom',\n    scale: 'space',\n    transformer: getMargin,\n  },\n  marginLeft: {\n    property: 'marginLeft',\n    scale: 'space',\n    transformer: getMargin,\n  },\n  ml: {\n    property: 'marginLeft',\n    scale: 'space',\n    transformer: getMargin,\n  },\n  marginX: {\n    properties: ['marginLeft', 'marginRight'],\n    scale: 'space',\n    transformer: getMargin,\n  },\n  mx: {\n    properties: ['marginLeft', 'marginRight'],\n    scale: 'space',\n    transformer: getMargin,\n  },\n  marginY: {\n    properties: ['marginTop', 'marginBottom'],\n    scale: 'space',\n    transformer: getMargin,\n  },\n  my: {\n    properties: ['marginTop', 'marginBottom'],\n    scale: 'space',\n    transformer: getMargin,\n  },\n\n  padding: {\n    property: 'padding',\n    scale: 'space',\n  },\n  p: {\n    property: 'padding',\n    scale: 'space',\n  },\n  paddingTop: {\n    property: 'paddingTop',\n    scale: 'space',\n  },\n  pt: {\n    property: 'paddingTop',\n    scale: 'space',\n  },\n  paddingRight: {\n    property: 'paddingRight',\n    scale: 'space',\n  },\n  pr: {\n    property: 'paddingRight',\n    scale: 'space',\n  },\n  paddingBottom: {\n    property: 'paddingBottom',\n    scale: 'space',\n  },\n  pb: {\n    property: 'paddingBottom',\n    scale: 'space',\n  },\n  paddingLeft: {\n    property: 'paddingLeft',\n    scale: 'space',\n  },\n  pl: {\n    property: 'paddingLeft',\n    scale: 'space',\n  },\n  paddingX: {\n    properties: ['paddingLeft', 'paddingRight'],\n    scale: 'space',\n  },\n  px: {\n    properties: ['paddingLeft', 'paddingRight'],\n    scale: 'space',\n  },\n  paddingY: {\n    properties: ['paddingTop', 'paddingBottom'],\n    scale: 'space',\n  },\n  py: {\n    properties: ['paddingTop', 'paddingBottom'],\n    scale: 'space',\n  },\n  gap: {\n    property: 'gap',\n    scale: 'space',\n  },\n} as const;\n\nexport const typography = {\n  fontFamily: {\n    property: 'fontFamily',\n    scale: 'fonts',\n    // transformer: (val: any, scale: any) => {\n    //   const value = get(scale, val);\n    //   return value ? value.toString() : undefined;\n    // },\n  },\n  fontSize: {\n    property: 'fontSize',\n    scale: 'fontSizes',\n  },\n  fontWeight: {\n    property: 'fontWeight',\n    scale: 'fontWeights',\n    transformer: (val: any, scale: any) => {\n      return val ? get(scale, val, val).toString() : val;\n    },\n  },\n  lineHeight: {\n    property: 'lineHeight',\n    scale: 'lineHeights',\n  },\n  letterSpacing: {\n    property: 'letterSpacing',\n    scale: 'letterSpacings',\n  },\n  textAlign: true,\n  fontStyle: true,\n  wordBreak: true,\n  overflowWrap: true,\n  textOverflow: true,\n  textTransform: true,\n  whiteSpace: true,\n  textDecoration: { property: 'textDecorationLine' },\n  txtDecor: { property: 'textDecorationLine' },\n  textDecorationLine: true,\n} as const;\n\nconst extraProps = {\n  outline: true,\n  outlineWidth: true,\n  outlineColor: true,\n  outlineStyle: true,\n  shadow: {\n    scale: 'shadows',\n  },\n  cursor: true,\n  overflow: true,\n  userSelect: { property: 'userSelect' },\n} as const;\n\nexport const propConfig = {\n  ...color,\n  ...space,\n  ...layout,\n  ...flexbox,\n  ...border,\n  ...position,\n  ...typography,\n  ...background,\n  ...extraProps,\n} as const;\n\nexport const getStyleAndFilteredProps = ({\n  style,\n  theme,\n  debug,\n  currentBreakpoint,\n  getResponsiveStyles,\n  styledSystemProps,\n}: any) => {\n  let dataSet: any = {};\n\n  const orderedBreakPoints = Object.entries(\n    theme.breakpoints as ITheme['breakpoints']\n  ).sort((a, b) => a[1] - b[1]);\n\n  let { styleFromProps, responsiveStyles }: any = getStyledFromProps(\n    styledSystemProps,\n    theme,\n    currentBreakpoint,\n    propConfig\n  );\n\n  if (responsiveStyles) {\n    const query: UseResponsiveQueryParams = { query: [] };\n    orderedBreakPoints.forEach((o) => {\n      const key = o[0];\n      if (key === 'base') {\n        if (responsiveStyles) query.initial = responsiveStyles.base;\n      } else {\n        if (responsiveStyles)\n          if (key in responsiveStyles) {\n            query?.query?.push({\n              minWidth: o[1],\n              style: responsiveStyles[key],\n            });\n          }\n      }\n    });\n\n    const { dataSet: newDataSet, styles } = getResponsiveStyles(query);\n    dataSet = { ...dataSet, ...newDataSet };\n    styleFromProps = { ...styleFromProps, ...StyleSheet.flatten(styles) };\n  }\n\n  if (process.env.NODE_ENV === 'development' && debug) {\n    /* eslint-disable-next-line */\n    console.log('style ', debug + ' :: ', {\n      styleFromProps,\n      style,\n      styledSystemProps,\n    });\n  }\n\n  return {\n    styleSheet: StyleSheet.create({ box: styleFromProps }),\n    styleFromProps,\n    dataSet,\n  };\n};\n\nexport type StyledPropConfig = typeof propConfig;\n"
  },
  {
    "path": "src/theme/tests/findLastValidBreakpoint.test.tsx",
    "content": "import { findLastValidBreakpoint } from './../../theme/tools/utils';\nimport { theme } from '../../theme';\n\ndescribe('mode', () => {\n  // const theme = useTheme();\n  test('First array value', () => {\n    expect(findLastValidBreakpoint([1, 2], theme.breakpoints, 0)).toBe(1);\n  });\n  test('Middle array value', () => {\n    expect(findLastValidBreakpoint([1, 2, 3], theme.breakpoints, 1)).toBe(2);\n  });\n  test('Last array value', () => {\n    expect(findLastValidBreakpoint([1, 2, 3], theme.breakpoints, 2)).toBe(3);\n  });\n  test('First Object value', () => {\n    expect(\n      findLastValidBreakpoint({ base: 1, sm: 2, lg: 3 }, theme.breakpoints, 0)\n    ).toBe(1);\n  });\n  test('Middle object value 1', () => {\n    expect(\n      findLastValidBreakpoint({ base: 1, sm: 2, lg: 3 }, theme.breakpoints, 1)\n    ).toBe(2);\n  });\n  test('Middle object value 2', () => {\n    expect(\n      findLastValidBreakpoint({ base: 1, sm: 2, lg: 3 }, theme.breakpoints, 2)\n    ).toBe(2);\n  });\n  test('Last object value', () => {\n    expect(\n      findLastValidBreakpoint({ base: 1, sm: 2, lg: 3 }, theme.breakpoints, 3)\n    ).toBe(3);\n  });\n});\n"
  },
  {
    "path": "src/theme/tests/getClosestBreakpoint.test.tsx",
    "content": "import { getClosestBreakpoint } from './../../theme/tools/utils';\nconst defaultBreakpoints = {\n  base: 0,\n  sm: 480,\n  md: 768,\n  lg: 992,\n  xl: 1280,\n};\ndescribe('mode', () => {\n  test('Base value', () => {\n    expect(getClosestBreakpoint(defaultBreakpoints, 0)).toBe(0);\n  });\n  test('Base-Sm value', () => {\n    expect(getClosestBreakpoint(defaultBreakpoints, 10)).toBe(0);\n  });\n  test('Sm value', () => {\n    expect(getClosestBreakpoint(defaultBreakpoints, 480)).toBe(1);\n  });\n  test('Sm-md value', () => {\n    expect(getClosestBreakpoint(defaultBreakpoints, 500)).toBe(1);\n  });\n  test('Lg value', () => {\n    expect(getClosestBreakpoint(defaultBreakpoints, 1000)).toBe(3);\n  });\n});\n"
  },
  {
    "path": "src/theme/tests/hasValidBreakpointFormat.test.tsx",
    "content": "import { hasValidBreakpointFormat } from './../../theme/tools/utils';\nimport { theme as defaultTheme } from '../../theme';\n\ndescribe('mode', () => {\n  test('Empty array', () => {\n    expect(hasValidBreakpointFormat([], defaultTheme.breakpoints)).toBe(false);\n  });\n  test('Array', () => {\n    expect(hasValidBreakpointFormat([1, 2], defaultTheme.breakpoints)).toBe(\n      true\n    );\n  });\n  test('Valid Object', () => {\n    expect(\n      hasValidBreakpointFormat({ base: 1, sm: 2 }, defaultTheme.breakpoints)\n    ).toBe(true);\n  });\n  test('Invalid Object', () => {\n    expect(\n      hasValidBreakpointFormat(\n        { base: 1, sm: 2, ab: 1 },\n        defaultTheme.breakpoints\n      )\n    ).toBe(false);\n  });\n});\n"
  },
  {
    "path": "src/theme/tests/mode.test.tsx",
    "content": "import { mode } from './../../theme/tools/colors';\ndescribe('mode', () => {\n  test('default', () => {\n    expect(mode('light', 'dark')({})).toBe('light');\n  });\n  test('light', () => {\n    expect(mode('light', 'dark')({ colorMode: 'light' })).toBe('light');\n  });\n  test('dark', () => {\n    expect(mode('light', 'dark')({ colorMode: 'dark' })).toBe('dark');\n  });\n});\n"
  },
  {
    "path": "src/theme/tools/colors.ts",
    "content": "import get from 'lodash.get';\nimport isEmpty from 'lodash.isempty';\nimport Color from 'tinycolor2';\nimport type { Dict } from './utils';\n\nexport function mode(light: any, dark: any) {\n  return (props: any) => (props.colorMode === 'dark' ? dark : light);\n}\n\nexport const transparentize = (color: string, opacity: number) => (\n  theme: Dict\n) => {\n  const raw = getColor(theme, color);\n  return Color(raw).setAlpha(opacity).toRgbString();\n};\n\nexport const getColor = (theme: Dict, color: string, fallback?: string) => {\n  const hex = get(theme, `colors.${color}`, color);\n  const isValid = Color(hex).isValid();\n  return isValid ? hex : fallback;\n};\n\nexport const tone = (color: string) => (theme: Dict) => {\n  const hex = getColor(theme, color);\n  const isDark = Color(hex).isDark();\n  return isDark ? 'dark' : 'light';\n};\n\nexport const isDark = (color: string) => (theme: Dict) =>\n  tone(color)(theme) === 'dark';\n\nexport const isLight = (color: string) => (theme: Dict) =>\n  tone(color)(theme) === 'light';\n\ninterface RandomColorOptions {\n  /**\n   * If passed, string will be used to generate\n   * random color\n   */\n  string?: string;\n  /**\n   * List of colors to pick from at random\n   */\n  colors?: string[];\n}\nexport function randomColor(opts?: RandomColorOptions) {\n  const fallback = Color.random().toHexString();\n\n  if (!opts || isEmpty(opts)) {\n    return fallback;\n  }\n\n  if (opts.string && opts.colors) {\n    return randomColorFromList(opts.string, opts.colors);\n  }\n\n  if (opts.string && !opts.colors) {\n    return randomColorFromString(opts.string);\n  }\n\n  if (opts.colors && !opts.string) {\n    return randomFromList(opts.colors);\n  }\n\n  return fallback;\n}\n\nfunction randomFromList(list: string[]) {\n  return list[Math.floor(Math.random() * list.length)];\n}\n\nfunction randomColorFromList(str: string, list: string[]) {\n  let index = 0;\n  if (str.length === 0) return list[0];\n  for (let i = 0; i < str.length; i++) {\n    index = str.charCodeAt(i) + ((index << 5) - index);\n    index = index & index;\n  }\n  index = ((index % list.length) + list.length) % list.length;\n  return list[index];\n}\n\nfunction randomColorFromString(str: string) {\n  let hash = 0;\n  if (str.length === 0) return hash.toString();\n  for (let i = 0; i < str.length; i++) {\n    hash = str.charCodeAt(i) + ((hash << 5) - hash);\n    hash = hash & hash;\n  }\n  let color = '#';\n  for (let j = 0; j < 3; j++) {\n    const value = (hash >> (j * 8)) & 255;\n    color += ('00' + value.toString(16)).substr(-2);\n  }\n  return color;\n}\n"
  },
  {
    "path": "src/theme/tools/index.ts",
    "content": "export * from './colors';\nexport * from './utils';\n"
  },
  {
    "path": "src/theme/tools/platformUnits.test.js",
    "content": "import { Platform } from 'react-native';\nimport theme from '../base';\nimport { platformSpecificSpaceUnits } from './utils';\n\ndescribe('platform units on native', () => {\n  it('should convert px to absolute on native', () => {\n    Platform.OS = 'ios';\n    const newTheme = { ...theme };\n    newTheme.space = { xs: '1px' };\n    const convertedTheme = platformSpecificSpaceUnits(newTheme);\n    expect(convertedTheme.space).toEqual({ xs: 1 });\n  });\n\n  it('should convert rem to absolute on native', () => {\n    Platform.OS = 'ios';\n    const newTheme = { ...theme };\n    newTheme.space = { xs: '2rem' };\n    const convertedTheme = platformSpecificSpaceUnits(newTheme);\n    expect(convertedTheme.space).toEqual({ xs: 32 });\n  });\n});\n\ndescribe('platform units on web', () => {\n  it('should not convert px to rem on web', () => {\n    Platform.OS = 'web';\n    const newTheme = { ...theme };\n    newTheme.space = { xs: '23px' };\n    const convertedTheme = platformSpecificSpaceUnits(newTheme);\n    expect(convertedTheme.space).toEqual({ xs: '23px' });\n  });\n\n  it('should convert absolute to rem on web', () => {\n    Platform.OS = 'web';\n    const newTheme = { ...theme };\n    newTheme.space = { xs: 23 };\n    const convertedTheme = platformSpecificSpaceUnits(newTheme);\n    expect(convertedTheme.space).toEqual({ xs: '1.4375rem' });\n  });\n});\n"
  },
  {
    "path": "src/theme/tools/utils.ts",
    "content": "import omitBy from 'lodash.omitby';\nimport isNil from 'lodash.isnil';\nimport pick from 'lodash.pick';\nimport omit from 'lodash.omit';\nimport get from 'lodash.get';\nimport type { ITheme } from '../index';\nimport { Platform } from 'react-native';\n\nexport const stylingProps = {\n  margin: [\n    'margin',\n    'm',\n    'marginTop',\n    'mt',\n    'marginRight',\n    'mr',\n    'marginBottom',\n    'mb',\n    'marginLeft',\n    'ml',\n    'marginX',\n    'mx',\n    'marginY',\n    'my',\n  ],\n  padding: [\n    'padding',\n    'p',\n    'paddingTop',\n    'pt',\n    'paddingRight',\n    'pr',\n    'paddingBottom',\n    'pb',\n    'paddingLeft',\n    'pl',\n    'paddingX',\n    'px',\n    'paddingY',\n    'py',\n  ],\n  border: [\n    'border',\n    'borderWidth',\n    'borderStyle',\n    'borderColor',\n    'borderRadius',\n    'borderTop',\n    'borderTopWidth',\n    'borderTopStyle',\n    'borderTopColor',\n    'borderTopLeftRadius',\n    'borderTopRightRadius',\n    'borderRight',\n    'borderRightWidth',\n    'borderRightStyle',\n    'borderRightColor',\n    'borderBottom',\n    'borderBottomWidth',\n    'borderBottomStyle',\n    'borderBottomColor',\n    'borderBottomLeftRadius',\n    'borderBottomRightRadius',\n    'borderLeft',\n    'borderLeftWidth',\n    'borderLeftStyle',\n    'borderLeftColor',\n    'borderX',\n    'borderY',\n    'rounded',\n  ],\n  layout: [\n    'width',\n    'w',\n    'height',\n    'h',\n    'display',\n    'minWidth',\n    'minW',\n    'minH',\n    'minHeight',\n    'maxWidth',\n    'maxW',\n    'maxHeight',\n    'maxH',\n    'size',\n    'verticalAlign',\n    'overflow',\n    'overflowX',\n    'overflowY',\n  ],\n  flexbox: [\n    'alignItems',\n    'alignContent',\n    'justifyItems',\n    'justifyContent',\n    'flexWrap',\n    'flexDirection',\n    'flex',\n    'flexGrow',\n    'flexShrink',\n    'flexBasis',\n    'justifySelf',\n    'alignSelf',\n    'order',\n  ],\n  position: ['position', 'zIndex', 'top', 'right', 'bottom', 'left'],\n  outline: ['outlineWidth', 'outlineColor', 'outlineStyle'],\n  background: ['bg', 'backgroundColor', 'bgColor'],\n};\nexport type Dict = Record<string, any>;\nexport function omitUndefined(obj: any) {\n  return omitBy(obj, isNil);\n}\nexport function getRandomString(length: number) {\n  var result = '';\n  var characters =\n    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';\n  var charactersLength = characters.length;\n  for (var i = 0; i < length; i++) {\n    result += characters.charAt(Math.floor(Math.random() * charactersLength));\n  }\n  return result;\n}\n// Inefficient way for pick, but retains order of props.\nfunction orderedPick(obj: any, values: any) {\n  const ret: any = {};\n  Object.keys(obj).forEach((key: string) => {\n    if (values.includes(key)) {\n      ret[key] = obj[key];\n    }\n  });\n  return ret;\n}\nexport function orderedExtractInObject(parent: any, values: Array<string>) {\n  return [\n    omitUndefined(orderedPick(parent, values)),\n    omitUndefined(omit(parent, values)),\n  ];\n}\n/**\n *\n * @param parent The object from which data needs to extracted\n * @param values Keys which needs to be extracted\n * @returns [extractedProps, remainingProps]\n */\nexport function extractInObject(parent: any, values: Array<string>) {\n  return [\n    omitUndefined(pick(parent, values)),\n    omitUndefined(omit(parent, values)),\n  ];\n}\nexport function getColorFormColorScheme(props: Record<string, any>) {\n  const { theme, colorScheme, isDisabled } = props;\n  const simpleColorScheme = colorScheme.split('.')[0];\n  if (isDisabled) return 'gray.300';\n  else if (simpleColorScheme in theme.colors) {\n    return theme.colors[simpleColorScheme][0] === '#'\n      ? simpleColorScheme\n      : theme.colors[simpleColorScheme][400] ||\n          theme.colors[simpleColorScheme][200];\n  } else return 'primary.200';\n}\n\n// TODO: This function can be removed.\nexport function getColorScheme(\n  props: Record<string, any>,\n  customColorScheme?: string\n) {\n  let { theme, colorScheme } = props;\n  colorScheme = customColorScheme || colorScheme;\n  if (!(colorScheme in theme.colors)) return 'primary';\n  else {\n    if (typeof theme.colors[colorScheme] === 'object') return colorScheme;\n  }\n}\nexport const inValidBreakpointProps = ['style', 'children', 'shadowOffset'];\nexport function hasValidBreakpointFormat(\n  breaks: any,\n  themeBreakpoints?: any,\n  property?: string\n) {\n  if (property && inValidBreakpointProps.indexOf(property) !== -1) {\n    return false;\n  } else if (Array.isArray(breaks)) {\n    return breaks.length ? true : false;\n  } else if (typeof breaks === 'object' && breaks !== null) {\n    const keys = Object.keys(breaks);\n    const themeBreakPointKeys = Object.keys(themeBreakpoints);\n    for (let i = 0; i < keys.length; i++) {\n      if (themeBreakPointKeys.indexOf(keys[i]) === -1) {\n        return false;\n      }\n    }\n    return true;\n  } else {\n    return false;\n  }\n}\nexport function findLastValidBreakpoint(\n  values: any,\n  themeBreakpoints: any,\n  currentBreakpoint: number\n) {\n  const valArray = Array.isArray(values)\n    ? values\n    : Object.keys(themeBreakpoints).map((bPoint: string) => values[bPoint]);\n  return (\n    valArray[currentBreakpoint] ??\n    valArray\n      .slice(0, currentBreakpoint + 1)\n      .filter((v: any) => !isNil(v))\n      .pop()\n  );\n}\nexport function getClosestBreakpoint(\n  values: Record<string, any>,\n  point: number\n) {\n  const dimValues = Object.values(values);\n  let index = -1;\n  let breakpointsObj: any = {};\n  for (let i = 0; i < dimValues.length; i++) {\n    breakpointsObj[dimValues[i]] = i;\n  }\n  const breakpoints = Object.keys(breakpointsObj);\n  for (let i = 0; i < breakpoints.length; i++) {\n    if (parseInt(breakpoints[i]) === point) {\n      index = breakpointsObj[breakpoints[i]];\n      break;\n    } else if (parseInt(breakpoints[i]) > point && i !== 0) {\n      index = breakpointsObj[breakpoints[i - 1]];\n      break;\n    }\n    // If windowWidth is greater than last available breakpoint clamp it to last index\n    else if (parseInt(breakpoints[i]) < point && i === dimValues.length - 1) {\n      index = breakpointsObj[breakpoints[i]];\n      break;\n    }\n  }\n  return index;\n}\n\nexport const baseFontSize = 16;\n\nexport const convertAbsoluteToRem = (px: number) => {\n  return `${px / baseFontSize}rem`;\n};\n\nexport const convertRemToAbsolute = (rem: number) => {\n  return rem * baseFontSize;\n};\n\nexport const convertToDp = (value: number | string): number => {\n  const numberRegex = /^\\d+$/;\n\n  if (typeof value === 'number') {\n    return value;\n  } else {\n    const isAbsolute = numberRegex.test(value);\n    const isPx = !isAbsolute && value.endsWith('px');\n    const isRem = !isAbsolute && value.endsWith('rem');\n    const isEm = !isAbsolute && value.endsWith('em');\n\n    let finalDpValue = 0;\n\n    if (isAbsolute || isPx) {\n      finalDpValue = parseFloat(value);\n    } else if (isEm) {\n      finalDpValue = convertRemToAbsolute(parseFloat(value));\n    } else if (isRem) {\n      finalDpValue = convertRemToAbsolute(parseFloat(value));\n    }\n\n    return finalDpValue;\n  }\n};\n\n/**\n *\n * @param theme\n * @description\n  - Converts space/sizes/lineHeights/letterSpacings/fontSizes to `rem` on web if the token value specified is an absolute number.\n  - Converts space/sizes/lineHeights/letterSpacings/fontSizes to absolute number on native if the token value specified is in `px` or `rem`\n*/\nexport const platformSpecificSpaceUnits = (theme: ITheme) => {\n  const scales = ['space', 'sizes', 'fontSizes'];\n\n  const newTheme = { ...theme };\n  const isWeb = Platform.OS === 'web';\n  scales.forEach((key) => {\n    const scale = get(theme, key, {});\n    const newScale = { ...scale };\n    for (const scaleKey in scale) {\n      const val = scale[scaleKey];\n      if (typeof val !== 'object') {\n        const isAbsolute = typeof val === 'number';\n        const isPx = !isAbsolute && val.endsWith('px');\n        const isRem = !isAbsolute && val.endsWith('rem');\n\n        // If platform is web, we need to convert absolute unit to rem. e.g. 16 to 1rem\n        if (isWeb) {\n          if (isAbsolute) {\n            newScale[scaleKey] = convertAbsoluteToRem(val);\n          }\n        }\n        // If platform is not web, we need to convert px unit to absolute and rem unit to absolute. e.g. 16px to 16. 1rem to 16.\n        else {\n          if (isRem) {\n            newScale[scaleKey] = convertRemToAbsolute(parseFloat(val));\n          } else if (isPx) {\n            newScale[scaleKey] = parseFloat(val);\n          }\n        }\n      }\n    }\n    //@ts-ignore\n    newTheme[key] = newScale;\n  });\n\n  return newTheme;\n};\nexport function isResponsiveAnyProp(props: Record<string, any>, theme: any) {\n  if (props) {\n    const keys = Object.keys(props);\n    for (let i = 0; i < keys.length; i++) {\n      if (\n        hasValidBreakpointFormat(props[keys[i]], theme.breakpoints, keys[i])\n      ) {\n        return true;\n      }\n    }\n  }\n\n  return false;\n}\n"
  },
  {
    "path": "src/theme/types.ts",
    "content": "import type { Properties as CSSProperties } from 'csstype';\nimport type { ResponsiveValue } from '../components/types/responsiveValue';\nimport type { ColorType } from '../components/types/utils';\nimport type { ImageStyle, TextStyle, ViewStyle } from 'react-native';\nimport type { ITheme } from './index';\nimport type { StyledPropConfig } from './styled-system';\n\ntype RNStyles = ViewStyle & ImageStyle & TextStyle;\n\ntype GetThemeScaleValues<T extends keyof ITheme> = 'colors' extends T\n  ? ColorType\n  : ResponsiveValue<keyof ITheme[T] | (string & {}) | (number & {})>;\n\ntype GetRNStyles<key, scale = null> = scale extends keyof ITheme\n  ? GetThemeScaleValues<scale>\n  : key extends keyof CSSProperties\n  ? ResponsiveValue<CSSProperties[key]>\n  : key extends keyof RNStyles\n  ? ResponsiveValue<RNStyles[key]>\n  : unknown;\n\ntype AllProps<T extends StyledPropConfig> = {\n  [key in Extract<keyof T, string>]?: T[key] extends boolean\n    ? GetRNStyles<key>\n    : key extends 'shadow'\n    ? GetRNStyles<null, 'shadows'>\n    : T[key] extends { property: any; scale: any }\n    ? GetRNStyles<T[key]['property'], T[key]['scale']>\n    : T[key] extends { properties: any; scale: any }\n    ? T[key]['properties'] extends { '0': string }\n      ? GetRNStyles<T[key]['properties']['0'], T[key]['scale']>\n      : unknown\n    : unknown;\n};\n\nexport type StyledProps = Omit<\n  AllProps<StyledPropConfig>,\n  | 'gap'\n  | 'verticalAlign'\n  | 'borderBottom'\n  | 'borderTop'\n  | 'borderLeft'\n  | 'borderRight'\n  | 'wordBreak'\n  | 'justifySelf'\n  | 'overflowWrap'\n  | 'textOverflow'\n  | 'whiteSpace'\n  | 'outline'\n  | 'outlineWidth'\n  | 'cursor'\n  | 'userSelect'\n  | 'order'\n  | 'backgroundSize'\n  | 'backgroundPosition'\n  | 'backgroundRepeat'\n  | 'backgroundAttachment'\n  | 'backgroundBlendMode'\n  | 'bgSize'\n  | 'bgPosition'\n  | 'bgRepeat'\n  | 'bgAttachment'\n  | 'bgBlendMode'\n  | 'bgImage'\n  | 'bgImg'\n  | 'bgPos'\n>;\n"
  },
  {
    "path": "src/theme/v3-compatible-theme/index.ts",
    "content": "export const v3CompatibleTheme = {\n  borders: {\n    'none': 0,\n    '1px': '1px solid',\n    '2px': '2px solid',\n    '4px': '4px solid',\n  },\n  breakpoints: {\n    base: 0,\n    sm: 480,\n    md: 768,\n    lg: 992,\n    xl: 1280,\n  },\n  colors: {\n    contrastThreshold: 7,\n    white: '#FFFFFF',\n    black: '#000000',\n    lightText: '#FFFFFF',\n    darkText: '#000000',\n    rose: {\n      '50': '#fff1f2',\n      '100': '#ffe4e6',\n      '200': '#fecdd3',\n      '300': '#fda4af',\n      '400': '#fb7185',\n      '500': '#f43f5e',\n      '600': '#e11d48',\n      '700': '#be123c',\n      '800': '#9f1239',\n      '900': '#881337',\n    },\n    pink: {\n      '50': '#fdf2f8',\n      '100': '#fce7f3',\n      '200': '#fbcfe8',\n      '300': '#f9a8d4',\n      '400': '#f472b6',\n      '500': '#ec4899',\n      '600': '#db2777',\n      '700': '#be185d',\n      '800': '#9d174d',\n      '900': '#831843',\n    },\n    fuchsia: {\n      '50': '#fdf4ff',\n      '100': '#fae8ff',\n      '200': '#f5d0fe',\n      '300': '#f0abfc',\n      '400': '#e879f9',\n      '500': '#d946ef',\n      '600': '#c026d3',\n      '700': '#a21caf',\n      '800': '#86198f',\n      '900': '#701a75',\n    },\n    purple: {\n      '50': '#faf5ff',\n      '100': '#f3e8ff',\n      '200': '#e9d5ff',\n      '300': '#d8b4fe',\n      '400': '#c084fc',\n      '500': '#a855f7',\n      '600': '#9333ea',\n      '700': '#7e22ce',\n      '800': '#6b21a8',\n      '900': '#581c87',\n    },\n    violet: {\n      '50': '#f5f3ff',\n      '100': '#ede9fe',\n      '200': '#ddd6fe',\n      '300': '#c4b5fd',\n      '400': '#a78bfa',\n      '500': '#8b5cf6',\n      '600': '#7c3aed',\n      '700': '#6d28d9',\n      '800': '#5b21b6',\n      '900': '#4c1d95',\n    },\n    indigo: {\n      '50': '#eef2ff',\n      '100': '#e0e7ff',\n      '200': '#c7d2fe',\n      '300': '#a5b4fc',\n      '400': '#818cf8',\n      '500': '#6366f1',\n      '600': '#4f46e5',\n      '700': '#4338ca',\n      '800': '#3730a3',\n      '900': '#312e81',\n    },\n    blue: {\n      '50': '#eff6ff',\n      '100': '#dbeafe',\n      '200': '#bfdbfe',\n      '300': '#93c5fd',\n      '400': '#60a5fa',\n      '500': '#3b82f6',\n      '600': '#2563eb',\n      '700': '#1d4ed8',\n      '800': '#1e40af',\n      '900': '#1e3a8a',\n    },\n    lightBlue: {\n      '50': '#f0f9ff',\n      '100': '#e0f2fe',\n      '200': '#bae6fd',\n      '300': '#7dd3fc',\n      '400': '#38bdf8',\n      '500': '#0ea5e9',\n      '600': '#0284c7',\n      '700': '#0369a1',\n      '800': '#075985',\n      '900': '#0c4a6e',\n    },\n    darkBlue: {\n      '50': '#dbf4ff',\n      '100': '#addbff',\n      '200': '#7cc2ff',\n      '300': '#4aa9ff',\n      '400': '#1a91ff',\n      '500': '#0077e6',\n      '600': '#005db4',\n      '700': '#004282',\n      '800': '#002851',\n      '900': '#000e21',\n    },\n    cyan: {\n      '50': '#ecfeff',\n      '100': '#cffafe',\n      '200': '#a5f3fc',\n      '300': '#67e8f9',\n      '400': '#22d3ee',\n      '500': '#06b6d4',\n      '600': '#0891b2',\n      '700': '#0e7490',\n      '800': '#155e75',\n      '900': '#164e63',\n    },\n    teal: {\n      '50': '#f0fdfa',\n      '100': '#ccfbf1',\n      '200': '#99f6e4',\n      '300': '#5eead4',\n      '400': '#2dd4bf',\n      '500': '#14b8a6',\n      '600': '#0d9488',\n      '700': '#0f766e',\n      '800': '#115e59',\n      '900': '#134e4a',\n    },\n    emerald: {\n      '50': '#ecfdf5',\n      '100': '#d1fae5',\n      '200': '#a7f3d0',\n      '300': '#6ee7b7',\n      '400': '#34d399',\n      '500': '#10b981',\n      '600': '#059669',\n      '700': '#047857',\n      '800': '#065f46',\n      '900': '#064e3b',\n    },\n    green: {\n      '50': '#f0fdf4',\n      '100': '#dcfce7',\n      '200': '#bbf7d0',\n      '300': '#86efac',\n      '400': '#4ade80',\n      '500': '#22c55e',\n      '600': '#16a34a',\n      '700': '#15803d',\n      '800': '#166534',\n      '900': '#14532d',\n    },\n    lime: {\n      '50': '#f7fee7',\n      '100': '#ecfccb',\n      '200': '#d9f99d',\n      '300': '#bef264',\n      '400': '#a3e635',\n      '500': '#84cc16',\n      '600': '#65a30d',\n      '700': '#4d7c0f',\n      '800': '#3f6212',\n      '900': '#365314',\n    },\n    yellow: {\n      '50': '#fefce8',\n      '100': '#fef9c3',\n      '200': '#fef08a',\n      '300': '#fde047',\n      '400': '#facc15',\n      '500': '#eab308',\n      '600': '#ca8a04',\n      '700': '#a16207',\n      '800': '#854d0e',\n      '900': '#713f12',\n    },\n    amber: {\n      '50': '#fffbeb',\n      '100': '#fef3c7',\n      '200': '#fde68a',\n      '300': '#fcd34d',\n      '400': '#fbbf24',\n      '500': '#f59e0b',\n      '600': '#d97706',\n      '700': '#b45309',\n      '800': '#92400e',\n      '900': '#78350f',\n    },\n    orange: {\n      '50': '#fff7ed',\n      '100': '#ffedd5',\n      '200': '#fed7aa',\n      '300': '#fdba74',\n      '400': '#fb923c',\n      '500': '#f97316',\n      '600': '#ea580c',\n      '700': '#c2410c',\n      '800': '#9a3412',\n      '900': '#7c2d12',\n    },\n    red: {\n      '50': '#fef2f2',\n      '100': '#fee2e2',\n      '200': '#fecaca',\n      '300': '#fca5a5',\n      '400': '#f87171',\n      '500': '#ef4444',\n      '600': '#dc2626',\n      '700': '#b91c1c',\n      '800': '#991b1b',\n      '900': '#7f1d1d',\n    },\n    warmGray: {\n      '50': '#fafaf9',\n      '100': '#f5f5f4',\n      '200': '#e7e5e4',\n      '300': '#d6d3d1',\n      '400': '#a8a29e',\n      '500': '#78716c',\n      '600': '#57534e',\n      '700': '#44403c',\n      '800': '#292524',\n      '900': '#1c1917',\n    },\n    trueGray: {\n      '50': '#fafafa',\n      '100': '#f5f5f5',\n      '200': '#e5e5e5',\n      '300': '#d4d4d4',\n      '400': '#a3a3a3',\n      '500': '#737373',\n      '600': '#525252',\n      '700': '#404040',\n      '800': '#262626',\n      '900': '#171717',\n    },\n    gray: {\n      '50': '#fafafa',\n      '100': '#f4f4f5',\n      '200': '#e4e4e7',\n      '300': '#d4d4d8',\n      '400': '#a1a1aa',\n      '500': '#71717a',\n      '600': '#52525b',\n      '700': '#3f3f46',\n      '800': '#27272a',\n      '900': '#18181b',\n    },\n    coolGray: {\n      '50': '#f9fafb',\n      '100': '#f3f4f6',\n      '200': '#e5e7eb',\n      '300': '#d1d5db',\n      '400': '#9ca3af',\n      '500': '#6b7280',\n      '600': '#4b5563',\n      '700': '#374151',\n      '800': '#1f2937',\n      '900': '#111827',\n    },\n    blueGray: {\n      '50': '#f8fafc',\n      '100': '#f1f5f9',\n      '200': '#e2e8f0',\n      '300': '#cbd5e1',\n      '400': '#94a3b8',\n      '500': '#64748b',\n      '600': '#475569',\n      '700': '#334155',\n      '800': '#1e293b',\n      '900': '#0f172a',\n    },\n    dark: {\n      '50': '#18181b',\n      '100': '#27272a',\n      '200': '#3f3f46',\n      '300': '#52525b',\n      '400': '#71717a',\n      '500': '#a1a1aa',\n      '600': '#d4d4d8',\n      '700': '#e4e4e7',\n      '800': '#f4f4f5',\n      '900': '#fafafa',\n    },\n    danger: {\n      '50': '#fff1f2',\n      '100': '#ffe4e6',\n      '200': '#fecdd3',\n      '300': '#fda4af',\n      '400': '#fb7185',\n      '500': '#f43f5e',\n      '600': '#e11d48',\n      '700': '#be123c',\n      '800': '#9f1239',\n      '900': '#881337',\n    },\n    error: {\n      '50': '#fef2f2',\n      '100': '#fee2e2',\n      '200': '#fecaca',\n      '300': '#fca5a5',\n      '400': '#f87171',\n      '500': '#ef4444',\n      '600': '#dc2626',\n      '700': '#b91c1c',\n      '800': '#991b1b',\n      '900': '#7f1d1d',\n    },\n    success: {\n      '50': '#f0fdf4',\n      '100': '#dcfce7',\n      '200': '#bbf7d0',\n      '300': '#86efac',\n      '400': '#4ade80',\n      '500': '#22c55e',\n      '600': '#16a34a',\n      '700': '#15803d',\n      '800': '#166534',\n      '900': '#14532d',\n    },\n    warning: {\n      '50': '#fff7ed',\n      '100': '#ffedd5',\n      '200': '#fed7aa',\n      '300': '#fdba74',\n      '400': '#fb923c',\n      '500': '#f97316',\n      '600': '#ea580c',\n      '700': '#c2410c',\n      '800': '#9a3412',\n      '900': '#7c2d12',\n    },\n    muted: {\n      '50': '#fafafa',\n      '100': '#f5f5f5',\n      '200': '#e5e5e5',\n      '300': '#d4d4d4',\n      '400': '#a3a3a3',\n      '500': '#737373',\n      '600': '#525252',\n      '700': '#404040',\n      '800': '#262626',\n      '900': '#171717',\n    },\n    primary: {\n      '50': '#ecfeff',\n      '100': '#cffafe',\n      '200': '#a5f3fc',\n      '300': '#67e8f9',\n      '400': '#22d3ee',\n      '500': '#06b6d4',\n      '600': '#0891b2',\n      '700': '#0e7490',\n      '800': '#155e75',\n      '900': '#164e63',\n    },\n    info: {\n      '50': '#f0f9ff',\n      '100': '#e0f2fe',\n      '200': '#bae6fd',\n      '300': '#7dd3fc',\n      '400': '#38bdf8',\n      '500': '#0ea5e9',\n      '600': '#0284c7',\n      '700': '#0369a1',\n      '800': '#075985',\n      '900': '#0c4a6e',\n    },\n    secondary: {\n      '50': '#fdf2f8',\n      '100': '#fce7f3',\n      '200': '#fbcfe8',\n      '300': '#f9a8d4',\n      '400': '#f472b6',\n      '500': '#ec4899',\n      '600': '#db2777',\n      '700': '#be185d',\n      '800': '#9d174d',\n      '900': '#831843',\n    },\n    light: {\n      '50': '#fafaf9',\n      '100': '#f5f5f4',\n      '200': '#e7e5e4',\n      '300': '#d6d3d1',\n      '400': '#a8a29e',\n      '500': '#78716c',\n      '600': '#57534e',\n      '700': '#44403c',\n      '800': '#292524',\n      '900': '#1c1917',\n    },\n    tertiary: {\n      '50': '#ecfdf5',\n      '100': '#d1fae5',\n      '200': '#a7f3d0',\n      '300': '#6ee7b7',\n      '400': '#34d399',\n      '500': '#10b981',\n      '600': '#059669',\n      '700': '#047857',\n      '800': '#065f46',\n      '900': '#064e3b',\n    },\n  },\n  radii: {\n    none: 0,\n    sm: 2,\n    md: 4,\n    lg: 6,\n    xl: 8,\n    pill: 25,\n    full: 9999,\n  },\n  letterSpacings: {\n    'xxs': -1.5,\n    'xs': -0.5,\n    'sm': 0,\n    'md': 0.1,\n    'lg': 0.15,\n    'xl': 0.25,\n    '2xl': 0.4,\n    '3xl': 0.5,\n    '4xl': 1.25,\n    '5xl': 1.5,\n  },\n  lineHeights: {\n    '3': '12px',\n    '4': '16px',\n    '5': '20px',\n    '6': '24px',\n    '7': '28px',\n    '8': '32px',\n    '9': '36px',\n    '10': '40px',\n    'none': 1,\n    'shorter': 1.25,\n    'short': 1.375,\n    'base': 1.5,\n    'tall': 1.625,\n    'taller': '2',\n  },\n  fontWeights: {\n    hairline: 100,\n    thin: 200,\n    light: 300,\n    normal: 400,\n    medium: 500,\n    semibold: 600,\n    bold: 700,\n    extrabold: 800,\n    black: 900,\n  },\n  fonts: {},\n  fontSizes: {\n    'xxs': 10,\n    'xs': 12,\n    'sm': 14,\n    'md': 16,\n    'lg': 18,\n    'xl': 20,\n    '2xl': 24,\n    '3xl': 30,\n    '4xl': 36,\n    '5xl': 48,\n    '6xl': 60,\n    '7xl': 72,\n    '8xl': 96,\n    '9xl': 128,\n  },\n  sizes: {\n    '0': '0px',\n    '1': '4px',\n    '2': '8px',\n    '3': '12px',\n    '4': '16px',\n    '5': '20px',\n    '6': '24px',\n    '7': '28px',\n    '8': '32px',\n    '9': '36px',\n    '10': '40px',\n    '12': '48px',\n    '16': '64px',\n    '20': '80px',\n    '24': '96px',\n    '32': '128px',\n    '40': '160px',\n    '48': '192px',\n    '56': '224px',\n    '64': '256px',\n    '72': '288px',\n    '80': '320px',\n    '96': '384px',\n    'px': '1px',\n    '0.5': '2px',\n    '1.5': '6px',\n    '2.5': '10px',\n    '3.5': '14px',\n    '3xs': '224px',\n    '2xs': '256px',\n    'xs': '320px',\n    'sm': '384px',\n    'md': '448px',\n    'lg': '512px',\n    'xl': '576px',\n    '2xl': '672px',\n    'container': {\n      sm: '640px',\n      md: '768px',\n      lg: '1024px',\n      xl: '1280px',\n    },\n  },\n  space: {\n    '0': '0px',\n    '1': '4px',\n    '2': '8px',\n    '3': '12px',\n    '4': '16px',\n    '5': '20px',\n    '6': '24px',\n    '7': '28px',\n    '8': '32px',\n    '9': '36px',\n    '10': '40px',\n    '12': '48px',\n    '16': '64px',\n    '20': '80px',\n    '24': '96px',\n    '32': '128px',\n    '40': '160px',\n    '48': '192px',\n    '56': '224px',\n    '64': '256px',\n    '72': '288px',\n    '80': '320px',\n    '96': '384px',\n    'px': '1px',\n    '0.5': '2px',\n    '1.5': '6px',\n    '2.5': '10px',\n    '3.5': '14px',\n  },\n  components: {\n    FlatList: {\n      baseStyle: {},\n      defaultProps: {},\n    },\n    KeyboardAvoidingView: {\n      baseStyle: {},\n      defaultProps: {},\n    },\n    ScrollView: {\n      baseStyle: {},\n      defaultProps: {},\n    },\n    SectionList: {\n      baseStyle: {},\n      defaultProps: {},\n    },\n    StatusBar: {\n      baseStyle: {},\n      defaultProps: {},\n    },\n    Accordion: {},\n    AccordionItem: {},\n    AccordionIcon: {},\n    AccordionSummary: {},\n    AccordionDetails: {\n      baseStyle: {\n        p: 3,\n      },\n    },\n    Actionsheet: {\n      defaultProps: {\n        size: 'full',\n      },\n    },\n    ActionsheetContent: {\n      baseStyle: {\n        alignItems: 'center',\n        p: 2,\n        borderRadius: 'none',\n        roundedTop: 10,\n        _dragIndicator: {\n          bg: 'coolGray.400',\n          height: 1,\n          width: 9,\n          borderRadius: 2,\n        },\n      },\n    },\n    ActionsheetItem: {\n      defaultProps: {\n        variant: 'unstyled',\n      },\n    },\n    Alert: {\n      baseStyle: {\n        alignItems: 'center',\n        justifyContent: 'flex-start',\n        p: 3,\n        space: 3,\n        borderRadius: 'md',\n        _actionProps: {\n          alignSelf: 'center',\n          ml: 'auto',\n        },\n        _text: {\n          fontSize: 'sm',\n          lineHeight: 5,\n          color: 'gray.700',\n        },\n      },\n      variants: {},\n      defaultProps: {\n        colorScheme: 'primary',\n        variant: 'subtle',\n      },\n    },\n    AlertDescription: {\n      baseStyle: {\n        _text: {\n          fontSize: 'sm',\n        },\n        flexShrink: 1,\n      },\n    },\n    AlertTitle: {\n      baseStyle: {\n        _text: {\n          fontSize: 'md',\n          lineHeight: 5,\n          fontWeight: 'bold',\n        },\n      },\n    },\n    AlertIcon: {\n      baseStyle: {\n        size: 6,\n      },\n    },\n    Avatar: {\n      sizes: {\n        '2xs': {\n          width: '4',\n          height: '4',\n          fontSize: 'xs',\n        },\n        'xs': {\n          width: '6',\n          height: '6',\n          fontSize: 'sm',\n        },\n        'sm': {\n          width: '8',\n          height: '8',\n          fontSize: 'md',\n        },\n        'md': {\n          width: '12',\n          height: '12',\n          fontSize: 'lg',\n        },\n        'lg': {\n          width: '16',\n          height: '16',\n          fontSize: 'xl',\n        },\n        'xl': {\n          width: '24',\n          height: '24',\n          fontSize: '2xl',\n        },\n        '2xl': {\n          width: '32',\n          height: '32',\n          fontSize: '3xl',\n        },\n        'full': {\n          width: '100%',\n          height: '100%',\n          fontSize: '4xl',\n        },\n      },\n      defaultProps: {\n        size: 'md',\n      },\n    },\n    AvatarBadge: {},\n    AvatarGroup: {},\n    Badge: {\n      baseStyle: {\n        px: 1,\n        _text: {\n          fontSize: 'xs',\n          fontWeight: 'bold',\n        },\n      },\n      variants: {},\n      defaultProps: {\n        variant: 'subtle',\n        colorScheme: 'muted',\n      },\n    },\n    Box: {\n      baseStyle: {},\n      defaultProps: {},\n    },\n    Breadcrumb: {\n      baseStyle: {\n        width: 'auto',\n        height: 'auto',\n        display: 'flex',\n        flexDirection: 'row',\n      },\n      defaultProps: {\n        direction: 'row',\n        wrap: 'wrap',\n      },\n    },\n    Button: {\n      variants: {},\n      sizes: {\n        lg: {\n          px: 6,\n          py: 3,\n          _text: {\n            fontSize: 'lg',\n          },\n        },\n        md: {\n          px: 4,\n          py: 3,\n          _text: {\n            fontSize: 'md',\n          },\n        },\n        sm: {\n          px: 4,\n          py: 2,\n          _text: {\n            fontSize: 'sm',\n          },\n        },\n        xs: {\n          px: 2,\n          py: 1,\n          _text: {\n            fontSize: 'xs',\n          },\n        },\n      },\n      defaultProps: {\n        variant: 'solid',\n        size: 'md',\n        colorScheme: 'primary',\n      },\n    },\n    ButtonGroup: {\n      baseStyle: {\n        direction: 'row',\n      },\n      defaultProps: {\n        space: 2,\n      },\n    },\n    Center: {\n      sizes: {\n        'xs': {\n          height: 10,\n          width: 10,\n        },\n        'sm': {\n          height: 12,\n          width: 12,\n        },\n        'md': {\n          height: 16,\n          width: 16,\n        },\n        'lg': {\n          height: 24,\n          width: 24,\n        },\n        'xl': {\n          height: 32,\n          width: 32,\n        },\n        '2xl': {\n          height: 40,\n          width: 40,\n        },\n      },\n    },\n    Checkbox: {\n      sizes: {\n        lg: {\n          _icon: {\n            size: 6,\n          },\n          _text: {\n            fontSize: 'xl',\n          },\n        },\n        md: {\n          _icon: {\n            size: 5,\n          },\n          _text: {\n            fontSize: 'lg',\n          },\n        },\n        sm: {\n          _icon: {\n            size: 4,\n          },\n          _text: {\n            fontSize: 'md',\n          },\n        },\n      },\n      defaultProps: {\n        defaultIsChecked: false,\n        size: 'sm',\n        colorScheme: 'primary',\n      },\n    },\n    CircularProgress: {\n      sizes: {\n        'xs': {\n          height: 6,\n          width: 6,\n        },\n        'sm': {\n          height: 8,\n          width: 8,\n        },\n        'md': {\n          height: 16,\n          width: 16,\n        },\n        'lg': {\n          height: 20,\n          width: 20,\n        },\n        'xl': {\n          height: 24,\n          width: 24,\n        },\n        '2xl': {\n          height: 32,\n          width: 32,\n        },\n      },\n      defaultProps: {\n        thickness: 8,\n        colorScheme: 'primary',\n        size: 'lg',\n      },\n    },\n    Code: {\n      baseStyle: {\n        _text: {\n          fontFamily: 'monospace',\n          fontSize: 'sm',\n        },\n        borderRadius: 'sm',\n        px: 2,\n        py: 1,\n      },\n      variants: {},\n      defaultProps: {\n        variant: 'subtle',\n        colorScheme: 'muted',\n      },\n    },\n    Container: {\n      baseStyle: {\n        maxWidth: '80%',\n      },\n    },\n    Divider: {\n      defaultProps: {\n        orientation: 'horizontal',\n        size: 1,\n      },\n    },\n    Fade: {\n      defaultProps: {\n        entryDuration: 500,\n        exitDuration: 500,\n      },\n    },\n    FAB: {\n      baseStyle: {\n        shadow: 7,\n      },\n      defaultProps: {\n        variant: 'solid',\n        colorScheme: 'primary',\n        rounded: 'full',\n        zIndex: 20,\n        placementProps: {\n          'top-right': {\n            top: 12,\n            right: 4,\n            position: 'absolute',\n          },\n          'top-left': {\n            top: 12,\n            left: 4,\n            position: 'absolute',\n          },\n          'bottom-right': {\n            bottom: 4,\n            right: 4,\n            position: 'absolute',\n          },\n          'bottom-left': {\n            bottom: 4,\n            left: 4,\n            position: 'absolute',\n          },\n        },\n        p: 4,\n        placement: 'bottom-right',\n      },\n    },\n    Flex: {\n      defaultProps: {\n        flexDirection: 'column',\n      },\n    },\n    FormControl: {},\n    FormControlLabel: {\n      baseStyle: {\n        _text: {\n          fontSize: 'md',\n        },\n        astrickColor: 'error.400',\n        mb: 2,\n        mr: 3,\n      },\n    },\n    FormControlHelperText: {},\n    FormControlErrorMessage: {\n      baseStyle: {\n        mt: 2,\n        _text: {\n          fontSize: 'xs',\n          color: 'error.400',\n        },\n      },\n    },\n    Heading: {\n      sizes: {\n        '4xl': {\n          fontSize: ['6xl', null, '7xl'],\n        },\n        '3xl': {\n          fontSize: ['5xl', null, '6xl'],\n        },\n        '2xl': {\n          fontSize: ['4xl', null, '5xl'],\n        },\n        'xl': {\n          fontSize: ['3xl', null, '4xl'],\n        },\n        'lg': {\n          fontSize: ['2xl', null, '3xl'],\n        },\n        'md': {\n          fontSize: 'xl',\n        },\n        'sm': {\n          fontSize: 'md',\n        },\n        'xs': {\n          fontSize: 'sm',\n        },\n      },\n      defaultProps: {\n        size: 'xl',\n      },\n    },\n    HStack: {\n      baseStyle: {},\n      defaultProps: {},\n    },\n    VStack: {\n      baseStyle: {},\n      defaultProps: {},\n    },\n    Icon: {\n      sizes: {\n        'xxs': 2,\n        'xs': 4,\n        'sm': 6,\n        'md': 8,\n        'lg': 10,\n        'xl': 12,\n        '2xl': 16,\n        '3xl': 20,\n        '4xl': 24,\n        '5xl': 32,\n        '6xl': 64,\n      },\n      defaultProps: {\n        size: 'md',\n        color: 'primary',\n      },\n    },\n    IconButton: {\n      baseStyle: {\n        borderRadius: 'md',\n      },\n      sizes: {\n        lg: {\n          p: 3,\n        },\n        md: {\n          p: 2,\n        },\n        sm: {\n          p: 1,\n        },\n      },\n      defaultProps: {\n        variant: 'ghost',\n        size: 'md',\n      },\n    },\n    Image: {\n      baseStyle: {\n        maxWidth: '100%',\n      },\n      sizes: {\n        '2xs': {\n          size: 6,\n        },\n        'xs': {\n          size: 10,\n        },\n        'sm': {\n          size: 16,\n        },\n        'md': {\n          size: 20,\n        },\n        'lg': {\n          size: 24,\n        },\n        'xl': {\n          size: 32,\n        },\n        '2xl': {\n          size: 64,\n        },\n        'full': {\n          size: '100%',\n        },\n      },\n      defaultProps: {},\n    },\n    Input: {\n      defaultProps: {\n        size: 'md',\n        variant: 'outline',\n      },\n      variants: {},\n      sizes: {\n        '2xl': {\n          fontSize: '2xl',\n        },\n        'xl': {\n          fontSize: 'xl',\n        },\n        'lg': {\n          fontSize: 'lg',\n        },\n        'md': {\n          fontSize: 'md',\n        },\n        'sm': {\n          fontSize: 'sm',\n        },\n        'xs': {\n          fontSize: 'xs',\n        },\n      },\n    },\n    Kbd: {\n      defaultProps: {},\n    },\n    Link: {\n      baseStyle: {\n        width: 'auto',\n        height: 'auto',\n      },\n    },\n    List: {},\n    ListItem: {\n      baseStyle: {\n        py: 2,\n        borderColor: 'gray.300',\n      },\n      defaultProps: {\n        start: 1,\n      },\n    },\n    ListIcon: {\n      baseStyle: {\n        mr: 8,\n        size: 'md',\n      },\n    },\n    Menu: {},\n    MenuGroup: {},\n    MenuItem: {\n      defaultProps: {\n        _disabled: {\n          opacity: 0.5,\n        },\n      },\n    },\n    Modal: {\n      baseStyle: {\n        width: '100%',\n        height: '100%',\n        justifyContent: 'center',\n        alignItems: 'center',\n      },\n      sizes: {\n        sm: {\n          contentSize: {\n            width: '60%',\n          },\n        },\n        md: {\n          contentSize: {\n            width: '75%',\n          },\n        },\n        lg: {\n          contentSize: {\n            width: '90%',\n          },\n        },\n        full: {\n          contentSize: {\n            width: '100%',\n          },\n        },\n      },\n      defaultProps: {\n        size: 'lg',\n        closeOnOverlayClick: true,\n      },\n    },\n    ModalContent: {},\n    ModalHeader: {\n      baseStyle: {\n        pb: 3,\n        pr: 6,\n        _text: {\n          fontSize: 'xl',\n          fontWeight: 'bold',\n        },\n      },\n    },\n    ModalBody: {},\n    ModalFooter: {\n      baseStyle: {\n        py: 2,\n        flexDirection: 'row',\n        justifyContent: 'flex-end',\n        flexWrap: 'wrap',\n        pr: 2,\n      },\n    },\n    ModalOverlay: {\n      baseStyle: {\n        position: 'absolute',\n        left: 0,\n        top: 0,\n        opacity: 0.5,\n        right: 0,\n        bottom: 0,\n      },\n    },\n    ModalCloseButton: {},\n    NumberInput: {\n      defaultProps: {\n        size: 'sm',\n        step: 1,\n        min: null,\n        max: null,\n        defaultValue: '0',\n        keepWithinRange: true,\n        clampValueOnBlur: true,\n        focusInputOnChange: true,\n        getAriaValueText: true,\n      },\n    },\n    NumberInputStepper: {},\n    PinInput: {\n      sizes: {\n        '2xl': {\n          fontSize: '2xl',\n          p: 3,\n          width: '56px',\n          height: '56px',\n          textAlign: 'center',\n          borderRadius: 'lg',\n        },\n        'xl': {\n          fontSize: 'xl',\n          p: 3,\n          width: '52px',\n          height: '52px',\n          textAlign: 'center',\n          borderRadius: 'lg',\n        },\n        'lg': {\n          fontSize: 'lg',\n          p: 2,\n          width: '48px',\n          height: '48px',\n          textAlign: 'center',\n          borderRadius: 'md',\n        },\n        'md': {\n          fontSize: 'md',\n          p: 2,\n          width: '40px',\n          height: '40px',\n          textAlign: 'center',\n          borderRadius: 'md',\n        },\n        'sm': {\n          fontSize: 'sm',\n          p: 1,\n          width: '30px',\n          height: '30px',\n          textAlign: 'center',\n          borderRadius: 'md',\n        },\n        'xs': {\n          fontSize: 'xs',\n          p: 1,\n          width: '24px',\n          height: '24px',\n          textAlign: 'center',\n          borderRadius: 'md',\n        },\n      },\n      defaultProps: {\n        placeholder: '○',\n        size: 'md',\n        manageFocus: true,\n        space: 1,\n      },\n    },\n    PopoverCloseButton: {},\n    PopoverBody: {},\n    PopoverContent: {},\n    PopoverHeader: {\n      baseStyle: {\n        p: 3,\n        _text: {\n          fontWeight: 600,\n        },\n      },\n    },\n    PopoverArrow: {},\n    PopoverFooter: {},\n    Progress: {\n      defaultProps: {\n        colorScheme: 'primary',\n        size: 'sm',\n        rounded: 'full',\n        min: 0,\n        max: 100,\n        value: 0,\n        isIndeterminate: false,\n      },\n      sizes: {\n        'xs': {\n          height: 1,\n        },\n        'sm': {\n          height: 2,\n        },\n        'md': {\n          height: 3,\n        },\n        'lg': {\n          height: 4,\n        },\n        'xl': {\n          height: 5,\n        },\n        '2xl': {\n          height: 6,\n        },\n      },\n    },\n    Radio: {\n      sizes: {\n        lg: {\n          _icon: {\n            size: 4,\n          },\n          _text: {\n            fontSize: 'lg',\n          },\n        },\n        md: {\n          _icon: {\n            size: 3,\n          },\n          _text: {\n            fontSize: 'md',\n          },\n        },\n        sm: {\n          _icon: {\n            size: 2,\n          },\n          _text: {\n            fontSize: 'sm',\n          },\n        },\n      },\n      defaultProps: {\n        defaultIsChecked: false,\n        size: 'md',\n        colorScheme: 'primary',\n      },\n    },\n    ScaleFade: {\n      defaultProps: {\n        duration: 500,\n        initialScale: 0.9,\n      },\n    },\n    Select: {\n      baseStyle: {\n        customDropdownIconProps: {\n          size: 5,\n          mr: 2,\n        },\n        _actionSheetContent: {},\n      },\n      defaultProps: {\n        variant: 'outline',\n      },\n    },\n    SelectItem: {\n      baseStyle: {\n        p: 1,\n        px: 2,\n        borderRadius: 0,\n        minH: 0,\n      },\n    },\n    SimpleGrid: {\n      baseStyle: {},\n      defaultProps: {},\n    },\n    Skeleton: {\n      defaultProps: {\n        variant: 'text',\n      },\n    },\n    SliderFilledTrack: {},\n    SliderThumb: {},\n    SliderTrack: {},\n    Slider: {\n      defaultProps: {\n        size: 'sm',\n      },\n      sizes: {\n        lg: {\n          thumbSize: 6,\n          sliderSize: 6,\n        },\n        md: {\n          thumbSize: 5,\n          sliderSize: 5,\n        },\n        sm: {\n          thumbSize: 4,\n          sliderSize: 4,\n        },\n      },\n    },\n    Slide: {\n      defaultProps: {\n        duration: 500,\n        placement: 'bottom',\n      },\n    },\n    SlideFade: {\n      defaultProps: {\n        duration: 500,\n        offsetX: 10,\n        offsetY: 10,\n      },\n    },\n    Spinner: {\n      baseStyle: {\n        color: 'primary.400',\n      },\n      sizes: {\n        sm: 'small',\n        lg: 'large',\n      },\n      defaultProps: {\n        size: 'large',\n      },\n    },\n    Stack: {\n      baseStyle: {},\n      defaultProps: {},\n      sizes: {\n        'gutter': 0,\n        '2xs': 1,\n        'xs': 2,\n        'sm': 3,\n        'md': 4,\n        'lg': 6,\n        'xl': 7,\n        '2xl': 8,\n      },\n    },\n    Stat: {\n      defaultProps: {\n        _statLabel: {\n          fontSize: 'xl',\n        },\n        _statNumber: {\n          fontSize: '4xl',\n          fontWeight: 'bold',\n          my: 2,\n        },\n        _statHelpText: {\n          _text: {\n            color: 'gray.500',\n            fontSize: 'xl',\n          },\n          flexDirection: 'row',\n          alignItems: 'center',\n        },\n        _statGroup: {\n          flexWrap: 'wrap',\n          space: 4,\n          justifyContent: 'space-between',\n        },\n      },\n    },\n    Switch: {\n      sizes: {\n        sm: {\n          style: {\n            transform: [\n              {\n                scale: 0.75,\n              },\n            ],\n          },\n        },\n        md: {},\n        lg: {\n          style: {\n            transform: [\n              {\n                scale: 1.25,\n              },\n            ],\n          },\n          margin: 1,\n        },\n      },\n      defaultProps: {\n        size: 'md',\n        colorScheme: 'primary',\n      },\n    },\n    Tabs: {\n      variants: {},\n      sizes: {\n        sm: {\n          activeTabStyle: {\n            _text: {\n              fontSize: 'sm',\n            },\n            py: 2,\n            px: 3,\n          },\n          inactiveTabStyle: {\n            _text: {\n              fontSize: 'sm',\n            },\n            py: 2,\n            px: 3,\n          },\n        },\n        md: {\n          activeTabStyle: {\n            _text: {\n              fontSize: 'md',\n            },\n            py: 3,\n            px: 4,\n          },\n          inactiveTabStyle: {\n            _text: {\n              fontSize: 'md',\n            },\n            py: 3,\n            px: 4,\n          },\n        },\n        lg: {\n          activeTabStyle: {\n            _text: {\n              fontSize: 'lg',\n            },\n            py: 4,\n            px: 5,\n          },\n          inactiveTabStyle: {\n            _text: {\n              fontSize: 'lg',\n            },\n            py: 4,\n            px: 5,\n          },\n        },\n      },\n      defaultProps: {\n        size: 'md',\n        variant: 'outline',\n        colorScheme: 'primary',\n      },\n    },\n    Tag: {\n      variants: {},\n      baseStyle: {\n        _text: {\n          fontWeight: 'medium',\n        },\n        alignItems: 'center',\n        justifyContent: 'center',\n        flexDirection: 'row',\n        display: 'flex',\n      },\n      sizes: {\n        sm: {\n          minH: 5,\n          minW: 5,\n          _text: {\n            fontSize: 'xs',\n          },\n          p: 1,\n          borderRadius: 'sm',\n        },\n        md: {\n          minH: 6,\n          minW: 6,\n          _text: {\n            fontSize: 'sm',\n          },\n          borderRadius: 'md',\n          p: 2,\n        },\n        lg: {\n          minH: 8,\n          minW: 8,\n          _text: {\n            fontSize: 'md',\n          },\n          borderRadius: 'md',\n          p: 3,\n        },\n      },\n      defaultProps: {\n        size: 'md',\n        variant: 'subtle',\n        colorScheme: 'primary',\n      },\n    },\n    Text: {\n      defaultProps: {},\n    },\n    AppBar: {\n      defaultProps: {\n        colorScheme: 'primary',\n      },\n    },\n    TextArea: {\n      baseStyle: {\n        multiline: true,\n        px: 4,\n        py: 2,\n        totalLines: 4,\n        _ios: {\n          h: 20,\n        },\n      },\n    },\n    TextField: {\n      defaultProps: {\n        component: 'input',\n      },\n    },\n    Toast: {\n      defaultProps: {},\n    },\n    TypeAheadSearchItem: {},\n    View: {\n      baseStyle: {},\n      defaultProps: {},\n    },\n    Wrap: {},\n    ZStack: {\n      baseStyle: {},\n      defaultProps: {},\n    },\n    Tooltip: {},\n  },\n  config: {},\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/base/borders.ts",
    "content": "const borderWidths = {\n  '0': 0,\n  '1': '1px',\n  '2': '2px',\n  '4': '4px',\n  '8': '8px',\n};\n\nexport type IBorderWidth = keyof typeof borderWidths;\n\nexport default borderWidths;\n"
  },
  {
    "path": "src/theme/v33x-theme/base/breakpoints.ts",
    "content": "const breakpoints = {\n  'base': 0,\n  'sm': 480,\n  'md': 768,\n  'lg': 992,\n  'xl': 1280,\n  '2xl': 1536,\n};\nexport type IBreakpoint = keyof typeof breakpoints;\n\nexport default breakpoints;\n"
  },
  {
    "path": "src/theme/v33x-theme/base/colors.ts",
    "content": "// import type { ITheme } from '..';\nimport type { Leaves } from './types';\n\nexport interface IColorHues {\n  50: string;\n  100: string;\n  200: string;\n  300: string;\n  400: string;\n  500: string;\n  600: string;\n  700: string;\n  800: string;\n  900: string;\n}\n\nconst colors = {\n  contrastThreshold: 7,\n  // Singleton colors\n  white: '#FFFFFF',\n  black: '#000000',\n  lightText: '#FFFFFF',\n  darkText: '#000000',\n  // Primary colors\n  rose: {\n    50: '#fff1f2',\n    100: '#ffe4e6',\n    200: '#fecdd3',\n    300: '#fda4af',\n    400: '#fb7185',\n    500: '#f43f5e',\n    600: '#e11d48',\n    700: '#be123c',\n    800: '#9f1239',\n    900: '#881337',\n  },\n  pink: {\n    50: '#fdf2f8',\n    100: '#fce7f3',\n    200: '#fbcfe8',\n    300: '#f9a8d4',\n    400: '#f472b6',\n    500: '#ec4899',\n    600: '#db2777',\n    700: '#be185d',\n    800: '#9d174d',\n    900: '#831843',\n  },\n  fuchsia: {\n    50: '#fdf4ff',\n    100: '#fae8ff',\n    200: '#f5d0fe',\n    300: '#f0abfc',\n    400: '#e879f9',\n    500: '#d946ef',\n    600: '#c026d3',\n    700: '#a21caf',\n    800: '#86198f',\n    900: '#701a75',\n  },\n  purple: {\n    50: '#faf5ff',\n    100: '#f3e8ff',\n    200: '#e9d5ff',\n    300: '#d8b4fe',\n    400: '#c084fc',\n    500: '#a855f7',\n    600: '#9333ea',\n    700: '#7e22ce',\n    800: '#6b21a8',\n    900: '#581c87',\n  },\n  violet: {\n    50: '#f5f3ff',\n    100: '#ede9fe',\n    200: '#ddd6fe',\n    300: '#c4b5fd',\n    400: '#a78bfa',\n    500: '#8b5cf6',\n    600: '#7c3aed',\n    700: '#6d28d9',\n    800: '#5b21b6',\n    900: '#4c1d95',\n  },\n  indigo: {\n    50: '#eef2ff',\n    100: '#e0e7ff',\n    200: '#c7d2fe',\n    300: '#a5b4fc',\n    400: '#818cf8',\n    500: '#6366f1',\n    600: '#4f46e5',\n    700: '#4338ca',\n    800: '#3730a3',\n    900: '#312e81',\n  },\n  blue: {\n    50: '#eff6ff',\n    100: '#dbeafe',\n    200: '#bfdbfe',\n    300: '#93c5fd',\n    400: '#60a5fa',\n    500: '#3b82f6',\n    600: '#2563eb',\n    700: '#1d4ed8',\n    800: '#1e40af',\n    900: '#1e3a8a',\n  },\n  lightBlue: {\n    50: '#f0f9ff',\n    100: '#e0f2fe',\n    200: '#bae6fd',\n    300: '#7dd3fc',\n    400: '#38bdf8',\n    500: '#0ea5e9',\n    600: '#0284c7',\n    700: '#0369a1',\n    800: '#075985',\n    900: '#0c4a6e',\n  },\n  darkBlue: {\n    50: '#dbf4ff',\n    100: '#addbff',\n    200: '#7cc2ff',\n    300: '#4aa9ff',\n    400: '#1a91ff',\n    500: '#0077e6',\n    600: '#005db4',\n    700: '#004282',\n    800: '#002851',\n    900: '#000e21',\n  },\n  cyan: {\n    50: '#ecfeff',\n    100: '#cffafe',\n    200: '#a5f3fc',\n    300: '#67e8f9',\n    400: '#22d3ee',\n    500: '#06b6d4',\n    600: '#0891b2',\n    700: '#0e7490',\n    800: '#155e75',\n    900: '#164e63',\n  },\n  teal: {\n    50: '#f0fdfa',\n    100: '#ccfbf1',\n    200: '#99f6e4',\n    300: '#5eead4',\n    400: '#2dd4bf',\n    500: '#14b8a6',\n    600: '#0d9488',\n    700: '#0f766e',\n    800: '#115e59',\n    900: '#134e4a',\n  },\n  emerald: {\n    50: '#ecfdf5',\n    100: '#d1fae5',\n    200: '#a7f3d0',\n    300: '#6ee7b7',\n    400: '#34d399',\n    500: '#10b981',\n    600: '#059669',\n    700: '#047857',\n    800: '#065f46',\n    900: '#064e3b',\n  },\n  green: {\n    50: '#f0fdf4',\n    100: '#dcfce7',\n    200: '#bbf7d0',\n    300: '#86efac',\n    400: '#4ade80',\n    500: '#22c55e',\n    600: '#16a34a',\n    700: '#15803d',\n    800: '#166534',\n    900: '#14532d',\n  },\n  lime: {\n    50: '#f7fee7',\n    100: '#ecfccb',\n    200: '#d9f99d',\n    300: '#bef264',\n    400: '#a3e635',\n    500: '#84cc16',\n    600: '#65a30d',\n    700: '#4d7c0f',\n    800: '#3f6212',\n    900: '#365314',\n  },\n  yellow: {\n    50: '#fefce8',\n    100: '#fef9c3',\n    200: '#fef08a',\n    300: '#fde047',\n    400: '#facc15',\n    500: '#eab308',\n    600: '#ca8a04',\n    700: '#a16207',\n    800: '#854d0e',\n    900: '#713f12',\n  },\n  amber: {\n    50: '#fffbeb',\n    100: '#fef3c7',\n    200: '#fde68a',\n    300: '#fcd34d',\n    400: '#fbbf24',\n    500: '#f59e0b',\n    600: '#d97706',\n    700: '#b45309',\n    800: '#92400e',\n    900: '#78350f',\n  },\n  orange: {\n    50: '#fff7ed',\n    100: '#ffedd5',\n    200: '#fed7aa',\n    300: '#fdba74',\n    400: '#fb923c',\n    500: '#f97316',\n    600: '#ea580c',\n    700: '#c2410c',\n    800: '#9a3412',\n    900: '#7c2d12',\n  },\n  red: {\n    50: '#fef2f2',\n    100: '#fee2e2',\n    200: '#fecaca',\n    300: '#fca5a5',\n    400: '#f87171',\n    500: '#ef4444',\n    600: '#dc2626',\n    700: '#b91c1c',\n    800: '#991b1b',\n    900: '#7f1d1d',\n  },\n  warmGray: {\n    50: '#fafaf9',\n    100: '#f5f5f4',\n    200: '#e7e5e4',\n    300: '#d6d3d1',\n    400: '#a8a29e',\n    500: '#78716c',\n    600: '#57534e',\n    700: '#44403c',\n    800: '#292524',\n    900: '#1c1917',\n  },\n  trueGray: {\n    50: '#fafafa',\n    100: '#f5f5f5',\n    200: '#e5e5e5',\n    300: '#d4d4d4',\n    400: '#a3a3a3',\n    500: '#737373',\n    600: '#525252',\n    700: '#404040',\n    800: '#262626',\n    900: '#171717',\n  },\n  gray: {\n    50: '#fafafa',\n    100: '#f4f4f5',\n    200: '#e4e4e7',\n    300: '#d4d4d8',\n    400: '#a1a1aa',\n    500: '#71717a',\n    600: '#52525b',\n    700: '#3f3f46',\n    800: '#27272a',\n    900: '#18181b',\n  },\n  coolGray: {\n    50: '#f9fafb',\n    100: '#f3f4f6',\n    200: '#e5e7eb',\n    300: '#d1d5db',\n    400: '#9ca3af',\n    500: '#6b7280',\n    600: '#4b5563',\n    700: '#374151',\n    800: '#1f2937',\n    900: '#111827',\n  },\n  blueGray: {\n    50: '#f8fafc',\n    100: '#f1f5f9',\n    200: '#e2e8f0',\n    300: '#cbd5e1',\n    400: '#94a3b8',\n    500: '#64748b',\n    600: '#475569',\n    700: '#334155',\n    800: '#1e293b',\n    900: '#0f172a',\n  },\n  dark: {\n    50: '#18181b',\n    100: '#27272a',\n    200: '#3f3f46',\n    300: '#52525b',\n    400: '#71717a',\n    500: '#a1a1aa',\n    600: '#d4d4d8',\n    700: '#e4e4e7',\n    800: '#f4f4f5',\n    900: '#fafafa',\n  },\n  text: {\n    50: '#fafafa',\n    100: '#f5f5f5',\n    200: '#e5e5e5',\n    300: '#d4d4d4',\n    400: '#a3a3a3',\n    500: '#737373',\n    600: '#525252',\n    700: '#404040',\n    800: '#262626',\n    900: '#171717',\n  },\n  // Derived colors\n  danger: {} as IColorHues,\n  error: {} as IColorHues,\n  success: {} as IColorHues,\n  warning: {} as IColorHues,\n  muted: {} as IColorHues,\n  primary: {} as IColorHues,\n  info: {} as IColorHues,\n  secondary: {} as IColorHues,\n  light: {} as IColorHues,\n  tertiary: {} as IColorHues,\n};\n\ncolors.danger = colors.red;\ncolors.error = colors.rose;\ncolors.success = colors.emerald;\ncolors.warning = colors.orange;\ncolors.muted = colors.trueGray;\ncolors.primary = colors.cyan;\ncolors.secondary = colors.pink;\ncolors.tertiary = colors.green;\ncolors.info = colors.lightBlue;\ncolors.light = colors.warmGray;\n\nexport default colors;\n// export type IColors = Leaves<ITheme['colors']>;\nexport type IColors = Leaves<typeof colors>;\n"
  },
  {
    "path": "src/theme/v33x-theme/base/index.ts",
    "content": "import borderWidths from './borders';\nimport breakpoints from './breakpoints';\nimport colors from './colors';\nimport radii from './radius';\nimport shadows from './shadows';\nimport sizes from './sizes';\nimport { spacing } from './space';\nimport typography from './typography';\nimport opacity from './opacity';\n\nconst theme = {\n  borderWidths,\n  breakpoints,\n  colors,\n  radii,\n  ...typography,\n  sizes,\n  space: spacing,\n  shadows,\n  opacity,\n};\n\nexport const themePropertyMap: any = {\n  borderRadius: 'radii',\n  color: 'colors',\n  letterSpacing: 'letterSpacings',\n  lineHeight: 'lineHeights',\n  fontFamily: 'fonts',\n  fontSize: 'fontSizes',\n  fontWeight: 'fontWeights',\n  size: 'sizes',\n  space: 'space',\n  border: 'borders',\n  shadow: 'shadows',\n};\n\nexport default theme;\n"
  },
  {
    "path": "src/theme/v33x-theme/base/opacity.ts",
    "content": "const opacity = {\n  0: 0,\n  5: 0.05,\n  10: 0.1,\n  20: 0.2,\n  25: 0.25,\n  30: 0.3,\n  40: 0.4,\n  50: 0.5,\n  60: 0.6,\n  70: 0.7,\n  75: 0.75,\n  80: 0.8,\n  90: 0.9,\n  95: 0.95,\n  100: 1,\n};\nexport type IOpacity = keyof typeof opacity;\n\nexport default opacity;\n"
  },
  {
    "path": "src/theme/v33x-theme/base/radius.ts",
    "content": "const radii = {\n  'none': 0,\n  'xs': 2,\n  'sm': 4,\n  'md': 6,\n  'lg': 8,\n  'xl': 12,\n  '2xl': 16,\n  '3xl': 24,\n  'full': 9999,\n};\n\nexport type IRadii = keyof typeof radii;\n\nexport default radii;\n"
  },
  {
    "path": "src/theme/v33x-theme/base/shadows.ts",
    "content": "import colors from './colors';\nconst shadow = {\n  'none': {\n    shadowColor: 'transparent',\n    shadowOffset: {\n      width: 0,\n      height: 0,\n    },\n    shadowOpacity: 0,\n    shadowRadius: 0,\n    elevation: 0,\n  },\n  '0': {\n    shadowColor: colors.black,\n    shadowOffset: {\n      width: 0,\n      height: 1,\n    },\n    shadowOpacity: 0.18,\n    shadowRadius: 1.0,\n    elevation: 1,\n  },\n  '1': {\n    shadowColor: colors.black,\n    shadowOffset: {\n      width: 0,\n      height: 1,\n    },\n    shadowOpacity: 0.2,\n    shadowRadius: 1.41,\n    elevation: 2,\n  },\n  '2': {\n    shadowColor: colors.black,\n    shadowOffset: {\n      width: 0,\n      height: 1,\n    },\n    shadowOpacity: 0.22,\n    shadowRadius: 2.22,\n    elevation: 3,\n  },\n  '3': {\n    shadowColor: colors.black,\n    shadowOffset: {\n      width: 0,\n      height: 2,\n    },\n    shadowOpacity: 0.23,\n    shadowRadius: 2.62,\n    elevation: 4,\n  },\n  '4': {\n    shadowColor: colors.black,\n    shadowOffset: {\n      width: 0,\n      height: 2,\n    },\n    shadowOpacity: 0.25,\n    shadowRadius: 3.84,\n    elevation: 5,\n  },\n  '5': {\n    shadowColor: colors.black,\n    shadowOffset: {\n      width: 0,\n      height: 3,\n    },\n    shadowOpacity: 0.27,\n    shadowRadius: 4.65,\n    elevation: 6,\n  },\n  '6': {\n    shadowColor: colors.black,\n    shadowOffset: {\n      width: 0,\n      height: 3,\n    },\n    shadowOpacity: 0.29,\n    shadowRadius: 4.65,\n    elevation: 7,\n  },\n  '7': {\n    shadowColor: colors.black,\n    shadowOffset: {\n      width: 0,\n      height: 4,\n    },\n    shadowOpacity: 0.3,\n    shadowRadius: 4.65,\n    elevation: 8,\n  },\n  '8': {\n    shadowColor: colors.black,\n    shadowOffset: {\n      width: 0,\n      height: 4,\n    },\n    shadowOpacity: 0.32,\n    shadowRadius: 5.46,\n    elevation: 9,\n  },\n  '9': {\n    shadowColor: colors.black,\n    shadowOffset: {\n      width: 0,\n      height: 5,\n    },\n    shadowOpacity: 0.34,\n    shadowRadius: 6.27,\n    elevation: 10,\n  },\n};\n\nexport type IShadow = keyof typeof shadow;\nexport default shadow;\n"
  },
  {
    "path": "src/theme/v33x-theme/base/sizes.ts",
    "content": "import { spacing } from './space';\n\nconst container = {\n  sm: 640,\n  md: 768,\n  lg: 1024,\n  xl: 1280,\n};\n\nconst sizes = {\n  ...spacing,\n  ...{\n    '3xs': 224,\n    '2xs': 256,\n    'xs': 320,\n    'sm': 384,\n    'md': 448,\n    'lg': 512,\n    'xl': 576,\n    '2xl': 672,\n  },\n  container,\n};\n\nexport type ISizes = keyof typeof sizes;\nexport default sizes;\n"
  },
  {
    "path": "src/theme/v33x-theme/base/space.ts",
    "content": "export const spacing = {\n  'px': '1px',\n  '0': 0,\n  '0.5': 2,\n  '1': 4,\n  '1.5': 6,\n  '2': 8,\n  '2.5': 10,\n  '3': 12,\n  '3.5': 14,\n  '4': 16,\n  '5': 20,\n  '6': 24,\n  '7': 28,\n  '8': 32,\n  '9': 36,\n  '10': 40,\n  '12': 48,\n  '16': 64,\n  '20': 80,\n  '24': 96,\n  '32': 128,\n  '40': 160,\n  '48': 192,\n  '56': 224,\n  '64': 256,\n  '72': 288,\n  '80': 320,\n  '96': 384,\n  '1/2': '50%',\n  '1/3': '33.333%',\n  '2/3': '66.666%',\n  '1/4': '25%',\n  '2/4': '50%',\n  '3/4': '75%',\n  '1/5': '20%',\n  '2/5': '40%',\n  '3/5': '60%',\n  '4/5': '80%',\n  '1/6': '16.666%',\n  '2/6': '33.333%',\n  '3/6': '50%',\n  '4/6': '66.666%',\n  '5/6': '83.333%',\n  'full': '100%',\n};\n\nexport type ISpacing = keyof typeof spacing;\n"
  },
  {
    "path": "src/theme/v33x-theme/base/types.ts",
    "content": "/* eslint no-use-before-define: 0 */ // --> OFF\n// @ts-ignore\ntype Join<K, P> = K extends string | number\n  ? P extends string | number\n    ? `${K}${'' extends P ? '' : '.'}${P}`\n    : never\n  : never;\n\nexport type Leaves<T> = T extends object\n  ? { [K in keyof T]-?: Join<K, Leaves<T[K]>> }[keyof T]\n  : '';\n"
  },
  {
    "path": "src/theme/v33x-theme/base/typography.ts",
    "content": "const typography = {\n  letterSpacings: {\n    'xs': '-0.05em',\n    'sm': '-0.025em',\n    'md': 0,\n    'lg': '0.025em',\n    'xl': '0.05em',\n    '2xl': '0.1em',\n  },\n  lineHeights: {\n    '2xs': '1em',\n    'xs': '1.125em',\n    'sm': '1.25em',\n    'md': '1.375em',\n    'lg': '1.5em',\n    'xl': '1.75em',\n    '2xl': '2em',\n    '3xl': '2.5em',\n    '4xl': '3em',\n    '5xl': '4em',\n  },\n  fontConfig: {\n    //   Roboto: {\n    //     100: {\n    //       normal: 'Roboto-Light',\n    //       italic: 'Roboto-LightItalic',\n    //     },\n    //     200: {\n    //       normal: 'Roboto-Light',\n    //       italic: 'Roboto-LightItalic',\n    //     },\n    //     300: {\n    //       normal: 'Roboto-Light',\n    //       italic: 'Roboto-LightItalic',\n    //     },\n    //     400: {\n    //       normal: 'Roboto-Regular',\n    //       italic: 'Roboto-Italic',\n    //     },\n    //     500: {\n    //       normal: 'Roboto-Medium',\n    //       italic: 'Roboto-MediumItalic',\n    //     },\n    //     600: {\n    //       normal: 'Roboto-Medium',\n    //       italic: 'Roboto-MediumItalic',\n    //     },\n    //     700: {\n    //       normal: 'Roboto-Bold',\n    //       italic: 'Roboto-BoldItalic',\n    //     },\n    //     800: {\n    //       normal: 'Roboto-Bold',\n    //       italic: 'Roboto-BoldItalic',\n    //     },\n    //     900: {\n    //       normal: 'Roboto-Bold',\n    //       italic: 'Roboto-BoldItalic',\n    //     },\n    //   },\n    //   Montserrat: {\n    //     100: {\n    //       normal: 'Montserrat-Light',\n    //       italic: 'Montserrat-LightItalic',\n    //     },\n    //     200: {\n    //       normal: 'Montserrat-Light',\n    //       italic: 'Montserrat-LightItalic',\n    //     },\n    //     300: {\n    //       normal: 'Montserrat-Light',\n    //       italic: 'Montserrat-LightItalic',\n    //     },\n    //     400: {\n    //       normal: 'Montserrat-Regular',\n    //       italic: 'Montserrat-Italic',\n    //     },\n    //     500: {\n    //       normal: 'Montserrat-Medium',\n    //       italic: 'Montserrat-MediumItalic',\n    //     },\n    //     600: {\n    //       normal: 'Montserrat-SemiBold',\n    //       italic: 'Montserrat-SemiBoldItalic',\n    //     },\n    //     700: {\n    //       normal: 'Montserrat-Bold',\n    //       italic: 'Montserrat-BoldItalic',\n    //     },\n    //     800: {\n    //       normal: 'Montserrat-ExtraBold',\n    //       italic: 'Montserrat-ExtraBoldItalic',\n    //     },\n    //     900: {\n    //       normal: 'Montserrat-Black',\n    //       italic: 'Montserrat-BlackItalic',\n    //     },\n    //   },\n  },\n  fontWeights: {\n    hairline: 100,\n    thin: 200,\n    light: 300,\n    normal: 400,\n    medium: 500,\n    semibold: 600,\n    bold: 700,\n    extrabold: 800,\n    black: 900,\n    extraBlack: 950,\n  },\n  fonts: {\n    heading: undefined,\n    body: undefined,\n    mono: undefined,\n  },\n  fontSizes: {\n    '2xs': 10,\n    'xs': 12,\n    'sm': 14,\n    'md': 16,\n    'lg': 18,\n    'xl': 20,\n    '2xl': 24,\n    '3xl': 30,\n    '4xl': 36,\n    '5xl': 48,\n    '6xl': 60,\n    '7xl': 72,\n    '8xl': 96,\n    '9xl': 128,\n  },\n};\n\nexport type ITypography = typeof typography;\nexport type IFontSize = keyof typeof typography.fontSizes;\nexport type ILetterSpacing = keyof typeof typography.letterSpacings;\nexport type ILineHeight = keyof typeof typography.lineHeights;\nexport type IFontWeight = keyof typeof typography.fontWeights;\n// export type IFont = typeof typography.fonts;\nexport interface IFont {\n  heading?: string;\n  body?: string;\n  mono?: string;\n}\n\nexport default typography;\n"
  },
  {
    "path": "src/theme/v33x-theme/components/accordion.ts",
    "content": "import { mode } from '../tools/colors';\n\n// Accordion\nconst accordionBaseStyle = (props: Record<string, any>) => {\n  return {\n    borderWidth: 1,\n    borderColor: mode('gray.300', 'gray.600')(props),\n    borderRadius: 'lg',\n  };\n};\nexport const Accordion = {\n  baseStyle: accordionBaseStyle,\n};\n\n// AccordionItem\nexport const AccordionItem = {};\n\n// AccordionIcon\nexport const AccordionIcon = {};\n\n// AccordionSummary\nconst accordionSummaryBaseStyle = (props: Record<string, any>) => {\n  return {\n    borderTopWidth: 1,\n    borderTopColor: mode('gray.300', 'gray.600')(props),\n    p: 3,\n    _hover: {\n      bg: mode('primary.200', 'primary.300')(props),\n    },\n    _expanded: {\n      bg: 'primary.600',\n      borderBottomColor: mode('gray.300', 'gray.600')(props),\n      _text: { color: 'white' },\n    },\n    _disabled: {\n      bg: mode('gray.200', 'gray.700')(props),\n    },\n  };\n};\nexport const AccordionSummary = {\n  baseStyle: accordionSummaryBaseStyle,\n};\n\n// AccordionDetails\nconst accordionPanelBaseStyle = {\n  p: 3,\n};\n\nexport const AccordionDetails = {\n  baseStyle: accordionPanelBaseStyle,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/actionsheet.ts",
    "content": "import { mode } from '../tools';\n// Actionsheet\nexport const Actionsheet = {\n  defaultProps: {\n    size: 'full',\n    justifyContent: 'flex-end',\n    animationPreset: 'slide',\n  },\n};\n\n// ActionsheetContent\nexport const ActionsheetContent = {\n  baseStyle: (props: any) => ({\n    alignItems: 'center',\n    px: 2,\n    py: 2,\n    borderRadius: 'none',\n    roundedTop: 20,\n    _dragIndicator: {\n      bg: mode('gray.400', 'gray.400')(props),\n      height: 1,\n      width: 10,\n      borderRadius: 2,\n    },\n    _dragIndicatorWrapper: {\n      pt: 3,\n      pb: 3,\n      mt: -2,\n      width: '100%',\n      alignItems: 'center',\n      collapsable: false,\n    },\n    _dragIndicatorWrapperOffSet: {\n      py: 2,\n      collapsable: false,\n    },\n  }),\n};\n\n// ActionsheetItem\nexport const ActionsheetItem = {\n  baseStyle: (props: any) => ({\n    width: '100%',\n    justifyContent: 'flex-start',\n    p: 4,\n    _text: {\n      fontSize: 16,\n      fontWeight: 'normal',\n      color: mode('coolGray.800', 'warmGray.50')(props),\n    },\n    _pressed: {\n      bg: mode('coolGray.300', 'gray.600')(props),\n    },\n    _hover: {\n      bg: mode('coolGray.200', 'gray.500')(props),\n    },\n  }),\n  defaultProps: {\n    variant: 'unstyled',\n  },\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/alert-dialog.ts",
    "content": "import { Dimensions } from 'react-native';\nimport { mode } from '../tools';\n\nconst sizes = {\n  xs: {\n    contentSize: {\n      width: '60%',\n      maxWidth: '280',\n    },\n  },\n  sm: {\n    contentSize: {\n      width: '65%',\n      maxWidth: '320',\n    },\n  },\n  md: {\n    contentSize: {\n      width: '75%',\n      maxWidth: '380',\n    },\n  },\n  lg: {\n    contentSize: {\n      width: '80%',\n      maxWidth: '520',\n    },\n  },\n  xl: {\n    contentSize: {\n      width: '90%',\n      maxWidth: '580',\n    },\n  },\n  full: {\n    contentSize: {\n      width: '100%',\n    },\n  },\n};\n\nexport const AlertDialog = {\n  baseStyle: {\n    width: '100%',\n    height: '100%',\n    justifyContent: 'center',\n    alignItems: 'center',\n    _web: { pointerEvents: 'box-none' },\n    _backdropFade: { exitDuration: 150, entryDuration: 200 },\n    _fade: { exitDuration: 100, entryDuration: 200 },\n    _slide: { duration: 200, overlay: false },\n  },\n  sizes,\n  defaultProps: {\n    size: 'md',\n    closeOnOverlayClick: true,\n  },\n};\n\nexport const AlertDialogContent = {\n  baseStyle: (props: Record<string, any>) => {\n    return {\n      bg: mode('coolGray.50', 'gray.700')(props),\n      _text: { color: mode('coolGray.800', 'warmGray.50')(props) },\n      shadow: 1,\n      rounded: 'lg',\n      maxHeight: `${Dimensions.get('window').height - 150}px`,\n      overflow: 'hidden',\n    };\n  },\n};\nexport const AlertDialogCloseButton = {\n  baseStyle: (props: Record<string, any>) => {\n    return {\n      position: 'absolute',\n      right: '3',\n      top: '3',\n      zIndex: '1',\n      colorScheme: 'coolGray',\n      p: '2',\n      _icon: {\n        size: '3',\n        color: mode('coolGray.600', 'coolGray.100')(props),\n      },\n    };\n  },\n};\nexport const AlertDialogHeader = {\n  baseStyle: (props: Record<string, any>) => {\n    return {\n      py: '4',\n      px: '3',\n      borderBottomWidth: '1',\n      borderColor: mode('coolGray.200', 'gray.600')(props),\n      _text: {\n        fontSize: 'md',\n        fontWeight: 'semibold',\n        color: mode('coolGray.800', 'warmGray.50')(props),\n        lineHeight: 'sm',\n      },\n    };\n  },\n};\nexport const AlertDialogBody = {\n  baseStyle: (props: Record<string, any>) => {\n    return {\n      pt: '2',\n      p: '3',\n      _text: {\n        color: mode('coolGray.600', 'coolGray.300')(props),\n      },\n    };\n  },\n};\nexport const AlertDialogFooter = {\n  baseStyle: (props: Record<string, any>) => {\n    return {\n      p: '3',\n      bg: mode('coolGray.100', 'gray.600')(props),\n      flexDirection: 'row',\n      justifyContent: 'flex-end',\n      flexWrap: 'wrap',\n    };\n  },\n};\nexport const AlertDialogOverlay = {\n  baseStyle: {\n    position: 'absolute',\n    left: '0',\n    top: '0',\n    opacity: '50',\n    right: '0',\n    bottom: '0',\n  },\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/alert.ts",
    "content": "import { mode, getColor, getColorScheme, transparentize } from '../tools';\n\nfunction getBg(props: Record<string, any>) {\n  let { theme, colorScheme, status, variant } = props;\n\n  colorScheme = getColorScheme(\n    props,\n    colorScheme !== 'primary' ? colorScheme : status\n  );\n  const lightBg =\n    variant === 'solid'\n      ? getColor(theme, `${colorScheme}.600`, colorScheme)\n      : getColor(theme, `${colorScheme}.100`, colorScheme);\n\n  const darkBg =\n    variant === 'solid'\n      ? getColor(theme, `${colorScheme}.700`, colorScheme)\n      : getColor(theme, `${colorScheme}.200`, colorScheme);\n  return mode(lightBg, darkBg)(props);\n}\n\nconst variantSubtle = (props: Record<string, any>) => {\n  let { colorScheme, status } = props;\n  colorScheme = getColorScheme(\n    props,\n    colorScheme !== 'primary' ? colorScheme : status\n  );\n  return {\n    bg: getBg(props),\n    _icon: { color: mode(`${colorScheme}.600`, `${colorScheme}.700`)(props) },\n  };\n};\n\nconst variantOutline = (props: Record<string, any>) => {\n  let { colorScheme, status } = props;\n  colorScheme = getColorScheme(\n    props,\n    colorScheme !== 'primary' ? colorScheme : status\n  );\n  return {\n    borderWidth: 1,\n    borderColor: mode(`${colorScheme}.600`, `${colorScheme}.700`)(props),\n    _icon: { color: mode(`${colorScheme}.600`, `${colorScheme}.700`)(props) },\n  };\n};\nconst variantOutlineLight = (props: Record<string, any>) => {\n  let { colorScheme, status, theme } = props;\n  colorScheme = getColorScheme(\n    props,\n    colorScheme !== 'primary' ? colorScheme : status\n  );\n  return {\n    borderWidth: 1,\n    borderColor: transparentize(\n      mode(`${colorScheme}.600`, `${colorScheme}.500`)(props),\n      0.2\n    )(theme),\n    _icon: { color: mode(`${colorScheme}.600`, `${colorScheme}.200`)(props) },\n  };\n};\n\nconst variantSolid = (props: Record<string, any>) => {\n  return {\n    borderWidth: 6,\n    borderColor: 'transparent',\n    bg: getBg(props),\n    _icon: { color: mode(`coolGray.50`, `warmGray.50`)(props) },\n  };\n};\nconst variantLeftAccent = (props: Record<string, any>) => {\n  let { colorScheme, status } = props;\n  colorScheme = getColorScheme(\n    props,\n    colorScheme !== 'primary' ? colorScheme : status\n  );\n  return {\n    borderWidth: 4,\n    bg: getBg(props),\n    _icon: { color: mode(`${colorScheme}.600`, `${colorScheme}.700`)(props) },\n    borderColor: 'transparent',\n    borderLeftColor: mode(`${colorScheme}.600`, `${colorScheme}.700`)(props),\n  };\n};\nconst variantTopAccent = (props: Record<string, any>) => {\n  let { colorScheme, status } = props;\n  colorScheme = getColorScheme(\n    props,\n    colorScheme !== 'primary' ? colorScheme : status\n  );\n  return {\n    borderWidth: 4,\n    borderColor: 'transparent',\n    borderTopColor: mode(`${colorScheme}.600`, `${colorScheme}.700`)(props),\n    bg: getBg(props),\n    _icon: { color: mode(`${colorScheme}.600`, `${colorScheme}.700`)(props) },\n  };\n};\n\nconst variants = {\n  'subtle': variantSubtle,\n  'solid': variantSolid,\n  'left-accent': variantLeftAccent,\n  'top-accent': variantTopAccent,\n  'outline': variantOutline,\n  'outline-light': variantOutlineLight,\n};\n\nexport const Alert = {\n  baseStyle: {\n    alignItems: 'center',\n    justifyContent: 'flex-start',\n    p: 3,\n    space: 3,\n    borderRadius: 'sm',\n  },\n  variants,\n  defaultProps: {\n    colorScheme: 'primary',\n    variant: 'subtle',\n  },\n};\n\n// AlertIcon\n\nexport const AlertIcon = {\n  baseStyle: {\n    size: 4,\n  },\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/app-bar.ts",
    "content": "import { mode, getColorScheme } from '../tools';\n\nconst baseStyle = (props: Record<string, any>) => {\n  let colorScheme = getColorScheme(props);\n  return {\n    bg: mode(`${colorScheme}.500`, `${colorScheme}.300`)(props),\n    px: 2,\n  };\n};\nconst defaultProps = {\n  colorScheme: 'primary',\n};\n\nexport default {\n  baseStyle,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/aspect-ratio.ts",
    "content": "const baseStyle = {};\nconst defaultProps = {\n  ratio: 4 / 3,\n};\nexport default {\n  baseStyle,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/avatar-badge.ts",
    "content": "import { mode } from '../tools';\n\nfunction baseStyle(props: Record<string, any>) {\n  return {\n    borderRadius: 'full',\n    borderWidth: 2,\n    borderColor: mode('light.50', 'gray.800')(props),\n    bg: mode('gray.600', 'light.100')(props),\n    size: 3,\n    position: 'absolute',\n    right: 0,\n    bottom: 0,\n  };\n}\n\nexport default { baseStyle };\n"
  },
  {
    "path": "src/theme/v33x-theme/components/avatar-group.ts",
    "content": "import { mode } from '../tools';\n\nfunction baseStyle({ isVertical, ...props }: Record<string, any>) {\n  return {\n    flexDirection: isVertical ? 'column-reverse' : 'row-reverse',\n    space: -4,\n    _avatar: {\n      borderColor: mode('gray.50', 'gray.800')(props),\n      borderWidth: 2,\n    },\n    _hiddenAvatarPlaceholder: {\n      bg: mode('gray.600', 'gray.100')(props),\n    },\n  };\n}\n\nexport default {\n  baseStyle,\n  defaultProps: {\n    isVertical: false,\n  },\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/avatar.ts",
    "content": "import { randomColor, getRandomString, mode } from '../tools';\n\nconst baseStyle = (props: Record<string, any>) => {\n  const { name, ...colorModeProps } = props;\n  const bg = name\n    ? randomColor({ string: getRandomString(5) + name })\n    : 'gray.400';\n  const borderColor = mode('gray.800', 'white')(colorModeProps);\n  return {\n    bg,\n    borderColor,\n    position: 'relative',\n    justifyContent: 'center',\n    alignItems: 'center',\n    borderRadius: 'full',\n    _text: {\n      fontWeight: 600,\n    },\n    _image: {\n      borderRadius: 'full',\n      alt: '--',\n      _alt: {\n        fontWeight: 600,\n      },\n      style: {\n        height: '100%',\n        width: '100%',\n      },\n    },\n  };\n};\n\nfunction getSize(size: any, fontSize: string) {\n  return {\n    width: size,\n    height: size,\n    _text: {\n      fontSize: fontSize,\n    },\n  };\n}\n\nconst sizes = {\n  'xs': getSize('6', '2xs'),\n  'sm': getSize('8', 'xs'),\n  'md': getSize('12', 'md'),\n  'lg': getSize('16', 'xl'),\n  'xl': getSize('24', '3xl'),\n  '2xl': getSize('32', '5xl'),\n};\n\nconst defaultProps = {\n  size: 'md',\n};\n\nexport default {\n  baseStyle,\n  sizes,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/badge.ts",
    "content": "import { mode, getColorScheme } from '../tools';\n\nconst baseStyle = {\n  px: '2',\n  py: '0.5',\n  alignItems: 'center',\n  _text: { fontSize: 'xs', fontWeight: 'medium' },\n};\n\nfunction variantSolid(props: Record<string, any>) {\n  const colorScheme = getColorScheme(props);\n  return {\n    bg: mode(`${colorScheme}.600`, `${colorScheme}.300`)(props),\n    _text: { color: mode(`coolGray.100`, `coolGray.800`)(props) },\n    borderWidth: '1',\n    borderColor: 'transparent',\n    borderRadius: '2',\n  };\n}\n\nfunction variantSubtle(props: Record<string, any>) {\n  const colorScheme = getColorScheme(props);\n  return {\n    bg: mode(`${colorScheme}.200`, `${colorScheme}.700`)(props),\n    _text: { color: mode(`${colorScheme}.600`, `${colorScheme}.200`)(props) },\n    borderWidth: '1',\n    borderRadius: '2',\n    borderColor: 'transparent',\n  };\n}\n\nfunction variantOutline(props: Record<string, any>) {\n  const colorScheme = getColorScheme(props);\n  return {\n    borderColor: mode(`${colorScheme}.500`, `${colorScheme}.400`)(props),\n    _text: { color: mode(`${colorScheme}.500`, `${colorScheme}.400`)(props) },\n    borderRadius: '2',\n    borderWidth: '1',\n  };\n}\n\nconst variants = {\n  solid: variantSolid,\n  subtle: variantSubtle,\n  outline: variantOutline,\n};\n\nconst defaultProps = {\n  variant: 'subtle',\n  colorScheme: 'coolGray',\n};\n\nexport default {\n  baseStyle,\n  variants,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/box.ts",
    "content": "const baseStyle = {};\nconst defaultProps = {};\nexport default {\n  baseStyle,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/breadcrumb.ts",
    "content": "const baseStyle = {\n  width: 'auto',\n  height: 'auto',\n  display: 'flex',\n  flexDirection: 'row',\n  spacing: '2',\n};\nconst defaultProps = {\n  direction: 'row',\n  wrap: 'wrap',\n};\n\nexport const Breadcrumb = {\n  baseStyle,\n  defaultProps,\n};\n\nexport const BreadcrumbText = {\n  baseStyle: { ...baseStyle, _current: { fontWeight: 'bold' } },\n  defaultProps,\n};\n\nexport const BreadcrumbIcon = {\n  baseStyle: { ...baseStyle },\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/button.ts",
    "content": "import { Dict, mode, transparentize } from '../tools';\nimport { Platform } from 'react-native';\nconst disabledTextColor = (props: any) => mode(`muted.500`, `muted.300`)(props);\n\nconst baseStyle = (props: any) => {\n  const { primary } = props.theme.colors;\n  const focusRing =\n    Platform.OS === 'web'\n      ? mode(\n          { boxShadow: `${primary[400]} 0px 0px 0px 2px`, zIndex: 1 },\n          { boxShadow: `${primary[500]} 0px 0px 0px 2px`, zIndex: 1 }\n        )(props)\n      : {};\n\n  return {\n    borderRadius: 'sm',\n    flexDirection: 'row',\n    justifyContent: 'center',\n    alignItems: 'center',\n    _web: {\n      cursor: props.isDisabled\n        ? 'not-allowed'\n        : props.isLoading\n        ? 'default'\n        : 'pointer',\n    },\n    _text: {\n      fontWeight: 'medium',\n    },\n    _focusVisible: {\n      style: props.variant !== 'unstyled' ? { ...focusRing } : {},\n    },\n    _stack: {\n      space: 2,\n      alignItems: 'center',\n    },\n    _loading: {\n      opacity: '80',\n    },\n    _disabled: {\n      opacity: '50',\n    },\n    _spinner: {\n      size: 'sm',\n      focusable: false,\n    },\n  };\n};\n\nfunction variantGhost(props: Dict) {\n  const { colorScheme: c } = props;\n  if (c === 'muted') {\n    return {\n      _text: {\n        color: disabledTextColor(props),\n      },\n    };\n  }\n\n  return {\n    _text: {\n      color: props.isDisabled\n        ? disabledTextColor(props)\n        : mode(`${c}.500`, `${c}.300`)(props),\n    },\n    bg: 'transparent',\n    _web: {\n      outlineWidth: '0',\n    },\n    _hover: {\n      borderColor: mode(`${c}.500`, `${c}.200`)(props),\n      bg: transparentize(mode(`${c}.200`, `${c}.400`)(props), 0.5)(props.theme),\n    },\n    _focusVisible: {\n      borderColor: mode(`${c}.700`, `${c}.200`)(props),\n      bg: transparentize(mode(`${c}.200`, `${c}.400`)(props), 0.5)(props.theme),\n    },\n    _pressed: {\n      borderColor: mode(`${c}.600`, `${c}.200`)(props),\n      bg: transparentize(mode(`${c}.300`, `${c}.500`)(props), 0.5)(props.theme),\n    },\n    _spinner: {\n      size: 'sm',\n    },\n  };\n}\n\nfunction variantOutline(props: Dict) {\n  const { colorScheme: c } = props;\n  const borderColor = mode(`muted.200`, `muted.500`)(props);\n  return {\n    borderWidth: '1',\n    borderColor:\n      c === 'muted'\n        ? borderColor\n        : props.isDisabled\n        ? disabledTextColor(props)\n        : mode(`${c}.300`, `${c}.300`)(props),\n    ...variantGhost(props),\n  };\n}\n\nfunction variantSolid(props: Dict) {\n  const { colorScheme: c } = props;\n  let bg = `${c}.500`;\n  if (props.isDisabled) {\n    bg = mode(`muted.300`, `muted.500`)(props);\n  }\n\n  const styleObject = {\n    _web: {\n      outlineWidth: '0',\n    },\n    bg,\n    _hover: {\n      bg: `${c}.600`,\n    },\n    _pressed: {\n      bg: `${c}.700`,\n    },\n    _focus: {\n      bg: `${c}.600`,\n    },\n    _loading: {\n      bg: mode(`warmGray.50`, `${c}.300`)(props),\n      opacity: '50',\n    },\n    _disabled: { bg: mode(`trueGray.300`, `trueGray.600`)(props) },\n  };\n\n  return styleObject;\n}\n\n// function getBg(props: Record<string, any>) {\n//   const { theme, status, variant } = props;\n//   let { colorScheme } = props;\n\n//   colorScheme = getColorScheme(\n//     props,\n//     colorScheme !== 'primary' ? colorScheme : status\n//   );\n//   const lightBg =\n//     variant === 'solid'\n//       ? getColor(theme, `${colorScheme}.400`, colorScheme)\n//       : getColor(theme, `${colorScheme}.100`, colorScheme);\n\n//   const darkBg =\n//     variant === 'solid'\n//       ? getColor(theme, `${colorScheme}.700`, colorScheme)\n//       : getColor(theme, `${colorScheme}.400`, colorScheme);\n//   return mode(lightBg, darkBg)(props);\n// }\n\nfunction variantSubtle(props: Dict) {\n  const { colorScheme: c } = props;\n  let bg = `${c}.100`;\n  bg = mode(bg, `${c}.200`)(props);\n  let color;\n  if (props.isDisabled) {\n    bg = mode(`muted.300`, `muted.500`)(props);\n  } else {\n    color = mode(`${c}.500`, `${c}.600`)(props);\n  }\n  const styleObject = {\n    _text: {\n      color: color,\n    },\n    _web: {\n      outlineWidth: '0',\n    },\n    bg,\n    _hover: {\n      _text: { color: mode(`${c}.600`, `${c}.700`)(props) },\n      bg: mode(`${c}.200`, `${c}.300`)(props),\n    },\n    _pressed: {\n      _text: { color: mode(`${c}.700`, `${c}.800`)(props) },\n      bg: mode(`${c}.300`, `${c}.400`)(props),\n    },\n  };\n\n  return styleObject;\n}\n\nfunction variantLink(props: Dict) {\n  const { colorScheme: c } = props;\n\n  return {\n    ...variantGhost(props),\n    _text: {\n      textDecorationLine: Platform.select({\n        ios: 'underline',\n        web: 'underline',\n      }),\n      color:\n        c === 'muted'\n          ? mode(`muted.800`, `${c}.200`)(props)\n          : props.isDisabled\n          ? disabledTextColor(props)\n          : mode(`${c}.500`, `${c}.300`)(props),\n    },\n    _hover: {\n      _text: {\n        color: mode(`${c}.600`, `${c}.400`)(props),\n        textDecorationLine: 'underline',\n      },\n    },\n    _focusVisible: {\n      _text: {\n        color: mode(`${c}.600`, `${c}.400`)(props),\n        textDecorationLine: 'underline',\n      },\n    },\n    _pressed: {\n      _text: { color: mode(`${c}.700`, `${c}.500`)(props) },\n    },\n  };\n}\n\nfunction variantUnstyled() {\n  return {};\n}\n\nconst variants = {\n  ghost: variantGhost,\n  outline: variantOutline,\n  solid: variantSolid,\n  subtle: variantSubtle,\n  link: variantLink,\n  unstyled: variantUnstyled,\n};\n\nconst sizes = {\n  lg: {\n    px: '4',\n    py: '2',\n    _text: {\n      fontSize: 'md',\n    },\n  },\n  md: {\n    px: '3',\n    py: '2',\n    _text: {\n      fontSize: 'sm',\n    },\n  },\n  sm: {\n    px: '2',\n    py: '2',\n    _text: {\n      fontSize: 'xs',\n    },\n  },\n  xs: {\n    px: '2',\n    py: '2',\n    _text: {\n      fontSize: '2xs',\n    },\n  },\n};\n\nconst defaultProps = {\n  variant: 'solid',\n  size: 'md',\n  colorScheme: 'primary',\n};\n\nexport const ButtonGroup = {\n  baseStyle: { direction: 'row' },\n  defaultProps: { space: 2 },\n};\n\nexport default {\n  baseStyle,\n  variants,\n  sizes,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/card.ts",
    "content": "const baseStyle = {\n  shadow: 4,\n  borderRadius: 'md',\n  padding: 4,\n  overflow: 'hidden',\n};\nconst defaultProps = {};\nexport default {\n  baseStyle,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/center.ts",
    "content": "// For Square and circle variation\nconst sizes = {\n  'xs': {\n    height: 10,\n    width: 10,\n  },\n  'sm': {\n    height: 12,\n    width: 12,\n  },\n  'md': {\n    height: 16,\n    width: 16,\n  },\n  'lg': {\n    height: 24,\n    width: 24,\n  },\n  'xl': {\n    height: 32,\n    width: 32,\n  },\n  '2xl': {\n    height: 40,\n    width: 40,\n  },\n};\n\nexport default {\n  baseStyle: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  sizes,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/checkbox-group.ts",
    "content": "const baseStyle = () => {\n  return {\n    alignItems: 'flex-start',\n  };\n};\n\nexport default {\n  baseStyle,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/checkbox.ts",
    "content": "import { mode, transparentize } from '../tools';\n\nconst baseStyle = (props: Record<string, any>) => {\n  const { colorScheme, theme } = props;\n\n  return {\n    justifyContent: 'flex-start',\n    flexDirection: 'row',\n    borderWidth: 2,\n    borderRadius: 'sm',\n    borderColor: mode('muted.300', 'muted.600')(props),\n    bg: mode('muted.50', 'muted.700')(props), // matching background color\n    opacity: 1,\n    _web: {\n      cursor: 'pointer',\n    },\n    _stack: {\n      direction: 'row',\n      alignItems: 'center',\n      space: 2,\n      _web: {\n        cursor: props.isDisabled ? 'not-allowed' : 'pointer',\n      },\n    },\n    _text: {\n      ml: 2,\n      color: mode('darkText', 'lightText')(props),\n    },\n    _interactionBox: {\n      position: 'absolute',\n      borderRadius: 'full',\n      p: 5,\n      w: '100%',\n      h: '100%',\n      zIndex: -1,\n      _web: {\n        transition: 'height 200ms, width 200ms',\n        pointerEvents: 'none',\n      },\n    },\n    _hover: {\n      _interactionBox: {\n        bg: transparentize('muted.200', 0.3)(theme),\n      },\n    },\n    _focus: {\n      _interactionBox: {\n        bg: transparentize(`${colorScheme}.200`, 0.5)(theme),\n      },\n    },\n    _focusVisible: {\n      _interactionBox: {\n        bg: transparentize(`${colorScheme}.200`, 0.5)(theme),\n      },\n    },\n    _disabled: {\n      _interactionBox: {\n        bg: 'transparent',\n      },\n      _web: {\n        cursor: 'not-allowed',\n      },\n      opacity: 0.4,\n    },\n    _pressed: {\n      _interactionBox: {\n        bg: transparentize(`${colorScheme}.200`, 0.5)(theme),\n      },\n    },\n    _checked: {\n      borderColor: mode(`${colorScheme}.600`, `${colorScheme}.200`)(props),\n      bg: mode(`${colorScheme}.600`, `${colorScheme}.300`)(props),\n    },\n    _invalid: {\n      borderColor: mode('error.600', 'error.400')(props),\n    },\n    _icon: {\n      color: mode(`muted.50`, `muted.800`)(props), // matching background color\n    },\n  };\n};\n\nconst sizes = {\n  lg: { _icon: { size: 6 }, _text: { fontSize: 'xl' } },\n  md: { _icon: { size: 5 }, _text: { fontSize: 'lg' } },\n  sm: { _icon: { size: 4 }, _text: { fontSize: 'md' } },\n};\n\nconst defaultProps = {\n  defaultIsChecked: false,\n  size: 'sm',\n  colorScheme: 'primary',\n};\n\nexport default {\n  baseStyle,\n  sizes,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/circle.ts",
    "content": "const sizes = {\n  'xs': {\n    height: 10,\n    width: 10,\n  },\n  'sm': {\n    height: 12,\n    width: 12,\n  },\n  'md': {\n    height: 16,\n    width: 16,\n  },\n  'lg': {\n    height: 24,\n    width: 24,\n  },\n  'xl': {\n    height: 32,\n    width: 32,\n  },\n  '2xl': {\n    height: 40,\n    width: 40,\n  },\n};\n\nconst baseStyle = {\n  rounded: 'full',\n  alignItems: 'center',\n  justifyContent: 'center',\n};\n\nexport default {\n  baseStyle,\n  sizes,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/circular-progress.ts",
    "content": "import { mode, getColorScheme } from '../tools';\n\nconst sizes = {\n  'xs': {\n    height: 6,\n    width: 6,\n  },\n  'sm': {\n    height: 8,\n    width: 8,\n  },\n  'md': {\n    height: 16,\n    width: 16,\n  },\n  'lg': {\n    height: 20,\n    width: 20,\n  },\n  'xl': {\n    height: 24,\n    width: 24,\n  },\n  '2xl': {\n    height: 32,\n    width: 32,\n  },\n};\nconst defaultProps = {\n  thickness: 8,\n  colorScheme: 'primary',\n  size: 'lg',\n};\n\nfunction baseStyle(props: Record<string, any>) {\n  const colorScheme = getColorScheme(props);\n  return {\n    color: mode(`${colorScheme}.600`, `${colorScheme}.500`)(props),\n    trackColor: mode(`${colorScheme}.200`, `${colorScheme}.800`)(props),\n  };\n}\n\nexport default { baseStyle, sizes, defaultProps };\n"
  },
  {
    "path": "src/theme/v33x-theme/components/code.ts",
    "content": "import Badge from './badge';\nimport { Platform } from 'react-native';\n\nconst { variants, defaultProps } = Badge;\n\nconst baseStyle = {\n  _text: {\n    fontFamily: Platform.OS === 'ios' ? 'Courier' : 'monospace',\n    fontSize: 'sm',\n  },\n  borderRadius: 'sm',\n  px: 2,\n  py: 1,\n};\n\nexport default {\n  baseStyle,\n  variants,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/container.ts",
    "content": "import type { Dict } from '../tools';\n\nconst baseStyle = (props: Dict) => {\n  const { centerContent } = props;\n\n  return {\n    maxWidth: '80%',\n    alignItems: centerContent ? 'center' : 'flex-start',\n    _text: { textAlign: centerContent ? 'center' : 'left' },\n  };\n};\n\nexport default {\n  baseStyle,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/divider.ts",
    "content": "import { mode } from '../tools';\n\nfunction baseStyle(props: Record<string, any>) {\n  const { orientation, thickness } = props;\n  const orientationProps =\n    orientation === 'vertical'\n      ? {\n          width: `${thickness}px`, // handle for web : To be discussed\n          height: '100%',\n        }\n      : {\n          width: '100%',\n          height: `${thickness}px`,\n        };\n\n  return {\n    bg: mode('coolGray.200', 'gray.600')(props),\n    ...orientationProps,\n  };\n}\n\nexport default {\n  baseStyle,\n  defaultProps: {\n    orientation: 'horizontal',\n    thickness: '1',\n  },\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/fab.ts",
    "content": "const placementProps: any = {\n  'top-right': { top: 4, right: 4, position: 'absolute' },\n  'top-left': { top: 4, left: 4, position: 'absolute' },\n  'bottom-right': { bottom: 4, right: 4, position: 'absolute' },\n  'bottom-left': { bottom: 4, left: 4, position: 'absolute' },\n};\nconst baseStyle = {\n  shadow: 7,\n  rounded: 'full',\n  zIndex: 20,\n  placementProps,\n  px: 4,\n  py: 4,\n};\nconst defaultProps = {\n  renderInPortal: true,\n  variant: 'solid',\n  colorScheme: 'primary',\n  placement: 'bottom-right',\n};\n\nexport default { baseStyle, defaultProps };\n"
  },
  {
    "path": "src/theme/v33x-theme/components/flatList.ts",
    "content": "const baseStyle = {};\nconst defaultProps = {};\nexport default {\n  baseStyle,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/flex.ts",
    "content": "export const Flex = {\n  baseStyle: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n};\n\nexport const Spacer = {\n  baseStyle: {\n    flexGrow: 1,\n  },\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/form-control.ts",
    "content": "import { mode } from '../tools';\n\n// FormControl\nexport const FormControl = {\n  baseStyle: {\n    width: '100%',\n  },\n};\n\n// FormControlErrorMessage\nexport const FormControlErrorMessage = {\n  baseStyle: (props: Record<string, any>) => {\n    return {\n      mt: '2',\n      _text: {\n        fontSize: 'xs',\n        color: mode('danger.600', 'danger.300')(props),\n      },\n      _stack: { space: 1, alignItems: 'center' },\n    };\n  },\n};\n\n// FormControlLabel\nexport const FormControlLabel = {\n  baseStyle: (props: Record<string, any>) => {\n    return {\n      flexDirection: 'row',\n      justifyContent: 'flex-start',\n      _text: {\n        fontSize: 'sm',\n        fontWeight: 'medium',\n      },\n      _astrick: {\n        color: mode('danger.600', 'danger.300')(props),\n      },\n      mb: '2',\n      mr: '3',\n    };\n  },\n};\n\n// FormControlHelperText\nexport const FormControlHelperText = {\n  baseStyle: (props: Record<string, any>) => {\n    return {\n      mt: '2',\n      _text: {\n        fontSize: 'xs',\n        color: mode('muted.500', 'muted.400')(props),\n      },\n    };\n  },\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/heading.ts",
    "content": "import { mode } from '../tools';\n\nconst baseStyle = (props: Record<string, any>) => {\n  return {\n    color: mode('muted.700', 'white')(props),\n    fontWeight: 'bold',\n    lineHeight: 'sm',\n  };\n};\n\nconst sizes = {\n  '4xl': {\n    fontSize: ['6xl', null, '7xl'],\n  },\n  '3xl': {\n    fontSize: ['5xl', null, '6xl'],\n  },\n  '2xl': {\n    fontSize: ['4xl', null, '5xl'],\n  },\n  'xl': {\n    fontSize: ['3xl', null, '4xl'],\n  },\n  'lg': {\n    fontSize: ['2xl', null, '3xl'],\n  },\n  'md': { fontSize: 'xl' },\n  'sm': { fontSize: 'md' },\n  'xs': { fontSize: 'sm' },\n};\n\nconst defaultProps = {\n  size: 'lg',\n};\n\nexport default {\n  baseStyle,\n  sizes,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/hstack.ts",
    "content": "const baseStyle = {};\nconst defaultProps = {};\nexport default {\n  baseStyle,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/icon-button.ts",
    "content": "import { Dict, mode, transparentize } from '../tools';\nimport { Platform } from 'react-native';\n\nconst baseStyle = (props: any) => {\n  const { primary } = props.theme.colors;\n  const focusRing =\n    Platform.OS === 'web'\n      ? { boxShadow: `${primary[400]} 0px 0px 0px 3px` }\n      : {};\n\n  return {\n    borderRadius: 'sm',\n    _web: {\n      cursor: props.isDisabled\n        ? 'not-allowed'\n        : props.isLoading\n        ? 'default'\n        : 'pointer',\n    },\n    _focusVisible: {\n      style: props.variant !== 'unstyled' ? { ...focusRing } : {},\n    },\n    _disabled: {\n      opacity: 0.5,\n    },\n  };\n};\n\nfunction variantGhost(props: Dict) {\n  const { colorScheme } = props;\n  return {\n    bg: 'transparent',\n    _web: {\n      outlineWidth: 0,\n    },\n    _hover: {\n      bg: transparentize(\n        mode(`${colorScheme}.200`, `${colorScheme}.400`)(props),\n        0.5\n      )(props.theme),\n    },\n    _focusVisible: {\n      bg: transparentize(\n        mode(`${colorScheme}.200`, `${colorScheme}.400`)(props),\n        0.5\n      )(props.theme),\n    },\n    _pressed: {\n      bg: transparentize(\n        mode(`${colorScheme}.200`, `${colorScheme}.500`)(props),\n        0.6\n      )(props.theme),\n    },\n  };\n}\n\nfunction variantOutline(props: Dict) {\n  const { colorScheme } = props;\n  return {\n    borderWidth: '1',\n    borderColor: `${colorScheme}.300`,\n    _icon: {\n      color: mode(`${colorScheme}.500`, `${colorScheme}.300`)(props),\n    },\n    _web: {\n      outlineWidth: 0,\n    },\n    _hover: {\n      bg: transparentize(\n        mode(`${colorScheme}.200`, `${colorScheme}.400`)(props),\n        0.5\n      )(props.theme),\n    },\n    _focusVisible: {\n      bg: transparentize(\n        mode(`${colorScheme}.200`, `${colorScheme}.400`)(props),\n        0.5\n      )(props.theme),\n    },\n    _pressed: {\n      bg: transparentize(\n        mode(`${colorScheme}.300`, `${colorScheme}.500`)(props),\n        0.6\n      )(props.theme),\n    },\n  };\n}\n\nfunction variantSolid(props: Dict) {\n  const { colorScheme } = props;\n  return {\n    bg: `${colorScheme}.500`,\n    _web: {\n      outlineWidth: 0,\n    },\n    _disabled: {\n      bg: mode(`trueGray.300`, `trueGray.600`)(props),\n    },\n    _hover: {\n      bg: `${colorScheme}.600`,\n    },\n    _pressed: {\n      bg: `${colorScheme}.700`,\n    },\n    _focus: {\n      bg: `${colorScheme}.600`,\n    },\n    _icon: {\n      color: mode('gray.50', 'gray.800')(props),\n    },\n  };\n}\n\nfunction variantUnstyled() {\n  return {};\n}\n\nconst variants = {\n  ghost: variantGhost,\n  outline: variantOutline,\n  solid: variantSolid,\n  unstyled: variantUnstyled,\n};\n\nconst defaultProps = {\n  variant: 'ghost',\n  size: 'md',\n  colorScheme: 'primary',\n};\n\nconst sizes = {\n  lg: {\n    p: 3,\n  },\n  md: {\n    p: 2,\n  },\n  sm: {\n    p: 1,\n  },\n};\n\nexport default {\n  baseStyle,\n  variants,\n  sizes,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/icon.ts",
    "content": "import { mode } from '../tools';\n\nconst baseStyle = (props: Record<string, any>) => {\n  return {\n    color: mode('muted.800', 'muted.100')(props),\n  };\n};\n\nconst sizes = {\n  'xxs': 2,\n  'xs': 4,\n  'sm': 6,\n  'md': 8,\n  'lg': 10,\n  'xl': 12,\n  '2xl': 16,\n  '3xl': 20,\n  '4xl': 24,\n  '5xl': 32,\n  '6xl': 64,\n};\n\nconst defaultProps = { size: 'md' };\nexport default { baseStyle, sizes, defaultProps };\n"
  },
  {
    "path": "src/theme/v33x-theme/components/image.ts",
    "content": "// Image\nconst sizes = {\n  '2xs': '6',\n  'xs': '10',\n  'sm': '16',\n  'md': '20',\n  'lg': '24',\n  'xl': '32',\n  '2xl': '64',\n  'full': '100%',\n};\n\nexport const Image = {\n  baseStyle: {\n    maxWidth: '100%',\n  },\n  sizes,\n  defaultProps: {},\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/index.ts",
    "content": "import {\n  Accordion,\n  AccordionItem,\n  AccordionIcon,\n  AccordionSummary,\n  AccordionDetails,\n} from './accordion';\nimport {\n  Actionsheet,\n  ActionsheetContent,\n  // ActionsheetHeader,\n  // ActionsheetFooter,\n  ActionsheetItem,\n} from './actionsheet';\nimport { Select, SelectItem } from './select';\nimport { Alert, AlertIcon } from './alert';\nimport AspectRatio from './aspect-ratio';\nimport Avatar from './avatar';\nimport AvatarBadge from './avatar-badge';\nimport AvatarGroup from './avatar-group';\nimport Badge from './badge';\nimport { Breadcrumb, BreadcrumbText, BreadcrumbIcon } from './breadcrumb';\nimport Button, { ButtonGroup } from './button';\nimport Card from './card';\nimport Center from './center';\nimport Checkbox from './checkbox';\nimport CheckboxGroup from './checkbox-group';\nimport Box from './box';\nimport FlatList from './flatList';\nimport KeyboardAvoidingView from './keyboardAvoidingView';\nimport ScrollView from './scrollView';\nimport SectionList from './sectionList';\nimport StatusBar from './statusBar';\nimport CircularProgress from './circular-progress';\nimport Code from './code';\nimport Container from './container';\nimport HStack from './hstack';\nimport VStack from './vstack';\nimport Divider from './divider';\nimport Circle from './circle';\nimport SimpleGrid from './simple-grid';\nimport {\n  FormControl,\n  FormControlLabel,\n  FormControlHelperText,\n  FormControlErrorMessage,\n} from './form-control';\nimport Heading from './heading';\nimport Icon from './icon';\nimport IconButton from './icon-button';\nimport { Image } from './image';\nimport { Input } from './input';\nimport { Tooltip } from './tooltip';\nimport Kbd from './kbd';\nimport Link from './link';\nimport { default as Menu, MenuGroup, MenuItem } from './menu';\nimport {\n  Modal,\n  ModalContent,\n  ModalHeader,\n  ModalBody,\n  ModalFooter,\n  ModalOverlay,\n  ModalCloseButton,\n} from './modal';\nimport {\n  AlertDialog,\n  AlertDialogContent,\n  AlertDialogHeader,\n  AlertDialogBody,\n  AlertDialogFooter,\n  AlertDialogOverlay,\n  AlertDialogCloseButton,\n} from './alert-dialog';\nimport * as PopoverComponentTheme from './popover';\nimport { default as NumberInput, NumberInputStepper } from './number-input';\nimport PinInput from './pin-input';\nimport Pressable from './pressable';\nimport Progress from './progress';\nimport Radio from './radio';\nimport RadioGroup from './radio-group';\nimport { Skeleton, SkeletonText } from './skeleton';\nimport Spinner from './spinner';\nimport Stat from './stat';\nimport Switch from './switch';\nimport Tabs from './tabs';\nimport Tag from './tag';\nimport Text from './text';\nimport AppBar from './app-bar';\nimport TextArea from './textarea';\nimport { TextField } from './textField';\nimport { Toast } from './toast';\nimport { Fade, ScaleFade, Slide, SlideFade } from './transitions';\nimport { List, ListItem, ListIcon } from './list';\nimport { TypeAheadSearchItem } from './typeahead';\nimport { Wrap } from './wrap';\nimport { Flex, Spacer } from './flex';\nimport Stack from './stack';\nimport Square from './square';\nimport View from './view';\nimport ZStack from './zstack';\nimport FAB from './fab';\nimport { SliderTrack, Slider, SliderThumb, SliderFilledTrack } from './slider';\nimport InputLeftAddon from './inputleftaddon';\nimport InputRightAddon from './inputrightaddon';\nexport default {\n  FlatList,\n  KeyboardAvoidingView,\n  ScrollView,\n  SectionList,\n  StatusBar,\n  Accordion,\n  AccordionItem,\n  AccordionIcon,\n  AccordionSummary,\n  AccordionDetails,\n  Actionsheet,\n  ActionsheetContent,\n  // ActionsheetHeader,\n  // ActionsheetFooter,\n  ActionsheetItem,\n  Alert,\n  // AlertDescription,\n  // AlertTitle,\n  AlertIcon,\n  AspectRatio,\n  Avatar,\n  AvatarBadge,\n  AvatarGroup,\n  Badge,\n  Box,\n  Breadcrumb,\n  BreadcrumbText,\n  BreadcrumbIcon,\n  Button,\n  ButtonGroup,\n  Card,\n  Center,\n  Circle,\n  Checkbox,\n  CheckboxGroup,\n  CircularProgress,\n  Code,\n  Container,\n  Divider,\n  Fade,\n  FAB,\n  Flex,\n  Spacer,\n  FormControl,\n  FormControlLabel,\n  FormControlHelperText,\n  FormControlErrorMessage,\n  Heading,\n  HStack,\n  VStack,\n  Icon,\n  IconButton,\n  Image,\n  Input,\n  InputLeftAddon,\n  InputRightAddon,\n  Kbd,\n  Link,\n  List,\n  ListItem,\n  ListIcon,\n  Menu,\n  MenuGroup,\n  MenuItem,\n  Modal,\n  ModalContent,\n  ModalHeader,\n  ModalBody,\n  ModalFooter,\n  ModalOverlay,\n  ModalCloseButton,\n  AlertDialog,\n  AlertDialogContent,\n  AlertDialogHeader,\n  AlertDialogBody,\n  AlertDialogFooter,\n  AlertDialogOverlay,\n  AlertDialogCloseButton,\n  NumberInput,\n  NumberInputStepper,\n  PinInput,\n  Pressable,\n  ...PopoverComponentTheme,\n  Progress,\n  Radio,\n  RadioGroup,\n  ScaleFade,\n  Select,\n  SelectItem,\n  SimpleGrid,\n  Skeleton,\n  SkeletonText,\n  SliderFilledTrack,\n  SliderThumb,\n  SliderTrack,\n  Slider,\n  Slide,\n  SlideFade,\n  Spinner,\n  Square,\n  Stack,\n  Stat,\n  Switch,\n  Tabs,\n  Tag,\n  Text,\n  AppBar,\n  TextArea,\n  TextField,\n  Toast,\n  TypeAheadSearchItem,\n  View,\n  Wrap,\n  ZStack,\n  Tooltip,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/input.ts",
    "content": "import { mode } from '../tools';\nimport { Platform } from 'react-native';\n\nfunction getSelectionColor(props: Record<string, any>) {\n  if (Platform.OS === 'ios') {\n    return mode('coolGray.800', 'warmGray.50')(props);\n  } else if (Platform.OS === 'android') {\n    return mode('coolGray.800', 'warmGray.50')(props);\n  }\n}\n\nconst baseStyle = (props: Record<string, any>) => {\n  // const { primary } = props.theme.colors;\n  // Todo: Resolve boxShadow Color or Provide some alternatiove prop for user to change focusRing color\n  // // Todo: Update to support similar focusRing on iOS , Android and Web\n  // const focusRing =\n  //   Platform.OS === 'web'\n  //     ? {\n  //         boxShadow:\n  //           props.variant !== 'underlined'\n  //             ? `${primary[400]} 0px 0px 0px 1px`\n  //             : `${primary[400]} 0px 1px 0px 0px`,\n  //         zIndex: 1,\n  //       }\n  //     : {\n  //         // boxShadow: `${useToken('colors', ['primary.400'])} 0px 0px 0px 1px`,\n  //       };\n\n  return {\n    selectionColor: getSelectionColor(props),\n    fontFamily: 'body',\n    p: '2',\n    borderRadius: 'sm',\n    overflow: 'hidden',\n    color: mode('coolGray.800', 'warmGray.50')(props),\n    placeholderTextColor: 'muted.400',\n    borderColor: mode('muted.200', 'gray.500')(props),\n    _disabled: {\n      opacity: '80',\n      bg: mode('muted.100', 'muted.700')(props),\n      _web: {\n        disabled: true,\n        cursor: 'not-allowed',\n      },\n    },\n    _invalid: {\n      borderColor: mode('danger.600', 'danger.300')(props),\n    },\n    _focus: {\n      borderColor: mode('primary.400', 'primary.500')(props),\n    },\n    _web: {\n      outlineWidth: '0',\n      overflow: 'auto',\n      lineHeight: 'lg', // Todo: Move to _web inside size so that sm and xs don't have this much height\n      outline: 'none',\n      cursor: 'auto',\n    },\n    _stack: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      // justifyContent: 'space-between',\n      overflow: 'hidden',\n    },\n    _input: {\n      bg: 'transparent',\n      flex: 1,\n    },\n  };\n};\n\nfunction roundedStyle(props: Record<string, any>) {\n  return {\n    borderRadius: '25',\n    borderWidth: '1',\n    _hover: {\n      bg: mode('gray.100', 'gray.700')(props),\n    },\n  };\n}\nfunction outlineStyle(props: Record<string, any>) {\n  return {\n    borderWidth: '1',\n    _hover: {\n      bg: mode('gray.100', 'gray.700')(props),\n    },\n  };\n}\nfunction filledStyle(props: Record<string, any>) {\n  return {\n    bg: props.bg || mode('muted.200', 'muted.600')(props),\n    borderWidth: '1',\n    borderColor: 'transparent',\n    _hover: {\n      bg: mode('muted.300', 'muted.700')(props),\n    },\n  };\n}\nfunction unstyledStyle() {\n  return {\n    borderWidth: '0',\n  };\n}\nfunction underlinedStyle() {\n  return {\n    borderRadius: '0',\n    borderTopWidth: '0',\n    borderLeftWidth: '0',\n    borderRightWidth: '0',\n    borderBottomWidth: '1',\n  };\n}\n\nconst variants = {\n  outline: outlineStyle,\n  underlined: underlinedStyle,\n  rounded: roundedStyle,\n  filled: filledStyle,\n  unstyled: unstyledStyle,\n};\n\nconst sizes = {\n  '2xl': { fontSize: 'xl' },\n  'xl': { fontSize: 'lg' },\n  'lg': { fontSize: 'md' },\n  'md': { fontSize: 'sm' },\n  'sm': { fontSize: 'xs' },\n  'xs': { fontSize: '2xs' },\n};\n\nconst defaultProps = {\n  size: 'sm',\n  variant: 'outline',\n};\n\n// Input\nexport const Input = {\n  baseStyle,\n  defaultProps,\n  variants,\n  sizes,\n};\n\nexport default {};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/inputleftaddon.ts",
    "content": "import { mode } from '../tools';\n\nconst baseStyle = (props: Record<string, any>) => {\n  return {\n    borderRightWidth: '0',\n    roundedLeft: '4',\n    bg: mode('gray.50', 'gray.700')(props),\n    p: '2',\n    borderColor: mode('gray.300', 'gray.600')(props),\n    borderWidth: '1',\n    _text: {\n      color: mode('muted.400', 'muted.500')(props),\n      fontWeight: 600,\n    },\n    alignItems: 'center',\n    justifyContent: 'center',\n  };\n};\n\nexport default { baseStyle };\n"
  },
  {
    "path": "src/theme/v33x-theme/components/inputrightaddon.ts",
    "content": "import { mode } from '../tools';\n\nconst baseStyle = (props: Record<string, any>) => {\n  return {\n    borderLeftWidth: '0',\n    roundedRight: '4',\n    bg: mode('gray.50', 'gray.700')(props),\n    p: '2',\n    borderColor: mode('gray.300', 'gray.600')(props),\n    borderWidth: '1',\n    _text: {\n      color: mode('muted.400', 'muted.500')(props),\n      fontWeight: 600,\n    },\n    alignItems: 'center',\n    justifyContent: 'center',\n  };\n};\n\nexport default { baseStyle };\n"
  },
  {
    "path": "src/theme/v33x-theme/components/kbd.ts",
    "content": "import { mode } from '../tools';\nimport { Platform } from 'react-native';\n\nfunction baseStyle(props: Record<string, any>) {\n  return {\n    bg: mode('muted.200', 'muted.700')(props),\n    borderColor: mode('muted.300', 'muted.600')(props),\n    borderWidth: 2,\n    borderBottomWidth: 4,\n    shadow: 1,\n    borderRadius: 'md',\n    px: 2,\n    _text: {\n      fontSize: 'sm',\n      fontWeight: 'bold',\n      fontFamily: Platform.OS === 'ios' ? 'Courier' : 'monospace',\n    },\n  };\n}\n\nconst defaultProps = {};\nexport default {\n  baseStyle,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/keyboardAvoidingView.ts",
    "content": "const baseStyle = {};\nconst defaultProps = {};\nexport default {\n  baseStyle,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/link.ts",
    "content": "const baseStyle = (props: Record<string, any>) => {\n  const { isUnderlined } = props;\n  return {\n    _text: {\n      textDecorationLine: isUnderlined ? 'underline' : 'none',\n    },\n    width: 'auto',\n    height: 'auto',\n  };\n};\n\nexport default {\n  baseStyle,\n  defaultProps: {\n    isUnderlined: true,\n  },\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/list.ts",
    "content": "import { mode } from '../tools';\n// List\nexport const List = {\n  baseStyle: (props: Record<string, any>) => {\n    return {\n      py: 2,\n      borderWidth: 1,\n      borderColor: 'gray.300',\n      _hover: { bg: mode('primary.100', 'primary.700')(props) },\n    };\n  },\n};\n\n// ListItem\nexport const ListItem = {\n  baseStyle: {\n    // borderTopWidth: 1,\n    py: 2,\n    borderColor: 'gray.300',\n  },\n  defaultProps: {\n    start: 1,\n  },\n};\n\n// ListIcon\nexport const ListIcon = {\n  baseStyle: {\n    mr: 8,\n    size: 'md',\n  },\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/menu.ts",
    "content": "import { Platform, StyleSheet } from 'react-native';\nimport { mode } from '../tools';\n\nfunction baseStyle(props: Record<string, any>) {\n  return {\n    bg: mode(`#fff`, `gray.700`)(props),\n    py: 2,\n    borderWidth: 1,\n    borderColor: mode(`coolGray.200`, `gray.600`)(props),\n    borderRadius: 'sm',\n    _presenceTransition: {\n      initial: { opacity: 0, translateY: -10 },\n      animate: {\n        opacity: 1,\n        translateY: 0,\n        transition: { duration: 200 },\n      },\n      exit: { opacity: 0, translateY: -10, transition: { duration: 150 } },\n      style: StyleSheet.absoluteFill,\n    },\n    _overlay: {},\n    _backdrop: {\n      bg: 'transparent',\n    },\n  };\n}\n\nexport default {\n  baseStyle,\n};\n\nexport const MenuGroup = {\n  baseStyle: (props: any) => ({\n    _title: {\n      fontSize: 'xs',\n      fontWeight: 600,\n      textTransform: 'uppercase',\n      color: mode(`gray.500`, `gray.300`)(props),\n    },\n    p: 3,\n  }),\n};\nexport const MenuItem = {\n  baseStyle: (props: any) => ({\n    px: 3,\n    py: 2,\n    outlineWidth: Platform.OS === 'web' ? 0 : undefined,\n    _stack: {\n      alignItems: 'center',\n      px: 3,\n      space: 3,\n    },\n    _disabled: {\n      _text: {\n        color: mode('gray.400', 'gray.400')(props),\n      },\n    },\n    _focus: {\n      bg: mode(`coolGray.200`, `gray.600`)(props),\n    },\n    _pressed: {\n      bg: mode(`coolGray.300`, `gray.500`)(props),\n    },\n    _icon: {\n      size: 4,\n      color: mode('gray.500', 'gray.100')(props),\n      opacity: 0,\n    },\n    _checked: {\n      _icon: {\n        opacity: 1,\n      },\n    },\n  }),\n  defaultProps: {},\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/modal.ts",
    "content": "import { Dimensions } from 'react-native';\nimport { mode } from '../tools';\n\nconst sizes = {\n  xs: {\n    contentSize: {\n      width: '60%',\n      maxWidth: '280',\n    },\n  },\n  sm: {\n    contentSize: {\n      width: '65%',\n      maxWidth: '320',\n    },\n  },\n  md: {\n    contentSize: {\n      width: '75%',\n      maxWidth: '380',\n    },\n  },\n  lg: {\n    contentSize: {\n      width: '80%',\n      maxWidth: '520',\n    },\n  },\n  xl: {\n    contentSize: {\n      width: '90%',\n      maxWidth: '580',\n    },\n  },\n  full: {\n    contentSize: {\n      width: '100%',\n    },\n  },\n};\n\nexport const Modal = {\n  baseStyle: {\n    width: '100%',\n    height: '100%',\n    justifyContent: 'center',\n    alignItems: 'center',\n    _web: { pointerEvents: 'box-none' },\n    _backdropFade: { exitDuration: 150, entryDuration: 200 },\n    _slide: { overlay: false, duration: 200 },\n    _fade: { exitDuration: 100, entryDuration: 200 },\n  },\n  sizes,\n  defaultProps: {\n    size: 'md',\n    closeOnOverlayClick: true,\n  },\n};\n\nexport const ModalContent = {\n  baseStyle: (props: Record<string, any>) => {\n    return {\n      bg: mode('coolGray.50', 'gray.700')(props),\n      _text: { color: mode('coolGray.800', 'warmGray.50')(props) },\n      shadow: 1,\n      rounded: 'lg',\n      maxHeight: `${Dimensions.get('window').height - 150}px`,\n      overflow: 'hidden',\n    };\n  },\n};\nexport const ModalCloseButton = {\n  baseStyle: (props: Record<string, any>) => {\n    return {\n      position: 'absolute',\n      right: '3',\n      top: '3',\n      zIndex: '1',\n      colorScheme: 'coolGray',\n      p: '2',\n      _icon: {\n        size: '3',\n        color: mode('coolGray.600', 'coolGray.100')(props),\n      },\n    };\n  },\n};\nexport const ModalHeader = {\n  baseStyle: (props: Record<string, any>) => {\n    return {\n      py: '4',\n      px: '3',\n      borderBottomWidth: '1',\n      borderColor: mode('coolGray.200', 'gray.600')(props),\n      _text: {\n        fontSize: 'md',\n        fontWeight: 'semibold',\n        color: mode('coolGray.800', 'warmGray.50')(props),\n        lineHeight: 'sm',\n      },\n    };\n  },\n};\nexport const ModalBody = {\n  baseStyle: (props: Record<string, any>) => {\n    return {\n      pt: '2',\n      p: '3',\n      _text: {\n        color: mode('coolGray.600', 'coolGray.300')(props),\n      },\n    };\n  },\n};\nexport const ModalFooter = {\n  baseStyle: (props: Record<string, any>) => {\n    return {\n      p: '3',\n      bg: mode('coolGray.100', 'gray.600')(props),\n      flexDirection: 'row',\n      justifyContent: 'flex-end',\n      flexWrap: 'wrap',\n    };\n  },\n};\nexport const ModalOverlay = {\n  baseStyle: {\n    position: 'absolute',\n    left: '0',\n    top: '0',\n    opacity: '50',\n    right: '0',\n    bottom: '0',\n  },\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/number-input.ts",
    "content": "import { mode } from '../tools';\n\nconst defaultProps = {\n  size: 'sm',\n  step: 1,\n  min: -Infinity,\n  max: Infinity,\n  defaultValue: '0',\n  keepWithinRange: true,\n  clampValueOnBlur: true,\n  focusInputOnChange: true,\n  getAriaValueText: true,\n};\n\nexport default {\n  defaultProps,\n};\n\n//Steppers\nconst stepperbaseStyle = (props: Record<string, any>) => {\n  return {\n    bg: mode('primary.600', 'primary.200')(props),\n    iconColor: mode('gray.50', 'gray.800')(props),\n    _active: {},\n    _disabled: {\n      // iconColor: mode('gray.50', 'gray.300')(props),\n      // bg: mode('blackAlpha.200', 'whiteAlpha.300')(props),\n      opacity: 0.5,\n    },\n  };\n};\n\nexport const NumberInputStepper = {\n  baseStyle: stepperbaseStyle,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/pin-input.ts",
    "content": "const defaultProps = {\n  placeholder: '○',\n  size: 'md',\n  manageFocus: true,\n  space: 1,\n};\n\nconst sizes = {\n  '2xl': {\n    fontSize: '2xl',\n    p: 3,\n    width: '56px',\n    height: '56px',\n    textAlign: 'center',\n    borderRadius: 'lg',\n  },\n  'xl': {\n    fontSize: 'xl',\n    p: 3,\n    width: '52px',\n    height: '52px',\n    textAlign: 'center',\n    borderRadius: 'lg',\n  },\n  'lg': {\n    fontSize: 'lg',\n    p: 2,\n    width: '48px',\n    height: '48px',\n    textAlign: 'center',\n    borderRadius: 'md',\n  },\n  'md': {\n    fontSize: 'md',\n    p: 2,\n    width: '40px',\n    height: '40px',\n    textAlign: 'center',\n    borderRadius: 'md',\n  },\n  'sm': {\n    fontSize: 'sm',\n    p: 1,\n    width: '30px',\n    height: '30px',\n    textAlign: 'center',\n    borderRadius: 'md',\n  },\n  'xs': {\n    fontSize: 'xs',\n    p: 1,\n    width: '24px',\n    height: '24px',\n    textAlign: 'center',\n    borderRadius: 'md',\n  },\n};\n\nexport default {\n  sizes,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/popover.ts",
    "content": "import { mode } from '../tools';\n\nexport const PopoverCloseButton = {\n  baseStyle: (props: any) => ({\n    position: 'absolute',\n    right: 3,\n    top: 3,\n    zIndex: 1,\n    colorScheme: 'coolGray',\n    p: 2,\n    _icon: {\n      size: 3,\n      color: mode('coolGray.600', 'coolGray.100')(props),\n    },\n  }),\n};\n\nexport const PopoverBody = {\n  baseStyle: (props: any) => ({\n    pt: '2',\n    p: '3',\n    _text: {\n      color: mode('coolGray.600', 'coolGray.300')(props),\n    },\n  }),\n};\n\nexport const PopoverContent = {\n  baseStyle: (props: any) => ({\n    backgroundColor: mode('coolGray.50', 'gray.700')(props),\n    borderColor: mode('coolGray.200', 'coolGray.600')(props),\n    _text: { color: mode('coolGray.800', 'warmGray.50')(props) },\n    borderWidth: 1,\n    rounded: 'md',\n    overflow: 'hidden',\n  }),\n};\n\nexport const PopoverHeader = {\n  baseStyle: (props: any) => ({\n    _web: {\n      accessibilityRole: 'header',\n    },\n    py: '4',\n    px: '3',\n    borderBottomWidth: '1',\n    borderColor: mode('coolGray.200', 'gray.600')(props),\n    _text: {\n      fontSize: 'md',\n      fontWeight: 'semibold',\n      color: mode('coolGray.800', 'warmGray.50')(props),\n      lineHeight: 'sm',\n    },\n  }),\n};\n\nexport const PopoverArrow = {\n  baseStyle: (props: any) => ({\n    borderColor: mode('coolGray.200', 'coolGray.600')(props),\n  }),\n};\n\nexport const PopoverFooter = {\n  baseStyle: (props: Record<string, any>) => {\n    return {\n      p: '3',\n      bg: mode('coolGray.100', 'gray.600')(props),\n      flexDirection: 'row',\n      justifyContent: 'flex-end',\n      flexWrap: 'wrap',\n    };\n  },\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/pressable.ts",
    "content": "export default {\n  baseStyle: {},\n  defaultProps: {},\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/progress.ts",
    "content": "import { mode, getColorScheme } from '../tools';\n\nconst defaultProps = {\n  colorScheme: 'primary',\n  size: 'sm',\n  rounded: 'full',\n  min: 0,\n  max: 100,\n  value: 0,\n  isIndeterminate: false,\n};\n\nfunction baseStyle(props: Record<string, any>) {\n  const colorScheme = getColorScheme(props);\n\n  return {\n    bg: `${colorScheme}.200`,\n    overflow: 'hidden',\n    _filledTrack: {\n      bg: mode(`${colorScheme}.600`, `${colorScheme}.500`)(props),\n      shadow: 0,\n      height: '100%',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      _text: {\n        color: 'white',\n        fontWeight: 'bold',\n      },\n    },\n  };\n}\n\nconst sizes = {\n  'xs': {\n    height: 1,\n  },\n  'sm': {\n    height: 2,\n  },\n  'md': {\n    height: 3,\n  },\n  'lg': {\n    height: 4,\n  },\n  'xl': {\n    height: 5,\n  },\n  '2xl': {\n    height: 6,\n  },\n};\n\nexport default {\n  baseStyle,\n  defaultProps,\n  sizes,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/radio-group.ts",
    "content": "const baseStyle = () => {\n  return {\n    alignItems: 'flex-start',\n  };\n};\n\nexport default {\n  baseStyle,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/radio.ts",
    "content": "import { mode } from '../tools';\n\nconst baseStyle = (props: Record<string, any>) => {\n  const { colorScheme } = props;\n  return {\n    borderWidth: 2,\n    borderRadius: 'full',\n    p: 0.5,\n    borderColor: mode('muted.300', 'muted.600')(props),\n    bg: mode('muted.50', 'muted.700')(props), // matching background color\n\n    _stack: {\n      direction: 'row',\n      alignItems: 'center',\n      space: 2,\n      _web: {\n        cursor: props.isDisabled ? 'not-allowed' : 'pointer',\n      },\n    },\n    _interactionBox: {\n      borderRadius: 'full',\n      size: 3,\n      position: 'absolute',\n      zIndex: -1,\n      _web: {\n        transition: 'height 200ms, width 200ms',\n        pointerEvents: 'none',\n      },\n    },\n    _icon: {\n      color: mode(`${colorScheme}.600`, `${colorScheme}.200`)(props), // matching background color\n    },\n    _hover: {\n      _interactionBox: {\n        bg: 'muted.200:alpha.30',\n        size: 8,\n      },\n    },\n    _focus: {\n      _interactionBox: {\n        bg: `${colorScheme}.200:alpha.50`,\n        size: 8,\n      },\n    },\n    _focusVisible: {\n      _interactionBox: {\n        bg: `${colorScheme}.200:alpha.50`,\n        size: 8,\n      },\n    },\n    _checked: {\n      borderColor: mode(`${colorScheme}.600`, `${colorScheme}.200`)(props),\n    },\n    _disabled: {\n      opacity: 0.4,\n      _interactionBox: {\n        bg: 'transparent',\n      },\n      _icon: {\n        bg: 'transparent',\n      },\n      _stack: {\n        opacity: '0.4',\n      },\n    },\n    _invalid: {\n      borderColor: mode('error.600', 'error.400')(props),\n    },\n    _pressed: {\n      _interactionBox: {\n        bg: `${colorScheme}.200:alpha.50`,\n        size: 10,\n      },\n    },\n  };\n};\n\nconst sizes = {\n  lg: {\n    _icon: { size: 4 },\n    // _interactionBox: { size: 5 },\n    _text: { fontSize: 'lg' },\n  },\n  md: {\n    _icon: { size: 3 },\n    // _interactionBox: { size: 16 },\n    _text: { fontSize: 'md' },\n  },\n  sm: {\n    _icon: { size: 2 },\n    // _interactionBox: { size: 3 },\n    _text: { fontSize: 'sm' },\n  },\n};\n\nconst defaultProps = {\n  defaultIsChecked: false,\n  size: 'md',\n  colorScheme: 'primary',\n};\n\nexport default {\n  baseStyle,\n  sizes,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/scrollView.ts",
    "content": "const baseStyle = {};\nconst defaultProps = {};\nexport default {\n  baseStyle,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/sectionList.ts",
    "content": "const baseStyle = {};\nconst defaultProps = {};\nexport default {\n  baseStyle,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/select.ts",
    "content": "import { mode } from '../tools';\nexport const Select = {\n  baseStyle: (props: Record<string, any>) => {\n    return {\n      _webSelect: {\n        appearance: 'none',\n        WebkitAppearance: 'none',\n        MozAppearance: 'none',\n        position: 'absolute',\n        width: '100%',\n        height: '100%',\n        opacity: 0,\n        zIndex: 1,\n      },\n      customDropdownIconProps: {\n        size: '6',\n        p: '1',\n        pl: '0',\n        color: 'trueGray.400',\n      },\n      _web: {\n        pointerEvents: 'none',\n      },\n      _disabled: {\n        opacity: '80',\n        bg: mode('muted.100', 'muted.700')(props),\n      },\n      _invalid: {\n        borderColor: mode('danger.600', 'danger.300')(props),\n      },\n      _focus: {\n        borderColor: mode('primary.400', 'primary.500')(props),\n      },\n      _hover: {\n        bg: mode('gray.100', 'gray.700')(props),\n      },\n      _actionSheetBody: {\n        w: '100%',\n      },\n      _actionSheetContent: {},\n    };\n  },\n  defaultProps: {\n    optimized: true,\n  },\n};\n\n// SelectIcon - only for custom variant\nexport const SelectItem = {\n  baseStyle: {\n    p: '1',\n    px: '2',\n    borderRadius: '0',\n    minH: '0',\n  },\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/simple-grid.ts",
    "content": "const baseStyle = {};\nconst defaultProps = {};\nexport default {\n  baseStyle,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/skeleton.ts",
    "content": "import { mode } from '../tools';\n\n// Skeleton\nexport const Skeleton = {\n  baseStyle: (props: Record<string, any>) => {\n    return {\n      startColor: mode('muted.200', 'muted.600')(props),\n      endColor: 'transparent',\n      overflow: 'hidden',\n      fadeDuration: 0.1,\n      speed: 1.0,\n      h: '10',\n      w: '100%',\n    };\n  },\n};\n\n// SkeletonText\nexport const SkeletonText = {\n  baseStyle: (props: Record<string, any>) => {\n    return {\n      startColor: mode('muted.200', 'muted.600')(props),\n      endColor: 'transparent',\n      fadeDuration: 0.1,\n      w: '100%',\n      speed: 1.0,\n      flexDirection: 'column',\n      _line: {\n        h: 3,\n        rounded: 'full',\n      },\n    };\n  },\n  defaultProps: {\n    lines: 3,\n    space: 3,\n  },\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/slider.ts",
    "content": "import { getColorScheme, mode } from '../tools';\nexport const SliderTrack = {\n  baseStyle: ({ isVertical, size, ...props }: any) => {\n    const simplifiedColorScheme = getColorScheme(props);\n    return {\n      bg: `${simplifiedColorScheme}.100`,\n      borderRadius: 'lg',\n      overflow: 'hidden',\n      style: {\n        height: isVertical ? '100%' : size,\n        width: !isVertical ? '100%' : size,\n      },\n      _pressable: {\n        alignItems: 'center',\n        justifyContent: 'center',\n        height: isVertical ? '100%' : size,\n        width: !isVertical ? '100%' : size,\n        py: !isVertical ? '3' : undefined,\n        px: isVertical ? '3' : undefined,\n      },\n    };\n  },\n};\n\nexport const SliderThumb = {\n  baseStyle: (props: any) => {\n    const simplifiedColorScheme = getColorScheme(props);\n    return {\n      borderRadius: 99999,\n      zIndex: 999,\n      alignItems: 'center',\n      justifyContent: 'center',\n      bg: mode(\n        `${simplifiedColorScheme}.600`,\n        `${simplifiedColorScheme}.300`\n      )(props),\n      scaleOnPressed: 1.2,\n    };\n  },\n};\n\nexport const SliderFilledTrack = {\n  baseStyle: ({\n    orientation,\n    isReversed,\n    sliderTrackPosition,\n    size,\n    ...props\n  }: any) => {\n    const simplifiedColorScheme = getColorScheme(props);\n    return {\n      bg: mode(\n        `${simplifiedColorScheme}.600`,\n        `${simplifiedColorScheme}.300`\n      )(props),\n      left: orientation !== 'vertical' && !isReversed ? 0 : undefined,\n      bottom: orientation === 'vertical' && !isReversed ? 0 : undefined,\n      right: orientation !== 'vertical' && isReversed ? 0 : undefined,\n      top: orientation === 'vertical' && isReversed ? 0 : undefined,\n      style:\n        orientation === 'vertical'\n          ? { height: sliderTrackPosition, width: size }\n          : { width: sliderTrackPosition, height: size },\n    };\n  },\n};\n\nconst sizes = {\n  lg: { thumbSize: 6, sliderSize: 6 },\n  md: { thumbSize: 5, sliderSize: 5 },\n  sm: { thumbSize: 4, sliderSize: 4 },\n};\n\nexport const Slider = {\n  baseStyle: (props: any) => {\n    return {\n      alignItems: 'center',\n      justifyContent: 'center',\n      height: props.orientation === 'vertical' ? '100%' : undefined,\n      width: props.orientation !== 'vertical' ? '100%' : undefined,\n    };\n  },\n  defaultProps: {\n    size: 'sm',\n  },\n  sizes,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/spinner.ts",
    "content": "export default {\n  baseStyle: {\n    color: 'primary.500',\n  },\n  sizes: {\n    sm: 'small',\n    lg: 'large',\n  },\n  defaultProps: {\n    size: 'small',\n  },\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/square.ts",
    "content": "const sizes = {\n  'xs': {\n    height: 10,\n    width: 10,\n  },\n  'sm': {\n    height: 12,\n    width: 12,\n  },\n  'md': {\n    height: 16,\n    width: 16,\n  },\n  'lg': {\n    height: 24,\n    width: 24,\n  },\n  'xl': {\n    height: 32,\n    width: 32,\n  },\n  '2xl': {\n    height: 40,\n    width: 40,\n  },\n};\n\nconst baseStyle = {\n  alignItems: 'center',\n  justifyContent: 'center',\n};\n\nexport default {\n  baseStyle,\n  sizes,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/stack.ts",
    "content": "const baseStyle = {};\nconst defaultProps = {};\n// sizes in stack means the height or width of the spacer elements that get's added between the children, in other\n// words it maps to space prop that user passes.\nconst sizes = {\n  'gutter': 0,\n  '2xs': 1,\n  'xs': 2,\n  'sm': 3,\n  'md': 4,\n  'lg': 6,\n  'xl': 7,\n  '2xl': 8,\n};\nexport default {\n  baseStyle,\n  defaultProps,\n  sizes,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/stat.ts",
    "content": "const defaultProps = {\n  _statLabel: {\n    fontSize: 'xl',\n  },\n  _statNumber: {\n    fontSize: '4xl',\n    fontWeight: 'bold',\n    my: 2,\n  },\n  _statHelpText: {\n    _text: {\n      color: 'gray.500',\n      fontSize: 'xl',\n    },\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n  _statGroup: {\n    flexWrap: 'wrap',\n    space: 4,\n    justifyContent: 'space-between',\n  },\n};\n\nexport default {\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/statusBar.ts",
    "content": "const baseStyle = {};\nconst defaultProps = {};\nexport default {\n  baseStyle,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/switch.ts",
    "content": "import { mode, getColorScheme } from '../tools';\nimport { Platform } from 'react-native';\n\nconst baseStyle = (props: Record<string, any>) => {\n  const colorScheme = getColorScheme(props);\n  //TODO: Use of Platform can be removed\n  return {\n    _disabled: {\n      opacity: 0.4,\n    },\n    _invalid: {\n      borderWidth: 1,\n      borderRadius: 16,\n      borderColor: 'danger.600',\n    },\n    offTrackColor: mode(\n      Platform.OS !== 'ios' ? 'gray.400' : 'gray.200',\n      Platform.OS !== 'ios' ? 'gray.700' : 'gray.600'\n    )(props),\n    onTrackColor: mode(\n      Platform.OS !== 'ios' ? `${colorScheme}.300` : `${colorScheme}.500`,\n      Platform.OS !== 'ios' ? `${colorScheme}.700` : `${colorScheme}.500`\n    )(props),\n    onThumbColor: mode(\n      Platform.OS !== 'ios' ? `${colorScheme}.600` : 'white',\n      Platform.OS !== 'ios' ? `${colorScheme}.500` : 'white'\n    )(props),\n    offThumbColor: mode(\n      Platform.OS !== 'ios' ? 'gray.100' : 'white',\n      Platform.OS !== 'ios' ? 'gray.200' : 'white'\n    )(props),\n  };\n};\n\nconst sizes = {\n  sm: {\n    style: {\n      transform: [{ scale: 0.75 }],\n    },\n  },\n  md: {},\n  lg: {\n    style: {\n      transform: [{ scale: 1.25 }],\n    },\n    margin: 1,\n  },\n};\n\nconst defaultProps = {\n  size: 'md',\n  colorScheme: 'primary',\n};\n\nexport default {\n  baseStyle,\n  sizes,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/tabs.ts",
    "content": "import { getColorFormColorScheme, getColorScheme, mode } from '../tools';\n\nfunction baseStyle(props: Record<string, any>) {\n  const activeColor = getColorFormColorScheme(props);\n  return {\n    activeTabStyle: {\n      justifyContent: 'center',\n      alignItems: 'center',\n      mb: '-2px',\n      flexDirection: 'row',\n      _text: { fontSize: 'sm', fontWeight: 'bold' },\n    },\n    inactiveTabStyle: {\n      justifyContent: 'center',\n      alignItems: 'center',\n      mb: '-2px',\n      flexDirection: 'row',\n      _text: {\n        color: mode('gray.500', 'gray.400')(props),\n        fontSize: 'sm',\n        fontWeight: 'bold',\n      },\n    },\n    activeIconProps: {\n      color: activeColor,\n      name: 'home',\n      mx: 2,\n    },\n    inactiveIconProps: {\n      name: 'home',\n      mx: 2,\n    },\n  };\n}\n\nconst sizes = {\n  sm: {\n    activeTabStyle: {\n      _text: { fontSize: 'sm' },\n      py: 2,\n      px: 3,\n    },\n    inactiveTabStyle: {\n      _text: { fontSize: 'sm' },\n      py: 2,\n      px: 3,\n    },\n  },\n  md: {\n    activeTabStyle: {\n      _text: { fontSize: 'md' },\n      py: 3,\n      px: 4,\n    },\n    inactiveTabStyle: {\n      _text: { fontSize: 'md' },\n      py: 3,\n      px: 4,\n    },\n  },\n  lg: {\n    activeTabStyle: {\n      _text: { fontSize: 'lg' },\n      py: 4,\n      px: 5,\n    },\n    inactiveTabStyle: {\n      _text: { fontSize: 'lg' },\n      py: 4,\n      px: 5,\n    },\n  },\n};\n\nfunction variantOutline(props: Record<string, any>) {\n  const activeColor = getColorFormColorScheme(props);\n  let { colorScheme, status } = props;\n  colorScheme = getColorScheme(\n    props,\n    colorScheme !== 'primary' ? colorScheme : status\n  );\n  return {\n    activeTabStyle: {\n      borderColor: activeColor,\n      _text: {\n        color: mode(`${colorScheme}.600`, `${colorScheme}.200`)(props),\n      },\n      _hover: {\n        bg: mode(`${colorScheme}.50`, `${colorScheme}.800`)(props),\n      },\n      borderBottomWidth: 2,\n    },\n    inactiveTabStyle: {\n      borderColor: 'transparent',\n      borderBottomWidth: 2,\n      _hover: {\n        bg: mode(`${colorScheme}.50`, `${colorScheme}.800`)(props),\n      },\n    },\n    tabBarStyle: {\n      borderBottomWidth: 2,\n      borderColor: mode('muted.200', 'muted.500')(props),\n    },\n  };\n}\n\nfunction variantFilled(props: Record<string, any>) {\n  const activeColor = getColorFormColorScheme(props);\n  let { colorScheme, status } = props;\n  colorScheme = getColorScheme(\n    props,\n    colorScheme !== 'primary' ? colorScheme : status\n  );\n  return {\n    activeTabStyle: {\n      borderColor: activeColor,\n      _text: { color: mode(`${colorScheme}.600`, `${colorScheme}.200`)(props) },\n      _hover: {\n        bg: mode(`${colorScheme}.50`, `${colorScheme}.800`)(props),\n      },\n      borderBottomWidth: 2,\n      bg: mode(`${colorScheme}.100`, `${colorScheme}.700`)(props),\n    },\n    inactiveTabStyle: {\n      borderColor: 'transparent',\n      borderBottomWidth: 2,\n      _hover: {\n        bg: mode(`${colorScheme}.50`, `${colorScheme}.800`)(props),\n      },\n    },\n    tabBarStyle: {\n      borderBottomWidth: 2,\n      borderColor: mode('muted.200', 'muted.500')(props),\n    },\n  };\n}\n\n// function variantEnclosed(props: Record<string, any>) {\n//   const activeColor = getColorFormColorScheme(props);\n//   return {\n//     activeTabStyle: {\n//       borderTopWidth: 2,\n//       borderLeftWidth: 2,\n//       borderRightWidth: 2,\n//       borderColor: activeColor,\n//     },\n//     inactiveTabStyle: {\n//       borderColor: 'muted.200',\n//       borderBottomWidth: 2,\n//     },\n//     tabBarStyle: {},\n//   };\n// }\n\nfunction variantFilledOutline(props: Record<string, any>) {\n  const activeColor = getColorFormColorScheme(props);\n  let { colorScheme, status } = props;\n  colorScheme = getColorScheme(\n    props,\n    colorScheme !== 'primary' ? colorScheme : status\n  );\n  return {\n    activeTabStyle: {\n      borderColor: activeColor,\n      _text: { color: mode(`${colorScheme}.600`, `${colorScheme}.200`)(props) },\n      _hover: {\n        bg: mode(`${colorScheme}.50`, `${colorScheme}.800`)(props),\n      },\n      borderBottomWidth: 2,\n    },\n    inactiveTabStyle: {\n      borderColor: 'transparent',\n      borderBottomWidth: 2,\n      _hover: {\n        bg: mode(`${colorScheme}.50`, `${colorScheme}.800`)(props),\n      },\n    },\n    tabBarStyle: {\n      borderBottomWidth: 2,\n      borderColor: mode('muted.200', 'muted.500')(props),\n      bg: mode(`${colorScheme}.100`, `${colorScheme}.700`)(props),\n    },\n  };\n}\n\n// function varientSoftRounded(props: Record<string, any>) {\n//   const activeColor = getColorFormColorScheme(props);\n//   return {\n//     activeTabStyle: {\n//       borderRadius: 'full',\n//       bg: transparentize(activeColor, 0.7)(props.theme),\n//       color: 'white',\n//     },\n//     inactiveTabStyle: {},\n//     tabBarStyle: {},\n//   };\n// }\n\n// function varientSolidRounded(props: Record<string, any>) {\n//   const activeColor = getColorFormColorScheme(props);\n//   return {\n//     activeTabStyle: {\n//       borderRadius: 'full',\n//       bg: activeColor,\n//       color: 'white',\n//     },\n//     inactiveTabStyle: {},\n//     tabBarStyle: {},\n//   };\n// }\n\n// function varientSolidBox(props: Record<string, any>) {\n//   const activeColor = getColorFormColorScheme(props);\n//   return {\n//     activeTabStyle: {\n//       bg: activeColor,\n//       color: 'white',\n//     },\n//     inactiveTabStyle: {},\n//     tabBarStyle: {},\n//   };\n// }\n\nconst variants = {\n  'outline': variantOutline,\n  'filled': variantFilled,\n  'filled-outline': variantFilledOutline,\n  // 'soft-rounded': varientSoftRounded,\n  // 'solid-rounded': varientSolidRounded,\n  // 'solid-box': varientSolidBox,\n};\n\nconst defaultProps = {\n  size: 'md',\n  variant: 'outline',\n  colorScheme: 'primary',\n};\n\nexport default {\n  baseStyle,\n  variants,\n  sizes,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/tag.ts",
    "content": "import Badge from './badge';\n\nconst { variants } = Badge;\nconst baseStyle = {\n  _text: {\n    fontWeight: 'medium',\n    // lineHeight: 1.2,\n  },\n  alignItems: 'center',\n  justifyContent: 'center',\n  flexDirection: 'row',\n  display: 'flex',\n};\nconst sizes = {\n  sm: {\n    minH: 5,\n    minW: 5,\n    _text: {\n      fontSize: 'xs',\n    },\n    p: 1,\n    borderRadius: 'sm',\n  },\n  md: {\n    minH: 6,\n    minW: 6,\n    _text: {\n      fontSize: 'sm',\n    },\n    borderRadius: 'md',\n    p: 2,\n  },\n  lg: {\n    minH: 8,\n    minW: 8,\n    _text: {\n      fontSize: 'md',\n    },\n    borderRadius: 'md',\n    p: 3,\n  },\n};\n\nconst defaultProps = {\n  size: 'md',\n  variant: 'subtle',\n  colorScheme: 'primary',\n};\n\nexport default {\n  variants,\n  baseStyle,\n  sizes,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/text.ts",
    "content": "import { mode } from '../tools';\n\nconst baseStyle = (props: Record<string, any>) => {\n  return {\n    color: mode('coolGray.800', 'warmGray.50')(props),\n    fontWeight: '400',\n    fontFamily: 'body',\n    fontStyle: 'normal',\n    fontSize: 'sm',\n    letterSpacing: 'md',\n    lineHeight: 'lg',\n  };\n};\nconst defaultProps = {};\n\nexport default { baseStyle, defaultProps };\n"
  },
  {
    "path": "src/theme/v33x-theme/components/textField.ts",
    "content": "import { mode } from '../tools';\n\n// TextField\nconst baseStyle = (props: Record<string, any>) => {\n  return {\n    _errorMessageProps: {\n      mt: 1,\n      ml: 3,\n      fontSize: 'xs',\n      color: 'error.400',\n    },\n    _helperTextProps: {\n      mt: 1,\n      ml: 3,\n      fontSize: 'xs',\n      color: mode('muted.400', 'muted.500')(props),\n    },\n  };\n};\n\nexport const TextField = {\n  baseStyle,\n  defaultProps: {\n    component: 'input',\n  },\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/textarea.ts",
    "content": "import { Platform } from 'react-native';\n\nconst baseStyle = {\n  multiline: true,\n  p: '2',\n  totalLines: 4,\n  h: Platform.select({ ios: 20 }),\n  textAlignVertical: 'top',\n};\n\nexport default { baseStyle };\n"
  },
  {
    "path": "src/theme/v33x-theme/components/toast.ts",
    "content": "import { mode } from '../tools';\n\nconst baseStyle = (props: Record<string, any>) => {\n  return {\n    bg: mode(`coolGray.600`, `warmGray.200`)(props),\n    p: '2',\n    rounded: 'sm',\n    shadow: 1,\n    _title: {\n      color: mode(`warmGray.200`, `coolGray.600`)(props),\n      fontWeight: 700,\n    },\n    _description: {\n      color: mode(`warmGray.200`, `coolGray.600`)(props),\n      fontWeight: 400,\n    },\n    _closeIcon: {\n      size: 4,\n    },\n  };\n};\n\nexport const Toast = {\n  baseStyle,\n  defaultProps: {},\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/tooltip.ts",
    "content": "import { mode } from '../tools';\n\nconst baseStyle = (props: any) => {\n  return {\n    bg: mode(`gray.700`, `gray.300`)(props),\n    py: 1,\n    px: 2,\n    rounded: 'sm',\n    shadow: 1,\n    _text: {\n      color: mode(`gray.300`, `gray.700`)(props),\n      fontSize: 'sm',\n    },\n  };\n};\n\nexport const Tooltip = {\n  baseStyle,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/transitions.ts",
    "content": "//Fade\n// const fadeDefaultProps = {\n//   entryDuration: 500,\n//   exitDuration: 500,\n// };\n\nexport const fadeBaseStyle = {\n  initial: { opacity: 0 },\n  animate: { opacity: 1, transition: { duration: 500 } },\n  exit: { opacity: 0, transition: { duration: 500 } },\n};\nexport const Fade = {\n  baseStyle: fadeBaseStyle,\n};\n\n//ScaleFade\n//Can be commented if not used anywhere else\n// const scaleFadeDefaultProps = {\n//   duration: 500,\n//   initialScale: 0.9,\n// };\n\nconst scaleBaseStyle = {\n  initial: { opacity: 0, scale: 0.9 },\n  animate: { opacity: 1, scale: 1, transition: 500 },\n  exit: { opacity: 0, scale: 0.9, transition: 500 },\n};\nexport const ScaleFade = {\n  baseStyle: scaleBaseStyle,\n};\n\n//Slide\nconst slideDefaultProps = {\n  duration: 500,\n  placement: 'bottom',\n  overlay: true,\n  _overlay: { isOpen: true },\n};\n\nexport const Slide = {\n  baseStyle: {\n    h: '100%',\n    pointerEvents: 'box-none',\n    _overlay: { style: { overflow: 'hidden' } },\n  },\n  defaultProps: slideDefaultProps,\n};\n\n//SlideFade\nconst slideFadeDefaultProps = {\n  duration: 500,\n  offsetX: 10,\n  offsetY: 10,\n};\n\nexport const SlideFade = {\n  defaultProps: slideFadeDefaultProps,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/typeahead.ts",
    "content": "import { mode } from '../tools/colors';\n\nconst typeaheadSearchItemBaseStyle = (props: Record<string, any>) => {\n  return {\n    backgroundColor: mode('gray.100', 'gray.600')(props),\n    _focus: {\n      backgroundColor: mode('primary.300', 'primary.700')(props),\n    },\n    _disabled: {\n      backgroundColor: 'gray.200',\n    },\n  };\n};\n\nexport const TypeAheadSearchItem = {\n  baseStyle: typeaheadSearchItemBaseStyle,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/view.ts",
    "content": "const baseStyle = {};\nconst defaultProps = {};\nexport default {\n  baseStyle,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/vstack.ts",
    "content": "const baseStyle = {};\nconst defaultProps = {};\nexport default {\n  baseStyle,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/wrap.ts",
    "content": "// Wrap\nexport const Wrap = {};\n"
  },
  {
    "path": "src/theme/v33x-theme/components/zstack.ts",
    "content": "const baseStyle = {};\nconst defaultProps = {};\nexport default {\n  baseStyle,\n  defaultProps,\n};\n"
  },
  {
    "path": "src/theme/v33x-theme/index.ts",
    "content": "import base from './base';\nimport components from './components';\nimport * as tools from './tools';\n//@ts-ignore\nimport type { ColorModeOptions } from './../core/color-mode/types';\n\nconst config: ColorModeOptions = {\n  useSystemColorMode: false, // TODO: implement this\n  initialColorMode: 'light',\n  accessibleColors: false,\n};\n\nconst v33xTheme = {\n  ...base,\n  components,\n  config,\n};\n\nexport type V33xTheme = typeof v33xTheme & { fontConfig: any };\n\nexport interface ICustomTheme {}\n\nexport interface IV33xTheme\n  extends ICustomTheme,\n    Omit<V33xTheme, keyof ICustomTheme> {}\n\nexport { v33xTheme, tools as themeTools };\n"
  },
  {
    "path": "src/theme/v33x-theme/tools/colors.ts",
    "content": "import get from 'lodash.get';\nimport isEmpty from 'lodash.isempty';\nimport Color from 'tinycolor2';\nimport type { Dict } from './utils';\n\nexport function mode(light: any, dark: any) {\n  return (props: any) => (props.colorMode === 'dark' ? dark : light);\n}\n\nexport const transparentize = (color: string, opacity: number) => (\n  theme: Dict\n) => {\n  const raw = getColor(theme, color);\n  return Color(raw).setAlpha(opacity).toRgbString();\n};\n\nexport const getColor = (theme: Dict, color: string, fallback?: string) => {\n  const hex = get(theme, `colors.${color}`, color);\n  const isValid = Color(hex).isValid();\n  return isValid ? hex : fallback;\n};\n\nexport const tone = (color: string) => (theme: Dict) => {\n  const hex = getColor(theme, color);\n  const isDark = Color(hex).isDark();\n  return isDark ? 'dark' : 'light';\n};\n\nexport const isDark = (color: string) => (theme: Dict) =>\n  tone(color)(theme) === 'dark';\n\nexport const isLight = (color: string) => (theme: Dict) =>\n  tone(color)(theme) === 'light';\n\ninterface RandomColorOptions {\n  /**\n   * If passed, string will be used to generate\n   * random color\n   */\n  string?: string;\n  /**\n   * List of colors to pick from at random\n   */\n  colors?: string[];\n}\nexport function randomColor(opts?: RandomColorOptions) {\n  const fallback = Color.random().toHexString();\n\n  if (!opts || isEmpty(opts)) {\n    return fallback;\n  }\n\n  if (opts.string && opts.colors) {\n    return randomColorFromList(opts.string, opts.colors);\n  }\n\n  if (opts.string && !opts.colors) {\n    return randomColorFromString(opts.string);\n  }\n\n  if (opts.colors && !opts.string) {\n    return randomFromList(opts.colors);\n  }\n\n  return fallback;\n}\n\nfunction randomFromList(list: string[]) {\n  return list[Math.floor(Math.random() * list.length)];\n}\n\nfunction randomColorFromList(str: string, list: string[]) {\n  let index = 0;\n  if (str.length === 0) return list[0];\n  for (let i = 0; i < str.length; i++) {\n    index = str.charCodeAt(i) + ((index << 5) - index);\n    index = index & index;\n  }\n  index = ((index % list.length) + list.length) % list.length;\n  return list[index];\n}\n\nfunction randomColorFromString(str: string) {\n  let hash = 0;\n  if (str.length === 0) return hash.toString();\n  for (let i = 0; i < str.length; i++) {\n    hash = str.charCodeAt(i) + ((hash << 5) - hash);\n    hash = hash & hash;\n  }\n  let color = '#';\n  for (let j = 0; j < 3; j++) {\n    const value = (hash >> (j * 8)) & 255;\n    color += ('00' + value.toString(16)).substr(-2);\n  }\n  return color;\n}\n"
  },
  {
    "path": "src/theme/v33x-theme/tools/index.ts",
    "content": "export * from './colors';\nexport * from './utils';\n"
  },
  {
    "path": "src/theme/v33x-theme/tools/platformUnits.test.js",
    "content": "import { Platform } from 'react-native';\nimport theme from '../base';\nimport { platformSpecificSpaceUnits } from './utils';\n\ndescribe('platform units on native', () => {\n  it('should convert px to absolute on native', () => {\n    Platform.OS = 'ios';\n    const newTheme = { ...theme };\n    newTheme.space = { xs: '1px' };\n    const convertedTheme = platformSpecificSpaceUnits(newTheme);\n    expect(convertedTheme.space).toEqual({ xs: 1 });\n  });\n\n  it('should convert rem to absolute on native', () => {\n    Platform.OS = 'ios';\n    const newTheme = { ...theme };\n    newTheme.space = { xs: '2rem' };\n    const convertedTheme = platformSpecificSpaceUnits(newTheme);\n    expect(convertedTheme.space).toEqual({ xs: 32 });\n  });\n});\n\ndescribe('platform units on web', () => {\n  it('should not convert px to rem on web', () => {\n    Platform.OS = 'web';\n    const newTheme = { ...theme };\n    newTheme.space = { xs: '23px' };\n    const convertedTheme = platformSpecificSpaceUnits(newTheme);\n    expect(convertedTheme.space).toEqual({ xs: '23px' });\n  });\n\n  it('should convert absolute to rem on web', () => {\n    Platform.OS = 'web';\n    const newTheme = { ...theme };\n    newTheme.space = { xs: 23 };\n    const convertedTheme = platformSpecificSpaceUnits(newTheme);\n    expect(convertedTheme.space).toEqual({ xs: '1.4375rem' });\n  });\n});\n"
  },
  {
    "path": "src/theme/v33x-theme/tools/utils.ts",
    "content": "import omitBy from 'lodash.omitby';\nimport isNil from 'lodash.isnil';\nimport pick from 'lodash.pick';\nimport omit from 'lodash.omit';\nimport get from 'lodash.get';\nimport type { IV33xTheme } from '../index';\nimport { Platform } from 'react-native';\n\nexport const stylingProps = {\n  margin: [\n    'margin',\n    'm',\n    'marginTop',\n    'mt',\n    'marginRight',\n    'mr',\n    'marginBottom',\n    'mb',\n    'marginLeft',\n    'ml',\n    'marginX',\n    'mx',\n    'marginY',\n    'my',\n  ],\n  padding: [\n    'padding',\n    'p',\n    'paddingTop',\n    'pt',\n    'paddingRight',\n    'pr',\n    'paddingBottom',\n    'pb',\n    'paddingLeft',\n    'pl',\n    'paddingX',\n    'px',\n    'paddingY',\n    'py',\n  ],\n  border: [\n    'border',\n    'borderWidth',\n    'borderStyle',\n    'borderColor',\n    'borderRadius',\n    'borderTop',\n    'borderTopWidth',\n    'borderTopStyle',\n    'borderTopColor',\n    'borderTopLeftRadius',\n    'borderTopRightRadius',\n    'borderRight',\n    'borderRightWidth',\n    'borderRightStyle',\n    'borderRightColor',\n    'borderBottom',\n    'borderBottomWidth',\n    'borderBottomStyle',\n    'borderBottomColor',\n    'borderBottomLeftRadius',\n    'borderBottomRightRadius',\n    'borderLeft',\n    'borderLeftWidth',\n    'borderLeftStyle',\n    'borderLeftColor',\n    'borderX',\n    'borderY',\n  ],\n  layout: [\n    'width',\n    'w',\n    'height',\n    'h',\n    'display',\n    'minWidth',\n    'minW',\n    'minH',\n    'minHeight',\n    'maxWidth',\n    'maxW',\n    'maxHeight',\n    'maxH',\n    'size',\n    'verticalAlign',\n    'overflow',\n    'overflowX',\n    'overflowY',\n  ],\n  flexbox: [\n    'alignItems',\n    'alignContent',\n    'justifyItems',\n    'justifyContent',\n    'flexWrap',\n    'flexDirection',\n    'flex',\n    'flexGrow',\n    'flexShrink',\n    'flexBasis',\n    'justifySelf',\n    'alignSelf',\n    'order',\n  ],\n  position: ['position', 'zIndex', 'top', 'right', 'bottom', 'left'],\n  background: ['bg', 'backgroundColor', 'bgColor'],\n};\nexport type Dict = Record<string, any>;\nexport function omitUndefined(obj: any) {\n  return omitBy(obj, isNil);\n}\nexport function getRandomString(length: number) {\n  var result = '';\n  var characters =\n    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';\n  var charactersLength = characters.length;\n  for (var i = 0; i < length; i++) {\n    result += characters.charAt(Math.floor(Math.random() * charactersLength));\n  }\n  return result;\n}\n// Inefficient way for pick, but retains order of props.\nfunction orderedPick(obj: any, values: any) {\n  const ret: any = {};\n  Object.keys(obj).forEach((key: string) => {\n    if (values.includes(key)) {\n      ret[key] = obj[key];\n    }\n  });\n  return ret;\n}\nexport function orderedExtractInObject(parent: any, values: Array<string>) {\n  return [\n    omitUndefined(orderedPick(parent, values)),\n    omitUndefined(omit(parent, values)),\n  ];\n}\n/**\n *\n * @param parent The object from which data needs to extracted\n * @param values Keys which needs to be extracted\n * @returns [extractedProps, remainingProps]\n */\nexport function extractInObject(parent: any, values: Array<string>) {\n  return [\n    omitUndefined(pick(parent, values)),\n    omitUndefined(omit(parent, values)),\n  ];\n}\nexport function getColorFormColorScheme(props: Record<string, any>) {\n  const { theme, colorScheme, isDisabled } = props;\n  const simpleColorScheme = colorScheme.split('.')[0];\n  if (isDisabled) return 'gray.300';\n  else if (simpleColorScheme in theme.colors) {\n    return theme.colors[simpleColorScheme][0] === '#'\n      ? simpleColorScheme\n      : theme.colors[simpleColorScheme][400] ||\n          theme.colors[simpleColorScheme][200];\n  } else return 'primary.200';\n}\n\n// TODO: This function can be removed.\nexport function getColorScheme(\n  props: Record<string, any>,\n  customColorScheme?: string\n) {\n  let { theme, colorScheme } = props;\n  colorScheme = customColorScheme || colorScheme;\n  if (!(colorScheme in theme.colors)) return 'primary';\n  else {\n    if (typeof theme.colors[colorScheme] === 'object') return colorScheme;\n  }\n}\nexport const inValidBreakpointProps = ['style', 'children', 'shadowOffset'];\nexport function hasValidBreakpointFormat(\n  breaks: any,\n  themeBreakpoints?: any,\n  property?: string\n) {\n  if (property && inValidBreakpointProps.indexOf(property) !== -1) {\n    return false;\n  } else if (Array.isArray(breaks)) {\n    return breaks.length ? true : false;\n  } else if (typeof breaks === 'object' && breaks !== null) {\n    const keys = Object.keys(breaks);\n    const themeBreakPointKeys = Object.keys(themeBreakpoints);\n    for (let i = 0; i < keys.length; i++) {\n      if (themeBreakPointKeys.indexOf(keys[i]) === -1) {\n        return false;\n      }\n    }\n    return true;\n  } else {\n    return false;\n  }\n}\nexport function findLastValidBreakpoint(\n  values: any,\n  themeBreakpoints: any,\n  currentBreakpoint: number\n) {\n  const valArray = Array.isArray(values)\n    ? values\n    : Object.keys(themeBreakpoints).map((bPoint: string) => values[bPoint]);\n  return (\n    valArray[currentBreakpoint] ??\n    valArray\n      .slice(0, currentBreakpoint + 1)\n      .filter((v: any) => !isNil(v))\n      .pop()\n  );\n}\nexport function getClosestBreakpoint(\n  values: Record<string, any>,\n  point: number\n) {\n  const dimValues = Object.values(values);\n  let index = -1;\n  let breakpointsObj: any = {};\n  for (let i = 0; i < dimValues.length; i++) {\n    breakpointsObj[dimValues[i]] = i;\n  }\n  const breakpoints = Object.keys(breakpointsObj);\n  for (let i = 0; i < breakpoints.length; i++) {\n    if (parseInt(breakpoints[i]) === point) {\n      index = breakpointsObj[breakpoints[i]];\n      break;\n    } else if (parseInt(breakpoints[i]) > point && i !== 0) {\n      index = breakpointsObj[breakpoints[i - 1]];\n      break;\n    }\n    // If windowWidth is greater than last available breakpoint clamp it to last index\n    else if (parseInt(breakpoints[i]) < point && i === dimValues.length - 1) {\n      index = breakpointsObj[breakpoints[i]];\n      break;\n    }\n  }\n  return index;\n}\n\nexport const baseFontSize = 16;\n\nexport const convertAbsoluteToRem = (px: number) => {\n  return `${px / baseFontSize}rem`;\n};\n\nexport const convertRemToAbsolute = (rem: number) => {\n  return rem * baseFontSize;\n};\n\nexport const convertToDp = (value: number | string): number => {\n  const numberRegex = /^\\d+$/;\n\n  if (typeof value === 'number') {\n    return value;\n  } else {\n    const isAbsolute = numberRegex.test(value);\n    const isPx = !isAbsolute && value.endsWith('px');\n    const isRem = !isAbsolute && value.endsWith('rem');\n    const isEm = !isAbsolute && value.endsWith('em');\n\n    let finalDpValue = 0;\n\n    if (isAbsolute || isPx) {\n      finalDpValue = parseFloat(value);\n    } else if (isEm) {\n      finalDpValue = convertRemToAbsolute(parseFloat(value));\n    } else if (isRem) {\n      finalDpValue = convertRemToAbsolute(parseFloat(value));\n    }\n\n    return finalDpValue;\n  }\n};\n\n/**\n *\n * @param theme\n * @description\n  - Converts space/sizes/lineHeights/letterSpacings/fontSizes to `rem` on web if the token value specified is an absolute number.\n  - Converts space/sizes/lineHeights/letterSpacings/fontSizes to absolute number on native if the token value specified is in `px` or `rem`\n*/\nexport const platformSpecificSpaceUnits = (theme: IV33xTheme) => {\n  const scales = ['space', 'sizes', 'fontSizes'];\n\n  const newTheme = { ...theme };\n  const isWeb = Platform.OS === 'web';\n  scales.forEach((key) => {\n    const scale = get(theme, key, {});\n    const newScale = { ...scale };\n    for (const scaleKey in scale) {\n      const val = scale[scaleKey];\n      if (typeof val !== 'object') {\n        const isAbsolute = typeof val === 'number';\n        const isPx = !isAbsolute && val.endsWith('px');\n        const isRem = !isAbsolute && val.endsWith('rem');\n\n        // If platform is web, we need to convert absolute unit to rem. e.g. 16 to 1rem\n        if (isWeb) {\n          if (isAbsolute) {\n            newScale[scaleKey] = convertAbsoluteToRem(val);\n          }\n        }\n        // If platform is not web, we need to convert px unit to absolute and rem unit to absolute. e.g. 16px to 16. 1rem to 16.\n        else {\n          if (isRem) {\n            newScale[scaleKey] = convertRemToAbsolute(parseFloat(val));\n          } else if (isPx) {\n            newScale[scaleKey] = parseFloat(val);\n          }\n        }\n      }\n    }\n    //@ts-ignore\n    newTheme[key] = newScale;\n  });\n\n  return newTheme;\n};\nexport function isResponsiveAnyProp(props: Record<string, any>, theme: any) {\n  if (props) {\n    const keys = Object.keys(props);\n    for (let i = 0; i < keys.length; i++) {\n      if (\n        hasValidBreakpointFormat(props[keys[i]], theme.breakpoints, keys[i])\n      ) {\n        return true;\n      }\n    }\n  }\n\n  return false;\n}\n"
  },
  {
    "path": "src/utils/accessibilityTypes.ts",
    "content": "import type { AccessibilityRole, AccessibilityState } from 'react-native';\n\nexport type IAccessibilityProps = {\n  accessible?: boolean;\n  accessibilityRole?: AccessibilityRole;\n  accessibilityState?: AccessibilityState;\n  accessibilityLabel?: string;\n  accessibilityHint?: string;\n};\n"
  },
  {
    "path": "src/utils/accessibilityUtils.ts",
    "content": "export const ariaAttr = (condition: boolean | undefined) =>\n  condition ? true : undefined;\n"
  },
  {
    "path": "src/utils/addTextAndPropsToStrings.tsx",
    "content": "import React from 'react';\nimport Text from '../components/primitives/Text';\n\nexport const addTextAndPropsToStrings = (children: any, props: any) => {\n  const childArray = React.Children.map(children, (child) => {\n    if (typeof child === 'string' || typeof child === 'number') {\n      return <Text {...props}>{child}</Text>;\n    } else {\n      if (!child) {\n        return null;\n      }\n      return React.cloneElement(child, {\n        ...props,\n        ...child.props,\n      });\n    }\n  });\n  return childArray;\n};\n"
  },
  {
    "path": "src/utils/canUseDom.ts",
    "content": "import { Platform } from 'react-native';\n\nexport function canUseDom() {\n  if (typeof window !== 'undefined' || Platform.OS !== 'web') {\n    return true;\n  }\n  return false;\n}\n"
  },
  {
    "path": "src/utils/combineContextAndProps.ts",
    "content": "export const combineContextAndProps = (context: any, props: any) => {\n  return {\n    ...context,\n    ...props,\n  };\n};\n"
  },
  {
    "path": "src/utils/convertStringNumberToNumber.ts",
    "content": "// For backward compatibility with 3.0 of props like non token string numbers `<Box mt={\"39\"} />` => used to get applied as 39px. RN expects fontWeight to be string and crashes with numbers\n// https://reactnative.dev/docs/text-style-props#fontweight\nexport const convertStringNumberToNumber = (key: string, value: string) => {\n  if (\n    typeof value === 'string' &&\n    key !== 'fontWeight' &&\n    value &&\n    !isNaN(Number(value))\n  ) {\n    return parseFloat(value);\n  }\n\n  return value;\n};\n"
  },
  {
    "path": "src/utils/createContext.tsx",
    "content": "import React from 'react';\n\nfunction createContext<ContextValueType extends object>(\n  rootComponentName: string\n) {\n  const Context = React.createContext<ContextValueType>(null as any);\n\n  function Provider(props: ContextValueType & { children: React.ReactNode }) {\n    const { children, ...providerProps } = props;\n    // Only re-memoize when prop values change\n    const value = React.useMemo(\n      () => providerProps,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      Object.values(providerProps)\n    ) as ContextValueType;\n    return <Context.Provider value={value}>{children}</Context.Provider>;\n  }\n\n  function useContext(consumerName: string) {\n    const context = React.useContext(Context);\n    if (context === null) {\n      throw new Error(\n        `\\`${consumerName}\\` must be used within \\`${rootComponentName}\\``\n      );\n    }\n    return context;\n  }\n\n  Provider.displayName = rootComponentName + 'Provider';\n  return [Provider, useContext] as const;\n}\n\nexport { createContext };\n"
  },
  {
    "path": "src/utils/filterShadowProps.ts",
    "content": "import { extractInObject } from './../theme/tools/';\nimport isEmpty from 'lodash.isempty';\n\nexport const filterShadowProps = (\n  props: any,\n  ignoredProps: any,\n  OS: string\n) => {\n  if (OS !== 'web') {\n    return { ...ignoredProps, ...props };\n  }\n  let style = ignoredProps.style ?? {};\n  let [shadowProps, remainingProps] = extractInObject(props, [\n    'shadowColor',\n    'shadowOffset',\n    'shadowOpacity',\n    'shadowRadius',\n  ]);\n  if (!isEmpty(shadowProps)) {\n    style = { ...style, ...shadowProps };\n  }\n  return { ...remainingProps, ...ignoredProps, style };\n};\n"
  },
  {
    "path": "src/utils/getAbsoluteChildren.ts",
    "content": "import React from 'react';\nimport { Platform } from 'react-native';\n\nconst getAbsoluteChildren = (\n  children: JSX.Element[] | JSX.Element,\n  reverse?: boolean\n) => {\n  let childrenArray = React.Children.toArray(children);\n  if (reverse) {\n    childrenArray = childrenArray.reverse();\n  }\n  /*\n  | Add the position to the children\n  */\n  const trailingChildrenWithSpacing = childrenArray.map((child: any) => {\n    return React.cloneElement(\n      child,\n      Platform.OS === 'web'\n        ? { style: { position: 'absolute' } }\n        : { position: 'absolute' },\n      child.props.children\n    );\n  });\n  /*\n  | New children array with applied margin to trailing children\n  */\n  return [trailingChildrenWithSpacing];\n};\n\nexport default getAbsoluteChildren;\n"
  },
  {
    "path": "src/utils/getAttachedChildren.ts",
    "content": "import React from 'react';\n\nconst getAttachedChildren = (children: any) => {\n  const childrenArray: any = React.Children.toArray(children);\n  /*\n  | Separate the trailing (not first) children from the children array\n  */\n\n  if (childrenArray.length <= 1) {\n    return childrenArray;\n  }\n\n  const trailingChildren = childrenArray.slice(1);\n  trailingChildren.pop();\n  const marginProp: object = {\n    ...{ ml: 0, mr: 0, roundedRight: 0, roundedLeft: 0 },\n  };\n  const leftElemProp: object = {\n    ...{ mr: 0, roundedRight: 0 },\n  };\n  const rightElemProp: object = {\n    ...{ ml: 0, roundedLeft: 0 },\n  };\n\n  /*\n  | Add the margiin to the children\n  */\n  const trailingChildrenWithSpacing = trailingChildren.map((child: any) => {\n    return React.cloneElement(child, marginProp, child.props.children);\n  });\n  /*\n  | New children array with applied margin to trailing children\n  */\n  return [\n    React.cloneElement(\n      childrenArray[0],\n      leftElemProp,\n      childrenArray[0].props.children\n    ),\n    ...trailingChildrenWithSpacing,\n    React.cloneElement(\n      childrenArray[childrenArray.length - 1],\n      rightElemProp,\n      childrenArray[childrenArray.length - 1].props.children\n    ),\n  ];\n};\n\nexport default getAttachedChildren;\n"
  },
  {
    "path": "src/utils/getIndexedChildren.ts",
    "content": "import React from 'react';\n\nconst getIndexedChildren = (\n  children: React.ReactNode,\n  startingIndex?: number\n) => {\n  let counter = startingIndex ? startingIndex - 1 : -1;\n  const indexedChildren = React.Children.map(children, (child: any) => {\n    counter++;\n    return React.cloneElement(\n      child,\n      {\n        index: counter,\n      },\n      child.props.children\n    );\n  });\n  return indexedChildren;\n};\n\nexport default getIndexedChildren;\n"
  },
  {
    "path": "src/utils/getRNKeyAndStyleValue.ts",
    "content": "import { Platform } from 'react-native';\nimport get from 'lodash.get';\nimport { convertStringNumberToNumber } from './convertStringNumberToNumber';\nimport { resolveValueWithBreakpoint } from '../hooks/useThemeProps/utils';\n\n/**\n * Common Logic Sharing between useSx and useStyledSytem\n */\nexport const getRNKeyAndStyleValue = ({\n  config,\n  value,\n  key,\n  theme,\n  styledSystemProps,\n  currentBreakpoint,\n}: any) => {\n  let style: any = {};\n  if (config === true) {\n    style = {\n      ...style,\n      [key]: convertStringNumberToNumber(key, value),\n    };\n  } else if (config) {\n    //@ts-ignore\n    const { property, scale, properties, transformer } = config;\n    let val = value;\n\n    if (transformer) {\n      val = transformer(val, theme[scale], theme, styledSystemProps.fontSize);\n    } else {\n      // If a token is not found in the theme\n      val = get(theme[scale], value, value);\n    }\n\n    if (typeof val === 'string') {\n      if (val.endsWith('px')) {\n        val = parseFloat(val);\n      } else if (val.endsWith('em') && Platform.OS !== 'web') {\n        const fontSize = resolveValueWithBreakpoint(\n          styledSystemProps.fontSize,\n          theme.breakpoints,\n          currentBreakpoint,\n          key\n        );\n        val =\n          parseFloat(val) *\n          parseFloat(get(theme.fontSizes, fontSize, fontSize));\n      }\n    }\n\n    val = convertStringNumberToNumber(key, val);\n\n    if (properties) {\n      //@ts-ignore\n      properties.forEach((property) => {\n        style = {\n          ...style,\n          [property]: val,\n        };\n      });\n    } else if (property) {\n      style = {\n        ...style,\n        [property]: val,\n      };\n    } else {\n      style = {\n        ...style,\n        ...val,\n      };\n    }\n  }\n\n  return style;\n};\n"
  },
  {
    "path": "src/utils/getSpacedChildren.tsx",
    "content": "import React from 'react';\nimport { default as Box } from '../components/primitives/Box';\nimport type { SpaceType as ThemeSpaceType } from '../components/types';\nimport { ResponsiveQueryContext } from './useResponsiveQuery/ResponsiveQueryProvider';\n\ntype SpaceType =\n  | 'gutter'\n  | '2xs'\n  | 'xs'\n  | 'sm'\n  | 'md'\n  | 'lg'\n  | 'xl'\n  | '2xl'\n  | ThemeSpaceType;\n\n// Thanks @gregberge for code and @nandorojo for suggestion.\n// Original source: https://github.com/gregberge/react-flatten-children\ntype ReactChildArray = ReturnType<typeof React.Children.toArray>;\nfunction flattenChildren(\n  children: JSX.Element[] | JSX.Element,\n  keys: (string | number)[] = []\n): ReactChildArray {\n  const childrenArray = React.Children.toArray(children);\n  return childrenArray.reduce(\n    (flatChildren: ReactChildArray, child: any, index: number) => {\n      if ((child as React.ReactElement<any>).type === React.Fragment) {\n        return flatChildren.concat(\n          flattenChildren(\n            (child as React.ReactElement<any>).props.children,\n            keys.concat(child.key || index)\n          )\n        );\n      }\n      if (React.isValidElement(child)) {\n        flatChildren.push(\n          React.cloneElement(child, {\n            key: keys.concat(String(child.key || index)).join('.'),\n          })\n        );\n      } else {\n        flatChildren.push(child);\n      }\n      return flatChildren;\n    },\n    []\n  );\n}\n\nconst getSpacedChildren = (\n  children: JSX.Element[] | JSX.Element,\n  space: undefined | SpaceType,\n  axis: 'X' | 'Y',\n  reverse: string,\n  divider: JSX.Element | undefined\n): any => {\n  let childrenArray = React.Children.toArray(flattenChildren(children));\n  childrenArray =\n    reverse === 'reverse' ? [...childrenArray].reverse() : childrenArray;\n\n  const orientation = axis === 'X' ? 'vertical' : 'horizontal';\n\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const responsiveQueryContext = React.useContext(ResponsiveQueryContext);\n  const disableCSSMediaQueries = responsiveQueryContext.disableCSSMediaQueries;\n\n  // If there's a divider, we wrap it with a Box and apply vertical and horizontal margins else we add a spacer Box with height or width\n  if (divider) {\n    const spacingProp: object = {\n      ...(axis === 'X' ? { mx: space } : { my: space }),\n    };\n\n    divider = React.cloneElement(divider, {\n      orientation,\n      ...spacingProp,\n    });\n\n    childrenArray = childrenArray.map((child: any, index: number) => {\n      return (\n        <React.Fragment key={child.key ?? `spaced-child-${index}`}>\n          {child}\n          {index < childrenArray.length - 1 && divider}\n        </React.Fragment>\n      );\n    });\n  } else {\n    const spacingProp: object = {\n      ...(axis === 'X' ? { width: space } : { height: space }),\n    };\n    childrenArray = childrenArray.map((child: any, index: number) => {\n      return (\n        <React.Fragment key={child.key ?? `spaced-child-${index}`}>\n          {child}\n          {disableCSSMediaQueries ? (\n            index < childrenArray.length - 1 && <Box {...spacingProp} />\n          ) : (\n            <></>\n          )}\n        </React.Fragment>\n      );\n    });\n  }\n\n  return childrenArray;\n};\n\nexport default getSpacedChildren;\n"
  },
  {
    "path": "src/utils/getStyledFromProps.ts",
    "content": "import { hasValidBreakpointFormat } from '../theme/tools';\nimport { getRNKeyAndStyleValue } from './getRNKeyAndStyleValue';\nimport type { ITheme } from '../theme';\n/**\n * Common Logic Sharing between useSx and useStyledSytem\n * @param styledSystemProps\n * @param theme\n * @param currentBreakpoint\n * @returns styleFromProps, responsiveStyles\n */\n\nexport const getStyledFromProps = (\n  styledSystemProps: any,\n  theme: any,\n  currentBreakpoint: any,\n  propConfig: any\n) => {\n  let styleFromProps: any = {};\n  let responsiveStyles: null | Record<\n    keyof typeof theme.breakpoints,\n    Array<any>\n  > = null;\n  const orderedBreakPoints = Object.entries(\n    theme.breakpoints as ITheme['breakpoints']\n  ).sort((a, b) => a[1] - b[1]);\n  for (const key in styledSystemProps) {\n    const rawValue = styledSystemProps[key];\n\n    const config = propConfig[key as keyof typeof propConfig];\n\n    if (hasValidBreakpointFormat(rawValue, theme.breakpoints)) {\n      if (!responsiveStyles) responsiveStyles = {};\n\n      const value = rawValue;\n      if (Array.isArray(value)) {\n        value.forEach((v, i) => {\n          //@ts-ignore\n          if (!responsiveStyles[orderedBreakPoints[i][0]]) {\n            //@ts-ignore\n            responsiveStyles[orderedBreakPoints[i][0]] = [];\n          }\n          const newStyle = getRNKeyAndStyleValue({\n            config,\n            value: v,\n            key,\n            styledSystemProps,\n            theme,\n            currentBreakpoint,\n          });\n          //@ts-ignore\n          responsiveStyles[orderedBreakPoints[i][0]].push(newStyle);\n        });\n      } else {\n        for (const k in value) {\n          const newStyle = getRNKeyAndStyleValue({\n            config,\n            value: value[k],\n            key,\n            styledSystemProps,\n            theme,\n            currentBreakpoint,\n          });\n          if (!responsiveStyles[k]) {\n            responsiveStyles[k] = [];\n          }\n          responsiveStyles[k].push(newStyle);\n        }\n      }\n    } else {\n      const value = rawValue;\n      const newStyle = getRNKeyAndStyleValue({\n        config,\n        value,\n        key,\n        styledSystemProps,\n        theme,\n        currentBreakpoint,\n      });\n\n      styleFromProps = {\n        ...styleFromProps,\n        ...newStyle,\n      };\n    }\n  }\n\n  return { styleFromProps, responsiveStyles };\n};\n"
  },
  {
    "path": "src/utils/getStyledSystemPropsAndRestProps.ts",
    "content": "import { propConfig } from '../theme/styled-system';\n/**\n * Common Logic Sharing between useSx and useStyledSystemPropResolver\n * @param props\n * @returns { styledSystemProps, restProps }\n */\nexport const getStyledSystemPropsAndRestProps = (props: any) => {\n  const styledSystemProps: any = {};\n  const restProps: any = {};\n\n  for (let key in props) {\n    if (key in propConfig) {\n      styledSystemProps[key] = props[key];\n    } else {\n      restProps[key] = props[key];\n    }\n  }\n\n  return { styledSystemProps, restProps };\n};\n"
  },
  {
    "path": "src/utils/getUnit.ts",
    "content": "export const getUnit = (str: string) => {\n  var units: string = '';\n\n  // Percentage\n  if (str.endsWith('%')) {\n    units = '%';\n    return units;\n  }\n\n  // Absolute Units\n  if (str.endsWith('px')) {\n    units = 'px';\n    return units;\n  }\n  if (str.endsWith('cm')) {\n    units = 'cm';\n    return units;\n  }\n  if (str.endsWith('mm')) {\n    units = 'mm';\n    return units;\n  }\n  if (str.endsWith('Q')) {\n    units = 'Q';\n    return units;\n  }\n  if (str.endsWith('in')) {\n    units = 'in';\n    return units;\n  }\n  if (str.endsWith('pc')) {\n    units = 'pc';\n    return units;\n  }\n  if (str.endsWith('pt')) {\n    units = 'pt';\n    return units;\n  }\n\n  // Relative Units\n  if (str.endsWith('em')) {\n    units = 'em';\n    return units;\n  }\n  if (str.endsWith('ex')) {\n    units = 'ex';\n    return units;\n  }\n  if (str.endsWith('ch')) {\n    units = 'ch';\n    return units;\n  }\n  if (str.endsWith('rem')) {\n    units = 'rem';\n    return units;\n  }\n  if (str.endsWith('lh')) {\n    units = 'lh';\n    return units;\n  }\n  if (str.endsWith('vw')) {\n    units = 'vw';\n    return units;\n  }\n  if (str.endsWith('vh')) {\n    units = 'vh';\n    return units;\n  }\n  if (str.endsWith('vmin')) {\n    units = 'vmin';\n    return units;\n  }\n  if (str.endsWith('vmax')) {\n    units = 'vmax';\n    return units;\n  }\n  return 'px';\n};\n"
  },
  {
    "path": "src/utils/index.ts",
    "content": "import getSpacedChildren from './getSpacedChildren';\nimport getAbsoluteChildren from './getAbsoluteChildren';\nimport getAttachedChildren from './getAttachedChildren';\nimport { addTextAndPropsToStrings } from './addTextAndPropsToStrings';\nimport { canUseDom } from './canUseDom';\nimport { mergeRefs, composeEventHandlers } from './mergeRefs';\nexport {\n  getSpacedChildren,\n  getAbsoluteChildren,\n  getAttachedChildren,\n  addTextAndPropsToStrings,\n  canUseDom,\n  mergeRefs,\n  composeEventHandlers,\n};\nexport { wrapStringChild } from './wrapStringChild';\nexport { combineContextAndProps } from './combineContextAndProps';\nexport type { IAccessibilityProps } from './accessibilityTypes';\nexport { ariaAttr } from './accessibilityUtils';\nexport { createContext } from './createContext';\nexport { useKeyboardBottomInset } from './useKeyboardBottomInset';\nexport { isEmptyObj } from './isEmptyObj';\nexport { resolveStackStyleInput } from './resolveStackStyleInput';\nexport { getStyleElement } from './useResponsiveQuery/useResponsiveQuery';\n"
  },
  {
    "path": "src/utils/isEmptyObj.ts",
    "content": "export function isEmptyObj(obj: Object) {\n  for (var _x in obj) {\n    return false;\n  }\n  return true;\n}\n"
  },
  {
    "path": "src/utils/mergeRefs.ts",
    "content": "export function mergeRefs<T = any>(\n  refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>\n): React.RefCallback<T> {\n  return (value) => {\n    refs.forEach((ref) => {\n      if (typeof ref === 'function') {\n        ref(value);\n      } else if (ref != null) {\n        (ref as React.MutableRefObject<T | null>).current = value;\n      }\n    });\n  };\n}\n\nexport function composeEventHandlers<E>(\n  originalEventHandler?: null | ((event: E) => void),\n  ourEventHandler?: (event: E) => void\n) {\n  return function handleEvent(event: E) {\n    originalEventHandler?.(event);\n    ourEventHandler?.(event);\n  };\n}\n"
  },
  {
    "path": "src/utils/react-native-web-fucntions/atomic.ts",
    "content": "/* eslint-disable */\n//@ts-nocheck\n// This functions is taken from react native web\n\nimport hash from '../useResponsiveQuery/hash';\nimport prefixStyles from '../react-native-web-fucntions/prefixStyles';\nimport normalizeValueWithProperty from './normalizeValueWithProperty';\nimport createReactDOMStyle from '../react-native-web-fucntions/createReactDOMStyle';\nimport hyphenateStyleName from '../react-native-web-fucntions/hyphenateStyleName';\ntype Value = Object | Array<any> | string | number;\ntype Style = { [key: string]: Value };\ntype Rule = string;\ntype Rules = Array<Rule>;\ntype RulesData = [Rules, number];\ntype CompiledStyle = {\n  //@ts-ignore\n  $$css: boolean;\n  //@ts-ignore\n  $$css$localize?: boolean;\n  [key: string]: string | Array<string>;\n};\nconst borderTopLeftRadius = 'borderTopLeftRadius';\nconst borderTopRightRadius = 'borderTopRightRadius';\nconst borderBottomLeftRadius = 'borderBottomLeftRadius';\nconst borderBottomRightRadius = 'borderBottomRightRadius';\nconst borderLeftColor = 'borderLeftColor';\nconst borderLeftStyle = 'borderLeftStyle';\nconst borderLeftWidth = 'borderLeftWidth';\nconst borderRightColor = 'borderRightColor';\nconst borderRightStyle = 'borderRightStyle';\nconst borderRightWidth = 'borderRightWidth';\nconst right = 'right';\nconst marginLeft = 'marginLeft';\nconst marginRight = 'marginRight';\nconst paddingLeft = 'paddingLeft';\nconst paddingRight = 'paddingRight';\nconst left = 'left';\nconst PROPERTIES_VALUE: any = ['clear', 'float', 'textAlign'];\n// Map of LTR property names to their BiDi equivalent.\nconst PROPERTIES_FLIP: { [key: string]: string } = {\n  [borderTopLeftRadius]: borderTopRightRadius,\n  [borderTopRightRadius]: borderTopLeftRadius,\n  [borderBottomLeftRadius]: borderBottomRightRadius,\n  [borderBottomRightRadius]: borderBottomLeftRadius,\n  [borderLeftColor]: borderRightColor,\n  [borderLeftStyle]: borderRightStyle,\n  [borderLeftWidth]: borderRightWidth,\n  [borderRightColor]: borderLeftColor,\n  [borderRightStyle]: borderLeftStyle,\n  [borderRightWidth]: borderLeftWidth,\n  [left]: right,\n  [marginLeft]: marginRight,\n  [marginRight]: marginLeft,\n  [paddingLeft]: paddingRight,\n  [paddingRight]: paddingLeft,\n  [right]: left,\n};\n// Map of I18N property names to their LTR equivalent.\nconst PROPERTIES_I18N: any = {\n  borderTopStartRadius: borderTopLeftRadius,\n  borderTopEndRadius: borderTopRightRadius,\n  borderBottomStartRadius: borderBottomLeftRadius,\n  borderBottomEndRadius: borderBottomRightRadius,\n  borderStartColor: borderLeftColor,\n  borderStartStyle: borderLeftStyle,\n  borderStartWidth: borderLeftWidth,\n  borderEndColor: borderRightColor,\n  borderEndStyle: borderRightStyle,\n  borderEndWidth: borderRightWidth,\n  end: right,\n  marginStart: marginLeft,\n  marginEnd: marginRight,\n  paddingStart: paddingLeft,\n  paddingEnd: paddingRight,\n  start: left,\n};\ntype CompilerOutput = [CompiledStyle, Array<RulesData>];\nconst customGroup: { [key: string]: number } = {\n  borderColor: 2,\n  borderRadius: 2,\n  borderStyle: 2,\n  borderWidth: 2,\n  display: 2,\n  flex: 2,\n  margin: 2,\n  overflow: 2,\n  overscrollBehavior: 2,\n  padding: 2,\n  marginHorizontal: 2.1,\n  marginVertical: 2.1,\n  paddingHorizontal: 2.1,\n  paddingVertical: 2.1,\n};\nconst atomicGroup = 2.2;\nconst cache = new Map();\nexport function atomic(style: Style): CompilerOutput {\n  //@ts-ignore\n  const compiledStyle: CompiledStyle = { $$css: true };\n  const compiledRules: any = [];\n\n  function atomicCompile(prop: any, value: any) {\n    const valueString = stringifyValueWithProperty(value, prop);\n    const cacheKey = prop + valueString;\n    const cachedResult = cache.get(cacheKey);\n    let identifier;\n    if (cachedResult != null) {\n      identifier = cachedResult[0];\n      compiledRules.push(cachedResult[1]);\n    } else {\n      identifier = createIdentifier('r', prop, value);\n      const order = customGroup[prop] || atomicGroup;\n      const rules = createAtomicRules(identifier, prop, value);\n      const orderedRules = [rules, order];\n      compiledRules.push(orderedRules);\n      cache.set(cacheKey, [identifier, orderedRules]);\n    }\n    return identifier;\n  }\n\n  Object.keys(style)\n    .sort()\n    .forEach((prop) => {\n      const value = style[prop];\n      if (value != null) {\n        let localizeableValue;\n        // BiDi flip values\n        if (PROPERTIES_VALUE.indexOf(prop) > -1) {\n          const left = atomicCompile(prop, 'left');\n          const right = atomicCompile(prop, 'right');\n          if (value === 'start') {\n            localizeableValue = [left, right];\n          } else if (value === 'end') {\n            localizeableValue = [right, left];\n          }\n        }\n        // BiDi flip properties\n        const propPolyfill = PROPERTIES_I18N[prop];\n        if (propPolyfill != null) {\n          const ltr = atomicCompile(propPolyfill, value);\n          const rtl = atomicCompile(PROPERTIES_FLIP[propPolyfill], value);\n          localizeableValue = [ltr, rtl];\n        }\n        // BiDi flip transitionProperty value\n        if (prop === 'transitionProperty') {\n          const values = Array.isArray(value) ? value : [value];\n          const polyfillIndices = [];\n\n          for (let i = 0; i < values.length; i++) {\n            const val = values[i];\n            if (typeof val === 'string' && PROPERTIES_I18N[val] != null) {\n              polyfillIndices.push(i);\n            }\n          }\n\n          if (polyfillIndices.length > 0) {\n            const ltrPolyfillValues = [...values];\n            const rtlPolyfillValues = [...values];\n            polyfillIndices.forEach((i) => {\n              const ltrVal = ltrPolyfillValues[i];\n              if (typeof ltrVal === 'string') {\n                const ltrPolyfill = PROPERTIES_I18N[ltrVal];\n                const rtlPolyfill = PROPERTIES_FLIP[ltrPolyfill];\n                ltrPolyfillValues[i] = ltrPolyfill;\n                rtlPolyfillValues[i] = rtlPolyfill;\n                const ltr = atomicCompile(prop, ltrPolyfillValues);\n                const rtl = atomicCompile(prop, rtlPolyfillValues);\n                localizeableValue = [ltr, rtl];\n              }\n            });\n          }\n        }\n\n        if (localizeableValue == null) {\n          localizeableValue = atomicCompile(prop, value);\n        } else {\n          compiledStyle['$$css$localize'] = true;\n        }\n\n        compiledStyle[prop] = localizeableValue;\n      }\n    });\n\n  return [compiledStyle, compiledRules];\n}\n\n/**\n * Create a value string that normalizes different input values with a common\n * output.\n */\nexport function stringifyValueWithProperty(\n  value: Value,\n  property?: string\n): string {\n  // e.g., 0 => '0px', 'black' => 'rgba(0,0,0,1)'\n  const normalizedValue = normalizeValueWithProperty(value, property);\n  return typeof normalizedValue !== 'string'\n    ? JSON.stringify(normalizedValue || '')\n    : normalizedValue;\n}\n\n/**\n * An identifier is associated with a unique set of styles.\n */\nfunction createIdentifier(prefix: string, name: string, value: Value): string {\n  const hashedString = hash(name + stringifyValueWithProperty(value, name));\n  return process.env.NODE_ENV !== 'production'\n    ? `${prefix}-${name}-${hashedString}`\n    : `${prefix}-${hashedString}`;\n}\n\n/**\n * Create the Atomic CSS rules needed for a given StyleSheet rule.\n * Translates StyleSheet declarations to CSS.\n */\nfunction createAtomicRules(\n  identifier: string,\n  property: any,\n  value: any\n): Rules {\n  const rules = [];\n  const selector = `.${identifier}`;\n\n  // Handle non-standard properties and object values that require multiple\n  // CSS rules to be created.\n  switch (property) {\n    case 'animationKeyframes': {\n      const [animationNames, keyframesRules] = processKeyframesValue(value);\n      const block = createDeclarationBlock({\n        animationName: animationNames.join(','),\n      });\n      rules.push(`${selector}${block}`, ...keyframesRules);\n      break;\n    }\n\n    // Equivalent to using '::placeholder'\n    case 'placeholderTextColor': {\n      const block = createDeclarationBlock({ color: value, opacity: 1 });\n      rules.push(\n        `${selector}::-webkit-input-placeholder${block}`,\n        `${selector}::-moz-placeholder${block}`,\n        `${selector}:-ms-input-placeholder${block}`,\n        `${selector}::placeholder${block}`\n      );\n      break;\n    }\n\n    // Polyfill for additional 'pointer-events' values\n    // See d13f78622b233a0afc0c7a200c0a0792c8ca9e58\n    case 'pointerEvents': {\n      let finalValue = value;\n      if (value === 'auto' || value === 'box-only') {\n        finalValue = 'auto!important';\n        if (value === 'box-only') {\n          const block = createDeclarationBlock({ pointerEvents: 'none' });\n          rules.push(`${selector}>*${block}`);\n        }\n      } else if (value === 'none' || value === 'box-none') {\n        finalValue = 'none!important';\n        if (value === 'box-none') {\n          const block = createDeclarationBlock({ pointerEvents: 'auto' });\n          rules.push(`${selector}>*${block}`);\n        }\n      }\n      const block = createDeclarationBlock({ pointerEvents: finalValue });\n      rules.push(`${selector}${block}`);\n      break;\n    }\n\n    // Polyfill for draft spec\n    // https://drafts.csswg.org/css-scrollbars-1/\n    case 'scrollbarWidth': {\n      if (value === 'none') {\n        rules.push(`${selector}::-webkit-scrollbar{display:none}`);\n      }\n      const block = createDeclarationBlock({ scrollbarWidth: value });\n      rules.push(`${selector}${block}`);\n      break;\n    }\n\n    default: {\n      const block = createDeclarationBlock({ [property]: value });\n      rules.push(`${selector}${block}`);\n      break;\n    }\n  }\n\n  return rules;\n}\n\n/**\n * Creates a CSS declaration block from a StyleSheet object.\n */\nfunction createDeclarationBlock(style: Style): string {\n  const domStyle: any = prefixStyles(createReactDOMStyle(style));\n  const declarationsString = Object.keys(domStyle)\n    .map((property) => {\n      const value = domStyle[property];\n      const prop = hyphenateStyleName(property);\n      // The prefixer may return an array of values:\n      // { display: [ '-webkit-flex', 'flex' ] }\n      // to represent \"fallback\" declarations\n      // { display: -webkit-flex; display: flex; }\n      if (Array.isArray(value)) {\n        return value.map((v) => `${prop}:${v}`).join(';');\n      } else {\n        return `${prop}:${value}`;\n      }\n    })\n    // Once properties are hyphenated, this will put the vendor\n    // prefixed and short-form properties first in the list.\n    .sort()\n    .join(';');\n\n  return `{${declarationsString};}`;\n}\n\n/**\n * Create CSS keyframes rules and names from a StyleSheet keyframes object.\n */\nfunction processKeyframesValue(keyframesValue: any) {\n  if (typeof keyframesValue === 'number') {\n    throw new Error(`Invalid CSS keyframes type: ${typeof keyframesValue}`);\n  }\n\n  const animationNames: any = [];\n  const rules: any = [];\n  const value = Array.isArray(keyframesValue)\n    ? keyframesValue\n    : [keyframesValue];\n\n  value.forEach((keyframes) => {\n    if (typeof keyframes === 'string') {\n      // Support external animation libraries (identifiers only)\n      animationNames.push(keyframes);\n    } else {\n      // Create rules for each of the keyframes\n      const [identifier, keyframesRules] = createKeyframes(keyframes);\n      animationNames.push(identifier);\n      rules.push(...keyframesRules);\n    }\n  });\n\n  return [animationNames, rules];\n}\n\n/**\n * Create individual CSS keyframes rules.\n */\nfunction createKeyframes(keyframes: any): [string, Rules] {\n  const prefixes = ['-webkit-', ''];\n  const identifier = createIdentifier('r', 'animation', keyframes);\n\n  const steps =\n    '{' +\n    Object.keys(keyframes)\n      .map((stepName) => {\n        const rule = keyframes[stepName];\n        const block = createDeclarationBlock(rule);\n        return `${stepName}${block}`;\n      })\n      .join('') +\n    '}';\n\n  const rules = prefixes.map((prefix) => {\n    return `@${prefix}keyframes ${identifier}${steps}`;\n  });\n  return [identifier, rules];\n}\n"
  },
  {
    "path": "src/utils/react-native-web-fucntions/createReactDOMStyle.ts",
    "content": "/* eslint-disable */\n//@ts-nocheck\n// This functions is taken from react native web\n\nimport normalizeValueWithProperty from './normalizeValueWithProperty';\n\ntype Style = { [key: string]: any };\nconst canUseDOM: boolean = !!(\n  typeof window !== 'undefined' &&\n  window.document &&\n  window.document.createElement\n);\n\n/**\n * The browser implements the CSS cascade, where the order of properties is a\n * factor in determining which styles to paint. React Native is different. It\n * gives giving precedence to the more specific style property. For example,\n * the value of `paddingTop` takes precedence over that of `padding`.\n *\n * This module creates mutally exclusive style declarations by expanding all of\n * React Native's supported shortform properties (e.g. `padding`) to their\n * longfrom equivalents.\n */\n\nconst emptyObject = {};\n\nconst supportsCSS3TextDecoration =\n  !canUseDOM ||\n  (window.CSS != null &&\n    window.CSS.supports != null &&\n    (window.CSS.supports('text-decoration-line', 'none') ||\n      window.CSS.supports('-webkit-text-decoration-line', 'none')));\n\nconst ignoredProps: {\n  elevation: boolean;\n  overlayColor: boolean;\n  resizeMode: boolean;\n  tintColor: boolean;\n} = {\n  elevation: true,\n  overlayColor: true,\n  resizeMode: true,\n  tintColor: true,\n};\n\nconst MONOSPACE_FONT_STACK = 'monospace,monospace';\n\nconst SYSTEM_FONT_STACK =\n  '-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif';\n\nconst STYLE_SHORT_FORM_EXPANSIONS: any = {\n  borderColor: [\n    'borderTopColor',\n    'borderRightColor',\n    'borderBottomColor',\n    'borderLeftColor',\n  ],\n  borderRadius: [\n    'borderTopLeftRadius',\n    'borderTopRightRadius',\n    'borderBottomRightRadius',\n    'borderBottomLeftRadius',\n  ],\n  borderStyle: [\n    'borderTopStyle',\n    'borderRightStyle',\n    'borderBottomStyle',\n    'borderLeftStyle',\n  ],\n  borderWidth: [\n    'borderTopWidth',\n    'borderRightWidth',\n    'borderBottomWidth',\n    'borderLeftWidth',\n  ],\n  marginHorizontal: ['marginRight', 'marginLeft'],\n  marginVertical: ['marginTop', 'marginBottom'],\n  overflow: ['overflowX', 'overflowY'],\n  overscrollBehavior: ['overscrollBehaviorX', 'overscrollBehaviorY'],\n  paddingHorizontal: ['paddingRight', 'paddingLeft'],\n  paddingVertical: ['paddingTop', 'paddingBottom'],\n};\n\n/**\n * Transform\n */\n\n// { scale: 2 } => 'scale(2)'\n// { translateX: 20 } => 'translateX(20px)'\n// { matrix: [1,2,3,4,5,6] } => 'matrix(1,2,3,4,5,6)'\nconst mapTransform = (transform: Object): string => {\n  const type = Object.keys(transform)[0];\n  //@ts-ignore\n  const value = transform[type];\n  if (type === 'matrix' || type === 'matrix3d') {\n    return `${type}(${value.join(',')})`;\n  } else {\n    const normalizedValue = normalizeValueWithProperty(value, type);\n    return `${type}(${normalizedValue})`;\n  }\n};\n\nexport const createTransformValue = (style: Style): string => {\n  let transform = style.transform;\n  if (Array.isArray(style.transform)) {\n    transform = style.transform.map(mapTransform).join(' ');\n  }\n  return transform;\n};\n\n/**\n * Reducer\n */\n\nconst createReactDOMStyle = (style: Style, isInline?: boolean): Style => {\n  if (!style) {\n    return emptyObject;\n  }\n\n  const resolvedStyle: any = {};\n\n  for (const prop in style) {\n    const value = style[prop];\n\n    if (\n      // Ignore everything with a null value\n      value == null ||\n      // Ignore some React Native styles\n      //@ts-ignore\n      ignoredProps[prop]\n    ) {\n      continue;\n    }\n\n    if (prop === 'aspectRatio') {\n      resolvedStyle[prop] = value.toString();\n    } else if (prop === 'backgroundClip') {\n      // TODO: remove once this issue is fixed\n      // https://github.com/rofrischmann/inline-style-prefixer/issues/159\n      if (value === 'text') {\n        resolvedStyle.backgroundClip = value;\n        resolvedStyle.WebkitBackgroundClip = value;\n      }\n    } else if (prop === 'flex') {\n      if (value === -1) {\n        resolvedStyle.flexGrow = 0;\n        resolvedStyle.flexShrink = 1;\n        resolvedStyle.flexBasis = 'auto';\n      } else {\n        resolvedStyle.flex = value;\n      }\n    } else if (prop === 'font') {\n      resolvedStyle[prop] = value.replace('System', SYSTEM_FONT_STACK);\n    } else if (prop === 'fontFamily') {\n      if (value.indexOf('System') > -1) {\n        const stack = value.split(/,\\s*/);\n        stack[stack.indexOf('System')] = SYSTEM_FONT_STACK;\n        resolvedStyle[prop] = stack.join(',');\n      } else if (value === 'monospace') {\n        resolvedStyle[prop] = MONOSPACE_FONT_STACK;\n      } else {\n        resolvedStyle[prop] = value;\n      }\n    } else if (prop === 'fontVariant') {\n      if (Array.isArray(value) && value.length > 0) {\n        resolvedStyle.fontVariant = value.join(' ');\n      }\n    } else if (prop === 'textAlignVertical') {\n      resolvedStyle.verticalAlign = value === 'center' ? 'middle' : value;\n    } else if (prop === 'textDecorationLine') {\n      // use 'text-decoration' for browsers that only support CSS2\n      // text-decoration (e.g., IE, Edge)\n      if (!supportsCSS3TextDecoration) {\n        resolvedStyle.textDecoration = value;\n      } else {\n        resolvedStyle.textDecorationLine = value;\n      }\n    } else if (prop === 'transform' || prop === 'transformMatrix') {\n      resolvedStyle.transform = createTransformValue(style);\n    } else if (prop === 'writingDirection') {\n      resolvedStyle.direction = value;\n    } else {\n      const value = normalizeValueWithProperty(style[prop], prop);\n      const longFormProperties = STYLE_SHORT_FORM_EXPANSIONS[prop];\n      if (isInline && prop === 'margin') {\n        if (style.marginHorizontal == null) {\n          resolvedStyle.marginLeft = value;\n          resolvedStyle.marginRight = value;\n        }\n        if (style.marginVertical == null) {\n          resolvedStyle.marginTop = value;\n          resolvedStyle.marginBottom = value;\n        }\n      } else if (isInline && prop === 'padding') {\n        if (style.paddingHorizontal == null) {\n          resolvedStyle.paddingLeft = value;\n          resolvedStyle.paddingRight = value;\n        }\n        if (style.paddingVertical == null) {\n          resolvedStyle.paddingTop = value;\n          resolvedStyle.paddingBottom = value;\n        }\n      } else if (longFormProperties) {\n        longFormProperties.forEach((longForm: any, _i: any) => {\n          // The value of any longform property in the original styles takes\n          // precedence over the shortform's value.\n          if (style[longForm] == null) {\n            resolvedStyle[longForm] = value;\n          }\n        });\n      } else {\n        resolvedStyle[prop] = Array.isArray(value) ? value.join(',') : value;\n      }\n    }\n  }\n\n  return resolvedStyle;\n};\n\nexport default createReactDOMStyle;\n"
  },
  {
    "path": "src/utils/react-native-web-fucntions/hyphenateStyleName.ts",
    "content": "/* eslint-disable */\n//@ts-nocheck\n// This functions is taken from react native web\n\nconst uppercasePattern = /[A-Z]/g;\nconst msPattern = /^ms-/;\nconst cache: any = {};\n\nfunction toHyphenLower(match: any) {\n  return '-' + match.toLowerCase();\n}\n\nfunction hyphenateStyleName(name: string): string {\n  if (name in cache) {\n    return cache[name];\n  }\n\n  const hName = name.replace(uppercasePattern, toHyphenLower);\n  return (cache[name] = msPattern.test(hName) ? '-' + hName : hName);\n}\n\nexport default hyphenateStyleName;\n"
  },
  {
    "path": "src/utils/react-native-web-fucntions/normalizeColor.ts",
    "content": "/* eslint-disable */\n//@ts-nocheck\n// This functions is taken from react native web\n\nimport ConvertNumberIntoHex from 'normalize-css-color';\n\nconst processColor = (color?: any): any => {\n  if (color === undefined || color === null) {\n    return color;\n  }\n\n  // convert number and hex\n  let int32Color = ConvertNumberIntoHex(color);\n  if (int32Color === undefined || int32Color === null) {\n    return undefined;\n  }\n  //@ts-ignore\n  int32Color = ((int32Color << 24) | (int32Color >>> 8)) >>> 0;\n\n  return int32Color;\n};\n\nconst isWebColor = (color: string): boolean =>\n  color === 'currentcolor' ||\n  color === 'currentColor' ||\n  color === 'inherit' ||\n  color.indexOf('var(') === 0;\n\nconst normalizeColor = (\n  color?: number | string,\n  opacity: number = 1\n): void | string => {\n  if (color == null) return;\n\n  if (typeof color === 'string' && isWebColor(color)) {\n    return color;\n  }\n\n  const colorInt = processColor(color);\n  if (colorInt != null) {\n    const r = (colorInt >> 16) & 255;\n    const g = (colorInt >> 8) & 255;\n    const b = colorInt & 255;\n    const a = ((colorInt >> 24) & 255) / 255;\n    const alpha = (a * opacity).toFixed(2);\n    return `rgba(${r},${g},${b},${alpha})`;\n  }\n};\n\nexport default normalizeColor;\n"
  },
  {
    "path": "src/utils/react-native-web-fucntions/normalizeValueWithProperty.ts",
    "content": "/* eslint-disable */\n//@ts-nocheck\n// This functions is taken from react native web\n\nimport unitlessNumbers from './unitlessNumbers';\nimport normalizeColor from './normalizeColor';\n\nconst colorProps: any = {\n  backgroundColor: true,\n  borderColor: true,\n  borderTopColor: true,\n  borderRightColor: true,\n  borderBottomColor: true,\n  borderLeftColor: true,\n  color: true,\n  shadowColor: true,\n  textDecorationColor: true,\n  textShadowColor: true,\n};\n\nexport default function normalizeValueWithProperty(\n  value: any,\n  property?: string\n): any {\n  let returnValue = value;\n  if (\n    (property == null || !unitlessNumbers[property]) &&\n    typeof value === 'number'\n  ) {\n    returnValue = `${value}px`;\n  } else if (property != null && colorProps[property]) {\n    returnValue = normalizeColor(value);\n  }\n  return returnValue;\n}\n"
  },
  {
    "path": "src/utils/react-native-web-fucntions/prefixStyles.ts",
    "content": "/* eslint-disable */\n//@ts-nocheck\n// This functions is taken from react native web\n\nimport createPrefixer from 'inline-style-prefixer/lib/createPrefixer';\nimport staticData from './staticData';\n\ntype StyleModifier = (style: Object) => Object;\n\nconst prefixAll: StyleModifier = createPrefixer(staticData);\n\nexport default prefixAll;\n"
  },
  {
    "path": "src/utils/react-native-web-fucntions/preprocess.ts",
    "content": "/* eslint-disable */\n//@ts-nocheck\n// This functions is taken from react native web\n\nimport normalizeColor from './normalizeColor';\nimport normalizeValueWithProperty from './normalizeValueWithProperty';\n\nconst emptyObject = {};\n\n/**\n * Shadows\n */\n\nconst defaultOffset = { height: 0, width: 0 };\n\nexport const createBoxShadowValue = (style: any): void | string => {\n  const { shadowColor, shadowOffset, shadowOpacity, shadowRadius } = style;\n  const { height, width } = shadowOffset || defaultOffset;\n  const offsetX = normalizeValueWithProperty(width);\n  const offsetY = normalizeValueWithProperty(height);\n  const blurRadius = normalizeValueWithProperty(shadowRadius || 0);\n  const color = normalizeColor(shadowColor || 'black', shadowOpacity);\n  if (\n    color != null &&\n    offsetX != null &&\n    offsetY != null &&\n    blurRadius != null\n  ) {\n    return `${offsetX} ${offsetY} ${blurRadius} ${color}`;\n  }\n};\n\nexport const createTextShadowValue = (style: any): void | string => {\n  const { textShadowColor, textShadowOffset, textShadowRadius } = style;\n  const { height, width } = textShadowOffset || defaultOffset;\n  const radius = textShadowRadius || 0;\n  const offsetX = normalizeValueWithProperty(width);\n  const offsetY = normalizeValueWithProperty(height);\n  const blurRadius = normalizeValueWithProperty(radius);\n  const color = normalizeValueWithProperty(textShadowColor, 'textShadowColor');\n\n  if (\n    color &&\n    (height !== 0 || width !== 0 || radius !== 0) &&\n    offsetX != null &&\n    offsetY != null &&\n    blurRadius != null\n  ) {\n    return `${offsetX} ${offsetY} ${blurRadius} ${color}`;\n  }\n};\n\n/**\n * Preprocess styles\n */\nexport const preprocess = (originalStyle: any) => {\n  const style = originalStyle || emptyObject;\n  const nextStyle: any = {};\n  for (const originalProp in style) {\n    const originalValue = style[originalProp];\n\n    let prop = originalProp;\n    let value = originalValue;\n\n    if (\n      !Object.prototype.hasOwnProperty.call(style, originalProp) ||\n      originalValue == null\n    ) {\n      continue;\n    }\n\n    if (prop === 'elevation') continue;\n    // Convert shadow styles\n    if (\n      prop === 'shadowColor' ||\n      prop === 'shadowOffset' ||\n      prop === 'shadowOpacity' ||\n      prop === 'shadowRadius'\n    ) {\n      const boxShadowValue = createBoxShadowValue(style);\n\n      if (boxShadowValue != null && nextStyle.boxShadow == null) {\n        const { boxShadow } = style;\n        prop = 'boxShadow';\n        value = boxShadow ? `${boxShadow}, ${boxShadowValue}` : boxShadowValue;\n      } else {\n        continue;\n      }\n    }\n\n    // Convert text shadow styles\n    if (\n      prop === 'textShadowColor' ||\n      prop === 'textShadowOffset' ||\n      prop === 'textShadowRadius'\n    ) {\n      const textShadowValue = createTextShadowValue(style);\n      if (textShadowValue != null && nextStyle.textShadow == null) {\n        const { textShadow } = style;\n        prop = 'textShadow';\n        value = textShadow\n          ? `${textShadow}, ${textShadowValue}`\n          : textShadowValue;\n      } else {\n        continue;\n      }\n    }\n\n    nextStyle[prop] = value;\n  }\n\n  // $FlowIgnore\n  return nextStyle;\n};\n\nexport default preprocess;\n"
  },
  {
    "path": "src/utils/react-native-web-fucntions/staticData.ts",
    "content": "/* eslint-disable */\n//@ts-nocheck\n// This functions is taken from react native web\nimport backgroundClip from 'inline-style-prefixer/lib/plugins/backgroundClip';\nimport crossFade from 'inline-style-prefixer/lib/plugins/crossFade';\nimport cursor from 'inline-style-prefixer/lib/plugins/cursor';\nimport filter from 'inline-style-prefixer/lib/plugins/filter';\nimport imageSet from 'inline-style-prefixer/lib/plugins/imageSet';\nimport logical from 'inline-style-prefixer/lib/plugins/logical';\nimport position from 'inline-style-prefixer/lib/plugins/position';\nimport sizing from 'inline-style-prefixer/lib/plugins/sizing';\nimport transition from 'inline-style-prefixer/lib/plugins/transition';\nconst w = ['Webkit'];\nconst m = ['Moz'];\nconst wm = ['Webkit', 'Moz'];\nconst wms = ['Webkit', 'ms'];\nconst wmms = ['Webkit', 'Moz', 'ms'];\n\nexport default {\n  plugins: [\n    backgroundClip,\n    crossFade,\n    cursor,\n    filter,\n    imageSet,\n    logical,\n    position,\n    sizing,\n    transition,\n  ],\n  prefixMap: {\n    appearance: wmms,\n    userSelect: wm,\n    textEmphasisPosition: wms,\n    textEmphasis: wms,\n    textEmphasisStyle: wms,\n    textEmphasisColor: wms,\n    boxDecorationBreak: wms,\n    clipPath: w,\n    maskImage: wms,\n    maskMode: wms,\n    maskRepeat: wms,\n    maskPosition: wms,\n    maskClip: wms,\n    maskOrigin: wms,\n    maskSize: wms,\n    maskComposite: wms,\n    mask: wms,\n    maskBorderSource: wms,\n    maskBorderMode: wms,\n    maskBorderSlice: wms,\n    maskBorderWidth: wms,\n    maskBorderOutset: wms,\n    maskBorderRepeat: wms,\n    maskBorder: wms,\n    maskType: wms,\n    textDecorationStyle: w,\n    textDecorationSkip: w,\n    textDecorationLine: w,\n    textDecorationColor: w,\n    filter: w,\n    breakAfter: w,\n    breakBefore: w,\n    breakInside: w,\n    columnCount: w,\n    columnFill: w,\n    columnGap: w,\n    columnRule: w,\n    columnRuleColor: w,\n    columnRuleStyle: w,\n    columnRuleWidth: w,\n    columns: w,\n    columnSpan: w,\n    columnWidth: w,\n    backdropFilter: w,\n    hyphens: w,\n    flowInto: w,\n    flowFrom: w,\n    regionFragment: w,\n    textOrientation: w,\n    tabSize: m,\n    fontKerning: w,\n    textSizeAdjust: w,\n  },\n};\n"
  },
  {
    "path": "src/utils/react-native-web-fucntions/unitlessNumbers.ts",
    "content": "/* eslint-disable */\n//@ts-nocheck\n// This functions is taken from react native web\n\nconst unitlessNumbers: any = {\n  animationIterationCount: true,\n  aspectRatio: true,\n  borderImageOutset: true,\n  borderImageSlice: true,\n  borderImageWidth: true,\n  boxFlex: true,\n  boxFlexGroup: true,\n  boxOrdinalGroup: true,\n  columnCount: true,\n  flex: true,\n  flexGrow: true,\n  flexOrder: true,\n  flexPositive: true,\n  flexShrink: true,\n  flexNegative: true,\n  fontWeight: true,\n  gridRow: true,\n  gridRowEnd: true,\n  gridRowGap: true,\n  gridRowStart: true,\n  gridColumn: true,\n  gridColumnEnd: true,\n  gridColumnGap: true,\n  gridColumnStart: true,\n  lineClamp: true,\n  opacity: true,\n  order: true,\n  orphans: true,\n  tabSize: true,\n  widows: true,\n  zIndex: true,\n  zoom: true,\n  // SVG-related\n  fillOpacity: true,\n  floodOpacity: true,\n  stopOpacity: true,\n  strokeDasharray: true,\n  strokeDashoffset: true,\n  strokeMiterlimit: true,\n  strokeOpacity: true,\n  strokeWidth: true,\n  // transform types\n  scale: true,\n  scaleX: true,\n  scaleY: true,\n  scaleZ: true,\n  // RN properties\n  shadowOpacity: true,\n};\n\n/**\n * Support style names that may come passed in prefixed by adding permutations\n * of vendor prefixes.\n */\nconst prefixes = ['ms', 'Moz', 'O', 'Webkit'];\nconst prefixKey = (prefix: string, key: string) => {\n  return prefix + key.charAt(0).toUpperCase() + key.substring(1);\n};\nObject.keys(unitlessNumbers).forEach((prop) => {\n  prefixes.forEach((prefix) => {\n    unitlessNumbers[prefixKey(prefix, prop)] = unitlessNumbers[prop];\n  });\n});\n\nexport default unitlessNumbers;\n"
  },
  {
    "path": "src/utils/resolveStackStyleInput.ts",
    "content": "export const resolveStackStyleInput = (variant: any, color: any) => {\n  if (variant === 'underlined') {\n    return {\n      outlineWidth: '0',\n      boxShadow: `0 1px 0 0 ${color}`,\n    };\n  } else if (variant === 'unstyled') {\n    return {\n      outlineWidth: 0,\n    };\n  } else {\n    return {\n      outlineWidth: '0',\n      boxShadow: `0 0 0 1px ${color}`,\n    };\n  }\n};\n"
  },
  {
    "path": "src/utils/styled.tsx",
    "content": "import React from 'react';\nimport { useStyledSystemPropsResolver } from '../hooks/';\n\nexport const makeStyledComponent = (Comp: any) => {\n  return React.forwardRef(({ debug, ...props }: any, ref: any) => {\n    const [style, restProps] = useStyledSystemPropsResolver(props);\n    if (process.env.NODE_ENV === 'development' && debug) {\n      /* eslint-disable-next-line */\n      console.log(\n        `%cstyleSystem`,\n        'background: #4b5563; color: #d97706; font-weight: 700; padding: 2px 8px;'\n      );\n      /* eslint-disable-next-line */\n      console.log('%c props: ', 'color: #4ade80; font-weight: 700;', props);\n      /* eslint-disable-next-line */\n      console.log('%c style: ', 'color: #22d3ee; font-weight: 700;', style);\n      /* eslint-disable-next-line */\n      console.log(\n        '%c restProps: ',\n        'color: #22d3ee; font-weight: 700;',\n        restProps\n      );\n    }\n    return (\n      <Comp {...restProps} style={style} ref={ref}>\n        {props.children}\n      </Comp>\n    );\n  });\n};\n"
  },
  {
    "path": "src/utils/test-utils.tsx",
    "content": "import { NativeBaseProvider } from '../core/NativeBaseProvider';\nimport * as React from 'react';\n\nexport const Wrapper = ({ children }: any) => {\n  return (\n    <NativeBaseProvider\n      initialWindowMetrics={{\n        frame: { x: 0, y: 0, width: 0, height: 0 },\n        insets: { top: 0, left: 0, right: 0, bottom: 0 },\n      }}\n    >\n      {children}\n    </NativeBaseProvider>\n  );\n};\n"
  },
  {
    "path": "src/utils/tests/filterShadow.test.tsx",
    "content": "import { filterShadowProps } from './../../utils/filterShadowProps';\ndescribe('filterShadowProps', () => {\n  test('empty', () => {\n    expect(filterShadowProps({}, {}, 'web')).toEqual({ style: {} });\n  });\n  test('basic', () => {\n    expect(\n      filterShadowProps(\n        {\n          top: 10,\n          shadowColor: '#FFF',\n          shadowOffset: {\n            width: 0,\n            height: 1,\n          },\n          shadowOpacity: 0.18,\n          shadowRadius: 1.0,\n        },\n        {},\n        'web'\n      )\n    ).toEqual({\n      top: 10,\n      style: {\n        shadowColor: '#FFF',\n        shadowOffset: {\n          width: 0,\n          height: 1,\n        },\n        shadowOpacity: 0.18,\n        shadowRadius: 1.0,\n      },\n    });\n  });\n});\n"
  },
  {
    "path": "src/utils/useKeyboardBottomInset.ts",
    "content": "import * as React from 'react';\nimport { Keyboard, Platform, KeyboardEvent } from 'react-native';\n\nexport const useKeyboardBottomInset = () => {\n  const [bottom, setBottom] = React.useState(0);\n  const subscriptions = React.useRef<any[]>([]);\n\n  React.useEffect(() => {\n    function onKeyboardChange(e: KeyboardEvent) {\n      if (\n        e.startCoordinates &&\n        e.endCoordinates.screenY <= e.startCoordinates.screenY\n      )\n        setBottom(e.endCoordinates.height / 2);\n      else setBottom(0);\n    }\n\n    if (Platform.OS === 'ios') {\n      subscriptions.current = [\n        Keyboard.addListener('keyboardWillChangeFrame', onKeyboardChange),\n      ];\n    } else {\n      subscriptions.current = [\n        Keyboard.addListener('keyboardDidHide', onKeyboardChange),\n        Keyboard.addListener('keyboardDidShow', onKeyboardChange),\n      ];\n    }\n    return () => {\n      subscriptions.current.forEach((subscription) => {\n        subscription.remove();\n      });\n    };\n  }, [setBottom, subscriptions]);\n\n  return bottom;\n};\n"
  },
  {
    "path": "src/utils/useResponsiveQuery/ResponsiveQueryProvider.tsx",
    "content": "import React from 'react';\n\ntype ResponsiveQueryContextType = {\n  disableCSSMediaQueries?: boolean;\n};\n\nexport const ResponsiveQueryContext = React.createContext<ResponsiveQueryContextType>(\n  {\n    disableCSSMediaQueries: false,\n  }\n);\n\nexport const ResponsiveQueryProvider = (\n  props: ResponsiveQueryContextType & { children: React.ReactNode }\n) => {\n  const value = React.useMemo(\n    () => ({\n      disableCSSMediaQueries: props.disableCSSMediaQueries,\n    }),\n    [props.disableCSSMediaQueries]\n  );\n\n  return (\n    <ResponsiveQueryContext.Provider value={value}>\n      {props.children}\n    </ResponsiveQueryContext.Provider>\n  );\n};\n"
  },
  {
    "path": "src/utils/useResponsiveQuery/common.ts",
    "content": "import type {\n  GetResponsiveStylesParams,\n  GetResponsiveStylesReturnType,\n} from './types';\nimport { Dimensions, ScaledSize, StyleSheet } from 'react-native';\nimport React from 'react';\n\nexport const getResponsiveStylesImpl = (width: number) => (\n  queries: GetResponsiveStylesParams\n): GetResponsiveStylesReturnType => {\n  if (typeof width === 'number') {\n    let styles = queries.initial\n      ? [\n          StyleSheet.create({ initial: StyleSheet.flatten(queries.initial) })\n            .initial,\n        ]\n      : [];\n\n    if (queries.query) {\n      queries.query.forEach((queryRule) => {\n        if (queryRule.style) {\n          const flattenQueryStyle = StyleSheet.flatten(queryRule.style);\n\n          if (\n            typeof queryRule.maxWidth === 'number' &&\n            typeof queryRule.minWidth === 'number'\n          ) {\n            if (width >= queryRule.minWidth && width <= queryRule.maxWidth) {\n              styles.push(\n                StyleSheet.create({ rangeStyle: flattenQueryStyle }).rangeStyle\n              );\n            }\n          } else if (typeof queryRule.minWidth === 'number') {\n            if (width >= queryRule.minWidth) {\n              styles.push(\n                StyleSheet.create({ minWidthStyle: flattenQueryStyle })\n                  .minWidthStyle\n              );\n            }\n          } else if (typeof queryRule.maxWidth === 'number') {\n            if (width <= queryRule.maxWidth) {\n              styles.push(\n                StyleSheet.create({ maxWidthStyle: flattenQueryStyle })\n                  .maxWidthStyle\n              );\n            }\n          }\n        }\n      });\n      return { styles };\n    }\n  }\n\n  return {};\n};\n\n// The below implementation is taken from React Native's source and added a flag to conditionally attach/remove listeners\nexport const useDimensionsWithEnable = ({ enable }: { enable?: boolean }) => {\n  const [dimensions, setDimensions] = React.useState(() =>\n    Dimensions.get('window')\n  );\n\n  React.useEffect(() => {\n    if (enable) {\n      function handleChange({ window }: { window: ScaledSize }) {\n        if (\n          dimensions.width !== window.width ||\n          dimensions.height !== window.height ||\n          dimensions.scale !== window.scale ||\n          dimensions.fontScale !== window.fontScale\n        ) {\n          setDimensions(window);\n        }\n      }\n      Dimensions.addEventListener('change', handleChange);\n      // We might have missed an update between calling `get` in render and\n      // `addEventListener` in this handler, so we set it here. If there was\n      // no change, React will filter out this update as a no-op.\n      handleChange({ window: Dimensions.get('window') });\n\n      return () => {\n        Dimensions.removeEventListener('change', handleChange);\n      };\n    }\n    return () => {};\n  }, [dimensions, enable]);\n  return dimensions;\n};\n"
  },
  {
    "path": "src/utils/useResponsiveQuery/hash.ts",
    "content": "/* eslint-disable */\n//@ts-nocheck\n// This hash function is taken from react native web\n/**\n * JS Implementation of MurmurHash2\n *\n * @author <a href=\"mailto:gary.court@gmail.com\">Gary Court</a>\n * @see http://github.com/garycourt/murmurhash-js\n * @author <a href=\"mailto:aappleby@gmail.com\">Austin Appleby</a>\n * @see http://sites.google.com/site/murmurhash/\n *\n * @param {string} str ASCII only\n * @param {number} seed Positive integer only\n * @return {number} 32-bit positive integer hash\n */\nfunction murmurhash2_32_gc(str: string, seed: number) {\n  var l = str.length,\n    h = seed ^ l,\n    i = 0,\n    k;\n\n  while (l >= 4) {\n    k =\n      (str.charCodeAt(i) & 0xff) |\n      ((str.charCodeAt(++i) & 0xff) << 8) |\n      ((str.charCodeAt(++i) & 0xff) << 16) |\n      ((str.charCodeAt(++i) & 0xff) << 24);\n    k =\n      (k & 0xffff) * 0x5bd1e995 + ((((k >>> 16) * 0x5bd1e995) & 0xffff) << 16);\n    k ^= k >>> 24;\n    k =\n      (k & 0xffff) * 0x5bd1e995 + ((((k >>> 16) * 0x5bd1e995) & 0xffff) << 16);\n    h =\n      ((h & 0xffff) * 0x5bd1e995 +\n        ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16)) ^\n      k;\n    l -= 4;\n    ++i;\n  }\n\n  switch (l) {\n    case 3:\n      h ^= (str.charCodeAt(i + 2) & 0xff) << 16;\n\n    case 2:\n      h ^= (str.charCodeAt(i + 1) & 0xff) << 8;\n\n    case 1:\n      h ^= str.charCodeAt(i) & 0xff;\n      h =\n        (h & 0xffff) * 0x5bd1e995 +\n        ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16);\n  }\n\n  h ^= h >>> 13;\n  h = (h & 0xffff) * 0x5bd1e995 + ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16);\n  h ^= h >>> 15;\n  return h >>> 0;\n}\n\nconst hash = function hash(str: string) {\n  return murmurhash2_32_gc(str, 1).toString(36);\n};\n\nexport default hash;\n"
  },
  {
    "path": "src/utils/useResponsiveQuery/index.ts",
    "content": "export { useResponsiveQuery } from './useResponsiveQuery';\nexport { ResponsiveQueryProvider } from './ResponsiveQueryProvider';\nexport * from './types';\n"
  },
  {
    "path": "src/utils/useResponsiveQuery/types.ts",
    "content": "import type { StyleSheet } from 'react-native';\n\ntype StyleSheetStyle = Parameters<typeof StyleSheet.create>[0]['initial'];\n\nexport type Query = {\n  minWidth?: number;\n  maxWidth?: number;\n  style?: StyleSheetStyle | StyleSheetStyle[];\n};\n\nexport type UseResponsiveQueryParams = {\n  initial?: StyleSheetStyle | StyleSheetStyle[];\n  query?: Query[];\n  disableCSSMediaQueries?: boolean;\n};\n\nexport type DataSet = { [key: string]: string };\n\nexport type GetResponsiveStylesParams = Omit<\n  UseResponsiveQueryParams,\n  'disableCSSMediaQueries'\n>;\n\nexport type GetResponsiveStylesReturnType = {\n  styles?: StyleSheetStyle[];\n  dataSet?: DataSet;\n};\n\nexport type UseResponsiveQueryReturnType = GetResponsiveStylesReturnType & {\n  getResponsiveStyles: (\n    params: GetResponsiveStylesParams\n  ) => GetResponsiveStylesReturnType;\n};\n"
  },
  {
    "path": "src/utils/useResponsiveQuery/useResponsiveQuery.tsx",
    "content": "import React from 'react';\nimport type {\n  UseResponsiveQueryParams,\n  UseResponsiveQueryReturnType,\n} from './types';\nimport { useWindowDimensions } from 'react-native';\nimport { useStableMemo } from './useStableMemo';\nimport { getResponsiveStylesImpl } from './common';\n\nexport const useResponsiveQuery = (\n  queries?: UseResponsiveQueryParams\n): UseResponsiveQueryReturnType => {\n  const windowWidth = useWindowDimensions().width;\n\n  const values = useStableMemo(() => {\n    const getResponsiveStyles = getResponsiveStylesImpl(windowWidth);\n    if (queries) {\n      const { styles } = getResponsiveStyles(queries);\n      return { styles, getResponsiveStyles };\n    } else {\n      return { getResponsiveStyles };\n    }\n  }, [queries, windowWidth]);\n\n  return values;\n};\n\n/**\n * This function is copied from intergalacticspacehighway/rnw-responsive-ssr\n */\n// noop, web-only. Refer useResponsiveQuery.web.tsx\nexport const getStyleElement = () => {\n  return <></>;\n};\n"
  },
  {
    "path": "src/utils/useResponsiveQuery/useResponsiveQuery.web.tsx",
    "content": "// import { atomic } from 'react-native-web/dist/exports/StyleSheet/compiler';\nimport { atomic } from '../react-native-web-fucntions/atomic';\nimport preprocess from '../react-native-web-fucntions/preprocess';\nimport type {\n  DataSet,\n  Query,\n  UseResponsiveQueryParams,\n  UseResponsiveQueryReturnType,\n  GetResponsiveStylesParams,\n} from './types';\nimport { StyleSheet } from 'react-native';\n// @ts-ignore\nimport stableHash from 'stable-hash';\nimport hash from './hash';\nimport type { GetResponsiveStylesReturnType } from './types';\nimport { useStableMemo } from './useStableMemo';\nimport { getResponsiveStylesImpl, useDimensionsWithEnable } from './common';\nimport { ResponsiveQueryContext } from './ResponsiveQueryProvider';\nimport React from 'react';\n\n/******************** Implementation after RNW v0.18 ***********************/\n\n/**\n * 1. preprocess:- Handles shadow/text shadow conversion from RN styles to web *                 styles\n *\n * 2. atomic:- it handles prefixing, converting RN specific styles to web styles *             and generating the CSS selector.\n *             Input {marginTop: 10}\n *             Output\n *             compiledStyle : marginTop: \"r-marginTop-156q2ks\"\n *             compiledOrderedRules : \".r-marginTop-156q2ks{margin-top:10px;}\"\n *      a)compiledStyle:- Array it holds identifier/selector with properties\n *      b)compiledOrderedRules:- Array it holds the css rule with selector name\n *      Also from RNW v0.18 handles swapping of ltr styles if enabled by user\n * 3. createSheet:- used to grab sheet which exist already created by rnw. when we *                  call createSheet without id it will return sheet which exist. *                  cause it automatically takes a default ID  which is already in *                  use (created by rnw with default ID) so this return sheet *                  which exist with  ID doesn't create a new sheet.\n *\n * This Implementation is based on asumptions that RNW doesn't change the         * function  or doesn't re-write them. if there is any change in RNW implmentation * it we'll break and needs to be updated.\n *\n */\nlet textContentMap: any = {};\n\nexport const useResponsiveQuery = (\n  queries?: UseResponsiveQueryParams\n): UseResponsiveQueryReturnType => {\n  const responsiveQueryContext = React.useContext(ResponsiveQueryContext);\n  const disableCSSMediaQueries =\n    queries?.disableCSSMediaQueries ??\n    responsiveQueryContext.disableCSSMediaQueries;\n\n  // Only attaches listener if disableCSSMediaQueries is true\n  const windowWidth = useDimensionsWithEnable({\n    enable: disableCSSMediaQueries,\n  }).width;\n\n  const values = useStableMemo(() => {\n    // Use the non-media query responsive styling\n    if (disableCSSMediaQueries) {\n      const getResponsiveStyles = getResponsiveStylesImpl(windowWidth);\n      if (queries) {\n        const { styles } = getResponsiveStyles(queries);\n        return { styles, getResponsiveStyles };\n      } else {\n        return { getResponsiveStyles };\n      }\n    } else {\n      if (queries) {\n        const { styles, dataSet } = getResponsiveStyles(queries);\n        return { dataSet, styles, getResponsiveStyles };\n      } else {\n        return { getResponsiveStyles };\n      }\n    }\n  }, [queries, windowWidth, disableCSSMediaQueries]);\n\n  return values;\n};\n\nconst getDataAttribute = (queryRule: Query) => {\n  if (\n    typeof queryRule.minWidth === 'number' &&\n    typeof queryRule.maxWidth === 'number'\n  ) {\n    return `min-width-${queryRule.minWidth}-max-width-${queryRule.maxWidth}`;\n  } else if (typeof queryRule.minWidth === 'number') {\n    return `min-width-${queryRule.minWidth}`;\n  } else if (typeof queryRule.maxWidth === 'number') {\n    return `max-width-${queryRule.maxWidth}`;\n  }\n\n  return undefined;\n};\n\nconst getMediaQueryRule = (query: Query, newRule: string) => {\n  if (\n    typeof query.minWidth === 'number' &&\n    typeof query.maxWidth === 'number'\n  ) {\n    return `@media only screen and (min-width: ${query.minWidth}px) and (max-width: ${query.maxWidth}px) { ${newRule} }`;\n  } else if (typeof query.minWidth === 'number') {\n    return `@media only screen and (min-width: ${query.minWidth}px) { ${newRule} }`;\n  } else if (typeof query.maxWidth === 'number') {\n    return `@media only screen and (max-width: ${query.maxWidth}px) { ${newRule} }`;\n  }\n  return undefined;\n};\nlet styleSheet: any;\nconst insert = (rule: string) => {\n  if (rule === '') {\n    return;\n  }\n  if (typeof window !== 'undefined') {\n    if (!styleSheet) {\n      const styleEl = document.createElement('style');\n      styleEl.type = 'text/css';\n      styleEl.appendChild(document.createTextNode(''));\n      document.head.appendChild(styleEl);\n      styleSheet = styleEl.sheet;\n    }\n\n    styleSheet.insertRule(rule, styleSheet.cssRules.length);\n  }\n};\nconst getResponsiveStyles = (\n  queries: GetResponsiveStylesParams\n): GetResponsiveStylesReturnType => {\n  const queryString = stableHash(queries.query);\n\n  const queriesHash = hash(queryString);\n\n  const styles = queries.initial\n    ? [\n        StyleSheet.create({ initial: StyleSheet.flatten(queries.initial) })\n          .initial,\n      ]\n    : undefined;\n\n  let dataSet: DataSet = {};\n\n  /**\n   * This function is copied from intergalacticspacehighway/rnw-responsive-ssr\n   */\n\n  if (queries.query) {\n    queries.query.forEach((queryRule) => {\n      const queryHash = queriesHash + hash(stableHash(queryRule));\n      const dataAttribute = getDataAttribute(queryRule);\n\n      if (dataAttribute) {\n        const newIdentifier = `[data-${dataAttribute}$=\"${queryHash}\"]`;\n        dataSet[dataAttribute] = queryHash;\n\n        let mediaRules = '';\n\n        const flattenQueryStyle = StyleSheet.flatten(queryRule.style);\n        const newStyle = preprocess(flattenQueryStyle);\n        const [compiledStyle, compiledOrderedRules] = atomic(newStyle);\n        //@ts-ignore\n        delete compiledStyle.$$css; //removing unnecessary $$css property\n        Object.keys(compiledStyle).forEach((key) => {\n          const oldIdentifier = compiledStyle[key];\n          compiledOrderedRules.forEach(([rules, _order]: any) => {\n            // Rule returned by atomic has css selectors, so we'll replace it with data-attr selector\n\n            let newRule = '';\n            if (rules[0].includes(oldIdentifier)) {\n              newRule = rules[0].replace('.' + oldIdentifier, newIdentifier);\n            }\n            mediaRules += newRule;\n          });\n        });\n        if (mediaRules) {\n          const mediaQueryRule = getMediaQueryRule(queryRule, mediaRules);\n\n          const queryKey = `/*${queryHash}{}*/${mediaQueryRule}`;\n\n          if (!textContentMap[queryKey]) {\n            insert(queryKey);\n            textContentMap[queryKey] = true;\n          }\n        }\n      }\n    });\n  }\n\n  return { styles, dataSet };\n};\n\n/**\n * This function is copied from intergalacticspacehighway/rnw-responsive-ssr\n */\nexport const getStyleElement = () => {\n  return (\n    <style\n      type=\"text/css\"\n      dangerouslySetInnerHTML={{ __html: Object.keys(textContentMap).join('') }}\n    />\n  );\n};\n"
  },
  {
    "path": "src/utils/useResponsiveQuery/useStableMemo.ts",
    "content": "import { useMemo } from 'react';\n//@ts-ignore\nimport hash from 'stable-hash';\n\nexport function useStableMemo<T>(factory: () => T, deps: any[]) {\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  return useMemo(factory, [hash(deps)]);\n}\n"
  },
  {
    "path": "src/utils/wrapStringChild.tsx",
    "content": "import React from 'react';\nimport Text from '../components/primitives/Text';\n\nexport const wrapStringChild = (children: any, textProps: any) => {\n  return React.Children.map(children, (child) => {\n    return typeof child === 'string' ||\n      typeof child === 'number' ||\n      (child?.type === React.Fragment &&\n        (typeof child.props?.children === 'string' ||\n          typeof child.props?.children === 'number')) ? (\n      <Text {...textProps}>{child}</Text>\n    ) : (\n      child\n    );\n  });\n};\n"
  },
  {
    "path": "tsconfig.json",
    "content": "{\n  \"include\": [\"./src\"],\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"declaration\": true,\n    \"paths\": {\n      \"native-base\": [\"./src/index\"]\n    },\n    \"allowUnreachableCode\": false,\n    \"allowUnusedLabels\": false,\n    \"esModuleInterop\": true,\n    \"importsNotUsedAsValues\": \"error\",\n    \"forceConsistentCasingInFileNames\": true,\n    \"jsx\": \"react\",\n    \"lib\": [\"esnext\", \"dom\"],\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"node\",\n    \"noFallthroughCasesInSwitch\": true,\n    \"noImplicitReturns\": true,\n    \"noImplicitUseStrict\": false,\n    \"noStrictGenericChecks\": false,\n    \"noUnusedLocals\": true,\n    \"noUnusedParameters\": true,\n    \"resolveJsonModule\": true,\n    \"skipLibCheck\": true,\n    \"strict\": true,\n    \"target\": \"esnext\"\n  }\n}\n"
  }
]